aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/styles/components/details.scss
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2022-09-20 09:24:27 +0200
committerivarlovlie <git@ivarlovlie.no>2022-09-20 09:24:27 +0200
commita9072370ca1eb9a5cce928b1d487db0f307edea6 (patch)
tree59c3c23df930a8b5f888dc7813923abf4ceefed4 /old-apps/web-shared/src/styles/components/details.scss
parent56fa963a1d63cbe0bf28e29e717cceaa417c45c1 (diff)
downloadgreatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.tar.xz
greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.zip
feat: Move old apps into it's own directory
Diffstat (limited to 'old-apps/web-shared/src/styles/components/details.scss')
-rw-r--r--old-apps/web-shared/src/styles/components/details.scss57
1 files changed, 57 insertions, 0 deletions
diff --git a/old-apps/web-shared/src/styles/components/details.scss b/old-apps/web-shared/src/styles/components/details.scss
new file mode 100644
index 0000000..b4c122d
--- /dev/null
+++ b/old-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;
+ }
+}