bower install silverhold-switchThis is some css that allow you to style (in CSS3 and HTML5) the input type=checkbox elements as a toggle switch
To enjoy it just link to your template or to your stylesheet the css/style.css file.
You can also use the less file available at less/style.less. With this file you can overide easily customize the Less variables listed below in order to define colors, sizes and more.
Install and manage Toggle Switch using Bower.
$ bower install toggle-switch
In order to enjoy the css designed, you just need an input type=checkbox with the class .toggleSwitch and just after as direct sibling a label element. Don't forget to link the label to you checkbox name or id.
###basic Label
###checked Label
###disabled Label
###checked & disabled Label
The variables are divided in two categories, the modules and the themes. The module variables change the structure and the behave of the component in your template. The theme just change the look without size or layout consequences. Those two kinds of variables are called parameters and you can find them in /less/parameters.
- @toggleSwitch-container_transitionDuration: 100ms
- @toggleSwitch-container_transitionAnimation: ease
- @toggleSwitch-container_width: 50px
- @toggleSwitch-container_height: 30px
- @toggleSwitch-container_borderWidth: 0
- @toggleSwitch-container_backgroundColor: #5e5d5d
- @toggleSwitch-container_backgroundColor-_checked: #e36566
- @toggleSwitch-container_borderColor: transparent
- @toggleSwitch-container_boxShadow: 0
- @toggleSwitch_opacity-_disabled: 0.25
- @toggleSwitch-button_margin: 2px
- @toggleSwitch-button_widthDiff-_transition: 10px
- @toggleSwitch-button-backgroundColor: white
- @toggleSwitch-button_boxShadow: 0 2px 5px 0 fade(#333, 25%)
- @toggleSwitch-button_animationDuration: 500ms;
- @toggleSwitch-label_marginLeft: 10px
- @toggleSwitch-label_marginRight: 0
designed by Clément Menant and Loïc Goyet for AppVentus. with love from Nantes