made element classes overridable, optimized css

build/css/bootstrap2/bootstrap-switch.css

@@ -73,27 +73,20 @@
 .bootstrap-switch.bootstrap-switch-mini {
   min-width: 71px;
 }
-.bootstrap-switch.bootstrap-switch-mini > div > span,
-.bootstrap-switch.bootstrap-switch-mini > div > label {
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
   padding-bottom: 4px;
   padding-top: 4px;
   font-size: 10px;
   line-height: 9px;
 }
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-mini-icons {
-  height: 1.20em;
-  line-height: 9px;
-  vertical-align: text-top;
-  text-align: center;
-  transform: scale(0.6);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
 .bootstrap-switch.bootstrap-switch-small {
   min-width: 79px;
 }
-.bootstrap-switch.bootstrap-switch-small > div > span,
-.bootstrap-switch.bootstrap-switch-small > div > label {
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
   padding-bottom: 3px;
   padding-top: 3px;
   font-size: 12px;
@@ -102,23 +95,24 @@
 .bootstrap-switch.bootstrap-switch-large {
   min-width: 120px;
 }
-.bootstrap-switch.bootstrap-switch-large > div > span,
-.bootstrap-switch.bootstrap-switch-large > div > label {
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
   padding-bottom: 9px;
   padding-top: 9px;
   font-size: 16px;
   line-height: normal;
 }
-.bootstrap-switch.bootstrap-switch-animate > div {
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
   -webkit-transition: margin-left 0.5s;
   -moz-transition: margin-left 0.5s;
   -o-transition: margin-left 0.5s;
   transition: margin-left 0.5s;
 }
-.bootstrap-switch.bootstrap-switch-on > div {
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
   margin-left: 0%;
 }
-.bootstrap-switch.bootstrap-switch-on > div > label {
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius-topright: 4px;
   border-top-right-radius: 4px;
@@ -126,10 +120,10 @@
   -moz-border-radius-bottomright: 4px;
   border-bottom-right-radius: 4px;
 }
-.bootstrap-switch.bootstrap-switch-off > div {
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
   margin-left: -50%;
 }
-.bootstrap-switch.bootstrap-switch-off > div > label {
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
   -webkit-border-top-left-radius: 4px;
   -moz-border-radius-topleft: 4px;
   border-top-left-radius: 4px;
@@ -143,21 +137,23 @@
   filter: alpha(opacity=50);
   cursor: default !important;
 }
-.bootstrap-switch.bootstrap-switch-disabled > div > span,
-.bootstrap-switch.bootstrap-switch-readonly > div > span,
-.bootstrap-switch.bootstrap-switch-disabled > div > label,
-.bootstrap-switch.bootstrap-switch-readonly > div > label {
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label {
   cursor: default !important;
 }
 .bootstrap-switch.bootstrap-switch-focused {
   border-color: rgba(82, 168, 236, 0.8);
   outline: 0;
   outline: thin dotted \9;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
 }
-.bootstrap-switch > div {
+.bootstrap-switch .bootstrap-switch-container {
   display: inline-block;
   width: 150%;
   top: 0;
@@ -169,8 +165,9 @@
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-.bootstrap-switch > div > span,
-.bootstrap-switch > div > label {
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off,
+.bootstrap-switch .bootstrap-switch-label {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -182,28 +179,14 @@
   font-size: 14px;
   line-height: 20px;
 }
-.bootstrap-switch > div > span {
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off {
   text-align: center;
   z-index: 1;
   width: 33.333333333%;
 }
-.bootstrap-switch > div > span.bootstrap-switch-handle-on {
-  -webkit-border-top-left-radius: 4px;
-  -moz-border-radius-topleft: 4px;
-  border-top-left-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  border-bottom-left-radius: 4px;
-}
-.bootstrap-switch > div > span.bootstrap-switch-handle-off {
-  -webkit-border-top-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  border-bottom-right-radius: 4px;
-}
-.bootstrap-switch > div > span.bootstrap-switch-primary {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #005fcc;
@@ -220,21 +203,30 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.bootstrap-switch > div > span.bootstrap-switch-primary:hover,
-.bootstrap-switch > div > span.bootstrap-switch-primary:focus,
-.bootstrap-switch > div > span.bootstrap-switch-primary:active,
-.bootstrap-switch > div > span.bootstrap-switch-primary.active,
-.bootstrap-switch > div > span.bootstrap-switch-primary.disabled,
-.bootstrap-switch > div > span.bootstrap-switch-primary[disabled] {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:hover,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:hover,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:focus,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:focus,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.disabled,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.disabled,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary[disabled],
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary[disabled] {
   color: #ffffff;
   background-color: #0088cc;
   *background-color: #0077b3;
 }
-.bootstrap-switch > div > span.bootstrap-switch-primary:active,
-.bootstrap-switch > div > span.bootstrap-switch-primary.active {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active {
   background-color: #006699 \9;
 }
-.bootstrap-switch > div > span.bootstrap-switch-info {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #41a7c5;
@@ -251,21 +243,30 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.bootstrap-switch > div > span.bootstrap-switch-info:hover,
-.bootstrap-switch > div > span.bootstrap-switch-info:focus,
-.bootstrap-switch > div > span.bootstrap-switch-info:active,
-.bootstrap-switch > div > span.bootstrap-switch-info.active,
-.bootstrap-switch > div > span.bootstrap-switch-info.disabled,
-.bootstrap-switch > div > span.bootstrap-switch-info[disabled] {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:hover,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:hover,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:focus,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:focus,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.disabled,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.disabled,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info[disabled],
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info[disabled] {
   color: #ffffff;
   background-color: #5bc0de;
   *background-color: #46b8da;
 }
-.bootstrap-switch > div > span.bootstrap-switch-info:active,
-.bootstrap-switch > div > span.bootstrap-switch-info.active {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active {
   background-color: #31b0d5 \9;
 }
-.bootstrap-switch > div > span.bootstrap-switch-success {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #58b058;
@@ -282,21 +283,30 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.bootstrap-switch > div > span.bootstrap-switch-success:hover,
-.bootstrap-switch > div > span.bootstrap-switch-success:focus,
-.bootstrap-switch > div > span.bootstrap-switch-success:active,
-.bootstrap-switch > div > span.bootstrap-switch-success.active,
-.bootstrap-switch > div > span.bootstrap-switch-success.disabled,
-.bootstrap-switch > div > span.bootstrap-switch-success[disabled] {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:hover,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:focus,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:focus,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.disabled,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.disabled,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success[disabled],
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success[disabled] {
   color: #ffffff;
   background-color: #62c462;
   *background-color: #4fbd4f;
 }
-.bootstrap-switch > div > span.bootstrap-switch-success:active,
-.bootstrap-switch > div > span.bootstrap-switch-success.active {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active {
   background-color: #42b142 \9;
 }
-.bootstrap-switch > div > span.bootstrap-switch-warning {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #f9a123;
@@ -313,21 +323,30 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.bootstrap-switch > div > span.bootstrap-switch-warning:hover,
-.bootstrap-switch > div > span.bootstrap-switch-warning:focus,
-.bootstrap-switch > div > span.bootstrap-switch-warning:active,
-.bootstrap-switch > div > span.bootstrap-switch-warning.active,
-.bootstrap-switch > div > span.bootstrap-switch-warning.disabled,
-.bootstrap-switch > div > span.bootstrap-switch-warning[disabled] {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:hover,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:hover,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:focus,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:focus,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.disabled,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.disabled,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning[disabled],
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning[disabled] {
   color: #ffffff;
   background-color: #fbb450;
   *background-color: #faa937;
 }
-.bootstrap-switch > div > span.bootstrap-switch-warning:active,
-.bootstrap-switch > div > span.bootstrap-switch-warning.active {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active {
   background-color: #fa9f1e \9;
 }
-.bootstrap-switch > div > span.bootstrap-switch-danger {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #d14641;
@@ -344,21 +363,30 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.bootstrap-switch > div > span.bootstrap-switch-danger:hover,
-.bootstrap-switch > div > span.bootstrap-switch-danger:focus,
-.bootstrap-switch > div > span.bootstrap-switch-danger:active,
-.bootstrap-switch > div > span.bootstrap-switch-danger.active,
-.bootstrap-switch > div > span.bootstrap-switch-danger.disabled,
-.bootstrap-switch > div > span.bootstrap-switch-danger[disabled] {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:hover,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:hover,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:focus,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:focus,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.disabled,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.disabled,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger[disabled],
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger[disabled] {
   color: #ffffff;
   background-color: #ee5f5b;
   *background-color: #ec4844;
 }
-.bootstrap-switch > div > span.bootstrap-switch-danger:active,
-.bootstrap-switch > div > span.bootstrap-switch-danger.active {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active {
   background-color: #e9322d \9;
 }
-.bootstrap-switch > div > span.bootstrap-switch-default {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
   color: #333333;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   background-color: #f0f0f0;
@@ -375,21 +403,45 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.bootstrap-switch > div > span.bootstrap-switch-default:hover,
-.bootstrap-switch > div > span.bootstrap-switch-default:focus,
-.bootstrap-switch > div > span.bootstrap-switch-default:active,
-.bootstrap-switch > div > span.bootstrap-switch-default.active,
-.bootstrap-switch > div > span.bootstrap-switch-default.disabled,
-.bootstrap-switch > div > span.bootstrap-switch-default[disabled] {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:hover,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:hover,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:focus,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:focus,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.disabled,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.disabled,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default[disabled],
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default[disabled] {
   color: #333333;
   background-color: #ffffff;
   *background-color: #f2f2f2;
 }
-.bootstrap-switch > div > span.bootstrap-switch-default:active,
-.bootstrap-switch > div > span.bootstrap-switch-default.active {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:active,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.active,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.active {
   background-color: #e6e6e6 \9;
 }
-.bootstrap-switch > div > label {
+.bootstrap-switch .bootstrap-switch-handle-on {
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+  border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  border-bottom-left-radius: 4px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+  -webkit-border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  border-top-right-radius: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  border-bottom-right-radius: 4px;
+}
+.bootstrap-switch .bootstrap-switch-label {
   text-align: center;
   margin-top: -1px;
   margin-bottom: -1px;
@@ -413,18 +465,18 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.bootstrap-switch > div > label:hover,
-.bootstrap-switch > div > label:focus,
-.bootstrap-switch > div > label:active,
-.bootstrap-switch > div > label.active,
-.bootstrap-switch > div > label.disabled,
-.bootstrap-switch > div > label[disabled] {
+.bootstrap-switch .bootstrap-switch-label:hover,
+.bootstrap-switch .bootstrap-switch-label:focus,
+.bootstrap-switch .bootstrap-switch-label:active,
+.bootstrap-switch .bootstrap-switch-label.active,
+.bootstrap-switch .bootstrap-switch-label.disabled,
+.bootstrap-switch .bootstrap-switch-label[disabled] {
   color: #333333;
   background-color: #e6e6e6;
   *background-color: #d9d9d9;
 }
-.bootstrap-switch > div > label:active,
-.bootstrap-switch > div > label.active {
+.bootstrap-switch .bootstrap-switch-label:active,
+.bootstrap-switch .bootstrap-switch-label.active {
   background-color: #cccccc \9;
 }
 .bootstrap-switch input[type='radio'],

build/css/bootstrap3/bootstrap-switch.css

@@ -41,27 +41,20 @@
 .bootstrap-switch.bootstrap-switch-mini {
   min-width: 71px;
 }
-.bootstrap-switch.bootstrap-switch-mini > div > span,
-.bootstrap-switch.bootstrap-switch-mini > div > label {
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
   padding-bottom: 4px;
   padding-top: 4px;
   font-size: 10px;
   line-height: 9px;
 }
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-mini-icons {
-  height: 1.20em;
-  line-height: 9px;
-  vertical-align: text-top;
-  text-align: center;
-  transform: scale(0.6);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
 .bootstrap-switch.bootstrap-switch-small {
   min-width: 79px;
 }
-.bootstrap-switch.bootstrap-switch-small > div > span,
-.bootstrap-switch.bootstrap-switch-small > div > label {
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
   padding-bottom: 3px;
   padding-top: 3px;
   font-size: 12px;
@@ -70,28 +63,29 @@
 .bootstrap-switch.bootstrap-switch-large {
   min-width: 120px;
 }
-.bootstrap-switch.bootstrap-switch-large > div > span,
-.bootstrap-switch.bootstrap-switch-large > div > label {
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
   padding-bottom: 9px;
   padding-top: 9px;
   font-size: 16px;
   line-height: normal;
 }
-.bootstrap-switch.bootstrap-switch-animate > div {
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
   -webkit-transition: margin-left 0.5s;
   transition: margin-left 0.5s;
 }
-.bootstrap-switch.bootstrap-switch-on > div {
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
   margin-left: 0%;
 }
-.bootstrap-switch.bootstrap-switch-on > div > label {
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
-.bootstrap-switch.bootstrap-switch-off > div {
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
   margin-left: -50%;
 }
-.bootstrap-switch.bootstrap-switch-off > div > label {
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -101,10 +95,12 @@
   filter: alpha(opacity=50);
   cursor: default !important;
 }
-.bootstrap-switch.bootstrap-switch-disabled > div > span,
-.bootstrap-switch.bootstrap-switch-readonly > div > span,
-.bootstrap-switch.bootstrap-switch-disabled > div > label,
-.bootstrap-switch.bootstrap-switch-readonly > div > label {
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label {
   cursor: default !important;
 }
 .bootstrap-switch.bootstrap-switch-focused {
@@ -113,7 +109,7 @@
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
 }
-.bootstrap-switch > div {
+.bootstrap-switch .bootstrap-switch-container {
   display: inline-block;
   width: 150%;
   top: 0;
@@ -121,8 +117,9 @@
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-.bootstrap-switch > div > span,
-.bootstrap-switch > div > label {
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off,
+.bootstrap-switch .bootstrap-switch-label {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -134,47 +131,51 @@
   font-size: 14px;
   line-height: 20px;
 }
-.bootstrap-switch > div > span {
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off {
   text-align: center;
   z-index: 1;
   width: 33.333333333%;
 }
-.bootstrap-switch > div > span.bootstrap-switch-handle-on {
-  color: #f00;
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.bootstrap-switch > div > span.bootstrap-switch-handle-off {
-  color: #000;
-  background: #eeeeee;
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.bootstrap-switch > div > span.bootstrap-switch-primary {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
   color: #fff;
   background: #428bca;
 }
-.bootstrap-switch > div > span.bootstrap-switch-info {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
   color: #fff;
   background: #5bc0de;
 }
-.bootstrap-switch > div > span.bootstrap-switch-success {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
   color: #fff;
   background: #5cb85c;
 }
-.bootstrap-switch > div > span.bootstrap-switch-warning {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
   background: #f0ad4e;
   color: #fff;
 }
-.bootstrap-switch > div > span.bootstrap-switch-danger {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
   color: #fff;
   background: #d9534f;
 }
-.bootstrap-switch > div > span.bootstrap-switch-default {
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
   color: #000;
   background: #eeeeee;
 }
-.bootstrap-switch > div > label {
+.bootstrap-switch .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch .bootstrap-switch-label {
   text-align: center;
   margin-top: -1px;
   margin-bottom: -1px;

build/js/bootstrap-switch.js

@@ -46,37 +46,41 @@
           labelText: this.$element.data("label-text")
         });
         this.$on = $("<span>", {
-          "class": "" + this.name + "-handle-on " + this.name + "-" + this.options.onColor,
+          "class": "" + this.options.classes.base + "-" + this.options.classes.handleOn + " " + this.options.classes.base + "-" + this.options.onColor,
           html: this.options.onText
         });
         this.$off = $("<span>", {
-          "class": "" + this.name + "-handle-off " + this.name + "-" + this.options.offColor,
+          "class": "" + this.options.classes.base + "-" + this.options.classes.handleOff + " " + this.options.classes.base + "-" + this.options.offColor,
           html: this.options.offText
         });
         this.$label = $("<label>", {
+          "class": "" + this.options.classes.base + "-" + this.options.classes.label,
           "for": this.$element.attr("id"),
           html: this.options.labelText
         });
         this.$wrapper = $("<div>");
+        this.$container = $("<div>", {
+          "class": "" + this.options.classes.base + "-" + this.options.classes.container
+        });
         this.$wrapper.addClass((function(_this) {
           return function() {
             var classes;
-            classes = ["" + _this.name];
-            classes.push(_this.options.state ? "" + _this.name + "-on" : "" + _this.name + "-off");
+            classes = ["" + _this.options.classes.base];
+            classes.push(_this.options.state ? "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.on : "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.off);
             if (_this.options.size != null) {
-              classes.push("" + _this.name + "-" + _this.options.size);
+              classes.push("" + _this.options.classes.base + "-" + _this.options.size);
             }
             if (_this.options.animate) {
-              classes.push("" + _this.name + "-animate");
+              classes.push("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.animate);
             }
             if (_this.options.disabled) {
-              classes.push("" + _this.name + "-disabled");
+              classes.push("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.disabled);
             }
             if (_this.options.readonly) {
-              classes.push("" + _this.name + "-readonly");
+              classes.push("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.readonly);
             }
             if (_this.$element.attr("id")) {
-              classes.push("" + _this.name + "-id-" + (_this.$element.attr("id")));
+              classes.push("" + _this.options.classes.base + "-id-" + (_this.$element.attr("id")));
             }
             return classes.join(" ");
           };
@@ -91,8 +95,9 @@
             return _this.options.onSwitchChange.apply(_this.$element[0], arguments);
           };
         })(this));
-        this.$div = this.$element.wrap($("<div>")).parent();
-        this.$wrapper = this.$div.wrap(this.$wrapper).parent();
+        console.log(this.$container);
+        this.$container = this.$element.wrap(this.$container).parent();
+        this.$wrapper = this.$container.wrap(this.$wrapper).parent();
         this.$element.before(this.$on).before(this.$label).before(this.$off).trigger("init.bootstrapSwitch");
         this._elementHandlers();
         this._handleHandlers();
@@ -126,9 +131,9 @@
           return this.options.size;
         }
         if (this.options.size != null) {
-          this.$wrapper.removeClass("" + this.name + "-" + this.options.size);
+          this.$wrapper.removeClass("" + this.options.classes.base + "-" + this.options.size);
         }
-        this.$wrapper.addClass("" + this.name + "-" + value);
+        this.$wrapper.addClass("" + this.options.classes.base + "-" + value);
         this.options.size = value;
         return this.$element;
       };
@@ -138,7 +143,7 @@
           return this.options.animate;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-animate");
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.classes.base + "-" + this.options.classes.modifiers.animate);
         this.options.animate = value;
         return this.$element;
       };
@@ -148,7 +153,7 @@
           return this.options.disabled;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-disabled");
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.classes.base + "-" + this.options.classes.modifiers.disabled);
         this.$element.prop("disabled", value);
         this.options.disabled = value;
         return this.$element;
@@ -156,7 +161,7 @@
 
       BootstrapSwitch.prototype.toggleDisabled = function() {
         this.$element.prop("disabled", !this.options.disabled);
-        this.$wrapper.toggleClass("" + this.name + "-disabled");
+        this.$wrapper.toggleClass("" + this.options.classes.base + "-" + this.options.classes.modifiers.disabled);
         this.options.disabled = !this.options.disabled;
         return this.$element;
       };
@@ -166,7 +171,7 @@
           return this.options.readonly;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-readonly");
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.classes.base + "-" + this.options.classes.modifiers.readonly);
         this.$element.prop("readonly", value);
         this.options.readonly = value;
         return this.$element;
@@ -174,7 +179,7 @@
 
       BootstrapSwitch.prototype.toggleReadonly = function() {
         this.$element.prop("readonly", !this.options.readonly);
-        this.$wrapper.toggleClass("" + this.name + "-readonly");
+        this.$wrapper.toggleClass("" + this.options.classes.base + "-" + this.options.classes.modifiers.readonly);
         this.options.readonly = !this.options.readonly;
         return this.$element;
       };
@@ -186,9 +191,9 @@
           return color;
         }
         if (color != null) {
-          this.$on.removeClass("" + this.name + "-" + color);
+          this.$on.removeClass("" + this.options.classes.base + "-" + color);
         }
-        this.$on.addClass("" + this.name + "-" + value);
+        this.$on.addClass("" + this.options.classes.base + "-" + value);
         this.options.onColor = value;
         return this.$element;
       };
@@ -200,9 +205,9 @@
           return color;
         }
         if (color != null) {
-          this.$off.removeClass("" + this.name + "-" + color);
+          this.$off.removeClass("" + this.options.classes.base + "-" + color);
         }
-        this.$off.addClass("" + this.name + "-" + value);
+        this.$off.addClass("" + this.options.classes.base + "-" + value);
         this.options.offColor = value;
         return this.$element;
       };
@@ -240,7 +245,7 @@
         if ($form.length) {
           $form.off("reset.bootstrapSwitch").removeData("bootstrap-switch");
         }
-        this.$div.children().not(this.$element).remove();
+        this.$container.children().not(this.$element).remove();
         this.$element.unwrap().unwrap().off(".bootstrapSwitch").removeData("bootstrap-switch");
         return this.$element;
       };
@@ -258,7 +263,7 @@
                 return;
               }
               _this.options.state = checked;
-              _this.$wrapper.removeClass(checked ? "" + _this.name + "-off" : "" + _this.name + "-on").addClass(checked ? "" + _this.name + "-on" : "" + _this.name + "-off");
+              _this.$wrapper.removeClass(checked ? "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.off : "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.on).addClass(checked ? "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.on : "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.off);
               if (!skip) {
                 if (_this.$element.is(":radio")) {
                   $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
@@ -272,7 +277,7 @@
               e.preventDefault();
               e.stopPropagation();
               e.stopImmediatePropagation();
-              return _this.$wrapper.addClass("" + _this.name + "-focused");
+              return _this.$wrapper.addClass("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.focused);
             };
           })(this),
           "blur.bootstrapSwitch": (function(_this) {
@@ -280,7 +285,7 @@
               e.preventDefault();
               e.stopPropagation();
               e.stopImmediatePropagation();
-              return _this.$wrapper.removeClass("" + _this.name + "-focused");
+              return _this.$wrapper.removeClass("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.focused);
             };
           })(this),
           "keydown.bootstrapSwitch": (function(_this) {
@@ -341,7 +346,7 @@
               } else if (percent > right) {
                 percent = right;
               }
-              _this.$div.css("margin-left", "" + (percent - right) + "%");
+              _this.$container.css("margin-left", "" + (percent - right) + "%");
               return _this.$element.trigger("focus.bootstrapSwitch");
             };
           })(this),
@@ -352,7 +357,7 @@
               }
               _this.drag = true;
               if (_this.options.animate) {
-                _this.$wrapper.removeClass("" + _this.name + "-animate");
+                _this.$wrapper.removeClass("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.animate);
               }
               return _this.$element.trigger("focus.bootstrapSwitch");
             };
@@ -363,10 +368,10 @@
                 return;
               }
               _this.drag = false;
-              _this.$element.prop("checked", parseInt(_this.$div.css("margin-left"), 10) > -25).trigger("change.bootstrapSwitch");
-              _this.$div.css("margin-left", "");
+              _this.$element.prop("checked", parseInt(_this.$container.css("margin-left"), 10) > -25).trigger("change.bootstrapSwitch");
+              _this.$container.css("margin-left", "");
               if (_this.options.animate) {
-                return _this.$wrapper.addClass("" + _this.name + "-animate");
+                return _this.$wrapper.addClass("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.animate);
               }
             };
           })(this),
@@ -435,6 +440,22 @@
       onText: "ON",
       offText: "OFF",
       labelText: "&nbsp;",
+      classes: {
+        base: "bootstrap-switch",
+        container: "container",
+        wrapper: "wrapper",
+        handleOn: "handle-on",
+        handleOff: "handle-off",
+        label: "label",
+        modifiers: {
+          on: "on",
+          off: "off",
+          focused: "focused",
+          animate: "animate",
+          disabled: "disabled",
+          readonly: "readonly"
+        }
+      },
       onInit: function() {},
       onSwitchChange: function() {}
     };

docs/index.css

@@ -4,7 +4,7 @@ body {
   padding-bottom: 50px;
 }
 
-#title {
+.title {
   font-size: 5em;
   letter-spacing: -2px;
 }
@@ -13,14 +13,10 @@ body {
   text-align: left;
 }
 
-#main {
+.header {
   text-align: center;
 }
 
-.section {
-  padding-top: 20px;
-}
-
 #github {
   display: none;
   position: fixed;

docs/index.jade

@@ -25,7 +25,7 @@ html(lang='en')
         s.parentNode.insertBefore(ga, s);
       })();
   body
-    header.navbar.navbar-default.navbar-fixed-top.header(role='banner')
+    header.navbar.navbar-default.navbar-fixed-top.top(role='banner')
       .container
         .navbar-header
           button.navbar-toggle(type='button', data-toggle='collapse', data-target='#collapse')
@@ -66,11 +66,15 @@ html(lang='en')
             li: a(href='#examples') Examples
             li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
 
-
     .container
-      h1#title Bootstrap Switch
-      p.lead Turn checkboxes and radio buttons in toggle switches.
-      a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip', class='btn btn-lg btn-primary') Download Bootstrap Switch 3 Release Candidate
+      .header
+        h1.title Bootstrap Switch
+        p.lead Turn checkboxes and radio buttons in toggle switches.
+        p Choose your version:
+        p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3 RC', data-off-text='2.0.1')
+        p
+          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip', id='download-3', class='btn btn-lg btn-primary') Download 3 (Release candidate)
+          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1
 
       #getting-started
         h1.page-header Getting Started
@@ -154,19 +158,19 @@ html(lang='en')
               td String
               td Text of the center handle of the switch
               td String
-              td ' '
+              td ' '
             tr
               td onInit
               td Function
               td Callback function to execute on initialization
               td Function
-              td function() {}
+              td function(event) {}
             tr
               td onSwitchChange
               td Function
               td Callback function to execute on switch state change
               td Function
-              td function() {}
+              td function(event, state) {}
 
       #methods
         h1.page-header Methods
@@ -198,6 +202,16 @@ html(lang='en')
 
       #events
         h1.page-header Events
+
+        p You can register to the emitted events as follow:
+        pre
+          code
+            | $('inputy[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+            |   console.log(this); // DOM element
+            |   console.log(event); // jQuery event
+            |   console.log(state); // true | false
+            | });
+
         table.table.table-bordered.table-striped.table-responsive
           thead
             tr
@@ -233,10 +247,6 @@ html(lang='en')
                  
                 button(type='button', id='toggle-state-switch-button', class='btn btn-default') Toggle State
 
-          .row
-            .col-sm-6
-              input(type='checkbox', id='toggle-state-switch' checked)
-
         <p>Working on this...</p>
 
     script(src='docs/lib/js/jquery.min.js')

docs/index.js

@@ -2,6 +2,17 @@ $(function() {
   // initialize highlight.js
   hljs.initHighlightingOnLoad();
 
+  $('input[name="download-version"]').on({
+    'init.bootstrapSwitch': function(e) {
+      var state = $(this).is(':checked');
+      $('#download-' + (state ? '2' : '3')).hide();
+    },
+    'switchChange.bootstrapSwitch': function(e, state) {
+      $('#download-3')[state ? 'show' : 'hide']();
+      $('#download-2')[state ? 'hide' : 'show']();
+    }
+  });
+
   // initialize all the inputs
   $('input[type="checkbox"],[type="radio"]').not('#create-switch').not('#events-switch').bootstrapSwitch();
 

gulpfile.js

@@ -102,5 +102,6 @@ gulp.task('watch', ['connect'], function() {
 
 });
 
-gulp.task('build', ['coffee', 'less-bootstrap2', 'less-bootstrap3']);
+gulp.task('less', ['less-bootstrap2', 'less-bootstrap3']);
+gulp.task('build', ['coffee', 'less']);
 gulp.task('default', ['connect', 'build', 'docs', 'watch']);

src/coffee/bootstrap-switch.coffee

@@ -18,35 +18,40 @@ do ($ = window.jQuery, window) ->
         offText: @$element.data "off-text"
         labelText: @$element.data "label-text"
       @$on = $ "<span>",
-        class: "#{@name}-handle-on #{@name}-#{@options.onColor}"
+        class: "#{@options.classes.base}-#{@options.classes.handleOn} #{@options.classes.base}-#{@options.onColor}"
         html: @options.onText
       @$off = $ "<span>",
-        class: "#{@name}-handle-off #{@name}-#{@options.offColor}"
+        class: "#{@options.classes.base}-#{@options.classes.handleOff} #{@options.classes.base}-#{@options.offColor}"
         html: @options.offText
       @$label = $ "<label>",
+        class: "#{@options.classes.base}-#{@options.classes.label}"
         for: @$element.attr "id"
         html: @options.labelText
       @$wrapper = $ "<div>"
+      @$container = $ "<div>",
+        class: "#{@options.classes.base}-#{@options.classes.container}"
 
       # add wrapper classes
       @$wrapper.addClass =>
-        classes = ["#{@name}"]
-
-        classes.push if @options.state then "#{@name}-on" else "#{@name}-off"
-        classes.push "#{@name}-#{@options.size}" if @options.size?
-        classes.push "#{@name}-animate" if @options.animate
-        classes.push "#{@name}-disabled" if @options.disabled
-        classes.push "#{@name}-readonly" if @options.readonly
-        classes.push "#{@name}-id-#{@$element.attr("id")}" if @$element.attr "id"
+        classes = ["#{@options.classes.base}"]
+
+        classes.push if @options.state then "#{@options.classes.base}-#{@options.classes.modifiers.on}" else "#{@options.classes.base}-#{@options.classes.modifiers.off}"
+        classes.push "#{@options.classes.base}-#{@options.size}" if @options.size?
+        classes.push "#{@options.classes.base}-#{@options.classes.modifiers.animate}" if @options.animate
+        classes.push "#{@options.classes.base}-#{@options.classes.modifiers.disabled}" if @options.disabled
+        classes.push "#{@options.classes.base}-#{@options.classes.modifiers.readonly}" if @options.readonly
+        classes.push "#{@options.classes.base}-id-#{@$element.attr("id")}" if @$element.attr "id"
         classes.join " "
 
       # set up events
       @$element.on "init.bootstrapSwitch", => @options.onInit.apply @$element[0], arguments
       @$element.on "switchChange.bootstrapSwitch", => @options.onSwitchChange.apply @$element[0], arguments
 
+      console.log @$container
+
       # reassign elements after dom modification
-      @$div = @$element.wrap($("<div>")).parent()
-      @$wrapper = @$div.wrap(@$wrapper).parent()
+      @$container = @$element.wrap(@$container).parent()
+      @$wrapper = @$container.wrap(@$wrapper).parent()
 
       # insert handles and label and trigger event
       @$element
@@ -81,8 +86,8 @@ do ($ = window.jQuery, window) ->
     size: (value) ->
       return @options.size if typeof value is "undefined"
 
-      @$wrapper.removeClass "#{@name}-#{@options.size}" if @options.size?
-      @$wrapper.addClass "#{@name}-#{value}"
+      @$wrapper.removeClass "#{@options.classes.base}-#{@options.size}" if @options.size?
+      @$wrapper.addClass "#{@options.classes.base}-#{value}"
       @options.size = value
       @$element
 
@@ -91,7 +96,7 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@name}-animate")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.classes.base}-#{@options.classes.modifiers.animate}")
       @options.animate = value
       @$element
 
@@ -100,14 +105,14 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@name}-disabled")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.classes.base}-#{@options.classes.modifiers.disabled}")
       @$element.prop "disabled", value
       @options.disabled = value
       @$element
 
     toggleDisabled: ->
       @$element.prop "disabled", not @options.disabled
-      @$wrapper.toggleClass "#{@name}-disabled"
+      @$wrapper.toggleClass "#{@options.classes.base}-#{@options.classes.modifiers.disabled}"
       @options.disabled = not @options.disabled
       @$element
 
@@ -116,14 +121,14 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@name}-readonly")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.classes.base}-#{@options.classes.modifiers.readonly}")
       @$element.prop "readonly", value
       @options.readonly = value
       @$element
 
     toggleReadonly: ->
       @$element.prop "readonly", not @options.readonly
-      @$wrapper.toggleClass "#{@name}-readonly"
+      @$wrapper.toggleClass "#{@options.classes.base}-#{@options.classes.modifiers.readonly}"
       @options.readonly = not @options.readonly
       @$element
 
@@ -132,8 +137,8 @@ do ($ = window.jQuery, window) ->
 
       return color if typeof value is "undefined"
 
-      @$on.removeClass "#{@name}-#{color}" if color?
-      @$on.addClass "#{@name}-#{value}"
+      @$on.removeClass "#{@options.classes.base}-#{color}" if color?
+      @$on.addClass "#{@options.classes.base}-#{value}"
       @options.onColor = value
       @$element
 
@@ -142,8 +147,8 @@ do ($ = window.jQuery, window) ->
 
       return color if typeof value is "undefined"
 
-      @$off.removeClass "#{@name}-#{color}" if color?
-      @$off.addClass "#{@name}-#{value}"
+      @$off.removeClass "#{@options.classes.base}-#{color}" if color?
+      @$off.addClass "#{@options.classes.base}-#{value}"
       @options.offColor = value
       @$element
 
@@ -172,7 +177,7 @@ do ($ = window.jQuery, window) ->
       $form = @$element.closest "form"
 
       $form.off("reset.bootstrapSwitch").removeData "bootstrap-switch" if $form.length
-      @$div.children().not(@$element).remove()
+      @$container.children().not(@$element).remove()
       @$element.unwrap().unwrap().off(".bootstrapSwitch").removeData "bootstrap-switch"
       @$element
 
@@ -189,8 +194,8 @@ do ($ = window.jQuery, window) ->
 
           @options.state = checked
           @$wrapper
-          .removeClass(if checked then "#{@name}-off" else "#{@name}-on")
-          .addClass if checked then "#{@name}-on" else "#{@name}-off"
+          .removeClass(if checked then "#{@options.classes.base}-#{@options.classes.modifiers.off}" else "#{@options.classes.base}-#{@options.classes.modifiers.on}")
+          .addClass if checked then "#{@options.classes.base}-#{@options.classes.modifiers.on}" else "#{@options.classes.base}-#{@options.classes.modifiers.off}"
 
           unless skip
             $("[name='#{@$element.attr('name')}']").not(@$element).prop("checked", false).trigger "change.bootstrapSwitch", true if @$element.is ":radio"
@@ -201,14 +206,14 @@ do ($ = window.jQuery, window) ->
           e.stopPropagation()
           e.stopImmediatePropagation()
 
-          @$wrapper.addClass "#{@name}-focused"
+          @$wrapper.addClass "#{@options.classes.base}-#{@options.classes.modifiers.focused}"
 
         "blur.bootstrapSwitch": (e) =>
           e.preventDefault()
           e.stopPropagation()
           e.stopImmediatePropagation()
 
-          @$wrapper.removeClass "#{@name}-focused"
+          @$wrapper.removeClass "#{@options.classes.base}-#{@options.classes.modifiers.focused}"
 
         "keydown.bootstrapSwitch": (e) =>
           return if not e.which or @options.disabled or @options.readonly
@@ -256,23 +261,23 @@ do ($ = window.jQuery, window) ->
           else if percent > right
             percent = right
 
-          @$div.css "margin-left", "#{percent - right}%"
+          @$container.css "margin-left", "#{percent - right}%"
           @$element.trigger "focus.bootstrapSwitch"
 
         "mousedown.bootstrapSwitch": (e) =>
           return if @drag or @options.disabled or @options.readonly
 
           @drag = true
-          @$wrapper.removeClass "#{@name}-animate" if @options.animate
+          @$wrapper.removeClass "#{@options.classes.base}-#{@options.classes.modifiers.animate}" if @options.animate
           @$element.trigger "focus.bootstrapSwitch"
 
         "mouseup.bootstrapSwitch": (e) =>
           return unless @drag
 
           @drag = false
-          @$element.prop("checked", (parseInt(@$div.css("margin-left"), 10) > -25)).trigger "change.bootstrapSwitch"
-          @$div.css "margin-left", ""
-          @$wrapper.addClass "#{@name}-animate" if @options.animate
+          @$element.prop("checked", (parseInt(@$container.css("margin-left"), 10) > -25)).trigger "change.bootstrapSwitch"
+          @$container.css "margin-left", ""
+          @$wrapper.addClass "#{@options.classes.base}-#{@options.classes.modifiers.animate}" if @options.animate
 
         "mouseleave.bootstrapSwitch": (e) =>
           @$label.trigger "mouseup.bootstrapSwitch"
@@ -321,6 +326,20 @@ do ($ = window.jQuery, window) ->
     onText: "ON"
     offText: "OFF"
     labelText: "&nbsp;"
+    classes:
+      base: "bootstrap-switch"
+      container: "container"
+      wrapper: "wrapper"
+      handleOn: "handle-on"
+      handleOff: "handle-off"
+      label: "label"
+      modifiers:
+        on: "on"
+        off: "off"
+        focused: "focused"
+        animate: "animate"
+        disabled: "disabled"
+        readonly: "readonly"
     onInit: ->
     onSwitchChange: ->
 

src/less/bootstrap2/bootstrap-switch.less

@@ -1,6 +1,6 @@
-@bootstrap-switch-name: bootstrap-switch;
+@bootstrap-switch-base: bootstrap-switch;
 
-.@{bootstrap-switch-name} {
+.@{bootstrap-switch-base} {
   display: inline-block;
   cursor: pointer;
   .border-radius(5px);
@@ -15,33 +15,25 @@
   min-width: 100px;
   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
-  &.@{bootstrap-switch-name}-mini {
+  &.@{bootstrap-switch-base}-mini {
     min-width: 71px;
 
-    > div > span,
-    > div > label {
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
       padding-bottom: 4px;
       padding-top: 4px;
       font-size: 10px;
       line-height: 9px;
     }
-
-    .@{bootstrap-switch-name}-mini-icons {
-      height: 1.20em;
-      line-height: 9px;
-      vertical-align: text-top;
-      text-align: center;
-      transform: scale(0.6);
-      margin-top: -1px;
-      margin-bottom: -1px;
-    }
   }
 
-  &.@{bootstrap-switch-name}-small {
+  &.@{bootstrap-switch-base}-small {
     min-width: 79px;
 
-    > div > span,
-    > div > label {
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
       padding-bottom: 3px;
       padding-top: 3px;
       font-size: 12px;
@@ -49,11 +41,12 @@
     }
   }
 
-  &.@{bootstrap-switch-name}-large {
+  &.@{bootstrap-switch-base}-large {
     min-width: 120px;
 
-    > div > span,
-    > div > label {
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
       padding-bottom: 9px;
       padding-top: 9px;
       font-size: 16px;
@@ -61,120 +54,123 @@
     }
   }
 
-  &.@{bootstrap-switch-name}-animate {
+  &.@{bootstrap-switch-base}-animate {
 
-    > div {
+    .@{bootstrap-switch-base}-container {
       .transition(margin-left 0.5s);
     }
   }
 
-  &.@{bootstrap-switch-name}-on {
+  &.@{bootstrap-switch-base}-on {
 
-    > div {
+    .@{bootstrap-switch-base}-container {
       margin-left: 0%;
+    }
 
-      > label {
-        .border-right-radius(4px);
-      }
+    .@{bootstrap-switch-base}-label {
+      .border-right-radius(4px);
     }
   }
 
-  &.@{bootstrap-switch-name}-off {
+  &.@{bootstrap-switch-base}-off {
 
-    > div {
+    .@{bootstrap-switch-base}-container {
       margin-left: -50%;
+    }
 
-      > label {
-        .border-left-radius(4px);
-      }
+    .@{bootstrap-switch-base}-label {
+      .border-left-radius(4px);
     }
   }
 
-  &.@{bootstrap-switch-name}-disabled,
-  &.@{bootstrap-switch-name}-readonly {
+  &.@{bootstrap-switch-base}-disabled,
+  &.@{bootstrap-switch-base}-readonly {
     .opacity(50);
     cursor: default !important;
 
-    > div > span,
-    > div > label {
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
       cursor: default !important;
     }
   }
 
-  &.@{bootstrap-switch-name}-focused {
+  &.@{bootstrap-switch-base}-focused {
     border-color: rgba(82, 168, 236, .8);
     outline: 0;
     outline: thin dotted \9;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6)");
   }
 
-  > div {
+  .@{bootstrap-switch-base}-container {
     display: inline-block;
     width: 150%;
     top: 0;
     .border-radius(4px);
     .translate3d(0, 0, 0);
+  }
 
-    > span,
-    > label {
-      .box-sizing(border-box);
-      cursor: pointer;
-      display: inline-block !important;
-      height: 100%;
-      padding-bottom: 4px;
-      padding-top: 4px;
-      font-size: 14px;
-      line-height: 20px;
-    }
+  .@{bootstrap-switch-base}-handle-on,
+  .@{bootstrap-switch-base}-handle-off,
+  .@{bootstrap-switch-base}-label {
+    .box-sizing(border-box);
+    cursor: pointer;
+    display: inline-block !important;
+    height: 100%;
+    padding-bottom: 4px;
+    padding-top: 4px;
+    font-size: 14px;
+    line-height: 20px;
+  }
 
-    > span {
-      text-align: center;
-      z-index: 1;
-      width: 33.333333333%;
+  .@{bootstrap-switch-base}-handle-on,
+  .@{bootstrap-switch-base}-handle-off {
+    text-align: center;
+    z-index: 1;
+    width: 33.333333333%;
 
-      &.@{bootstrap-switch-name}-handle-on {
-        .border-left-radius(4px);
-      }
+    &.@{bootstrap-switch-base}-primary {
+      .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground);
+    }
 
-      &.@{bootstrap-switch-name}-handle-off {
-        .border-right-radius(4px);
-      }
+    &.@{bootstrap-switch-base}-info {
+      .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground);
+    }
 
-      &.@{bootstrap-switch-name}-primary {
-        .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground);
-      }
+    &.@{bootstrap-switch-base}-success {
+      .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground);
+    }
 
-      &.@{bootstrap-switch-name}-info {
-        .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground);
-      }
+    &.@{bootstrap-switch-base}-warning {
+      .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground);
+    }
 
-      &.@{bootstrap-switch-name}-success {
-        .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground);
-      }
+    &.@{bootstrap-switch-base}-danger {
+      .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground);
+    }
 
-      &.@{bootstrap-switch-name}-warning {
-        .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground);
-      }
+    &.@{bootstrap-switch-base}-default {
+      .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
+    }
+  }
 
-      &.@{bootstrap-switch-name}-danger {
-        .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground);
-      }
+  .@{bootstrap-switch-base}-handle-on {
+    .border-left-radius(4px);
+  }
 
-      &.@{bootstrap-switch-name}-default {
-        .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
-      }
-    }
+  .@{bootstrap-switch-base}-handle-off {
+    .border-right-radius(4px);
+  }
 
-    > label {
-      text-align: center;
-      margin-top: -1px;
-      margin-bottom: -1px;
-      z-index: 100;
-      width: 33.333333333%;
-      border-left: 1px solid @btnBorder;
-      border-right: 1px solid @btnBorder;
-      .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
-    }
+  .@{bootstrap-switch-base}-label {
+    text-align: center;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    z-index: 100;
+    width: 33.333333333%;
+    border-left: 1px solid @btnBorder;
+    border-right: 1px solid @btnBorder;
+    .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
   }
 
   input[type='radio'],
@@ -186,4 +182,3 @@
     z-index: -1;
   }
 }
-

src/less/bootstrap3/bootstrap-switch.less

@@ -1,6 +1,6 @@
-@bootstrap-switch-name: bootstrap-switch;
+@bootstrap-switch-base: bootstrap-switch;
 
-.@{bootstrap-switch-name} {
+.@{bootstrap-switch-base} {
   display: inline-block;
   cursor: pointer;
   border-radius: @border-radius-base;
@@ -15,33 +15,25 @@
   min-width: 100px;
   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
-  &.@{bootstrap-switch-name}-mini {
+  &.@{bootstrap-switch-base}-mini {
     min-width: 71px;
 
-    > div > span,
-    > div > label {
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
       padding-bottom: 4px;
       padding-top: 4px;
       font-size: 10px;
       line-height: 9px;
     }
-
-    .@{bootstrap-switch-name}-mini-icons {
-      height: 1.20em;
-      line-height: 9px;
-      vertical-align: text-top;
-      text-align: center;
-      transform: scale(0.6);
-      margin-top: -1px;
-      margin-bottom: -1px;
-    }
   }
 
-  &.@{bootstrap-switch-name}-small {
+  &.@{bootstrap-switch-base}-small {
     min-width: 79px;
 
-    > div > span,
-    > div > label {
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
       padding-bottom: 3px;
       padding-top: 3px;
       font-size: 12px;
@@ -49,11 +41,12 @@
     }
   }
 
-  &.@{bootstrap-switch-name}-large {
+  &.@{bootstrap-switch-base}-large {
     min-width: 120px;
 
-    > div > span,
-    > div > label {
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
       padding-bottom: 9px;
       padding-top: 9px;
       font-size: 16px;
@@ -61,128 +54,128 @@
     }
   }
 
-  &.@{bootstrap-switch-name}-animate {
+  &.@{bootstrap-switch-base}-animate {
 
-    > div {
+    .@{bootstrap-switch-base}-container {
       .transition(margin-left 0.5s);
     }
   }
 
-  &.@{bootstrap-switch-name}-on {
+  &.@{bootstrap-switch-base}-on {
 
-    > div {
+    .@{bootstrap-switch-base}-container {
       margin-left: 0%;
+    }
 
-      > label {
-        .border-right-radius(@border-radius-base - 1);
-      }
+    .@{bootstrap-switch-base}-label {
+      .border-right-radius(@border-radius-base - 1);
     }
   }
 
-  &.@{bootstrap-switch-name}-off {
+  &.@{bootstrap-switch-base}-off {
 
-    > div {
+    .@{bootstrap-switch-base}-container {
       margin-left: -50%;
+    }
 
-      > label {
-        .border-left-radius(@border-radius-base - 1);
-      }
+    .@{bootstrap-switch-base}-label {
+      .border-left-radius(@border-radius-base - 1);
     }
   }
 
-  &.@{bootstrap-switch-name}-disabled,
-  &.@{bootstrap-switch-name}-readonly {
+  &.@{bootstrap-switch-base}-disabled,
+  &.@{bootstrap-switch-base}-readonly {
     .opacity(.5);
     cursor: default !important;
 
-    > div > span,
-    > div > label {
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
       cursor: default !important;
     }
   }
 
-  &.@{bootstrap-switch-name}-focused {
+  &.@{bootstrap-switch-base}-focused {
     @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
     border-color: @input-border-focus;
     outline: 0;
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
   }
 
-  > div {
+  .@{bootstrap-switch-base}-container {
     display: inline-block;
     width: 150%;
     top: 0;
     border-radius: @border-radius-base;
     .translate3d(0, 0, 0);
+  }
 
-    > span,
-    > label {
-      .box-sizing(border-box);
-      cursor: pointer;
-      display: inline-block !important;
-      height: 100%;
-      padding-bottom: 4px;
-      padding-top: 4px;
-      font-size: 14px;
-      line-height: 20px;
+  .@{bootstrap-switch-base}-handle-on,
+  .@{bootstrap-switch-base}-handle-off,
+  .@{bootstrap-switch-base}-label {
+    .box-sizing(border-box);
+    cursor: pointer;
+    display: inline-block !important;
+    height: 100%;
+    padding-bottom: 4px;
+    padding-top: 4px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .@{bootstrap-switch-base}-handle-on,
+  .@{bootstrap-switch-base}-handle-off {
+    text-align: center;
+    z-index: 1;
+    width: 33.333333333%;
+
+    &.@{bootstrap-switch-base}-primary {
+      color: #fff;
+      background: @btn-primary-bg;
     }
 
-    > span {
-      text-align: center;
-      z-index: 1;
-      width: 33.333333333%;
-
-      &.@{bootstrap-switch-name}-handle-on {
-        color: #f00;
-        .border-left-radius(@border-radius-base - 1);
-      }
-
-      &.@{bootstrap-switch-name}-handle-off {
-        color: #000;
-        background: @gray-lighter;
-        .border-right-radius(@border-radius-base - 1);
-      }
-
-      &.@{bootstrap-switch-name}-primary {
-        color: #fff;
-        background: @btn-primary-bg;
-      }
-
-      &.@{bootstrap-switch-name}-info {
-        color: #fff;
-        background: @btn-info-bg;
-      }
-
-      &.@{bootstrap-switch-name}-success {
-        color: #fff;
-        background: @btn-success-bg;
-      }
-
-      &.@{bootstrap-switch-name}-warning {
-        background: @btn-warning-bg;
-        color: #fff;
-      }
-
-      &.@{bootstrap-switch-name}-danger {
-        color: #fff;
-        background: @btn-danger-bg;
-      }
-
-      &.@{bootstrap-switch-name}-default {
-        color: #000;
-        background: @gray-lighter;
-      }
+    &.@{bootstrap-switch-base}-info {
+      color: #fff;
+      background: @btn-info-bg;
     }
 
-    > label {
-      text-align: center;
-      margin-top: -1px;
-      margin-bottom: -1px;
-      z-index: 100;
-      width: 33.333333333%;
-      color: @btn-default-color;
-      background: @btn-default-bg;
+    &.@{bootstrap-switch-base}-success {
+      color: #fff;
+      background: @btn-success-bg;
     }
+
+    &.@{bootstrap-switch-base}-warning {
+      background: @btn-warning-bg;
+      color: #fff;
+    }
+
+    &.@{bootstrap-switch-base}-danger {
+      color: #fff;
+      background: @btn-danger-bg;
+    }
+
+    &.@{bootstrap-switch-base}-default {
+      color: #000;
+      background: @gray-lighter;
+    }
+  }
+
+  .@{bootstrap-switch-base}-handle-on {
+    .border-left-radius(@border-radius-base - 1);
+  }
+
+  .@{bootstrap-switch-base}-handle-off {
+    .border-right-radius(@border-radius-base - 1);
+  }
+
+  .@{bootstrap-switch-base}-label {
+    text-align: center;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    z-index: 100;
+    width: 33.333333333%;
+    color: @btn-default-color;
+    background: @btn-default-bg;
   }
 
   input[type='radio'],