76 lines
3.0 KiB
CSS
76 lines
3.0 KiB
CSS
/* Slider mapping. ui-viz has no Slider spec, so these are current HM values built from the HM Semantic / Primitive tokens.
|
|
Track, Range and Thumb are internal parts, so they are styled here; the Slider's own width / height stay `className` territory.
|
|
States: Radix attributes ([data-disabled], [data-orientation]) and :hover / :active / :focus-visible on the thumb. */
|
|
:root, [data-hm-theme] {
|
|
--hm-slider-track-size: 6px;
|
|
--hm-slider-track-background: var(--hm-sem-palette-warm-neutral-light);
|
|
--hm-slider-range-background: var(--hm-sem-state-active);
|
|
|
|
--hm-slider-thumb-size: 18px;
|
|
--hm-slider-thumb-background: var(--hm-sem-bg-surface);
|
|
--hm-slider-thumb-border-width: 2px;
|
|
--hm-slider-thumb-border-color: var(--hm-sem-state-active);
|
|
/* Interaction halo: hover shows it, dragging widens it. Keyboard focus has its own semantic color. */
|
|
--hm-slider-thumb-halo-color: color-mix(in srgb, var(--hm-sem-action-primary) 20%, transparent);
|
|
--hm-slider-thumb-focus-halo-color: color-mix(in srgb, var(--hm-sem-stroke-input-focus) 20%, transparent);
|
|
--hm-slider-thumb-halo-size: 4px;
|
|
--hm-slider-thumb-halo-size-active: 6px;
|
|
|
|
/* Current HM value for this component only; not a global Disabled rule. */
|
|
--hm-slider-disabled-opacity: 0.6;
|
|
}
|
|
|
|
[data-slot="slider-track"] {
|
|
border-radius: 9999px;
|
|
background: var(--hm-slider-track-background);
|
|
}
|
|
[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-track"] {
|
|
height: var(--hm-slider-track-size);
|
|
width: 100%;
|
|
}
|
|
[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-track"] {
|
|
width: var(--hm-slider-track-size);
|
|
height: 100%;
|
|
}
|
|
[data-slot="slider-range"] {
|
|
background: var(--hm-slider-range-background);
|
|
}
|
|
[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-range"] {
|
|
height: 100%;
|
|
}
|
|
[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-range"] {
|
|
width: 100%;
|
|
}
|
|
|
|
[data-slot="slider-thumb"] {
|
|
box-sizing: border-box;
|
|
width: var(--hm-slider-thumb-size);
|
|
height: var(--hm-slider-thumb-size);
|
|
border: var(--hm-slider-thumb-border-width) solid var(--hm-slider-thumb-border-color);
|
|
border-radius: 9999px;
|
|
background: var(--hm-slider-thumb-background);
|
|
cursor: grab;
|
|
}
|
|
[data-slot="slider-thumb"]:hover {
|
|
box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size) var(--hm-slider-thumb-halo-color);
|
|
}
|
|
[data-slot="slider-thumb"]:active {
|
|
cursor: grabbing;
|
|
box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size-active) var(--hm-slider-thumb-halo-color);
|
|
}
|
|
/* Focus wins the color when states overlap; drag keeps its 6px size and grabbing cursor. */
|
|
[data-slot="slider-thumb"]:focus-visible {
|
|
box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size) var(--hm-slider-thumb-focus-halo-color);
|
|
}
|
|
[data-slot="slider-thumb"]:focus-visible:active {
|
|
box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size-active) var(--hm-slider-thumb-focus-halo-color);
|
|
}
|
|
|
|
[data-slot="slider"][data-disabled] {
|
|
opacity: var(--hm-slider-disabled-opacity);
|
|
}
|
|
[data-slot="slider"][data-disabled] [data-slot="slider-thumb"] {
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|