# Toggle Switch

## designed by Clément Menant and Loïc Goyet for AppVentus

This is some css that allow you to style (in CSS3 and HTML5) the `input type=checkbox` elements as a toggle switch

## Dependencies Required

no dependencies required

## Available for

CSS LESS

## Getting Started

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.

In order to avoid the animation behave on load, don't forget to include the `jquery.preload.js` script (located at `/js`), and add and `.preload` class to you body

## Bower usage

Install and manage Toggle Switch using Bower.

`$ bower install toggle-switch`

## Less Variables

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`

- M @toggle-switch-container_width: 50px
- M @toggle-switch-container_height: 30px
- M @toggle-switch-container_borderWidth: 0
- T @toggle-switch-container_backgroundColor: #5e5d5d
- T @toggle-switch-container_backgroundColor-_checked: #e36566
- T @toggle-switch-container_borderColor: transparent
- T @toggle-switch-container_boxShadow: 0
- T @toggle-switch_opacity-_disabled: 0.25
- T @toggle-switch-container_transitionDuration: 100ms
- T @toggle-switch-container_transitionAnimation: ease

- M @toggle-switch-button_margin: 2px
- M @toggle-switch-button_widthDiff-_transition: 10px
- T @toggle-switch-button-backgroundColor: white
- T @toggle-switch-button_boxShadow: 0 2px 5px 0 fade(#333, 25%)
- T @toggle-switch-button_animationDuration: 500ms

- M @toggle-switch-label_marginLeft: 10px
- M @toggle-switch-label_marginRight: 0

Toggle switch normal
Label
`input class=toggle-switch id=example-1 type=checkbox
label for=example-1Labellabel`

Toggle switch checked
Label Checked
`input class=toggle-switch id=toggle-switch-example-2 type=checkbox checked
label for=toggle-switch-example-2Labellabel`

Toggle switch disabled
Label Disabled
`input class=toggle-switch id=toggle-switch-example-3 type=checkbox disabled
label for=toggle-switch-example-3Labellabel`

Toggle switch disabled & checked
Label Disabled
`input class=toggle-switch id=toggle-switch-example-4 type=checkbox disabled checked
label for=toggle-switch-example-4Labellabel`

with love from Nantes