124 lines
2.9 KiB
Sass
124 lines
2.9 KiB
Sass
@use 'sass:math'
|
|
@import '../css/colors-variables'
|
|
|
|
@mixin input-range-thumb-mixin
|
|
@include elevation-1(false)
|
|
|
|
&::after
|
|
content: '1'
|
|
|
|
&:hover
|
|
outline: 10px solid color-mix(in srgb, $primary 8%, transparent)
|
|
|
|
&:is(:active, :focus-visible)
|
|
outline: 10px solid color-mix(in srgb, $primary 12%, transparent)
|
|
|
|
width: 20px
|
|
height: 20px
|
|
appearance: none
|
|
border-radius: 50%
|
|
box-sizing: border-box
|
|
outline: 10px solid transparent
|
|
background: $primary
|
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
div.m3.m3-slider-container
|
|
height: 20px
|
|
display: flex
|
|
position: relative
|
|
align-items: center
|
|
|
|
& > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label
|
|
opacity: 1
|
|
|
|
& > div.m3.m3-slider-label
|
|
@include center(inline-flex)
|
|
|
|
top: -10px
|
|
opacity: 0
|
|
width: 28px
|
|
position: absolute
|
|
pointer-events: none
|
|
height: 14px * math.sqrt(2) + 14px
|
|
|
|
&::before
|
|
top: 0
|
|
content: ""
|
|
width: 28px
|
|
rotate: 45deg
|
|
aspect-ratio: 1
|
|
position: absolute
|
|
border-radius: 14px 14px 0 14px
|
|
background-color: $primary
|
|
|
|
& > label.m3.m3-typography
|
|
display: inline
|
|
font-weight: 500
|
|
margin-top: -5px
|
|
position: absolute
|
|
font-size: 12px !important
|
|
color: $on-primary
|
|
|
|
& > datalist
|
|
display: none
|
|
|
|
input[type="range"].m3.m3-slider
|
|
margin: 0
|
|
appearance: none
|
|
border-radius: 2px
|
|
background: $surface-container-highest
|
|
|
|
&:-moz-any(&)
|
|
height: 4px
|
|
|
|
&:-webkit-any(&)
|
|
background: linear-gradient(to right, $primary 0%, $surface-container-highest 0%)
|
|
|
|
&::-moz-range-track
|
|
height: 4px
|
|
overflow: hidden
|
|
border-radius: 2px
|
|
|
|
&::-moz-range-progress
|
|
height: 4px
|
|
overflow: hidden
|
|
border-radius: 2px
|
|
background-color: $primary
|
|
|
|
&::-moz-range-thumb
|
|
@include input-range-thumb-mixin
|
|
|
|
border: none
|
|
|
|
&::-webkit-slider-container
|
|
height: 4px
|
|
appearance: none
|
|
box-shadow: none
|
|
border-radius: 2px
|
|
min-block-size: 4px
|
|
|
|
&::-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)
|
|
|
|
|
|
|