Thomas des Francs
97 lines
1.9 KiB
SCSS
97 lines
1.9 KiB
SCSS
.slider {
|
|
--slider-thumb-size: 12px;
|
|
--slider-track-size: 16px;
|
|
|
|
cursor: pointer;
|
|
height: var(--slider-track-size);
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
&[data-disabled='true'] {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:has(.input:focus-visible) {
|
|
box-shadow: 0 0 0 3px var(--t-color-blue3);
|
|
}
|
|
}
|
|
|
|
.track {
|
|
background: var(--t-background-tertiary);
|
|
border-radius: var(--t-border-radius-pill);
|
|
corner-shape: round;
|
|
height: var(--slider-track-size);
|
|
inset: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
|
|
.fill {
|
|
background: var(--slider-main-color);
|
|
border-radius: var(--t-border-radius-pill);
|
|
corner-shape: round;
|
|
height: 100%;
|
|
left: 0;
|
|
min-width: var(--slider-track-size);
|
|
position: absolute;
|
|
top: 0;
|
|
width: var(--slider-fill);
|
|
|
|
&::after {
|
|
background: var(--t-background-primary);
|
|
border-radius: var(--t-border-radius-rounded);
|
|
corner-shape: round;
|
|
content: '';
|
|
height: var(--slider-thumb-size);
|
|
position: absolute;
|
|
right: 2px;
|
|
top: 2px;
|
|
width: var(--slider-thumb-size);
|
|
}
|
|
}
|
|
|
|
.input {
|
|
appearance: none;
|
|
background: transparent;
|
|
cursor: inherit;
|
|
height: var(--slider-track-size);
|
|
inset: 0;
|
|
margin: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
|
|
&::-webkit-slider-runnable-track {
|
|
background: transparent;
|
|
border: 0;
|
|
height: var(--slider-track-size);
|
|
}
|
|
|
|
&::-webkit-slider-thumb {
|
|
appearance: none;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: var(--t-border-radius-rounded);
|
|
corner-shape: round;
|
|
height: var(--slider-thumb-size);
|
|
margin-top: 2px;
|
|
width: var(--slider-thumb-size);
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
background: transparent;
|
|
border: 0;
|
|
height: var(--slider-track-size);
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: var(--t-border-radius-rounded);
|
|
corner-shape: round;
|
|
height: var(--slider-thumb-size);
|
|
width: var(--slider-thumb-size);
|
|
}
|
|
}
|