From 15948261399072bc098361927fe531600ae91af2 Mon Sep 17 00:00:00 2001 From: edi Date: Thu, 23 May 2024 21:36:37 +0000 Subject: [PATCH] Dateien nach "assets/css" hochladen --- assets/css/accordion.css | 139 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 assets/css/accordion.css diff --git a/assets/css/accordion.css b/assets/css/accordion.css new file mode 100644 index 0000000..af04d05 --- /dev/null +++ b/assets/css/accordion.css @@ -0,0 +1,139 @@ +.accordion .transition, +.accordion ul li i:before, +.accordion ul li i:after, +.accordion p { + transition: all 0.25s ease-in-out; + } + + .accordion .flipIn, + .accordion ul li { + animation: flipdown 0.5s ease both; + } + + .accordion .no-select, + .accordion h2 { + user-select: none; + } + + /* + @media (max-width: 550px) { + body { + box-sizing: border-box; + transform: translate(0, 0); + max-width: 100%; + min-height: 100%; + margin: 0; + left: 0; + } + } + */ + + .accordion h2 { + cursor: pointer; + } + + .accordion p { + position: relative; + overflow: hidden; + opacity: 1; + transform: translate(0, 0); + z-index: 2; + } + + .accordion ul { + list-style: none; + perspective: 900; + padding: 0; + margin: 0; + } + + .accordion ul li { + position: relative; + padding: 0; + margin: 0; + padding-bottom: 4px; + padding-top: 18px; + border-top: 1px dotted #dce7eb; + } + + .accordion ul li { + animation-delay: 0.25s; + } + + .accordion ul li:last-of-type { + padding-bottom: 0; + } + + .accordion ul li i { + position: absolute; + transform: translate(-6px, 0); + margin-top: 0.5rem; + right: 0; + } + + .accordion ul li i:before, + .accordion ul li i:after { + content: ""; + position: absolute; + width: 3px; + height: 9px; + } + + .accordion ul li i:before { + transform: translate(-2px, 0) rotate(45deg); + } + + .accordion ul li i:after { + transform: translate(2px, 0) rotate(-45deg); + } + + .accordion ul li input[type=checkbox] { + position: absolute; + cursor: pointer; + width: 100%; + height: 100%; + z-index: 1; + opacity: 0; + } + + .accordion ul li input[type=checkbox]:checked ~ p { + margin-top: 0; + max-height: 0; + opacity: 0; + transform: translate(0, 50%); + } + + .accordion ul li input[type=checkbox]:checked ~ i:before { + transform: translate(2px, 0) rotate(45deg); + color: red; + } + + .accordion ul li input[type=checkbox]:checked ~ i:after { + transform: translate(-2px, 0) rotate(-45deg); + color: red; + } + + @keyframes flipdown { + 0% { + opacity: 0; + transform-origin: top center; + transform: rotateX(-90deg); + } + 5% { + opacity: 1; + } + 80% { + transform: rotateX(8deg); + } + 83% { + transform: rotateX(6deg); + } + 92% { + transform: rotateX(-3deg); + } + 100% { + transform-origin: top center; + transform: rotateX(0deg); + } + } + \ No newline at end of file