From a640703f2da8815dc26ad1600a6f206be1624379 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 1 Jun 2022 22:10:32 +0200
Subject: feat: Initial after clean slate

---
 apps/web-shared/src/styles/components/details.scss | 57 ++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 apps/web-shared/src/styles/components/details.scss

(limited to 'apps/web-shared/src/styles/components/details.scss')

diff --git a/apps/web-shared/src/styles/components/details.scss b/apps/web-shared/src/styles/components/details.scss
new file mode 100644
index 0000000..b4c122d
--- /dev/null
+++ b/apps/web-shared/src/styles/components/details.scss
@@ -0,0 +1,57 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_details
+Title: Details
+Descr: A button that toggles the visibility of additional information
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.details {}
+
+.details__summary {
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  &:focus {
+    outline: 2px solid alpha(var(--color-primary), 0.2);
+    outline-offset: 4px;
+  }
+
+  .icon {
+    flex-shrink: 0;
+  }
+}
+
+// if JS = enabled
+.js {
+  .details__summary {
+    list-style: none; // remove summary default icon
+  }
+
+  .details__summary::-webkit-details-marker {
+    display: none; // remove default icon in webkit browsers
+  }
+
+  .details__summary[aria-expanded="true"] .icon {
+    transform: rotate(90deg); // rotate icon when content is visible
+  }
+
+  .details__content[aria-hidden="true"] {
+    display: none;
+  }
+}
+
+// if JS = disabled
+html:not(.js) .details__summary {
+  .icon {
+    display: none;
+  }
+}
-- 
cgit v1.3