48 lines
1.7 KiB
Stylus
48 lines
1.7 KiB
Stylus
@import '../constants'
|
|
|
|
SIZE = (SPACE / 1.25)
|
|
|
|
:local(.root)
|
|
position : relative
|
|
margin-bottom : SPACE
|
|
height : SIZE
|
|
width : WIDTH = (2.5 * SIZE)
|
|
background-color : DIVIDER
|
|
border-radius : SPACE
|
|
transition background-color ANIMATION_DURATION ANIMATION_EASE
|
|
> *
|
|
pointer-events : none
|
|
> span
|
|
position : absolute
|
|
top : -(SIZE / 5)
|
|
right : (SPACE)
|
|
width : (SIZE * 1.35)
|
|
height : (SIZE * 1.35)
|
|
border-radius : 50%
|
|
background-color : WHITE
|
|
transition-property background-color, box-shadow, right
|
|
transition-duration ANIMATION_DURATION
|
|
transition-timing-function ANIMATION_EASE
|
|
> label
|
|
display : block
|
|
margin-left : WIDTH + (SPACE / 2)
|
|
font-size : FONT_SIZE_SMALL
|
|
color : FORM_TEXT
|
|
|
|
// -- Style
|
|
&:not(.disabled)
|
|
cursor : pointer
|
|
> span
|
|
box-shadow : ZDEPTH_SHADOW_1
|
|
&.disabled
|
|
background-color : lighten(DIVIDER, 50%)
|
|
> span
|
|
background-color : DIVIDER
|
|
|
|
&.checked
|
|
background-color : alpha(PRIMARY, 25%)
|
|
> span
|
|
background-color : PRIMARY
|
|
right : 0
|
|
box-shadow : ZDEPTH_SHADOW_2
|