feat: details + summary tag styles

requarks · Jul 15, 2019 · 74e7316 · 74e7316
1 parent 59dc6fd
commit 74e7316
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
@@ -574,4 +574,48 @@
     }
   }
 
+  // ---------------------------------
+  // DETAILS
+  // ---------------------------------
+
+  details {
+    background-color: mc('grey', '50');
+    margin: 1rem 2rem;
+    border: 1px solid mc('grey', '300');
+    border-radius: 7px;
+
+    > p {
+      padding-left: 0;
+    }
+
+    summary {
+      border-radius: 7px;
+      background-color: mc('grey', '50');
+      cursor: pointer;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 1rem;
+      transition: background-color .4s ease;
+
+      &:focus {
+        outline: none;
+        background-color: mc('grey', '100');
+      }
+    }
+
+    &[open] {
+      padding: 1rem;
+
+      summary {
+        background-color: mc('grey', '100');
+        border-bottom: 1px solid mc('grey', '300');
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin: -1rem -1rem 1rem -1rem;
+      }
+    }
+
+  }
+
 }