78 lines
1.6 KiB
Stylus
78 lines
1.6 KiB
Stylus
|
// Tâmia © 2013 Artem Sapegin http://sapegin.me
|
||
|
// Switcher
|
||
|
// Dependencies: form
|
||
|
|
||
|
// Bones
|
||
|
|
||
|
.switcher
|
||
|
clearfix()
|
||
|
no-select()
|
||
|
|
||
|
&__label,
|
||
|
&__input
|
||
|
// For prehistoric browsers
|
||
|
vertical-align: text-bottom
|
||
|
padding-right: .5em
|
||
|
font-size: 1em
|
||
|
|
||
|
&__input:checked,
|
||
|
&__input:not(:checked)
|
||
|
position: absolute
|
||
|
opacity: 0
|
||
|
|
||
|
&__input:checked + &__label,
|
||
|
&__input:not(:checked) + &__label
|
||
|
position: relative
|
||
|
float: left
|
||
|
box-sizing: border-box
|
||
|
vertical-align: top
|
||
|
cursor: pointer
|
||
|
z-index: 1
|
||
|
margin-left: -1px
|
||
|
user-select: none
|
||
|
|
||
|
&__label:nth-of-type(1)
|
||
|
margin-left: 0
|
||
|
|
||
|
&__input:checked + &__label
|
||
|
cursor: default
|
||
|
z-index: 2
|
||
|
|
||
|
&.is-disabled
|
||
|
opacity: .4
|
||
|
|
||
|
|
||
|
// Default skin
|
||
|
|
||
|
modules_default_skin ?= true
|
||
|
switcher_default_skin ?= false
|
||
|
|
||
|
if modules_default_skin or switcher_default_skin
|
||
|
.switcher
|
||
|
&__input:checked + &__label,
|
||
|
&__input:not(:checked) + &__label
|
||
|
height: 2em
|
||
|
padding: .5em 1em
|
||
|
background: #f4f4f4
|
||
|
background: linear-gradient(to bottom, #fefefe, #f4f4f4)
|
||
|
border: 1px solid #bbb
|
||
|
line-height: 1
|
||
|
color: #555
|
||
|
transition: border-color .1s ease-in-out, box-shadow .1s ease-in-out
|
||
|
|
||
|
&__label:nth-of-type(1)
|
||
|
border-radius: form_border_radius 0 0 form_border_radius
|
||
|
&__label:nth-last-of-type(1)
|
||
|
border-radius: 0 form_border_radius form_border_radius 0
|
||
|
|
||
|
&__input:checked + &__label
|
||
|
background: #ccc
|
||
|
background: linear-gradient(to bottom, #bbb, #eee)
|
||
|
border-color: #999
|
||
|
box-shadow: inset 0 .1em .2em black(.2)
|
||
|
text-shadow: 0 1px 0 black(.1)
|
||
|
|
||
|
&__input:focus + &__label
|
||
|
border-color: form_focus_color
|
||
|
box-shadow: 0 0 .4em rgba(form_focus_color, .75)
|