48 lines
1.2 KiB
Sass
48 lines
1.2 KiB
Sass
div.m3.m3-slider-container
|
|
height: 20px
|
|
display: flex
|
|
align-items: center
|
|
|
|
& > datalist
|
|
display: none
|
|
|
|
|
|
input[type="range"].m3.m3-slider
|
|
margin: 0
|
|
appearance: none
|
|
border-radius: 2px
|
|
margin-inline: 8px
|
|
background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
|
|
|
|
&::-webkit-slider-container
|
|
appearance: none
|
|
box-shadow: none
|
|
border-radius: 2px
|
|
min-block-size: 4px
|
|
height: 4px !important
|
|
|
|
&::-webkit-slider-runnable-track
|
|
height: 4px
|
|
|
|
&::-webkit-slider-thumb
|
|
@include elevation-1(false)
|
|
|
|
&:hover
|
|
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
|
|
|
&:is(:active, :focus-visible)
|
|
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
|
|
|
width: 20px
|
|
aspect-ratio: 1
|
|
appearance: none
|
|
border-radius: 50%
|
|
margin-top: -8px
|
|
box-sizing: border-box
|
|
outline: 10px solid transparent
|
|
background: var(--md-sys-color-primary)
|
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
|
|
|