Skip to content

Instantly share code, notes, and snippets.

@artero

artero/_checkbox.sass

Forked from javierartero/_checkbox.sass
Created June 2, 2016 11:31
Show Gist options
  • Save artero/67c4a00c71e92ad206a5a44a3cbe0eda to your computer and use it in GitHub Desktop.
Save artero/67c4a00c71e92ad206a5a44a3cbe0eda to your computer and use it in GitHub Desktop.
Download ZIP
Checkbox
Raw
_checkbox.sass
$checkbox-color-active: $brand-primary !default
$checkbox-color-scale-active: 1.1 !default
$checkbox-box-size: 1.2em !default
$checkbox-box-top: 0.05em !default
$checkbox-box-padding: $checkbox-box-size + .75em !default
.checkbox
input[type="checkbox"]
@extend .sr-only
+ label
display: inline-block
padding-left: $checkbox-box-padding
position: relative
z-index: 1
&:before
@extend .fa
content: ''
display: block
position: absolute
top: $checkbox-box-top
left: $checkbox-box-size/4
width: 1em
height: 1em
font-size: $checkbox-box-size
border: 1px solid
border-radius: 2px
transition: all 0.3s ease-out
transform: scale(1)
&:hover:before
border-color: $checkbox-color-active
color: $checkbox-color-active
transform: scale($checkbox-color-scale-active)
&:focus
+ label:before
border-color: $checkbox-color-active
color: $checkbox-color-active
transform: scale($checkbox-color-scale-active)
&:checked
+ label:before
content: "\f14a" //font-awesome
border: 0
transform: scale(1)
Raw
checkbox.md

What is happening here:

  • The input has to go before the label, at the same level
  • The input is sr-only allow tab focus
  • The id and for attributes need to be well defined so that the label can properly check and uncheck the input when you click on it
  • The label has a :before pseudo-element that mimics the checkbox appearance
  • Using the CSS selector :checked we can style the checked appearance
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment