Add Details and Summary Accordians support #256

2 files changed, 28 insertions, 24 deletions

diff --git a/src/_accordions.scss b/src/_accordions.scss
index 685c9a5..47b6c6b 100644
--- a/src/_accordions.scss
+++ b/src/_accordions.scss
@@ -1,34 +1,37 @@
 // Accordions
 .accordion {
-  .accordion-item {
-    input {
-      &:checked {
-        & ~ .accordion-header {
-          .icon {
-            transform: rotate(90deg);
-            
-          }
-        }
-        & ~ .accordion-body {
-          max-height: 50rem;
-        }
+  input:checked ~,
+  &[open] {
+    & .accordion-header {
+      .icon {
+        transform: rotate(90deg);
       }
     }
 
-    .accordion-header {
-      display: block;
-      padding: $unit-1 $unit-2;
-
-      .icon {
-        transition: all .2s ease;
-      }
+    & .accordion-body {
+      max-height: 50rem;
     }
+  }
+
+  .accordion-header {
+    display: block;
+    padding: $unit-1 $unit-2;
 
-    .accordion-body {
-      margin-bottom: $layout-spacing;
-      max-height: 0;
-      overflow: hidden;
-      transition: max-height .2s ease;
+    .icon {
+      transition: all .2s ease;
     }
   }
+
+  .accordion-body {
+    margin-bottom: $layout-spacing;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height .2s ease;
+  }
+}
+
+summary.accordion-header {
+  &::-webkit-details-marker {
+    display: none;
+  }
 }
diff --git a/src/_normalize.scss b/src/_normalize.scss
index c97c718..a098a84 100644
--- a/src/_normalize.scss
+++ b/src/_normalize.scss
@@ -412,6 +412,7 @@ menu {
 
 summary {
   display: list-item;
+  outline: none;
 }
 
 /* Scripting