Dateien nach "assets/css" hochladen

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);
+    }
+  }
+