Toggle

Atoms · Updated on 20 March 2017

Documentation is WIP, check open issues and start improving!

Toggle component provides a control, which allows to switch between two states — on and off. It can also be disabled.

Documentation

Specifications

// Base

$toggle-border-width                      : unit(0.5);                            // 2px
$toggle-border-radius                     : unit(999);                            // 3996px
$toggle-width                             : unit(9);                              // 36px
$toggle-height                            : unit(6);                              // 24px

$toggle-button-color                      : palette(cl1);
$toggle-button-shadow                     : 0 0 unit(1) rgba(palette(cd1), 0.16);

$toggle-checked-color                     : palette(cp2);
$toggle-border-color                      : palette(cd4);

$toggle-background-color                  : palette(cd3);
$toggle-background-color-active           : palette(cp2);

// States

$toggle-opacity-disabled                  : 0.24;

API

Name	Values	Default
checked	true / false	false
disabled	true / false	false