✨ feat(accordion.scss): Add Accordion component styles

Spiderpig86 · Sep 15, 2022 · 5347b9f · 5347b9f
1 parent 6b5a999
commit 5347b9f
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 3 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -18087,6 +18087,44 @@ ul .divider::after {
     z-index: auto !important;
   }
 }
+/* Accordion */
+/* Use with <detail> and <summary> HTML tags */
+details.accordion {
+  border-bottom: 1px solid #dee2e6;
+  display: block;
+  padding: 1rem;
+}
+
+details.accordion summary.accordion__summary {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  list-style-type: none;
+}
+
+details.accordion summary.accordion__summary:after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: right center;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+  content: "";
+  display: block;
+  float: right;
+  height: 1rem;
+  transform: rotate(-90deg);
+  transition: all var(--animation-duration);
+  width: 1rem;
+}
+
+details.accordion[open] summary.accordion__summary {
+  margin-bottom: 1rem;
+}
+
+details.accordion[open] summary.accordion__summary:after {
+  transform: rotate(0);
+}
+
 /* Avatar */
 .avatar {
   border-radius: 50%;

diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -15139,6 +15139,44 @@ ul .divider::after {
   z-index: auto !important;
 }
 
+/* Accordion */
+/* Use with <detail> and <summary> HTML tags */
+details.accordion {
+  border-bottom: 1px solid #dee2e6;
+  display: block;
+  padding: 1rem;
+}
+
+details.accordion summary.accordion__summary {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  list-style-type: none;
+}
+
+details.accordion summary.accordion__summary:after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: right center;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+  content: "";
+  display: block;
+  float: right;
+  height: 1rem;
+  transform: rotate(-90deg);
+  transition: all var(--animation-duration);
+  width: 1rem;
+}
+
+details.accordion[open] summary.accordion__summary {
+  margin-bottom: 1rem;
+}
+
+details.accordion[open] summary.accordion__summary:after {
+  transform: rotate(0);
+}
+
 /* Avatar */
 .avatar {
   border-radius: 50%;

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/builds/ext.scss b/src/builds/ext.scss
@@ -4,6 +4,7 @@
 @use "../base"; // Inherit everything from core
 
 // Extended Components
+@use "../components/accordion";
 @use "../components/avatar";
 @use "../components/breadcrumb";
 @use "../components/card";

diff --git a/src/components/accordion.scss b/src/components/accordion.scss
@@ -0,0 +1,43 @@
+@use '../internal' as *;
+
+/* Accordion */
+/* Use with <detail> and <summary> HTML tags */
+$generate-utility: should-generate-classes($ACCORDION);
+
+@if $generate-utility {
+    details.accordion {
+        border-bottom: 1px solid fill('gray', '300');
+        display: block;
+        padding: 1rem;
+
+        summary.accordion__summary {
+            align-items: center;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            list-style-type: none;
+
+            &:after {
+                background-image: url($img-chevron-dark);
+                background-position: right center;
+                background-size: 1rem auto;
+                background-repeat: no-repeat;
+                content: '';
+                display: block;
+                float: right;
+                height: 1rem;
+                transform: rotate(-90deg);
+                transition: all var(--animation-duration);
+                width: 1rem;
+            }
+        }
+
+        &[open] summary.accordion__summary {
+            margin-bottom: 1rem;
+
+            &:after {
+                transform: rotate(0);
+            }
+        }
+    }
+}
diff --git a/src/internal/_constants.scss b/src/internal/_constants.scss
@@ -14,7 +14,8 @@ $font-size-l: 1.25rem;
 $font-size-xl: 1.5rem;
 
 /* Images */
-$img-chevron: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E";
+$img-chevron-dark: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E";
+$img-chevron-light: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E";
 $img-search: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path opacity="0.45" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>';
 $img-checkbox: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E";
 $img-radio: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E";