refactor table & range input mixins

basher · Nov 11, 2024 · 3c3ac0e · 3c3ac0e
1 parent c97fc03
commit 3c3ac0e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 28 deletions.
diff --git a/ui/src/css/components/_tables.scss b/ui/src/css/components/_tables.scss
@@ -6,8 +6,8 @@ Dependencies.
 @use '../base' as *;
 @use '../mixins' as *;
 
-// Define mixin so tables inside prose content can be styled without requiring CSS class to be added.
-@mixin table {
+table,
+.table {
     :is(th, td) {
         border: var(--border-width-s) solid hsl(var(--color-neutral-900) / 10%);
         padding: var(--gutter-m);
@@ -25,11 +25,6 @@ Dependencies.
     caption {
         margin-block-end: var(--gutter-xs);
     }
-}
-
-table,
-.table {
-    @include table;
 
     // Responsive wrapper.
     &-wrapper[role='region'][tabindex] {

diff --git a/ui/src/css/web-components/_webui-range-input.scss b/ui/src/css/web-components/_webui-range-input.scss
@@ -10,19 +10,6 @@ Dependencies.
     --slider-height: 0.25rem;
 }
 
-@mixin slider-thumb {
-    background-color: $color-brand;
-    block-size: var(--icon-size-l);
-    border: 0;
-    border-radius: 50%;
-    inline-size: var(--icon-size-l);
-}
-
-@mixin slider-track {
-    background-color: hsl(var(--color-text) / 20%);
-    block-size: var(--slider-height);
-}
-
 webui-range-input {
     output {
         margin-inline: auto;
@@ -35,20 +22,22 @@ webui-range-input {
     padding-inline: 0;
 
     &::-webkit-slider-thumb {
-        @include slider-thumb;
         -webkit-appearance: none;
-        margin-block-start: calc(var(--slider-height) * -3);
-    }
-
-    &::-webkit-slider-runnable-track {
-        @include slider-track;
     }
 
+    &::-webkit-slider-thumb,
     &::-moz-range-thumb {
-        @include slider-thumb;
+        background-color: $color-brand;
+        block-size: var(--icon-size-l);
+        border: 0;
+        border-radius: 50%;
+        inline-size: var(--icon-size-l);
+        margin-block-start: calc(var(--slider-height) * -3);
     }
 
+    &::-webkit-slider-runnable-track,
     &::-moz-range-track {
-        @include slider-track;
+        background-color: hsl(var(--color-text) / 20%);
+        block-size: var(--slider-height);
     }
 }