feat: details + summary tag styles

2019-07-14 23:21:39 -04:00
parent 59dc6fde56
commit 74e7316c1e
1 changed files with 44 additions and 0 deletions
--- 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;
+      }
+    }
+
+  }
+
 }