@gravity-ui/uikit/build/cjs/components/Slider/BaseSlider/BaseSlider.css

Gravity UI base styling and components

.g-base-slider {
  position: relative;
  flex-grow: 1;
  touch-action: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.g-base-slider * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.g-base-slider_size_s {
  padding: 6px 0 6px;
  height: 15px;
  margin: 0 7.5px var(--g-text-body-1-line-height);
}
.g-base-slider_size_s .rc-slider-mark {
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-1-font-size);
  line-height: var(--g-text-body-1-line-height);
}
.g-base-slider_size_s .rc-slider-mark-text:last-of-type {
  inset-inline-end: -7.5px;
}
.g-base-slider_size_s .rc-slider-mark-text:first-of-type {
  inset-inline-end: unset;
  inset-inline-start: -7.5px;
}
.g-base-slider_size_s .rc-slider-dot {
  inset-block-start: 7px;
  height: 1px;
  width: 1px;
}
.g-base-slider_size_m {
  padding: 7px 0 7px;
  height: 18px;
  margin: 0 9px var(--g-text-body-1-line-height);
}
.g-base-slider_size_m .rc-slider-mark {
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-1-font-size);
  line-height: var(--g-text-body-1-line-height);
}
.g-base-slider_size_m .rc-slider-mark-text:last-of-type {
  inset-inline-end: -9px;
}
.g-base-slider_size_m .rc-slider-mark-text:first-of-type {
  inset-inline-end: unset;
  inset-inline-start: -9px;
}
.g-base-slider_size_m .rc-slider-dot {
  inset-block-start: 8px;
  height: 2px;
  width: 2px;
}
.g-base-slider_size_l {
  padding: 8px 0 8px;
  height: 21px;
  margin: 0 10.5px var(--g-text-body-1-line-height);
}
.g-base-slider_size_l .rc-slider-mark {
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-1-font-size);
  line-height: var(--g-text-body-1-line-height);
}
.g-base-slider_size_l .rc-slider-mark-text:last-of-type {
  inset-inline-end: -10.5px;
}
.g-base-slider_size_l .rc-slider-mark-text:first-of-type {
  inset-inline-end: unset;
  inset-inline-start: -10.5px;
}
.g-base-slider_size_l .rc-slider-dot {
  inset-block-start: 9px;
  height: 3px;
  width: 3px;
}
.g-base-slider_size_xl {
  padding: 9px 0 9px;
  height: 24px;
  margin: 0 12px var(--g-text-body-2-line-height);
}
.g-base-slider_size_xl .rc-slider-mark {
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-2-font-size);
  line-height: var(--g-text-body-2-line-height);
}
.g-base-slider_size_xl .rc-slider-mark-text:last-of-type {
  inset-inline-end: -12px;
}
.g-base-slider_size_xl .rc-slider-mark-text:first-of-type {
  inset-inline-end: unset;
  inset-inline-start: -12px;
}
.g-base-slider_size_xl .rc-slider-dot {
  inset-block-start: 10px;
  height: 4px;
  width: 4px;
}
.g-base-slider_no-marks {
  margin-block-end: 0;
}
.g-base-slider__rail {
  position: absolute;
  border-radius: 4px;
  background-color: var(--g-color-base-selection);
}
.g-base-slider__rail_size_s {
  height: 3px;
  inset-inline: -7px;
}
.g-base-slider__rail_size_m {
  height: 4px;
  inset-inline: -9px;
}
.g-base-slider__rail_size_l {
  height: 5px;
  inset-inline: -10px;
}
.g-base-slider__rail_size_xl {
  height: 6px;
  inset-inline: -12px;
}
.g-base-slider__rail_disabled {
  background-color: var(--g-color-base-generic-accent-disabled);
}
.g-base-slider__rail_error {
  background-color: var(--g-color-base-danger-heavy);
}
.g-base-slider__track {
  position: absolute;
  background-color: var(--g-color-base-brand);
}
.g-base-slider__track_size_s {
  height: 3px;
}
.g-base-slider__track_size_s::before {
  position: absolute;
  content: "";
  background-color: var(--g-color-base-brand);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  width: 7px;
  inset-inline-start: -7px;
  height: 3px;
}
.g-base-slider__track_size_m {
  height: 4px;
}
.g-base-slider__track_size_m::before {
  position: absolute;
  content: "";
  background-color: var(--g-color-base-brand);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  width: 9px;
  inset-inline-start: -9px;
  height: 4px;
}
.g-base-slider__track_size_l {
  height: 5px;
}
.g-base-slider__track_size_l::before {
  position: absolute;
  content: "";
  background-color: var(--g-color-base-brand);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  width: 10px;
  inset-inline-start: -10px;
  height: 5px;
}
.g-base-slider__track_size_xl {
  height: 6px;
}
.g-base-slider__track_size_xl::before {
  position: absolute;
  content: "";
  background-color: var(--g-color-base-brand);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  width: 12px;
  inset-inline-start: -12px;
  height: 6px;
}
.g-base-slider__track_disabled, .g-base-slider__track_error {
  visibility: hidden;
}
.g-base-slider__handle {
  position: absolute;
  z-index: 1;
  cursor: grab;
  touch-action: pan-x;
  background-color: var(--g-color-base-background);
  border-radius: 50%;
  border-style: solid;
  border-color: var(--g-color-base-brand);
  inset-block-start: 0;
}
.g-base-slider__handle_size_s {
  height: 15px;
  width: 15px;
  border-width: 3px;
}
.g-base-slider__handle_size_m {
  height: 18px;
  width: 18px;
  border-width: 4px;
}
.g-base-slider__handle_size_l {
  height: 21px;
  width: 21px;
  border-width: 5px;
}
.g-base-slider__handle_size_xl {
  height: 24px;
  width: 24px;
  border-width: 6px;
}
.g-base-slider__handle:focus {
  box-shadow: 0 0 0 3px var(--g-color-base-selection-hover);
  outline: none;
}
.g-base-slider__handle:active {
  box-shadow: 0 0 0 4px var(--g-color-base-selection-hover);
  cursor: grabbing;
}
.g-base-slider__handle_disabled {
  cursor: not-allowed;
  border-color: var(--g-color-base-generic-accent);
}
.g-base-slider__handle_disabled:active, .g-base-slider__handle_disabled:focus {
  cursor: not-allowed;
  box-shadow: none;
}
.g-base-slider__handle_error {
  border-color: var(--g-color-base-danger-heavy);
}
.g-base-slider__handle_error:focus {
  box-shadow: 0 0 0 3px var(--g-color-base-danger-light-hover);
}
.g-base-slider__handle_error:active {
  box-shadow: 0 0 0 4px var(--g-color-base-danger-light-hover);
}
.g-base-slider__step {
  position: absolute;
  width: 100%;
  background: transparent;
}
.g-base-slider__step_size_s {
  height: 3px;
}
.g-base-slider__step_size_m {
  height: 4px;
}
.g-base-slider__step_size_l {
  height: 5px;
}
.g-base-slider__step_size_xl {
  height: 6px;
}
.g-base-slider .rc-slider-mark {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  color: var(--g-color-text-secondary);
  inset-block-end: 0;
}
.g-base-slider .rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  inset-block-start: 0;
}
.g-base-slider_disabled .rc-slider-mark-text {
  cursor: not-allowed;
}
.g-base-slider .rc-slider-dot {
  position: absolute;
  border-radius: 50%;
  background-color: var(--g-color-base-brand);
}
.g-base-slider .rc-slider-dot:first-of-type, .g-base-slider .rc-slider-dot:last-of-type {
  display: none;
}
.g-base-slider_disabled .rc-slider-dot, .g-base-slider_error .rc-slider-dot {
  display: none;
}