JADE
.container
.control-group
h1 Checkboxes
label.control.control--checkbox First checkbox
input(type='checkbox' checked)
.control__indicator
label.control.control--checkbox Second checkbox
input(type='checkbox')
.control__indicator
label.control.control--checkbox Disabled
input(type='checkbox' disabled)
.control__indicator
label.control.control--checkbox Disabled & checked
input(type='checkbox' disabled checked)
.control__indicator
.control-group
h1 Radio buttons
label.control.control--radio First radio
input(type='radio' name='radio' checked)
.control__indicator
label.control.control--radio Second radio
input(type='radio' name='radio')
.control__indicator
label.control.control--radio Disabled
input(type='radio' name='radio2' disabled)
.control__indicator
label.control.control--radio Disabled & checked
input(type='radio' name='radio2' disabled checked)
.control__indicator
.control-group
h1 Select boxes
.select
select
option First select
option Option
option Option
.select__arrow
.select
select
option Second select
option Option
option Option
.select__arrow
.select
select(disabled)
option Disabled
option Option
option Option
.select__arrow
STYLUS
$color--white = #FFFFFF
$color--black = #000000
$color--light-grey = #E6E6E6
$color--grey = #CCCCCC
$color--dark-grey = #7B7B7B
$color--primary = #048BA8
$color--secondary = #0E647D
html, body
height 100%
body
background $color--light-grey
font-family 'Source Sans Pro', sans-serif
.container
width 100%
height 100%
display flex
flex-wrap wrap
justify-content center
align-items center
h1
font-family 'Alegreya Sans', sans-serif
font-weight 300
margin-top 0
// Box to contain form controls
.control-group
display inline-block
vertical-align top
background $color--white
text-align left
box-shadow 0 1px 2px rgba(0, 0, 0, 0.1)
padding 30px
width 200px
height 210px
margin 10px
// Basic control styles
.control
display block
position relative
padding-left 30px
margin-bottom 15px
cursor pointer
font-size 18px
// Hide default browser input
input
position absolute
z-index -1
opacity 0
// Custom control
.control__indicator
position absolute
top 2px
left 0
height 20px
width 20px
background $color--light-grey
.control--radio &
border-radius 50% // Makes radio buttons circlular
// Hover and focus
.control:hover input ~ &,
.control input:focus ~ &
background $color--grey
// Checked
.control input:checked ~ &
background $color--primary
// Hover when checked
.control:hover input:not([disabled]):checked ~ &,
.control input:checked:focus ~ &
background $color--secondary
// Hide default browser input
.control input:disabled ~ &
background $color--light-grey
opacity 0.6
pointer-events none
&:after
content ''
position absolute
display none // Hide check
.control input:checked ~ &
display block // Show check
// Checkbox tick
.control--checkbox &
left 8px
top 4px
width 3px
height 8px
border solid $color--white
border-width 0 2px 2px 0
transform rotate(45deg)
// Disabled tick colour
.control--checkbox input:disabled ~ &
border-color $color--dark-grey
// Radio button inner circle
.control--radio &
left 7px
top 7px
height 6px
width 6px
border-radius 50%
background $color--white
// Disabled circle colour
.control--radio input:disabled ~ &
background $color--dark-grey
.select
position relative
display inline-block
margin-bottom 15px
width 100%
select
display inline-block
width 100%
cursor pointer
padding 10px 15px
outline 0
border 0
border-radius 0
background $color--light-grey
color $color--dark-grey
appearance none
-webkit-appearance none
-moz-appearance none
&::-ms-expand
display none
&:hover,
&:focus
color $color--black
background $color--grey
&:disabled
opacity 0.5
pointer-events none
.select__arrow
position absolute
top 16px
right 15px
width 0
height 0
pointer-events none
border-style solid
border-width 8px 5px 0 5px
border-color $color--dark-grey transparent transparent transparent
.select select:hover ~ &
.select select:focus ~ &
border-top-color $color--black
.select select:disabled ~ &
border-top-color $color--grey
