@oruga-ui/theme-oruga 0.7.1 → 0.8.1

package/dist/scss/components/_slider.scss

@@ -1,214 +1,276 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$slider-background: transparent !default;
-$slider-margin: 1em 0 !default;
-$slider-mark-size: 0.75rem !default;
-$slider-font-size: var(--#{$prefix}base-font-size) !default;
-$slider-rounded-borded-radius: var(
-    --#{$prefix}base-border-radius-rounded
-) !default;
-$slider-thumb-background: var(--#{$prefix}white) !default;
-$slider-thumb-border: 1px solid var(--#{$prefix}grey-light) !default;
-$slider-thumb-radius: var(--#{$prefix}base-border-radius) !default;
-$slider-thumb-shadow: none !default;
-$slider-thumb-to-track-ratio: 2 !default;
+$slider-padding: 1em 0 !default;
+$slider-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+$slider-font-size: h.useVar("font-size") !default;
+
+$slider-track-to-thumb-ratio: 2 !default;
+$slider-track-height: calc(
+    h.useVar("slider-thumb-size") / $slider-track-to-thumb-ratio
+);
+
+$slider-track-box-shadow: h.useVar("control-box-shadow") !default;
+$slider-track-border-width: 0px !default;
+$slider-track-border-style: solid !default;
+$slider-track-border-color: h.useVar("grey") !default;
+$slider-track-border-radius: h.useVar("border-radius") !default;
+$slider-track-background-color: h.useVar("grey-lighter") !default;
+
+$slider-fill-box-shadow: h.useVar("control-focus-box-shadow") !default;
+$slider-fill-background-color: h.useVar("primary") !default;
+
+$slider-thumb-size: h.useVar("slider-font-size");
+$slider-thumb-font-size: calc(0.85 * h.useVar("slider-font-size")) !default;
+$slider-thumb-font-weight: h.useVar("font-weight") !default;
+$slider-thumb-line-height: h.useVar("line-height") !default;
+
+$slider-thumb-box-shadow: none !default;
+$slider-thumb-border-width: 1px !default;
+$slider-thumb-border-style: solid !default;
+$slider-thumb-border-color: h.useVar("grey-light") !default;
+$slider-thumb-border-radius: h.useVar("border-radius") !default;
+$slider-thumb-border-radius-rounded: h.useVar("border-radius-rounded") !default;
+$slider-thumb-background-color: h.useVar("control-brackground-color") !default;
 $slider-thumb-transform: scale(1.25) !default;
-$slider-tick-background: var(--#{$prefix}primary) !default;
-$slider-tick-radius: var(--#{$prefix}base-border-radius) !default;
+
 $slider-tick-to-track-ratio: 0.5 !default;
-$slider-tick-width: 3px !default;
-$slider-track-background: var(--#{$prefix}grey-lighter) !default;
-$slider-fill-background: var(--#{$prefix}primary) !default;
-$slider-track-border-radius: var(--#{$prefix}base-border-radius) !default;
-$slider-track-border: 0px solid var(--#{$prefix}grey) !default;
-$slider-track-disabled: 0.5 !default;
-$slider-track-radius: var(--#{$prefix}base-border-radius) !default;
-$slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
-/* @docs */
+$slider-tick-size: calc(
+    h.useVar("slider-track-height") * $slider-tick-to-track-ratio
+);
 
-@mixin slider-size($size, $name: null) {
-    $track-height: calc($size / $slider-thumb-to-track-ratio);
-    $tick-height: calc($track-height * $slider-tick-to-track-ratio);
-    $tick-label-top: calc($track-height * 0.5 + 2px);
-    $thumb-size: $size;
-
-    .o-slider__track {
-        @if $name {
-            height: var(
-                --#{$prefix}slider-track-height-#{$name},
-                $track-height
-            );
-        } @else {
-            height: var(--#{$prefix}slider-track-height, $track-height);
-        }
-    }
+$slider-tick-color: h.useVar("font-color") !default;
+$slider-tick-font-size: 0.75em !default;
+$slider-tick-font-weight: h.useVar("font-weight") !default;
+$slider-tick-line-height: h.useVar("line-height") !default;
 
-    .o-slider__thumb {
-        @if $name {
-            height: var(--#{$prefix}slider-thumb-size-#{$name}, $thumb-size);
-            width: var(--#{$prefix}slider-thumb-size-#{$name}, $thumb-size);
-        } @else {
-            height: var(--#{$prefix}slider-thumb-size, $thumb-size);
-            width: var(--#{$prefix}slider-thumb-size, $thumb-size);
-        }
-    }
+$slider-tick-background-color: h.useVar("primary") !default;
+$slider-tick-radius: h.useVar("border-radius") !default;
 
-    .o-slider__tick {
-        @if $name {
-            height: var(--#{$prefix}slider-tick-height-#{$name}, $tick-height);
-        } @else {
-            height: var(--#{$prefix}slider-tick-height, $tick-height);
-        }
-    }
+/* @docs */
 
-    .o-slider__tick-label {
-        @if $name {
-            font-size: var(
-                --#{$prefix}slider-mark-size-#{$name},
-                $slider-mark-size
-            );
-            top: var(
-                --#{$prefix}slider-tick-label-top-#{$name},
-                $tick-label-top
-            );
-        } @else {
-            font-size: var(--#{$prefix}slider-mark-size, $slider-mark-size);
-            top: var(--#{$prefix}slider-tick-label-top, $tick-label-top);
-        }
+.o-slider {
+    @include h.defineVar("slider-padding", $slider-padding);
+    @include h.defineVar("slider-disabled-opacity", $slider-disabled-opacity);
+    @include h.defineVar("slider-font-size", $slider-font-size);
 
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-}
+    @include h.defineVar("slider-track-height", $slider-track-height);
+    @include h.defineVar("slider-track-box-shadow", $slider-track-box-shadow);
+    @include h.defineVar(
+        "slider-track-background-color",
+        $slider-track-background-color
+    );
+    @include h.defineVar(
+        "slider-track-border-color",
+        $slider-track-border-color
+    );
+    @include h.defineVar(
+        "slider-track-border-width",
+        $slider-track-border-width
+    );
+    @include h.defineVar(
+        "slider-track-border-style",
+        $slider-track-border-style
+    );
+    @include h.defineVar(
+        "slider-track-border-radius",
+        $slider-track-border-radius
+    );
 
-.o-slider {
-    width: 100%;
-    margin: var(--#{$prefix}slider-margin, $slider-margin);
-    background: var(--#{$prefix}slider-background, $slider-background);
+    @include h.defineVar("slider-fill-box-shadow", $slider-fill-box-shadow);
+    @include h.defineVar(
+        "slider-fill-background-color",
+        $slider-fill-background-color
+    );
 
-    &__thumb {
-        box-shadow: var(--#{$prefix}slider-thumb-shadow, $slider-thumb-shadow);
-        border: var(--#{$prefix}slider-thumb-border, $slider-thumb-border);
-        border-radius: var(
-            --#{$prefix}slider-thumb-radius,
-            $slider-thumb-radius
-        );
-        background: var(
-            --#{$prefix}slider-thumb-background,
-            $slider-thumb-background
-        );
+    @include h.defineVar("slider-thumb-size", $slider-thumb-size);
+    @include h.defineVar("slider-thumb-font-size", $slider-thumb-font-size);
+    @include h.defineVar("slider-thumb-font-weight", $slider-thumb-font-weight);
+    @include h.defineVar("slider-thumb-line-height", $slider-thumb-line-height);
 
-        &:focus {
-            transform: var(
-                --#{$prefix}slider-thumb-transform,
-                $slider-thumb-transform
-            );
-        }
+    @include h.defineVar(
+        "slider-thumb-background-color",
+        $slider-thumb-background-color
+    );
+    @include h.defineVar("slider-thumb-box-shadow", $slider-thumb-box-shadow);
+    @include h.defineVar(
+        "slider-thumb-border-width",
+        $slider-thumb-border-width
+    );
+    @include h.defineVar(
+        "slider-thumb-border-style",
+        $slider-thumb-border-style
+    );
+    @include h.defineVar(
+        "slider-thumb-border-color",
+        $slider-thumb-border-color
+    );
+    @include h.defineVar(
+        "slider-thumb-border-radius",
+        $slider-thumb-border-radius
+    );
+    @include h.defineVar(
+        "slider-thumb-border-radius-rounded",
+        $slider-thumb-border-radius-rounded
+    );
+    @include h.defineVar("slider-thumb-transform", $slider-thumb-transform);
 
-        &--rounded {
-            border-radius: var(
-                --#{$prefix}slider-rounded-borded-radius,
-                $slider-rounded-borded-radius
-            );
-        }
+    @include h.defineVar("slider-tick-size", $slider-tick-size);
+    @include h.defineVar("slider-tick-color", $slider-tick-color);
+    @include h.defineVar("slider-tick-font-size", $slider-tick-font-size);
+    @include h.defineVar("slider-tick-font-weight", $slider-tick-font-weight);
+    @include h.defineVar("slider-tick-line-height", $slider-tick-line-height);
+    @include h.defineVar(
+        "slider-tick-background-color",
+        $slider-tick-background-color
+    );
+    @include h.defineVar("slider-tick-radius", $slider-tick-radius);
 
-        &--dragging {
-            cursor: grabbing;
-            filter: brightness(0.8);
+    width: 100%;
+    padding: h.useVar("slider-padding");
+
+    // define focus shadow effect
+    @include h.focusable(".o-slider__thumb");
+
+    // size variants
+    @each $name, $value in vars.$sizes {
+        &--#{$name} {
+            @include h.defineVar("slider-font-size", h.useVar("size-#{$name}"));
         }
     }
 
     &__track {
+        // add clickable cursor
+        @include h.clickable;
+
         display: flex;
         align-items: center;
         position: relative;
-        cursor: pointer;
-        background: var(
-            --#{$prefix}slider-track-background,
-            $slider-track-background
-        );
-        border-radius: var(
-            --#{$prefix}slider-track-border-radius,
-            $slider-track-border-radius
-        );
+
+        height: h.useVar("slider-track-height");
+
+        box-shadow: h.useVar("slider-track-box-shadow");
+        background-color: h.useVar("slider-track-background-color");
+
+        border-color: h.useVar("slider-track-border-color");
+        border-style: h.useVar("slider-track-border-style");
+        border-width: h.useVar("slider-track-border-width");
+        border-radius: h.useVar("slider-track-border-radius");
     }
 
     &__fill {
         position: absolute;
         height: 100%;
-        box-shadow: var(--#{$prefix}slider-track-shadow, $slider-track-shadow);
-        background: var(
-            --#{$prefix}slider-fill-background,
-            $slider-fill-background
-        );
-        border-radius: var(
-            --#{$prefix}slider-track-radius,
-            $slider-track-radius
-        );
-        border: var(--#{$prefix}slider-track-border, $slider-track-border);
+
+        box-shadow: h.useVar("slider-fill-box-shadow");
+        background-color: h.useVar("slider-fill-background-color");
+
+        border-color: h.useVar("slider-track-border-color");
+        border-style: h.useVar("slider-track-border-style");
+        border-width: h.useVar("slider-track-border-width");
+        border-radius: h.useVar("slider-track-border-radius");
+
         // Fix alignment in IE 11. Cancel out for others
         top: 50%;
         transform: translateY(-50%);
 
-        @each $name, $pair in $colors {
-            $color: list.nth($pair, 1);
-
+        @each $name, $pair in vars.$colors {
             &--#{$name} {
-                background: var(--#{$prefix}variant-#{$name}, $color);
-
-                + .o-slide__thumb-wrapper {
-                    --#{$prefix}focus: #{createFocus($color)};
-                }
+                @include h.defineVar(
+                    "slider-fill-background-color",
+                    h.useVar($name)
+                );
             }
         }
     }
 
-    @include slider-size($slider-font-size);
+    &__thumb-wrapper {
+        display: inline-flex;
+        align-items: center;
+        position: absolute;
+        cursor: grab;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        flex-direction: column; // Fix shrinked thumb at the end in IE 11
 
-    @each $name, $value in $sizes {
-        &--#{$name} {
-            @include slider-size($value, $name);
+        // override tooltip styling
+        > .o-tooltip {
+            @include h.defineVar(
+                "tooltip-content-font-size",
+                h.useVar("slider-thumb-font-size")
+            );
+            @include h.defineVar(
+                "tooltip-content-font-weight",
+                h.useVar("slider-thumb-font-weight")
+            );
+            @include h.defineVar(
+                "tooltip-content-line-height",
+                h.useVar("slider-thumb-line-height")
+            );
+        }
+    }
+
+    &__thumb {
+        height: h.useVar("slider-thumb-size");
+        width: h.useVar("slider-thumb-size");
+
+        box-shadow: h.useVar("slider-thumb-box-shadow");
+        background-color: h.useVar("slider-thumb-background-color");
+
+        border-color: h.useVar("slider-thumb-border-color");
+        border-style: h.useVar("slider-thumb-border-style");
+        border-width: h.useVar("slider-thumb-border-width");
+        border-radius: h.useVar("slider-thumb-border-radius");
+
+        &:focus {
+            transform: h.useVar("slider-thumb-transform");
+        }
+
+        &--rounded {
+            @include h.defineVar(
+                "slider-thumb-border-radius",
+                h.useVar("slider-thumb-border-radius-rounded")
+            );
+        }
+
+        &--dragging {
+            cursor: grabbing;
+            filter: brightness(0.8);
         }
     }
 
     &__tick {
         position: absolute;
-        transform: translate(-50%, -50%);
         top: 50%;
-        width: var(--#{$prefix}slider-tick-width, $slider-tick-width);
-        background: var(
-            --#{$prefix}slider-tick-background,
-            $slider-tick-background
-        );
-        border-radius: var(--#{$prefix}slider-tick-radius, $slider-tick-radius);
+        transform: translate(-50%, -50%);
+
+        height: h.useVar("slider-tick-size");
+        width: h.useVar("slider-tick-size");
+        background: h.useVar("slider-tick-background-color");
+        border-radius: h.useVar("slider-tick-radius");
 
         &--hidden {
             background: transparent;
         }
     }
 
-    &__thumb-wrapper {
-        display: inline-flex;
-        align-items: center;
+    &__tick-label {
         position: absolute;
-        cursor: grab;
-        transform: translate(-50%, -50%);
-        top: 50%;
-        flex-direction: column; // Fix shrinked thumb at the end in IE 11
-    }
+        left: 50%;
+        top: calc(h.useVar("slider-track-height") * 0.5 + 2px);
+        transform: translateX(-50%);
 
-    &--disabled {
-        cursor: not-allowed;
-        pointer-events: none;
-        opacity: var(--#{$prefix}slider-track-disabled, $slider-track-disabled);
+        color: h.useVar("slider-tick-color");
+        font-size: h.useVar("slider-tick-font-size");
+        font-weight: h.useVar("slider-tick-font-weight");
+        line-height: h.useVar("$slider-tick-line-height");
     }
 
-    // focus effect
-    &:active &__thumb,
-    &:focus &__thumb,
-    &:focus-within &__thumb {
-        box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+    &--disabled {
+        .o-slider__track {
+            @include h.disabled(h.useVar("slider-disabled-opacity"));
+        }
     }
 }