98 lines
1.7 KiB
SCSS
98 lines
1.7 KiB
SCSS
.root {
|
|
--widget-width: 3.125rem;
|
|
--widget-height: 0.375rem;
|
|
--thumb-size: 1.125rem;
|
|
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.widget {
|
|
cursor: var(--custom-cursor, pointer);
|
|
position: relative;
|
|
width: var(--widget-width);
|
|
height: 0;
|
|
|
|
&::after {
|
|
content: "";
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: var(--thumb-size);
|
|
height: var(--thumb-size);
|
|
border: 0.125rem solid var(--color-gray);
|
|
border-radius: calc(var(--thumb-size) / 2);
|
|
|
|
background-color: var(--color-background);
|
|
|
|
transition: transform 200ms;
|
|
|
|
:global(body.no-page-transitions) & {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
&.min::after {
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
&.mid::after {
|
|
transform: translate(calc(var(--widget-width) / 2 - calc(var(--thumb-size) / 2)), -50%);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
&.max::after {
|
|
transform: translate(calc(var(--widget-width) - var(--thumb-size) + 0.125rem), -50%);
|
|
border-color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.filler {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
|
|
overflow: hidden;
|
|
|
|
width: var(--widget-width);
|
|
height: var(--widget-height);
|
|
border-radius: 0.25rem;
|
|
|
|
background-color: var(--color-gray);
|
|
|
|
&::after {
|
|
content: "";
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: var(--widget-width);
|
|
height: var(--widget-height);
|
|
border-radius: 0.25rem;
|
|
|
|
background-color: var(--color-primary);
|
|
|
|
transition: transform 200ms;
|
|
|
|
:global(body.no-page-transitions) & {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
&.min::after {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
&.mid::after {
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
&.max::after {
|
|
transform: translateX(0);
|
|
}
|
|
}
|