@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
72 lines (70 loc) • 5.67 kB
CSS
.spectrum-Slider,
.spectrum-Dial {
--spectrum-slider-height: var(--spectrum-alias-single-line-height);
--spectrum-slider-min-width: var(--spectrum-global-dimension-size-1250);
--spectrum-slider-handle-width: var(--spectrum-global-dimension-size-200);
--spectrum-slider-track-height: var(--spectrum-alias-border-size-thick);
--spectrum-slider-fill-track-height: var(--spectrum-alias-border-size-thick);
--spectrum-slider-handle-gap: var(--spectrum-alias-border-size-thicker);
--spectrum-slider-track-border-radius: var(--spectrum-global-dimension-static-size-10);
--spectrum-slider-ramp-track-height: var(--spectrum-global-dimension-static-size-200);
--spectrum-slider-handle-height: var(--spectrum-global-dimension-size-200);
--spectrum-slider-handle-border-size: var(--spectrum-alias-border-size-thick);
--spectrum-slider-handle-border-radius: var(--spectrum-alias-border-radius-medium);
--spectrum-slider-animation-duration: var(--spectrum-global-animation-duration-100);
--spectrum-slider-handle-border-size-down: var(--spectrum-global-dimension-size-75);
--spectrum-fieldlabel-padding-top: var(--spectrum-global-dimension-size-50);
--spectrum-label-text-size: var(--spectrum-global-dimension-font-size-75);
--spectrum-label-text-line-height: var(--spectrum-global-font-line-height-small);
--spectrum-slider-label-gap-x: var(--spectrum-global-dimension-size-200);
--spectrum-slider-tick-mark-height: 10px;
--spectrum-slider-tick-mark-width: var(--spectrum-alias-border-size-thick);
--spectrum-slider-tick-mark-border-radius: var(--spectrum-alias-border-radius-xsmall);
--spectrum-fieldlabel-padding-bottom: var(--spectrum-global-dimension-size-65);
--spectrum-slider-color-track-height: var(--spectrum-global-dimension-static-size-300);
--spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-50);
--spectrum-dial-container-width: var(--spectrum-global-dimension-static-size-600);
--spectrum-dial-border-radius: var(--spectrum-alias-border-radius-large);
--spectrum-dial-min-max-tick-angles: 45deg;
--spectrum-dial-handle-marker-width: 12px;
--spectrum-dial-handle-marker-height: var(--spectrum-alias-border-size-thick);
--spectrum-dial-handle-marker-border-radius: var(--spectrum-alias-border-radius-xsmall);
--spectrum-dial-small-width: var(--spectrum-global-dimension-static-size-300);
--spectrum-dial-small-height: var(--spectrum-global-dimension-static-size-300);
--spectrum-slider-color-handle-outset-border-size: var(--spectrum-alias-border-size-thin);
--spectrum-slider-track-color: var(--spectrum-global-color-gray-300);
--spectrum-label-text-color: var(--spectrum-alias-label-text-color);
--spectrum-slider-fill-track-color: var(--spectrum-global-color-gray-700);
--spectrum-slider-player-track-buffer-color: var(--spectrum-global-color-gray-500);
--spectrum-slider-handle-border-color: var(--spectrum-global-color-gray-700);
--spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100);
--spectrum-slider-handle-border-color-hover: var(--spectrum-global-color-gray-800);
--spectrum-slider-handle-border-color-key-focus: var(--spectrum-alias-border-color-focus);
--spectrum-slider-handle-border-color-down: var(--spectrum-global-color-gray-800);
--spectrum-slider-tick-mark-color: var(--spectrum-alias-track-color-default);
--spectrum-slider-handle-background-color-key-focus: var(--spectrum-alias-border-color-focus);
--spectrum-slider-handle-background-color-down: var(--spectrum-alias-background-color-transparent);
--spectrum-slider-color-track-background-color-gradient-start: var(--spectrum-global-color-blue-400);
--spectrum-slider-color-track-background-color-gradient-end: var(--spectrum-global-color-blue-700);
--spectrum-slider-color-track-border-color: var(--spectrum-alias-border-color-translucent-dark);
--spectrum-slider-color-handle-inset-border-color: var(--spectrum-alias-border-color-translucent-dark);
--spectrum-slider-color-handle-outset-border-color: var(--spectrum-alias-border-color-translucent-dark);
--spectrum-slider-color-handle-border-color: var(--spectrum-global-color-gray-50);
--spectrum-slider-color-handle-color: var(--spectrum-alias-border-color-transparent);
--spectrum-slider-color-handle-outset-border-color-key-focus: var(--spectrum-alias-border-color-translucent-dark);
--spectrum-dial-handle-marker-color: var(--spectrum-global-color-gray-700);
--spectrum-dial-handle-marker-color-hover: var(--spectrum-global-color-gray-800);
--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-global-color-gray-50);
--spectrum-dial-border-color-hover: var(--spectrum-global-color-gray-800);
--spectrum-dial-min-max-tick-color: var(--spectrum-global-color-gray-600);
--spectrum-label-text-color-disabled: var(--spectrum-alias-text-color-disabled);
--spectrum-slider-handle-border-color-disabled: var(--spectrum-global-color-gray-400);
--spectrum-slider-handle-background-color: var(--spectrum-alias-background-color-transparent);
--spectrum-slider-track-color-disabled: var(--spectrum-global-color-gray-300);
--spectrum-slider-fill-track-color-disabled: var(--spectrum-global-color-gray-300);
--spectrum-slider-player-track-buffer-color-disabled: var(--spectrum-alias-track-color-default);
--spectrum-slider-ramp-track-color-disabled: var(--spectrum-global-color-gray-200);
--spectrum-slider-color-track-color-disabled: var(--spectrum-global-color-gray-200);
--spectrum-slider-color-handle-color-disabled: var(--spectrum-alias-border-color-transparent);
--spectrum-slider-color-handle-border-color-disabled: var(--spectrum-global-color-gray-400);
}