scss-components

sass mixin to generate checkbox and radio buttons from a minumim template with svg

Based on Ryan Seddon's solution

• works with ie9+ with graceful degradation in previous browser

@params !WARNING USE UNESCAPED STRINGS

$type

could be checkbox or radio

$dim

the dimension (square) of the component

SVG (base64)

$unchecked

the default state

$checked

checked state

$unchecked-hover

hovered image

$unchecked-disabled

disabled unchecked image

$checked-disabled

disabled checkd image

[$unchecked-active]

OPTIONAL unchecked active image

[$checked-active]

OPTIONAL checked active

[$indeterminate]

OPTIONAL only for checkbox three state image

MINIMAL TEMPLATE

 <span class="cb || rb"><input id type="$type"/><label for="x"></label></span> [<label for="x">text here</label>]

Example

@include components(checkbox, 18px, $cb-unchecked, $cb-checked, $cb-unchecked-hover, $cb-checked-hover, $cb-unchecked-disabled, $cb-checked-disabled, $cb-unchecked-active, $cb-checked-active, $cb-indeterminate);

@include components(radio, 18px, $rb-unchecked, $rb-checked, $rb-unchecked-hover, $rb-checked-hover, $rb-unchecked-disabled, $rb-checked-disabled, $rb-unchecked-active, $rb-checked-active);