diff --git a/src/components/Slider/BaseSlider/BaseSlider.scss b/src/components/Slider/BaseSlider/BaseSlider.scss index 6b2d05e247..54d669fa7c 100644 --- a/src/components/Slider/BaseSlider/BaseSlider.scss +++ b/src/components/Slider/BaseSlider/BaseSlider.scss @@ -1,6 +1,6 @@ @use 'sass:math'; @use '../../variables'; -@use '../sliderVariables'; +@use '../variables' as slider-variables; @use '../../../../styles/mixins'; $block: '.#{variables.$ns-new}base-slider'; @@ -31,7 +31,7 @@ $mark-xl-offset: -1px; @mixin input-control($size) { position: absolute; content: ''; - background-color: #{sliderVariables.$slider-color}; + background-color: #{slider-variables.$slider-color}; border-radius: 4px 0 0 4px; @if $size == 's' { @@ -277,13 +277,13 @@ $mark-xl-offset: -1px; } &_error { - background-color: #{sliderVariables.$slider-error-color}; + background-color: #{slider-variables.$slider-error-color}; } } &__track { position: absolute; - background-color: #{sliderVariables.$slider-color}; + background-color: #{slider-variables.$slider-color}; &_size { &_s { height: $rail-s-size; @@ -324,10 +324,10 @@ $mark-xl-offset: -1px; z-index: 1; cursor: grab; touch-action: pan-x; - background-color: #{sliderVariables.$handle-center-color}; + background-color: #{slider-variables.$handle-center-color}; border-radius: 50%; border-style: solid; - border-color: #{sliderVariables.$slider-color}; + border-color: #{slider-variables.$slider-color}; top: 0; &_size { @@ -357,7 +357,7 @@ $mark-xl-offset: -1px; } &:active { - box-shadow: 0 0 4px #{sliderVariables.$slider-color}; + box-shadow: 0 0 4px #{slider-variables.$slider-color}; cursor: grabbing; } @@ -368,7 +368,7 @@ $mark-xl-offset: -1px; &_disabled { cursor: not-allowed; - border-color: #{sliderVariables.$slider-disabled-color}; + border-color: #{slider-variables.$slider-disabled-color}; &:active, &:focus { @@ -378,7 +378,7 @@ $mark-xl-offset: -1px; } &_error { - border-color: #{sliderVariables.$slider-error-color}; + border-color: #{slider-variables.$slider-error-color}; &:active, &:focus { box-shadow: 0 0 0 4px $handle-focus-error-color; @@ -434,7 +434,7 @@ $mark-xl-offset: -1px; &-dot { position: absolute; border-radius: 50%; - background-color: #{sliderVariables.$slider-color}; + background-color: #{slider-variables.$slider-color}; &:first-of-type, &:last-of-type { diff --git a/src/components/Slider/Slider.scss b/src/components/Slider/Slider.scss index 803092bc97..8c4a45700c 100644 --- a/src/components/Slider/Slider.scss +++ b/src/components/Slider/Slider.scss @@ -1,5 +1,5 @@ @use '../variables'; -@use './sliderVariables'; +@use './variables' as slider-variables; @use '../../../styles/mixins'; $block: '.#{variables.$ns-new}slider'; @@ -28,7 +28,7 @@ $block: '.#{variables.$ns-new}slider'; &__top { //6px is padding inside tooltip card height: calc( - var(--g-text-body-1-line-height) + 6px + #{sliderVariables.$slider-tooltip-offset} + var(--g-text-body-1-line-height) + 6px + #{slider-variables.$slider-tooltip-offset} ); display: none; &_withTooltip { @@ -36,7 +36,7 @@ $block: '.#{variables.$ns-new}slider'; } &_size_xl { height: calc( - var(--g-text-body-2-line-height) + 6px + #{sliderVariables.$slider-tooltip-offset} + var(--g-text-body-2-line-height) + 6px + #{slider-variables.$slider-tooltip-offset} ); } } diff --git a/src/components/Slider/SliderTooltip/SliderTooltip.scss b/src/components/Slider/SliderTooltip/SliderTooltip.scss index f7fafa4e28..4a8532942e 100644 --- a/src/components/Slider/SliderTooltip/SliderTooltip.scss +++ b/src/components/Slider/SliderTooltip/SliderTooltip.scss @@ -1,12 +1,12 @@ @use '../../variables'; -@use '../sliderVariables'; +@use '../variables' as slider-variables; @use '../../../../styles/mixins'; $block: '.#{variables.$ns-new}slider-tooltip'; #{$block} { position: absolute; - top: -#{sliderVariables.$slider-tooltip-offset}; + top: -#{slider-variables.$slider-tooltip-offset}; transform: translate(-50%, -100%); cursor: default; @@ -19,9 +19,9 @@ $block: '.#{variables.$ns-new}slider-tooltip'; justify-content: center; border-radius: 4px; padding: 4px 4px 2px; - background-color: #{sliderVariables.$slider-color}; + background-color: #{slider-variables.$slider-color}; @include mixins.text-body-1; - color: #{sliderVariables.$handle-center-color}; + color: #{slider-variables.$handle-center-color}; &_size { &_xl { @@ -37,15 +37,15 @@ $block: '.#{variables.$ns-new}slider-tooltip'; left: 0; right: 0; justify-content: center; - color: #{sliderVariables.$slider-color}; + color: #{slider-variables.$slider-color}; } &_error &__card { - background-color: #{sliderVariables.$slider-error-color}; + background-color: #{slider-variables.$slider-error-color}; } &_disabled &__card { - background-color: #{sliderVariables.$slider-disabled-color}; + background-color: #{slider-variables.$slider-disabled-color}; } //use this element to prevent crossing effect @@ -59,11 +59,11 @@ $block: '.#{variables.$ns-new}slider-tooltip'; } &_error &__pin { - color: #{sliderVariables.$slider-error-color}; + color: #{slider-variables.$slider-error-color}; } &_disabled &__pin { - color: #{sliderVariables.$slider-disabled-color}; + color: #{slider-variables.$slider-disabled-color}; &_background { color: $base-background-color; } diff --git a/src/components/Slider/__stories__/SliderShowcase.scss b/src/components/Slider/__stories__/SliderShowcase.scss index b099169754..4fe927ee50 100644 --- a/src/components/Slider/__stories__/SliderShowcase.scss +++ b/src/components/Slider/__stories__/SliderShowcase.scss @@ -1,5 +1,4 @@ @use '../../variables'; -@use '../sliderVariables'; $block: '.#{variables.$ns-new}slider-showcase'; diff --git a/src/components/Slider/sliderVariables.scss b/src/components/Slider/variables.scss similarity index 100% rename from src/components/Slider/sliderVariables.scss rename to src/components/Slider/variables.scss