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

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D10-10, 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: "wix-ui-core/dist/src/hocs/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: 4.5px;
  sliderRailHeight: 3px;
  sliderMarginTop: 9px;
  sliderMarginBottom: 6px;
  sliderMarkLine: 6px;
  sliderMarkTextMarginTop: 12px;
  sliderMarkTextSize: 18px;
  sliderThumbSize: 12px;
  clickableAreaSize: 24px;
}

@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%;
}

.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 :--slider-vertical {
  width: calc(value(sliderRailHeight) + 2 * value(sliderPadding));
  height: 100%;
  margin: 0 value(sliderMarginTop) 0 value(sliderMarginBottom);
}

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

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

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

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

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


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


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

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

}

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

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


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

.root :--slider-mark-text-active {
  color: value(D10);
}

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

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

.root :--slider-disabled :--slider-rail {
  background-color: value(D10-10);
}

.root :--slider-disabled :--slider-track {
  background-color: value(D50);
}

.root :--slider-vertical:--slider-disabled  :--slider-track {
  background-color: value(D50);
}

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

.sliderHandle:disabled {
  cursor: default;
}

.sliderHandle:disabled .sliderThumb {
  background-color: value(D50);
  cursor: default;
}

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

.sliderThumb {
  -st-states: hovered;
  margin: auto;
  width: value(sliderThumbSize);
  height:  value(sliderThumbSize);
  border-radius: 50%;
  background-color: value(THEME-COLOR-10);
}

.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 .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;
}

.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;
}