moved all classes to the wrapper div

build/css/bootstrap2/bootstrap-switch.css

@@ -73,6 +73,13 @@
 .has-switch.switch-mini {
   min-width: 72px;
 }
+.has-switch.switch-mini span,
+.has-switch.switch-mini label {
+  padding-bottom: 4px;
+  padding-top: 4px;
+  font-size: 10px;
+  line-height: 9px;
+}
 .has-switch.switch-mini i.switch-mini-icons {
   height: 1.20em;
   line-height: 9px;
@@ -85,36 +92,57 @@
 .has-switch.switch-small {
   min-width: 80px;
 }
+.has-switch.switch-small span,
+.has-switch.switch-small label {
+  padding-bottom: 3px;
+  padding-top: 3px;
+  font-size: 12px;
+  line-height: 18px;
+}
 .has-switch.switch-large {
   min-width: 120px;
 }
+.has-switch.switch-large span,
+.has-switch.switch-large label {
+  padding-bottom: 9px;
+  padding-top: 9px;
+  font-size: 16px;
+  line-height: normal;
+}
+.has-switch.switch-animate > div {
+  -webkit-transition: left 0.5s;
+  -moz-transition: left 0.5s;
+  -o-transition: left 0.5s;
+  transition: left 0.5s;
+}
+.has-switch.switch-off > div {
+  left: -50%;
+}
+.has-switch.switch-on > div {
+  left: 0%;
+}
 .has-switch.disabled {
   opacity: 0.5;
   filter: alpha(opacity=50);
   cursor: default !important;
 }
-.has-switch.disabled label,
-.has-switch.disabled span {
+.has-switch.disabled span,
+.has-switch.disabled label {
   cursor: default !important;
 }
+.has-switch:focus {
+  border-color: #0088cc;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(red(@btnPrimaryBackground), green(@btnPrimaryBackground), blue(@btnPrimaryBackground), .6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(red(@btnPrimaryBackground), green(@btnPrimaryBackground), blue(@btnPrimaryBackground), .6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(red(@btnPrimaryBackground), green(@btnPrimaryBackground), blue(@btnPrimaryBackground), .6);
+}
 .has-switch > div {
   display: inline-block;
   width: 150%;
   position: relative;
   top: 0;
 }
-.has-switch > div.switch-animate {
-  -webkit-transition: left 0.5s;
-  -moz-transition: left 0.5s;
-  -o-transition: left 0.5s;
-  transition: left 0.5s;
-}
-.has-switch > div.switch-off {
-  left: -50%;
-}
-.has-switch > div.switch-on {
-  left: 0%;
-}
 .has-switch input[type=radio],
 .has-switch input[type=checkbox] {
   display: none;
@@ -126,34 +154,13 @@
   box-sizing: border-box;
   cursor: pointer;
   position: relative;
-  display: inline-block;
+  display: inline-block !important;
   height: 100%;
   padding-bottom: 4px;
   padding-top: 4px;
   font-size: 14px;
   line-height: 20px;
 }
-.has-switch span.switch-mini,
-.has-switch label.switch-mini {
-  padding-bottom: 4px;
-  padding-top: 4px;
-  font-size: 10px;
-  line-height: 9px;
-}
-.has-switch span.switch-small,
-.has-switch label.switch-small {
-  padding-bottom: 3px;
-  padding-top: 3px;
-  font-size: 12px;
-  line-height: 18px;
-}
-.has-switch span.switch-large,
-.has-switch label.switch-large {
-  padding-bottom: 9px;
-  padding-top: 9px;
-  font-size: 16px;
-  line-height: normal;
-}
 .has-switch label {
   text-align: center;
   margin-top: -1px;

build/css/bootstrap3/bootstrap-switch.css

@@ -48,6 +48,13 @@
 .has-switch.switch-mini {
   min-width: 72px;
 }
+.has-switch.switch-mini span,
+.has-switch.switch-mini label {
+  padding-bottom: 4px;
+  padding-top: 4px;
+  font-size: 10px;
+  line-height: 9px;
+}
 .has-switch.switch-mini i.switch-mini-icons {
   height: 1.20em;
   line-height: 9px;
@@ -60,16 +67,40 @@
 .has-switch.switch-small {
   min-width: 80px;
 }
+.has-switch.switch-small span,
+.has-switch.switch-small label {
+  padding-bottom: 3px;
+  padding-top: 3px;
+  font-size: 12px;
+  line-height: 18px;
+}
 .has-switch.switch-large {
   min-width: 120px;
 }
+.has-switch.switch-large span,
+.has-switch.switch-large label {
+  padding-bottom: 9px;
+  padding-top: 9px;
+  font-size: 16px;
+  line-height: normal;
+}
+.has-switch.switch-animate > div {
+  -webkit-transition: left 0.5s;
+  transition: left 0.5s;
+}
+.has-switch.switch-off > div {
+  left: -50%;
+}
+.has-switch.switch-on > div {
+  left: 0%;
+}
 .has-switch.disabled {
   opacity: 0.5;
   filter: alpha(opacity=50);
   cursor: default !important;
 }
-.has-switch.disabled label,
-.has-switch.disabled span {
+.has-switch.disabled span,
+.has-switch.disabled label {
   cursor: default !important;
 }
 .has-switch > div {
@@ -78,16 +109,6 @@
   position: relative;
   top: 0;
 }
-.has-switch > div.switch-animate {
-  -webkit-transition: left 0.5s;
-  transition: left 0.5s;
-}
-.has-switch > div.switch-off {
-  left: -50%;
-}
-.has-switch > div.switch-on {
-  left: 0%;
-}
 .has-switch input[type=radio],
 .has-switch input[type=checkbox] {
   display: none;
@@ -106,27 +127,6 @@
   font-size: 14px;
   line-height: 20px;
 }
-.has-switch span.switch-mini,
-.has-switch label.switch-mini {
-  padding-bottom: 4px;
-  padding-top: 4px;
-  font-size: 10px;
-  line-height: 9px;
-}
-.has-switch span.switch-small,
-.has-switch label.switch-small {
-  padding-bottom: 3px;
-  padding-top: 3px;
-  font-size: 12px;
-  line-height: 18px;
-}
-.has-switch span.switch-large,
-.has-switch label.switch-large {
-  padding-bottom: 9px;
-  padding-top: 9px;
-  font-size: 16px;
-  line-height: normal;
-}
 .has-switch label {
   text-align: center;
   margin-top: -1px;

build/js/bootstrap-switch.js

@@ -81,29 +81,27 @@
               return $label.trigger("mousedown").trigger("mouseup").trigger("click");
             };
             $element.data("bootstrap-switch", true);
-            if ($element.attr("class")) {
-              $.each(["switch-mini", "switch-small", "switch-large"], function(i, cls) {
-                if ($element.attr("class").indexOf(cls) >= 0) {
-                  $switchLeft.addClass(cls);
-                  $label.addClass(cls);
-                  return $switchRight.addClass(cls);
-                }
-              });
-            }
             if ($element.data("on") != null) {
               $switchLeft.addClass("switch-" + $element.data("on"));
             }
             if ($element.data("off") != null) {
               $switchRight.addClass("switch-" + $element.data("off"));
             }
-            $div.data("animated", false);
+            $wrapper.data("animated", false);
             if ($element.data("animated") !== false) {
-              $div.addClass("switch-animate").data("animated", true);
+              $wrapper.addClass("switch-animate").data("animated", true);
             }
             $div = $element.wrap($div).parent();
             $wrapper = $div.wrap($wrapper).parent();
+            if ($element.attr("class")) {
+              $.each(["switch-mini", "switch-small", "switch-large"], function(i, cls) {
+                if ($element.attr("class").indexOf(cls) >= 0) {
+                  return $wrapper.addClass(cls);
+                }
+              });
+            }
             $element.before($switchLeft).before($label).before($switchRight);
-            $div.addClass($element.is(":checked") ? "switch-on" : "switch-off");
+            $wrapper.addClass($element.is(":checked") ? "switch-on" : "switch-off");
             if ($element.is(":disabled") || $element.is("[readonly]")) {
               $wrapper.addClass("disabled");
             }
@@ -117,19 +115,19 @@
             }).on("change", function(e, skip) {
               var isChecked, state;
               isChecked = $element.is(":checked");
-              state = $div.hasClass("switch-off");
+              state = $wrapper.hasClass("switch-off");
               e.preventDefault();
               $div.css("left", "");
               if (state !== isChecked) {
                 return;
               }
               if (isChecked) {
-                $div.removeClass("switch-off").addClass("switch-on");
+                $wrapper.removeClass("switch-off").addClass("switch-on");
               } else {
-                $div.removeClass("switch-on").addClass("switch-off");
+                $wrapper.removeClass("switch-on").addClass("switch-off");
               }
-              if ($div.data("animated") !== false) {
-                $div.addClass("switch-animate");
+              if ($wrapper.data("animated") !== false) {
+                $wrapper.addClass("switch-animate");
               }
               if (typeof skip === "boolean" && skip) {
                 return;
@@ -171,7 +169,7 @@
               moving = false;
               e.preventDefault();
               e.stopImmediatePropagation();
-              $div.removeClass("switch-animate");
+              $wrapper.removeClass("switch-animate");
               if ($element.is(":disabled") || $element.is("[readonly]") || $element.hasClass("radio-no-uncheck")) {
                 return $label.unbind("click");
               }
@@ -336,31 +334,21 @@
           return $element;
         },
         setAnimated: function(value) {
-          var $div, $element;
+          var $element, $wrapper;
           $element = $(this);
-          $div = $element.parent();
+          $wrapper = $element.parents(".has-switch");
           if (value == null) {
             value = false;
           }
-          $div.data("animated", value).attr("data-animated", value)[$div.data("animated") !== false ? "addClass" : "removeClass"]("switch-animate");
+          $wrapper.data("animated", value).attr("data-animated", value)[$wrapper.data("animated") !== false ? "addClass" : "removeClass"]("switch-animate");
           return $element;
         },
         setSizeClass: function(value) {
-          var $element, $label, $switchLeft, $switchRight;
+          var $element, $wrapper;
           $element = $(this);
-          $switchLeft = $element.siblings(".switch-left");
-          $label = $element.siblings("label");
-          $switchRight = $element.siblings(".switch-right");
+          $wrapper = $element.parents(".has-switch");
           $.each(["switch-mini", "switch-small", "switch-large"], function(i, cls) {
-            if (cls !== value) {
-              $switchLeft.removeClass(cls);
-              $label.removeClass(cls);
-              return $switchRight.removeClass(cls);
-            } else {
-              $switchLeft.addClass(cls);
-              $label.addClass(cls);
-              return $switchRight.addClass(cls);
-            }
+            return $wrapper[cls !== value ? "removeClass" : "addClass"](cls);
           });
           return $element;
         },
@@ -387,7 +375,7 @@
           $div.children().not($element).remove();
           $element.unwrap().unwrap().unbind("change");
           if ($form.length) {
-            $form.unbind("reset").removeData("bootstrapSwitch");
+            $form.unbind("reset").removeData("bootstrap-switch");
           }
           return $element;
         }

src/coffee/bootstrap-switch.coffee

@@ -50,30 +50,27 @@
           # set bootstrap-switch flag
           $element.data "bootstrap-switch", true
 
-          # apply class
-          if $element.attr("class")
-            $.each ["switch-mini", "switch-small", "switch-large"], (i, cls) ->
-              if $element.attr("class").indexOf(cls) >= 0
-                $switchLeft.addClass cls
-                $label.addClass cls
-                $switchRight.addClass cls
-
           # override default
           $switchLeft.addClass "switch-" + $element.data("on") if $element.data("on")?
           $switchRight.addClass "switch-" + $element.data("off") if $element.data("off")?
 
           # set animated for div
-          $div.data("animated", false)
-          $div.addClass("switch-animate").data("animated", true) if $element.data("animated") isnt false
+          $wrapper.data "animated", false
+          $wrapper.addClass("switch-animate").data("animated", true) if $element.data("animated") isnt false
 
           # reassign elements after dom modification
           $div = $element.wrap($div).parent()
           $wrapper = $div.wrap($wrapper).parent()
 
+          # apply size class
+          if $element.attr "class"
+            $.each ["switch-mini", "switch-small", "switch-large"], (i, cls) ->
+              $wrapper.addClass cls if $element.attr("class").indexOf(cls) >= 0
+
           # insert label and switch parts
           $element.before($switchLeft).before($label).before($switchRight)
-          $div.addClass(if $element.is(":checked") then "switch-on" else "switch-off")
-          $wrapper.addClass "disabled" if $element.is(":disabled") or $element.is("[readonly]")
+          $wrapper.addClass(if $element.is(":checked") then "switch-on" else "switch-off")
+          $wrapper.addClass("disabled") if $element.is(":disabled") or $element.is("[readonly]")
 
           # element handlers
           $element
@@ -87,19 +84,19 @@
           )
           .on "change", (e, skip) ->
             isChecked = $element.is ":checked"
-            state = $div.hasClass "switch-off"
+            state = $wrapper.hasClass "switch-off"
 
             e.preventDefault()
 
-            $div.css("left", "")
+            $div.css "left", ""
             return unless state is isChecked
 
             if isChecked
-              $div.removeClass("switch-off").addClass "switch-on"
+              $wrapper.removeClass("switch-off").addClass "switch-on"
             else
-              $div.removeClass("switch-on").addClass "switch-off"
+              $wrapper.removeClass("switch-on").addClass "switch-off"
 
-            $div.addClass "switch-animate"  if $div.data("animated") isnt false
+            $wrapper.addClass("switch-animate") if $wrapper.data("animated") isnt false
             return if typeof skip is "boolean" and skip
 
             $element.trigger "switch-change",
@@ -132,7 +129,7 @@
             e.preventDefault()
             e.stopImmediatePropagation()
 
-            $div.removeClass "switch-animate"
+            $wrapper.removeClass "switch-animate"
             return $label.unbind "click" if $element.is(":disabled") or $element.is("[readonly]") or $element.hasClass("radio-no-uncheck")
 
             # other label event handlers
@@ -294,29 +291,20 @@
 
       setAnimated: (value) ->
         $element = $(@)
-        $div = $element.parent()
+        $wrapper = $element.parents(".has-switch")
         value ?= false
 
-        $div
+        $wrapper
         .data("animated", value)
-        .attr("data-animated", value)[if $div.data("animated") isnt false then "addClass" else "removeClass"]("switch-animate")
+        .attr("data-animated", value)[if $wrapper.data("animated") isnt false then "addClass" else "removeClass"]("switch-animate")
         $element
 
       setSizeClass: (value) ->
         $element = $(@)
-        $switchLeft = $element.siblings(".switch-left")
-        $label = $element.siblings("label")
-        $switchRight = $element.siblings(".switch-right")
+        $wrapper = $element.parents(".has-switch")
 
         $.each ["switch-mini", "switch-small", "switch-large"], (i, cls) ->
-          if cls isnt value
-            $switchLeft.removeClass cls
-            $label.removeClass cls
-            $switchRight.removeClass cls
-          else
-            $switchLeft.addClass cls
-            $label.addClass cls
-            $switchRight.addClass cls
+          $wrapper[if cls isnt value then "removeClass" else "addClass"](cls)
         $element
 
       setTextLabel: (value) ->
@@ -341,7 +329,7 @@
 
         $div.children().not($element).remove()
         $element.unwrap().unwrap().unbind "change"
-        $form.unbind("reset").removeData "bootstrapSwitch" if $form.length
+        $form.unbind("reset").removeData "bootstrap-switch" if $form.length
         $element
 
     return methods[method].apply(@, Array::slice.call(arguments, 1)) if methods[method]

src/less/bootstrap2/bootstrap-switch.less

@@ -19,6 +19,14 @@
   &.switch-mini {
     min-width: 72px;
 
+    span,
+    label {
+      padding-bottom: 4px;
+      padding-top: 4px;
+      font-size: 10px;
+      line-height: 9px;
+    }
+
     i.switch-mini-icons {
       height: 1.20em;
       line-height: 9px;
@@ -32,39 +40,70 @@
 
   &.switch-small {
     min-width: 80px;
+
+    span,
+    label {
+      padding-bottom: 3px;
+      padding-top: 3px;
+      font-size: 12px;
+      line-height: 18px;
+    }
   }
 
   &.switch-large {
     min-width: 120px;
+
+    span,
+    label {
+      padding-bottom: 9px;
+      padding-top: 9px;
+      font-size: 16px;
+      line-height: normal;
+    }
+  }
+
+  &.switch-animate {
+
+    > div {
+      .transition(left 0.5s);
+    }
+  }
+
+  &.switch-off {
+
+    > div {
+      left: -50%;
+    }
+  }
+
+  &.switch-on {
+
+    > div {
+      left: 0%;
+    }
   }
 
   &.disabled {
     .opacity(50);
     cursor: default !important;
 
-    label,
-    span {
+    span,
+    label {
       cursor: default !important;
     }
   }
 
+  &:focus {
+    border-color: @btnPrimaryBackground;
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(red(@btnPrimaryBackground), green(@btnPrimaryBackground), blue(@btnPrimaryBackground), .6)");
+  }
+
   > div {
     display: inline-block;
     width: 150%;
     position: relative;
     top: 0;
-
-    &.switch-animate {
-      .transition(left 0.5s);
-    }
-
-    &.switch-off {
-      left: -50%;
-    }
-
-    &.switch-on {
-      left: 0%;
-    }
   }
 
   input[type=radio],
@@ -77,33 +116,12 @@
     .box-sizing(border-box);
     cursor: pointer;
     position: relative;
-    display: inline-block;
+    display: inline-block !important;
     height: 100%;
     padding-bottom: 4px;
     padding-top: 4px;
     font-size: 14px;
     line-height: 20px;
-
-    &.switch-mini {
-      padding-bottom: 4px;
-      padding-top: 4px;
-      font-size: 10px;
-      line-height: 9px;
-    }
-
-    &.switch-small {
-      padding-bottom: 3px;
-      padding-top: 3px;
-      font-size: 12px;
-      line-height: 18px;
-    }
-
-    &.switch-large {
-      padding-bottom: 9px;
-      padding-top: 9px;
-      font-size: 16px;
-      line-height: normal;
-    }
   }
 
   label {
@@ -137,7 +155,8 @@
       .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
     }
 
-    &.switch-primary, &.switch-left {
+    &.switch-primary,
+    &.switch-left {
       .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground);
     }
 

src/less/bootstrap3/bootstrap-switch.less

@@ -20,6 +20,14 @@
   &.switch-mini {
     min-width: 72px;
 
+    span,
+    label {
+      padding-bottom: 4px;
+      padding-top: 4px;
+      font-size: 10px;
+      line-height: 9px;
+    }
+
     i.switch-mini-icons {
       height: 1.20em;
       line-height: 9px;
@@ -33,18 +41,55 @@
 
   &.switch-small {
     min-width: 80px;
+
+    span,
+    label {
+      padding-bottom: 3px;
+      padding-top: 3px;
+      font-size: 12px;
+      line-height: 18px;
+    }
   }
 
   &.switch-large {
     min-width: 120px;
+
+    span,
+    label {
+      padding-bottom: 9px;
+      padding-top: 9px;
+      font-size: 16px;
+      line-height: normal;
+    }
+  }
+
+  &.switch-animate {
+
+    > div {
+      .transition(left 0.5s);
+    }
+  }
+
+  &.switch-off {
+
+    > div {
+      left: -50%;
+    }
+  }
+
+  &.switch-on {
+
+    > div {
+      left: 0%;
+    }
   }
 
   &.disabled {
     .opacity(.5);
     cursor: default !important;
 
-    label,
-    span {
+    span,
+    label {
       cursor: default !important;
     }
   }
@@ -54,18 +99,6 @@
     width: 150%;
     position: relative;
     top: 0;
-
-    &.switch-animate {
-      .transition(left 0.5s);
-    }
-
-    &.switch-off {
-      left: -50%;
-    }
-
-    &.switch-on {
-      left: 0%;
-    }
   }
 
   input[type=radio],
@@ -84,27 +117,6 @@
     padding-top: 4px;
     font-size: 14px;
     line-height: 20px;
-
-    &.switch-mini {
-      padding-bottom: 4px;
-      padding-top: 4px;
-      font-size: 10px;
-      line-height: 9px;
-    }
-
-    &.switch-small {
-      padding-bottom: 3px;
-      padding-top: 3px;
-      font-size: 12px;
-      line-height: 18px;
-    }
-
-    &.switch-large {
-      padding-bottom: 9px;
-      padding-top: 9px;
-      font-size: 16px;
-      line-height: normal;
-    }
   }
 
   label {
@@ -113,10 +125,7 @@
     margin-bottom: -1px;
     z-index: 100;
     width: 34%;
-    // border-left: 1px solid @btnBorder;
-    // border-right: 1px solid @btnBorder;
     background: @btn-default-bg;
-    // .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
 
     i {
       color: #000;