move disclosure styles to it's own partial, add fix for safari double…

… marker
oddbird · Dec 21, 2023 · 5f35287 · 5f35287
1 parent 3887935
commit 5f35287
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 34 deletions.
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
@@ -65,27 +65,6 @@
     display: grid;
     gap: var(--shim-plus);
     grid-template-columns: max-content var(--triangle-height);
-
-    &::marker {
-      content: none;
-    }
-
-    &::before {
-      border-color: transparent transparent transparent currentColor;
-      border-style: solid;
-      border-width: var(--triangle-width) 0 var(--triangle-width)
-        var(--triangle-height);
-      content: '';
-      grid-column: 2;
-      grid-row: 1;
-      margin-block-start: var(--half-shim);
-      transform: rotate(0);
-      transition: transform 150ms;
-    }
-  }
-
-  [open] summary::before {
-    transform: rotate(90deg);
   }
 
   .issues-list {

diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
@@ -0,0 +1,42 @@
+// The Details disclosure element
+// ------------------------------
+
+details {
+  --link: var(--fgcolor);
+  --link-focus: var(--fgcolor);
+
+  background-color: var(--status-result-bg, var(--bgcolor));
+  border-radius: var(--border-radius);
+  color: var(--status-result-fg, var(--fgcolor));
+}
+
+summary {
+  cursor: pointer;
+  font-weight: bold;
+
+  // Hides marker some browsers add
+  &::marker {
+    content: none;
+  }
+
+  // Hides marker webkit adds
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    border-color: transparent transparent transparent currentColor;
+    border-style: solid;
+    border-width: var(--triangle-width) 0 var(--triangle-width)
+    var(--triangle-height);
+    content: '';
+    grid-column: 2;
+    grid-row: 1;
+    transform: rotate(0deg);
+    transition: all 1s ease-out 100ms;
+
+    [open] & {
+      transform: rotate(90deg);
+    }
+  }
+}
diff --git a/src/sass/patterns/_index.scss b/src/sass/patterns/_index.scss
@@ -7,4 +7,5 @@
 @forward 'buttons';
 @forward 'icons';
 @forward 'lists';
+@forward 'disclosure';
 @forward 'themes';
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
@@ -14,19 +14,6 @@ li {
   gap: var(--shim);
 }
 
-details {
-  --link: var(--fgcolor);
-  --link-focus: var(--fgcolor);
-
-  background-color: var(--status-result-bg, var(--bgcolor));
-  border-radius: var(--border-radius);
-  color: var(--status-result-fg, var(--fgcolor));
-}
-
-summary {
-  cursor: pointer;
-  font-weight: bold;
-}
 
 dl {
   display: grid;