Toggle

Updated on 02 November 2016

Docs are work in progress, check open issues and see how you can help!

Toggle component provides a ON/OFF switch that user can toggle the state by tapping or by dragging the switch. It has similar properties as Checkbox just slightly different style.




Inverse

Inverse Toggle is used on colored backgrounds, but has the same properties as regular one.




Specifications

// Base

$toggle-border-width                      : unit(0.25);
$toggle-border-radius                     : radius(round);
$toggle-width                             : unit(9);
$toggle-height                            : unit(6);
$toggle-label-margin-left                 : unit(2);

$toggle-checked-color                     : palette(cp1);
$toggle-border-color                      : palette(cg4);
$toggle-background-color                  : rgba(palette(cg1), 0.12);

// States

$toggle-focused-darkness-unit             : 0.02;
$toggle-clicked-darkness-unit             : ($toggle-focused-darkness-unit * 2);
$toggle-disabled-opacity-unit             : ($toggle-focused-darkness-unit * 24);

// Inverse

$toggle-inverse-color                     : palette(cp1);
$toggle-inverse-border-color              : palette(cg9);
$toggle-inverse-background-color          : rgba(palette(cg9), 0.48);
$toggle-inverse-checked-color             : palette(cp1);
$toggle-inverse-checked-border-color      : palette(cg9);
$toggle-inverse-checked-background-color  : palette(cg9);

API

name type default
inverse true / false false
checked true / false false
disabled true / false false
text string ’’