@oruga-ui/theme-oruga 0.2.2 → 0.4.0

package/src/assets/scss/components/_slider.scss

@@ -4,89 +4,70 @@
 $slider-background: transparent !default;
 $slider-margin: 1em 0 !default;
 $slider-mark-size: 0.75rem !default;
-$slider-font-size: $base-font-size !default;
-$slider-rounded-borded-radius: $base-rounded-border-radius !default;
-$slider-thumb-background: $white !default;
-$slider-thumb-border: 1px solid $grey-light !default;
-$slider-thumb-radius: $base-border-radius !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-thumb-transform: scale(1.25) !default;
-$slider-tick-background: $primary !default;
-$slider-tick-radius: $base-border-radius !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: $grey-lighter !default;
-$slider-fill-background: $primary !default;
-$slider-track-border-radius: $base-border-radius !default;
-$slider-track-border: 0px solid $grey !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: $base-border-radius !default;
-$slider-track-shadow: 0px 0px 0px $grey !default;
+$slider-track-radius: var(--#{$prefix}base-border-radius) !default;
+$slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
 /* @docs */
 
 @mixin slider-size($size, $name: null) {
-  $track-height: divide($size, $slider-thumb-to-track-ratio);
-  $tick-height: $track-height * $slider-tick-to-track-ratio;
+  $track-height: calc($size / $slider-thumb-to-track-ratio);
+  $tick-height: calc($track-height * $slider-tick-to-track-ratio);
   $thumb-size: $size;
 
   .o-slide__track {
     @if $name {
-      @include avariable(
-        "height",
-        ("slider-track-height-" + #{$name}),
-        $track-height
-      );
+      height: var(--#{$prefix}slider-track-height-#{$name}, $track-height);
     } @else {
-      @include avariable("height", "slider-track-height", $track-height);
+      height: var(--#{$prefix}slider-track-height, $track-height);
     }
   }
 
   .o-slide__thumb {
     @if $name {
-      @include avariable(
-        "height",
-        "slider-thumb-size-" + #{$name},
-        $thumb-size
-      );
-      @include avariable("width", "slider-thumb-size-" + #{$name}, $thumb-size);
+      height: var(--#{$prefix}slider-thumb-size-#{$name}, $thumb-size);
+      width: var(--#{$prefix}slider-thumb-size-#{$name}, $thumb-size);
     } @else {
-      @include avariable("height", "slider-thumb-size", $thumb-size);
-      @include avariable("width", "slider-thumb-size", $thumb-size);
+      height: var(--#{$prefix}slider-thumb-size, $thumb-size);
+      width: var(--#{$prefix}slider-thumb-size, $thumb-size);
     }
   }
 
   .o-slide__tick {
     @if $name {
-      @include avariable(
-        "height",
-        "slider-tick-height-" + #{$name},
-        $tick-height
-      );
+      height: var(--#{$prefix}slider-tick-height-#{$name}, $tick-height);
     } @else {
-      @include avariable("height", "slider-tick-height", $tick-height);
+      height: var(--#{$prefix}slider-tick-height, $tick-height);
     }
   }
 
   .o-slide__tick-label {
     @if $name {
-      @include avariable(
-        "font-size",
-        "slider-mark-size-" + #{$name},
-        $slider-mark-size
-      );
+      font-size: var(--#{$prefix}slider-mark-size-#{$name}, $slider-mark-size);
     } @else {
-      @include avariable("font-size", "slider-mark-size", $slider-mark-size);
+      font-size: var(--#{$prefix}slider-mark-size $slider-mark-size);
     }
-    position: absolute;
 
-    @include evariable(
-      "top",
-      "calc($label-top * 0.5 + 2px)",
-      eparam(
-        "$label-top",
-        variable("slider-tick-label-top-" + #{$name}, $track-height)
-      )
+    position: absolute;
+    top: calc(
+      var(--#{$prefix}slider-tick-label-top-#{$name}, $track-height) * 0.5 + 2px
     );
     left: 50%;
     transform: translateX(-50%);
@@ -94,40 +75,29 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
 }
 
 .o-slide {
-  @include avariable("margin", "slider-margin", $slider-margin);
-  @include avariable("background", "slider-background", $slider-background);
   width: 100%;
+  margin: var(--#{$prefix}slider-margin, $slider-margin);
+  background: var(--#{$prefix}slider-background, $slider-background);
 
   &__thumb {
-    @include avariable(
-      "box-shadow",
-      "slider-thumb-shadow",
-      $slider-thumb-shadow
-    );
-    @include avariable("border", "slider-thumb-border", $slider-thumb-border);
-    @include avariable(
-      "border-radius",
-      "slider-thumb-radius",
-      $slider-thumb-radius
-    );
-    @include avariable(
-      "background",
-      "slider-thumb-background",
+    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
     );
 
     &:focus {
-      @include avariable(
-        "transform",
-        "slider-thumb-transform",
+      transform: var(
+        --#{$prefix}slider-thumb-transform,
         $slider-thumb-transform
       );
     }
 
     &--rounded {
-      @include avariable(
-        "border-radius",
-        "slider-rounded-borded-radius",
+      border-radius: var(
+        --#{$prefix}slider-rounded-borded-radius,
         $slider-rounded-borded-radius
       );
     }
@@ -143,15 +113,12 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
     align-items: center;
     position: relative;
     cursor: pointer;
-
-    @include avariable(
-      "background",
-      "slider-track-background",
+    background: var(
+      --#{$prefix}slider-track-background,
       $slider-track-background
     );
-    @include avariable(
-      "border-radius",
-      "slider-track-border-radius",
+    border-radius: var(
+      --#{$prefix}slider-track-border-radius,
       $slider-track-border-radius
     );
   }
@@ -159,31 +126,26 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
   &__fill {
     position: absolute;
     height: 100%;
-
-    @include avariable(
-      "box-shadow",
-      "slider-track-shadow",
-      $slider-track-shadow
-    );
-    @include avariable(
-      "background",
-      "slider-fill-background",
+    box-shadow: var(--#{$prefix}slider-track-shadow, $slider-track-shadow);
+    background: var(
+      --#{$prefix}slider-fill-background,
       $slider-fill-background
     );
-    @include avariable(
-      "border-radius",
-      "slider-track-radius",
-      $slider-track-radius
-    );
-    @include avariable("border", "slider-track-border", $slider-track-border);
+    border-radius: var(--#{$prefix}slider-track-radius $slider-track-radius);
+    border: var(--#{$prefix}slider-track-border, $slider-track-border);
     // Fix alignment in IE 11. Cancel out for others
     top: 50%;
     transform: translateY(-50%);
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
+
       &--#{$name} {
-        @include avariable("background", ("variant-" + #{$name}), $color);
+        background: var(--#{$prefix}variant-#{$name}, $color);
+
+        + .o-slide__thumb-wrapper {
+          --#{$prefix}focus: #{createFocus($color)};
+        }
       }
     }
   }
@@ -200,18 +162,12 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
     position: absolute;
     transform: translate(-50%, -50%);
     top: 50%;
-
-    @include avariable("width", "slider-tick-width", $slider-tick-width);
-    @include avariable(
-      "background",
-      "slider-tick-background",
+    width: var(--#{$prefix}slider-tick-width, $slider-tick-width);
+    background: var(
+      --#{$prefix}slider-tick-background,
       $slider-tick-background
     );
-    @include avariable(
-      "border-radius",
-      "slider-tick-radius",
-      $slider-tick-radius
-    );
+    border-radius: var(--#{$prefix}slider-tick-radius, $slider-tick-radius);
 
     &--hidden {
       background: transparent;
@@ -231,11 +187,13 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
   &--disabled {
     cursor: not-allowed;
     pointer-events: none;
+    opacity: var(--#{$prefix}slider-track-disabled, $slider-track-disabled);
+  }
 
-    @include avariable(
-      "opacity",
-      "slider-track-disabled",
-      $slider-track-disabled
-    );
+  // focus effect
+  &:active &__thumb,
+  &:focus &__thumb,
+  &:focus-within &__thumb {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
   }
 }