jq-idealform-test/styl/idealradiocheck.styl

100 lines
2.2 KiB
Stylus
Raw Normal View History

2013-10-04 02:45:36 +02:00
// Ideal Radio & Check
//---------------------------------------
form.idealforms
.ideal-radiocheck-label
2013-10-08 11:00:06 +02:00
display: inline-block
2013-10-09 09:24:11 +02:00
padding: .25em 0 !important
2013-10-08 11:00:06 +02:00
cursor: pointer
2013-10-04 02:45:36 +02:00
if group-horizontal
margin: .15em 10px !important
input
float: left
if radiocheck-sprite
2013-10-04 02:45:36 +02:00
.ideal-check, .ideal-radio
float: left
margin-right: 10px !important
width: 20px
height: 20px
background: url(../img/radiocheck.png) 0 0
.ideal-check.focus
background-position: -20px 0
.ideal-check.checked
background-position: -40px 0
.ideal-check.checked.focus
background-position: -60px 0
.ideal-radio
background-position: 0 bottom
.ideal-radio.focus
background-position: -20px bottom
.ideal-radio.checked
background-position: -40px bottom
.ideal-radio.checked.focus
background-position: -60px bottom
else
.ideal-check, .ideal-radio
position: relative
float: left
margin-right: 10px !important
2013-10-09 09:24:11 +02:00
width: radiocheck-size
height: radiocheck-size
background: linear-gradient(white, #eee)
2013-10-09 09:24:11 +02:00
border: 1px solid #aaa
border-radius: 4px
box-shadow: 0 1px 1px rgba(black, .2)
&:after
display: none
2013-10-04 02:45:36 +02:00
.ideal-radio
border-radius: 18px
2013-10-04 02:45:36 +02:00
.ideal-check.focus, .ideal-radio.focus
border-color: valid
box-shadow: 0 1px 1px rgba(black, .2), 0 0 3px rgba(valid, .75)
2013-10-04 02:45:36 +02:00
.ideal-check:after, .ideal-radio:after
content: "×"
2013-10-09 09:24:11 +02:00
font-family: Arial, sans-serif
position: absolute
left: 50%
2013-10-09 09:24:11 +02:00
width: radiocheck-size
margin-left: -(radiocheck-size/2)
line-height: radiocheck-size
text-align: center
2013-10-09 09:24:11 +02:00
font-size: radiocheck-size
color: #888
text-shadow: 1px 1px 0 white
2013-10-04 02:45:36 +02:00
.ideal-radio:after
2013-10-09 09:24:11 +02:00
size = (radiocheck-size/4)
content: ""
height: size
width: size
top: 50%
left: 50%
margin-top: -(size/2)
margin-left: -(size/2)
border-radius: size
background: #888
2013-10-04 02:45:36 +02:00
.ideal-check.checked
.ideal-check.checked.focus
.ideal-radio.checked
.ideal-radio.checked.focus
&:after
display: block