wix-style-react/dist/src/Slider/Slider.st.css

wix-style-react

@st-import [
  --wds-slider-track-size,
  --wds-slider-track-size-transparent,
  --wds-slider-track-border-border-radius,
  --wds-slider-slider-knob-size,
  --wds-slider-slider-knob-size-transparent,
  --wds-slider-slider-mark-size,
  --wds-color-fill-standard-secondary,
  --wds-color-fill-standard-primary,
  --wds-color-text-standard-primary,
  --wds-color-border-transparent-primary,
  --wds-color-fill-standard-tertiary,
  --wds-color-black-700,
  --wds-color-black-500,
] from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D10-10, D10-20, D10, D50, THEME-COLOR-10, THEME-COLOR-40, F00, B00, D80;
}

:import {
  -st-from: "../Foundation/stylable/shadows.st.css";
  -st-named: shadow30;
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-small-normal;
}

:import {
  -st-from: "../common/Focusable/Focusable.st.css";
  -st-default: Focusable;
}

:import {
  -st-from: "../Text/Text.st.css";
  -st-default: Text;
}

:import {
  -st-from: "../Tooltip/Tooltip.st.css";
  -st-default: Tooltip;
}

:vars {
  sliderPadding: 4px;
  sliderRailHeight: var(--wds-slider-track-size, 4px);
  sliderMarginTop: 9px;
  sliderMarginBottom: 6px;
  sliderMarkLine: var(--wds-slider-slider-mark-size, 6px);
  sliderMarkTextMarginTop: 12px;
  sliderMarkTextSize: 18px;
  sliderThumbSize: var(--wds-slider-slider-knob-size, 12px);
  clickableAreaSize: 24px;
  gradientPadding: 4px;
  gradientRailHeight: var(--wds-slider-track-size-transparent, 8px);
  gradientMarginTop: 9px;
  gradientMarginBottom: 8px;
  gradientMarkLine: var(--wds-slider-slider-mark-size, 6px);
  gradientMarkTextMarginTop: 12px;
  gradientMarkTextSize: 18px;
  gradientThumbSize: var(--wds-slider-slider-knob-size-transparent, 16px);
}

@custom-selector :--slider :global(.wsr-slider);
@custom-selector :--slider-disabled :global(.wsr-slider-disabled);
@custom-selector :--slider-with-marks :global(.wsr-slider-with-marks);
@custom-selector :--slider-rail :global(.wsr-slider-rail);
@custom-selector :--slider-track :global(.wsr-slider-track);
@custom-selector :--slider-mark :global(.wsr-slider-mark);
@custom-selector :--slider-mark-text :global(.wsr-slider-mark-text);
@custom-selector :--slider-mark-text-active :global(.wsr-slider-mark-text-active);
@custom-selector :--slider-step :global(.wsr-slider-step);
@custom-selector :--slider-vertical :global(.wsr-slider.wsr-slider-vertical);

.root {
  height: 100%;
  -st-states: hasGradient, horizontal;
}

.root:horizontal {
  width: 100%;
}

.root :--slider {
  position: relative;
  height: calc(value(sliderRailHeight) + 2 * value(sliderPadding));
  width: 100%;
  touch-action: none;
  box-sizing: border-box;
  margin: value(sliderMarginTop) 0 value(sliderMarginBottom) 0;
}

.root:hasGradient :--slider {
  height: calc(value(gradientRailHeight) + 2 * value(gradientPadding));
  width: 100%;
  margin: value(gradientMarginTop) 0 value(gradientMarginBottom) 0;
}

.root :--slider-vertical {
  width: calc(value(sliderRailHeight) + 2 * value(sliderPadding));
  height: 100%;
  margin: 0 value(sliderMarginTop) 0 value(sliderMarginBottom);
}

.root:hasGradient :--slider-vertical {
  width: calc(value(gradientRailHeight) + 2 * value(gradientPadding));
  height: 100%;
  margin: 0 value(gradientMarginTop) 0 value(gradientMarginBottom);
}

