109 lines
2.1 KiB
Stylus
109 lines
2.1 KiB
Stylus
|
// Tâmia © 2013 Artem Sapegin http://sapegin.me
|
|||
|
|
// Checkbox and radio button
|
|||
|
|
// Requires Modernizr.svg
|
|||
|
|
// Dependencies: form
|
|||
|
|
|
|||
|
|
// Bones
|
|||
|
|
|
|||
|
|
.checkbox,
|
|||
|
|
.radio
|
|||
|
|
white-space: nowrap
|
|||
|
|
|
|||
|
|
&__button
|
|||
|
|
// For prehistoric browsers
|
|||
|
|
display: none
|
|||
|
|
|
|||
|
|
&__text
|
|||
|
|
display: inline-block
|
|||
|
|
white-space: normal
|
|||
|
|
|
|||
|
|
&__button,
|
|||
|
|
&__text
|
|||
|
|
vertical-align: middle
|
|||
|
|
|
|||
|
|
|
|||
|
|
&__input:checked,
|
|||
|
|
&__input:not(:checked)
|
|||
|
|
// Input should be hidden but focusable
|
|||
|
|
// display:none and width=height=0 don’t work here
|
|||
|
|
position: absolute
|
|||
|
|
opacity: 0
|
|||
|
|
overflow: hidden
|
|||
|
|
height: 1px
|
|||
|
|
width: 1px
|
|||
|
|
padding: 0
|
|||
|
|
border: 0
|
|||
|
|
|
|||
|
|
&__input:checked + &__label &__button,
|
|||
|
|
&__input:not(:checked) + &__label &__button
|
|||
|
|
display: inline-block
|
|||
|
|
|
|||
|
|
&__input:checked + &__label &__button
|
|||
|
|
position: relative
|
|||
|
|
&:before
|
|||
|
|
content: ""
|
|||
|
|
position: absolute
|
|||
|
|
line-height: 1
|
|||
|
|
|
|||
|
|
&.is-disabled &__input + &__label
|
|||
|
|
opacity: .4
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Default skin
|
|||
|
|
|
|||
|
|
modules_default_skin ?= true
|
|||
|
|
checkbox_default_skin ?= false
|
|||
|
|
|
|||
|
|
if modules_default_skin or checkbox_default_skin
|
|||
|
|
|
|||
|
|
.checkbox,
|
|||
|
|
.radio
|
|||
|
|
&__button,
|
|||
|
|
&__text
|
|||
|
|
line-height: 1.8
|
|||
|
|
font-size: 1em
|
|||
|
|
|
|||
|
|
&__input:checked + &__label &__button,
|
|||
|
|
&__input:not(:checked) + &__label &__button
|
|||
|
|
width: size = 1em
|
|||
|
|
height: size
|
|||
|
|
margin-top: -.15em
|
|||
|
|
margin-right: .15em
|
|||
|
|
border: 1px solid #bbb
|
|||
|
|
border-radius: form_border_radius
|
|||
|
|
box-shadow: inset 0 .1em .2em black(.1)
|
|||
|
|
|
|||
|
|
&__input:checked + &__label &__button
|
|||
|
|
&:before
|
|||
|
|
background-size: 100% 100%
|
|||
|
|
background-repeat: no-repeat
|
|||
|
|
|
|||
|
|
&__input:enabled:active + &__label &__button,
|
|||
|
|
&__input:focus + &__label &__button
|
|||
|
|
background: #f4f4f4
|
|||
|
|
|
|||
|
|
.checkbox
|
|||
|
|
&__input:checked + &__label &__button
|
|||
|
|
&:before
|
|||
|
|
center(.8em, .65em)
|
|||
|
|
background-image: embedurl("check.svg")
|
|||
|
|
.no-svg &:before
|
|||
|
|
margin-top:-.5em;
|
|||
|
|
font-size: 0.8em
|
|||
|
|
font-weight:bold;
|
|||
|
|
color: #444
|
|||
|
|
content: "✓"
|
|||
|
|
|
|||
|
|
.radio
|
|||
|
|
&__input:checked + &__label &__button,
|
|||
|
|
&__input:not(:checked) + &__label &__button
|
|||
|
|
border-radius: 50%
|
|||
|
|
|
|||
|
|
&__input:checked + &__label &__button
|
|||
|
|
&:before
|
|||
|
|
center(.5em)
|
|||
|
|
background-image: embedurl("radio.svg")
|
|||
|
|
.no-svg &:before
|
|||
|
|
background: #444
|
|||
|
|
border-radius: 50%
|