colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
85 lines (76 loc) • 2.03 kB
text/stylus
// Switch
//
// Switch to improve UI of a natural checkbox.
//
// It’s possible to use a button with `role="switch"` ([WAI-aria switch role](https://www.w3.org/TR/wai-aria-1.1/#switch)).
//
// In this case it need some javascript to change `aria-checked` attribute to true or false to switch it.
//
// It can be modified by `.color-*` helpers but constrast with white text must be correct.
//
// .color-default - theme default
//
// Markup: ./switch.twig
//
// Styleguide: Elements.switch
.switch
_fontload($fontstack-base)
font-weight bold
display inline-block
font-size 1em
line-height 1em
margin 0
padding _em(2px)
width _em(62px)
border-radius 20em
height _em(24px)
border 0
color var(--color-base)
background var(--color-fade)
vertical-align middle
text-align center
overflow hidden
user-select none
text-transform uppercase
vertical-align middle
align-items center
transition background-color .1s linear
&-wrap
display flex
justify-content stretch
align-items center
pointer-events none
transition transform .3s
transform translateX(_em(-38px))
&-thumb
display block
background var(--color-base-foreground)
height _em(20px)
min-width _em(20px)
border-radius 20em // excessive size to keep it round
flex 0
order 1
padding _em(3px)
fill transparent
transition fill .2s linear
&-on,
&-off
fs = 12px
font-size _em(fs)
padding 0 _em(3px, fs)
flex 1 0 _em(38px, fs)
&-on
order 0
color var(--color-base-foreground)
&-off
order 2
color var(--color-base)
&[aria-checked='true']
input:checked + &
&.is-checked
background-color currentColor
transition background-color .2s linear .1s
.switch-wrap
transform translateX(0)
.switch-thumb
fill currentColor