.root :--slider:not(:--slider-disabled) {
  cursor: pointer;
}

.root :--slider-disabled {
  cursor: not-allowed;
}

/* extending clickable area */
.root :--slider::before {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: 0;
  right: 0;
}

.root:hasGradient :--slider::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
}


.root :--slider-vertical::before {
  content: '';
  position: absolute;
  left: -12px;
  right: -12px;
  top: 0;
  bottom: 0;
}

.root:hasGradient :--slider-vertical::before {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  top: 0;
  bottom: 0;
}

/* end of extending clickable area */

.root :--slider-with-marks {
  height: calc(value(sliderRailHeight) + 2 * value(sliderPadding) + value(sliderMarginBottom) + value(sliderMarkLine) + value(sliderMarkTextMarginTop) + value(sliderMarkTextSize));
  margin-bottom: 0;
}

.root:hasGradient :--slider-with-marks {
  height: calc(value(gradientRailHeight) + 2 * value(gradientPadding) + value(gradientMarginBottom) + value(gradientMarkLine) + value(gradientMarkTextMarginTop) + value(gradientMarkTextSize));
  margin-bottom: 0;
}

.root :--slider-rail {
  position: absolute;
  width: 100%;
  background-color: var(--wds-color-fill-standard-secondary, value(THEME-COLOR-40));
  height: value(sliderRailHeight);
  border-radius: var(--wds-slider-track-border-border-radius, 10px);
  margin: value(sliderPadding) 0;
}

/* extending clickable area*/
.root :--slider-with-marks::before {
  content: '';
  position: absolute;
  top: -12px;
  bottom: 0;
  left: 0;
  right: 0;
}

.root:hasGradient :--slider-rail {
  width: 100%;
  height: value(gradientRailHeight);
  margin: value(gradientPadding) 0;
}


.root :--slider-vertical :--slider-rail {
  position: absolute;
  height: 100%;
  width: value(sliderRailHeight);
  margin: 0 value(sliderPadding);
}

.root:hasGradient :--slider-vertical :--slider-rail {
  width: value(gradientRailHeight);
  height: 100%;
  box-shadow: inset 0 0 0 1px var(--wds-color-border-transparent-primary, value(D10-20));
  margin: 0 value(gradientPadding);
}


.root :--slider-track {
  position: absolute;
  left: 0;
  background-color: var(--wds-color-fill-standard-primary, value(THEME-COLOR-10));
  height: value(sliderRailHeight);
  border-radius: var(--wds-slider-track-border-border-radius, 10px);
  margin: value(sliderPadding) 0;
}

.root:hasGradient :--slider-track {
  display: none;
}

.root :--slider-vertical :--slider-track {
  position: absolute;
  top: 0;
  background-color: var(--wds-color-fill-standard-primary, value(THEME-COLOR-10));
  width: value(sliderRailHeight);
  border-radius: var(--wds-slider-track-border-border-radius, 10px);
  height: 100%;
  margin: 0 value(sliderPadding);

}

.root:hasGradient :--slider-vertical :--slider-track {
  display: none;
}

.root :--slider-mark {
  position: absolute;
  top: calc(value(sliderRailHeight) + value(sliderMarkLine) + value(sliderPadding) + value(sliderMarginBottom));
  left: 0;
  width: 100%;
}

.root:hasGradient :--slider-mark {
  top: calc(value(gradientRailHeight) + value(gradientMarkLine) + value(gradientPadding) + value(gradientMarginBottom));
  width: 100%;
}

.root :--slider-vertical :--slider-mark {
  position: absolute;
  top: 0;
  left: calc(value(sliderRailHeight) + value(sliderMarkLine) + value(sliderPadding) + value(sliderMarginBottom));
  height: 100%;
}

.root:hasGradient :--slider-vertical :--slider-mark {
  left: calc(value(gradientRailHeight) + value(gradientMarkLine) + value(gradientPadding) + value(gradientMarginBottom));
  height: 100%;
}


.root :--slider-mark-text {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: var(--wds-color-text-standard-primary, value(D10));
}

