cx 26.3.10 → 26.4.0

package/src/widgets/form/Slider.scss

@@ -1,130 +1,130 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/deep-merge.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-slider(
-   $name: "slider",
-   $state-style-map: $cx-input-state-style-map,
-   $styles: $cx-slider-handle-styles,
-   $width: $cx-default-input-width,
-   $size: $cx-default-slider-handle-size,
-   $axis-size: $cx-default-slider-axis-size,
-   $axis-background-color: $cx-default-slider-axis-background-color,
-   $range-background-color: $cx-default-slider-range-background-color,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      width: $width;
-      user-select: none;
-
-      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
-
-      &.#{$state}vertical {
-         width: 28px;
-         height: $width;
-      }
-
-      &.#{$state}disabled {
-         pointer-events: none;
-         opacity: 0.5;
-      }
-   }
-
-   .#{$element}#{$name}-axis {
-      position: absolute;
-      background-color: $axis-background-color;
-      border-radius: cx-multiply($size, 0.5);
-      box-sizing: border-box;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: cx-multiply($size, 0.5);
-         right: cx-multiply($size, 0.5);
-         top: calc(50% - #{cx-multiply($axis-size, 0.5)});
-         height: $axis-size;
-         padding: 0 cx-multiply($axis-size, 0.5);
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         top: cx-multiply($size, 0.5);
-         bottom: cx-multiply($size, 0.5);
-         width: $axis-size;
-         left: calc(50% - #{cx-multiply($axis-size, 0.5)});
-         padding: cx-multiply($axis-size, 0.5) 0;
-      }
-   }
-
-   .#{$element}#{$name}-space {
-      position: relative;
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-range {
-      position: absolute;
-
-      background-color: $range-background-color;
-      border-radius: cx-multiply($axis-size, 0.5);
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         height: 100%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         width: 100%;
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-      box-sizing: border-box;
-      width: $size;
-      height: $size;
-      margin-left: cx-multiply($size, -0.5);
-      margin-top: cx-multiply($size, -0.5);
-      margin-bottom: cx-multiply($size, -0.5);
-      touch-action: none;
-
-      @include cx-add-state-rules($styles, default);
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: 0;
-         top: 50%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         left: 50%;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($styles, hover);
-      }
-
-      &:focus {
-         @include cx-add-state-rules($styles, focus);
-      }
-
-      &[disabled] {
-         @include cx-add-state-rules($styles, disabled);
-      }
-
-      &:active {
-         @include cx-add-state-rules($styles, active);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Slider")) {
-   @include cx-slider();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-slider(
+   $name: "slider",
+   $state-style-map: $cx-input-state-style-map,
+   $styles: $cx-slider-handle-styles,
+   $width: $cx-default-input-width,
+   $size: $cx-default-slider-handle-size,
+   $axis-size: $cx-default-slider-axis-size,
+   $axis-background-color: $cx-default-slider-axis-background-color,
+   $range-background-color: $cx-default-slider-range-background-color,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      width: $width;
+      user-select: none;
+
+      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
+
+      &.#{$state}vertical {
+         width: 28px;
+         height: $width;
+      }
+
+      &.#{$state}disabled {
+         pointer-events: none;
+         opacity: 0.5;
+      }
+   }
+
+   .#{$element}#{$name}-axis {
+      position: absolute;
+      background-color: $axis-background-color;
+      border-radius: cx-multiply($size, 0.5);
+      box-sizing: border-box;
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         left: cx-multiply($size, 0.5);
+         right: cx-multiply($size, 0.5);
+         top: calc(50% - #{cx-multiply($axis-size, 0.5)});
+         height: $axis-size;
+         padding: 0 cx-multiply($axis-size, 0.5);
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         top: cx-multiply($size, 0.5);
+         bottom: cx-multiply($size, 0.5);
+         width: $axis-size;
+         left: calc(50% - #{cx-multiply($axis-size, 0.5)});
+         padding: cx-multiply($axis-size, 0.5) 0;
+      }
+   }
+
+   .#{$element}#{$name}-space {
+      position: relative;
+      width: 100%;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-range {
+      position: absolute;
+
+      background-color: $range-background-color;
+      border-radius: cx-multiply($axis-size, 0.5);
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         height: 100%;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         width: 100%;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      box-sizing: border-box;
+      width: $size;
+      height: $size;
+      margin-left: cx-multiply($size, -0.5);
+      margin-top: cx-multiply($size, -0.5);
+      margin-bottom: cx-multiply($size, -0.5);
+      touch-action: none;
+
+      @include cx-add-state-rules($styles, default);
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         left: 0;
+         top: 50%;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         left: 50%;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($styles, hover);
+      }
+
+      &:focus {
+         @include cx-add-state-rules($styles, focus);
+      }
+
+      &[disabled] {
+         @include cx-add-state-rules($styles, disabled);
+      }
+
+      &:active {
+         @include cx-add-state-rules($styles, active);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Slider")) {
+   @include cx-slider();
+}