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)
|