updated bootstrap2 less source

build/css/bootstrap2/bootstrap-switch.css

@@ -110,16 +110,16 @@
   line-height: normal;
 }
 .switch.switch-animate > div {
-  -webkit-transition: left 0.5s;
-  -moz-transition: left 0.5s;
-  -o-transition: left 0.5s;
-  transition: left 0.5s;
+  -webkit-transition: margin-left 0.5s;
+  -moz-transition: margin-left 0.5s;
+  -o-transition: margin-left 0.5s;
+  transition: margin-left 0.5s;
 }
 .switch.switch-off > div {
-  left: -50%;
+  margin-left: -50%;
 }
 .switch.switch-on > div {
-  left: 0%;
+  margin-left: 0%;
 }
 .switch.switch-disabled,
 .switch.switch-readonly {
@@ -133,18 +133,26 @@
 .switch.switch-readonly > div > label {
   cursor: default !important;
 }
-.switch:focus {
-  border-color: #0088cc;
+.switch.switch-focused {
+  border-color: rgba(82, 168, 236, 0.8);
   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);
+  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);
 }
 .switch > div {
   display: inline-block;
-  width: 150%;
   position: relative;
+  width: 150%;
   top: 0;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
 }
 .switch > div > span,
 .switch > div > label {
@@ -152,7 +160,6 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   cursor: pointer;
-  position: relative;
   display: inline-block !important;
   height: 100%;
   padding-bottom: 4px;
@@ -163,7 +170,7 @@
 .switch > div > span {
   text-align: center;
   z-index: 1;
-  width: 33%;
+  width: 33.333333333%;
 }
 .switch > div > span.switch-handle-on {
   -webkit-border-top-left-radius: 4px;
@@ -392,7 +399,7 @@
   margin-top: -1px;
   margin-bottom: -1px;
   z-index: 100;
-  width: 34%;
+  width: 33.333333333%;
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
   color: #333333;
@@ -427,5 +434,8 @@
 }
 .switch input[type=radio],
 .switch input[type=checkbox] {
-  display: none;
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  z-index: -1;
 }

index.html

@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
     <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">
-    <link rel="stylesheet" href="build/css/bootstrap3/bootstrap-switch.css" />
+    <link rel="stylesheet" href="build/css/bootstrap2/bootstrap-switch.css" />
     <link rel="stylesheet" href="docs/vendor/prism.css">
     <link rel="stylesheet" href="docs/index.css">
     <script>

src/less/bootstrap2/base.less

@@ -1,3 +0,0 @@
-@import "variables";
-@import "mixins";
-@import "bootstrap-switch";

src/less/bootstrap2/bootstrap-switch.less

@@ -62,21 +62,21 @@
   &.switch-animate {
 
     > div {
-      .transition(left 0.5s);
+      .transition(margin-left 0.5s);
     }
   }
 
   &.switch-off {
 
     > div {
-      left: -50%;
+      margin-left: -50%;
     }
   }
 
   &.switch-on {
 
     > div {
-      left: 0%;
+      margin-left: 0%;
     }
   }
 
@@ -91,23 +91,25 @@
     }
   }
 
-  &:focus {
-    border-color: @btnPrimaryBackground;
+  &.switch-focused {
+    border-color: rgba(82, 168, 236, .8);
     outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(red(@btnPrimaryBackground), green(@btnPrimaryBackground), blue(@btnPrimaryBackground), .6)");
+    outline: thin dotted \9;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
   }
 
   > div {
     display: inline-block;
-    width: 150%;
     position: relative;
+    width: 150%;
     top: 0;
+    .translate3d(0, 0, 0);
+    .border-radius(4px);
 
     > span,
     > label {
       .box-sizing(border-box);
       cursor: pointer;
-      position: relative;
       display: inline-block !important;
       height: 100%;
       padding-bottom: 4px;
@@ -119,7 +121,7 @@
     > span {
       text-align: center;
       z-index: 1;
-      width: 33%;
+      width: 33.333333333%;
 
       &.switch-handle-on {
         .border-top-left-radius(4px);
@@ -159,7 +161,7 @@
       margin-top: -1px;
       margin-bottom: -1px;
       z-index: 100;
-      width: 34%;
+      width: 33.333333333%;
       border-left: 1px solid @btnBorder;
       border-right: 1px solid @btnBorder;
       .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
@@ -168,7 +170,10 @@
 
   input[type=radio],
   input[type=checkbox] {
-    display: none;
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    z-index: -1;
   }
 }
 

src/less/bootstrap3/bootstrap-switch.less

@@ -101,7 +101,6 @@
   > div {
     display: inline-block;
     width: 150%;
-    // position: relative;
     top: 0;
     border-radius: @border-radius-base - 1;
     .translate3d(0, 0, 0);
@@ -110,7 +109,6 @@
     > label {
       .box-sizing(border-box);
       cursor: pointer;
-      // position: relative;
       display: inline-block !important;
       height: 100%;
       padding-bottom: 4px;