.root :--slider-mark-text-active {
  color: var(--wds-color-text-standard-primary, value(D10));
}

.root :--slider-step {
  position: absolute;
  width: 100%;
  height: value(sliderRailHeight);
  background: transparent;
  margin: value(sliderPadding) 0;
}

.root:hasGradient :--slider-step {
  width: 100%;
  height: value(gradientRailHeight);
  margin: value(gradientPadding) 0;
}

.root :--slider-vertical :--slider-step {
  height: 100%;
  width: value(sliderRailHeight);
}

.root:hasGradient :--slider-vertical :--slider-step {
  height: 100%;
  width: value(gradientRailHeight);
}

.root :--slider-disabled :--slider-rail {
  background-color: var(--wds-color-black-700, value(D10-10));
}

.root :--slider-disabled :--slider-track {
  background-color: var(--wds-color-black-500, value(D50));
}

.root :--slider-vertical:--slider-disabled :--slider-track {
  background-color: var(--wds-color-black-500, value(D50));
}

.root:hasGradient :--slider-vertical:--slider-disabled :--slider-track {
  background-color: var(--wds-color-black-500, value(D50));
}

.sliderHandle {
  -st-states: disabled;
  position: absolute;
  box-sizing: border-box;
  touch-action: pan-x;
  outline: none;
}

.sliderHandle:disabled .sliderThumb {
  background-color: var(--wds-color-black-500, value(D50));
}

.sliderHandle:not(:disabled) .sliderThumb:hovered {
  transform: scale(1.5);
}

.sliderHandle:not(:disabled) .sliderThumb:hasGradient:hovered {
  transform: scale(1.375);
}

.sliderThumb {
  -st-states: hovered, hasGradient;
  margin: auto;
  width: value(sliderThumbSize);
  height: value(sliderThumbSize);
  border-radius: 50%;
  background-color: var(--wds-color-fill-standard-primary, value(THEME-COLOR-10));
}


.sliderThumb:hasGradient {
  box-shadow: inset 0 0 0 2px var(--wds-color-fill-standard-tertiary, value(D80));
  width: value(gradientThumbSize);
  height: value(gradientThumbSize);
}


.sliderHandleWrapper {
  -st-extends: Focusable;
}

.sliderHandleWrapper:focus-visible .sliderHandle:not(:disabled) .sliderThumb:not(:hovered) {
  box-shadow: 0 0 0 3px value(F00);
  z-index: 2;
}

.sliderHandleWrapper:focus-visible .sliderHandle:not(:disabled) .sliderThumb:not(:hovered):hasGradient {
  box-shadow: inset 0 0 0 2px value(D80), 0 0 0 3px value(F00);
}

.sliderHandleWrapper:focus .sliderHandle:not(:disabled) .sliderThumb {
  box-shadow: 0 0 0 3px transparent;
  /* rc-slider focus overwrite */
  border: 0 solid transparent;
  z-index: 2;
  /* removing native browser focus */
  outline: none;
}


.sliderHandleWrapper:focus .sliderHandle:not(:disabled) .sliderThumb:hasGradient {
  box-shadow: inset 0 0 0 2px value(D80);
}

.markLine {
  position: relative;
  margin: auto;
  width: 1px;
  height: value(sliderMarkLine);
  background-color: value(D50);
}

:--slider-vertical .markLine {
  position: relative;
  margin: auto;
  height: 1px;
  width: value(sliderMarkLine);
  background-color: value(D50);
}

.markValue {
  position: relative;
  margin-top: value(sliderMarkTextMarginTop);
}

:--slider-vertical .markValue {
  position: relative;
  margin-top: 0;
  margin-left: value(sliderMarkTextMarginTop);
}

.mark {
  -st-states: direction(enum(vertical, horizontal));
}

.mark:direction(vertical) {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.markLabel {
  -st-extends: Text;
}

.sliderHandleTooltip {
  -st-extends: Tooltip;
}
/* st-namespace-reference="../../../src/Slider/Slider.st.css" */