magic-input
Version:
CSS3 Styles for Checkbox and Radio Button inputs look prettier.
89 lines (85 loc) • 1.98 kB
text/stylus
input-checkbox(){
position relative
width 16px
height 16px
background-clip border-box
appearance none
margin -0.15px 0.6px 0 0
vertical-align text-bottom
border-radius 3px
transition background-color .25s
&:checked{
&:after{
content ''
display block
height 4px
width 7px
border 0 solid #333
border-width 0 0 2px 2px
transform rotate(-45deg)
position absolute
top 3px
left 3px
}
}
&:disabled{
opacity 0.65
}
&:focus{
outline none
box-shadow inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0px 2px rgb(56, 167, 255)
}
}
input-checkbox-color($check-background,$check-border-color,$border-color){
background-color #FFFFFF
border 1px solid #d7d7d7
&:checked{
background-color $check-background
border-color $check-border-color
&:after{
border-color $border-color
}
}
}
input-radio(){
position relative
width 16px
height 16px
background-clip border-box
appearance none
margin -0.15px 0.6px 0 0
vertical-align text-bottom
border-radius 50%
&:disabled{
opacity 0.65
}
&:before{
content ''
display block
height 0px
width 0px
transition width .25s,height .25s
}
&:checked{
&:before{
height 8px
width 8px
border-radius 50%
margin 3px 0 0 3px
}
}
&:focus{
outline none
box-shadow inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0px 2px rgb(56, 167, 255)
}
}
input-radio-color($check-background,$check-border-color){
background-color #FFFFFF
border 1px solid #d7d7d7
&:checked{
border 1px solid $check-border-color
&:before{
background-color $check-border-color
}
}
}