Merge branch 'reverse' into develop

dist/css/bootstrap2/bootstrap-switch.css

@@ -103,16 +103,37 @@
   font-size: 16px;
   line-height: normal;
 }
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly,
+.bootstrap-switch.bootstrap-switch-indeterminate {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-indeterminate .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-indeterminate .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
+  cursor: default !important;
+}
 .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 .bootstrap-switch-container {
-  margin-left: 0%;
-}
-.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+  -webkit-border-top-left-radius: 0;
+  -moz-border-radius-topleft: 0;
+  border-top-left-radius: 0;
+  -webkit-border-bottom-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+  border-bottom-left-radius: 0;
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius-topright: 4px;
   border-top-right-radius: 4px;
@@ -120,10 +141,13 @@
   -moz-border-radius-bottomright: 4px;
   border-bottom-right-radius: 4px;
 }
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
-  margin-left: -50%;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+  -webkit-border-top-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+  -moz-border-radius-bottomright: 0;
+  border-bottom-right-radius: 0;
   -webkit-border-top-left-radius: 4px;
   -moz-border-radius-topleft: 4px;
   border-top-left-radius: 4px;
@@ -131,27 +155,6 @@
   -moz-border-radius-bottomleft: 4px;
   border-bottom-left-radius: 4px;
 }
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container {
-  margin-left: -25%;
-}
-.bootstrap-switch.bootstrap-switch-disabled,
-.bootstrap-switch.bootstrap-switch-readonly,
-.bootstrap-switch.bootstrap-switch-indeterminate {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-indeterminate .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-indeterminate .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
-  cursor: default !important;
-}
 .bootstrap-switch.bootstrap-switch-focused {
   border-color: rgba(82, 168, 236, 0.8);
   outline: 0;
@@ -160,6 +163,35 @@
   -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.bootstrap-switch-on .bootstrap-switch-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-container {
+  margin-left: 0%;
+}
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+  -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-off .bootstrap-switch-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-container {
+  margin-left: -50%;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+  -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-indeterminate .bootstrap-switch-container {
+  margin-left: -25%;
+}
 .bootstrap-switch .bootstrap-switch-container {
   display: inline-block;
   width: 150%;
@@ -432,22 +464,6 @@
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.active {
   background-color: #e6e6e6 \9;
 }
-.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;
@@ -486,6 +502,22 @@
 .bootstrap-switch .bootstrap-switch-label.active {
   background-color: #cccccc \9;
 }
+.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 input[type='radio'],
 .bootstrap-switch input[type='checkbox'] {
   position: absolute !important;

dist/css/bootstrap3/bootstrap-switch.css

@@ -71,27 +71,6 @@
   font-size: 16px;
   line-height: normal;
 }
-.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-  -webkit-transition: margin-left 0.5s;
-  transition: margin-left 0.5s;
-}
-.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
-  margin-left: 0%;
-}
-.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
-  margin-left: -50%;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container {
-  margin-left: -25%;
-}
 .bootstrap-switch.bootstrap-switch-disabled,
 .bootstrap-switch.bootstrap-switch-readonly,
 .bootstrap-switch.bootstrap-switch-indeterminate {
@@ -110,12 +89,49 @@
 .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
   cursor: default !important;
 }
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+  -webkit-transition: margin-left 0.5s;
+  transition: margin-left 0.5s;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
 .bootstrap-switch.bootstrap-switch-focused {
   border-color: #66afe9;
   outline: 0;
   -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.bootstrap-switch-on .bootstrap-switch-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-container {
+  margin-left: 0%;
+}
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-container {
+  margin-left: -50%;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container {
+  margin-left: -25%;
+}
 .bootstrap-switch .bootstrap-switch-container {
   display: inline-block;
   width: 150%;
@@ -174,14 +190,6 @@
   color: #000;
   background: #eeeeee;
 }
-.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;
@@ -191,6 +199,14 @@
   color: #333333;
   background: #ffffff;
 }
+.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 input[type='radio'],
 .bootstrap-switch input[type='checkbox'] {
   position: absolute !important;

dist/js/bootstrap-switch.js

@@ -68,6 +68,9 @@
               if (_this.options.indeterminate) {
                 classes.push("" + _this.options.baseClass + "-indeterminate");
               }
+              if (_this.options.inverse) {
+                classes.push("" + _this.options.baseClass + "-inverse");
+              }
               if (_this.$element.attr("id")) {
                 classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
               }
@@ -105,7 +108,7 @@
         })(this));
         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.$element.before(this.options.inverse ? this.$off : this.$on).before(this.$label).before(this.options.inverse ? this.$on : this.$off).trigger("init.bootstrapSwitch");
         this._elementHandlers();
         this._handleHandlers();
         this._labelHandlers();
@@ -433,13 +436,15 @@
           })(this),
           "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) {
             return function(e) {
+              var state;
               if (!_this.isLabelDragging) {
                 return;
               }
               e.preventDefault();
               if (_this.isLabelDragged) {
+                state = parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6);
                 _this.isLabelDragged = false;
-                _this.state(parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6));
+                _this.state(_this.options.inverse ? !state : state);
                 if (_this.options.animate) {
                   _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
                 }
@@ -516,6 +521,7 @@
       disabled: false,
       readonly: false,
       indeterminate: false,
+      inverse: false,
       onColor: "primary",
       offColor: "default",
       onText: "ON",

docs/js/main.js

@@ -16,6 +16,7 @@ $(function() {
     }
   });
 
+  // download switch
   $('input[name="download-version"]').on({
     'init.bootstrapSwitch': function() {
       $('#download-' + ($(this).is(':checked') ? '2' : '3')).hide();

src/coffee/bootstrap-switch.coffee

@@ -30,6 +30,7 @@ do ($ = window.jQuery, window) ->
           classes.push "#{@options.baseClass}-disabled" if @options.disabled
           classes.push "#{@options.baseClass}-readonly" if @options.readonly
           classes.push "#{@options.baseClass}-indeterminate" if @options.indeterminate
+          classes.push "#{@options.baseClass}-inverse" if @options.inverse
           classes.push "#{@options.baseClass}-id-#{@$element.attr("id")}" if @$element.attr "id"
           classes.join " "
       @$container = $ "<div>",
@@ -57,9 +58,9 @@ do ($ = window.jQuery, window) ->
 
       # insert handles and label and trigger event
       @$element
-      .before(@$on)
+      .before(if @options.inverse then @$off else @$on)
       .before(@$label)
-      .before(@$off)
+      .before(if @options.inverse then @$on else @$off)
       .trigger "init.bootstrapSwitch"
 
       @_elementHandlers()
@@ -326,8 +327,10 @@ do ($ = window.jQuery, window) ->
           e.preventDefault()
 
           if @isLabelDragged
+            state = parseInt(@$container.css("margin-left"), 10) > -(@$container.width() / 6)
+
             @isLabelDragged = false
-            @state parseInt(@$container.css("margin-left"), 10) > -(@$container.width() / 6)
+            @state if @options.inverse then not state else state
             @$wrapper.addClass "#{@options.baseClass}-animate" if @options.animate
             @$container.css "margin-left", ""
           else
@@ -378,6 +381,7 @@ do ($ = window.jQuery, window) ->
     disabled: false
     readonly: false
     indeterminate: false
+    inverse: false
     onColor: "primary"
     offColor: "default"
     onText: "ON"

src/less/bootstrap2/bootstrap-switch.less

@@ -54,14 +54,48 @@
     }
   }
 
+  &.@{bootstrap-switch-base}-disabled,
+  &.@{bootstrap-switch-base}-readonly,
+  &.@{bootstrap-switch-base}-indeterminate {
+    .opacity(50);
+    cursor: default !important;
+
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
+      cursor: default !important;
+    }
+  }
+
   &.@{bootstrap-switch-base}-animate {
 
     .@{bootstrap-switch-base}-container {
-      .transition(margin-left 0.5s);
+      .transition(margin-left .5s);
+    }
+  }
+
+  &.@{bootstrap-switch-base}-inverse {
+
+    .@{bootstrap-switch-base}-handle-on {
+      .border-left-radius(0);
+      .border-right-radius(4px);
+    }
+
+    .@{bootstrap-switch-base}-handle-off {
+      .border-right-radius(0);
+      .border-left-radius(4px);
     }
   }
 
-  &.@{bootstrap-switch-base}-on {
+  &.@{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)");
+  }
+
+  &.@{bootstrap-switch-base}-on,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-off {
 
     .@{bootstrap-switch-base}-container {
       margin-left: 0%;
@@ -72,7 +106,8 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-off {
+  &.@{bootstrap-switch-base}-off,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-on {
 
     .@{bootstrap-switch-base}-container {
       margin-left: -50%;
@@ -90,26 +125,6 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-disabled,
-  &.@{bootstrap-switch-base}-readonly,
-  &.@{bootstrap-switch-base}-indeterminate {
-    .opacity(50);
-    cursor: default !important;
-
-    .@{bootstrap-switch-base}-handle-on,
-    .@{bootstrap-switch-base}-handle-off,
-    .@{bootstrap-switch-base}-label {
-      cursor: default !important;
-    }
-  }
-
-  &.@{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)");
-  }
-
   .@{bootstrap-switch-base}-container {
     display: inline-block;
     width: 150%;
@@ -162,14 +177,6 @@
     }
   }
 
-  .@{bootstrap-switch-base}-handle-on {
-    .border-left-radius(4px);
-  }
-
-  .@{bootstrap-switch-base}-handle-off {
-    .border-right-radius(4px);
-  }
-
   .@{bootstrap-switch-base}-label {
     text-align: center;
     margin-top: -1px;
@@ -181,6 +188,14 @@
     .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
   }
 
+  .@{bootstrap-switch-base}-handle-on {
+    .border-left-radius(4px);
+  }
+
+  .@{bootstrap-switch-base}-handle-off {
+    .border-right-radius(4px);
+  }
+
   input[type='radio'],
   input[type='checkbox'] {
     position: absolute !important;

src/less/bootstrap3/bootstrap-switch.less

@@ -54,14 +54,48 @@
     }
   }
 
+  &.@{bootstrap-switch-base}-disabled,
+  &.@{bootstrap-switch-base}-readonly,
+  &.@{bootstrap-switch-base}-indeterminate {
+    .opacity(.5);
+    cursor: default !important;
+
+    .@{bootstrap-switch-base}-handle-on,
+    .@{bootstrap-switch-base}-handle-off,
+    .@{bootstrap-switch-base}-label {
+      cursor: default !important;
+    }
+  }
+
   &.@{bootstrap-switch-base}-animate {
 
     .@{bootstrap-switch-base}-container {
-      .transition(margin-left 0.5s);
+      .transition(margin-left .5s);
+    }
+  }
+
+  &.@{bootstrap-switch-base}-inverse {
+
+    .@{bootstrap-switch-base}-handle-on {
+      .border-left-radius(0);
+      .border-right-radius(@border-radius-base - 1);
+    }
+
+    .@{bootstrap-switch-base}-handle-off {
+      .border-right-radius(0);
+      .border-left-radius(@border-radius-base - 1);
     }
   }
 
-  &.@{bootstrap-switch-base}-on {
+  &.@{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}");
+  }
+
+  &.@{bootstrap-switch-base}-on,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-off {
 
     .@{bootstrap-switch-base}-container {
       margin-left: 0%;
@@ -72,7 +106,8 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-off {
+  &.@{bootstrap-switch-base}-off,
+  &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-on {
 
     .@{bootstrap-switch-base}-container {
       margin-left: -50%;
@@ -90,26 +125,6 @@
     }
   }
 
-  &.@{bootstrap-switch-base}-disabled,
-  &.@{bootstrap-switch-base}-readonly,
-  &.@{bootstrap-switch-base}-indeterminate {
-    .opacity(.5);
-    cursor: default !important;
-
-    .@{bootstrap-switch-base}-handle-on,
-    .@{bootstrap-switch-base}-handle-off,
-    .@{bootstrap-switch-base}-label {
-      cursor: default !important;
-    }
-  }
-
-  &.@{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}");
-  }
-
   .@{bootstrap-switch-base}-container {
     display: inline-block;
     width: 150%;
@@ -168,14 +183,6 @@
     }
   }
 
-  .@{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;
@@ -186,6 +193,14 @@
     background: @btn-default-bg;
   }
 
+  .@{bootstrap-switch-base}-handle-on {
+    .border-left-radius(@border-radius-base - 1);
+  }
+
+  .@{bootstrap-switch-base}-handle-off {
+    .border-right-radius(@border-radius-base - 1);
+  }
+
   input[type='radio'],
   input[type='checkbox'] {
     position: absolute !important;

test/bootstrap-switch.js

@@ -68,6 +68,9 @@
               if (_this.options.indeterminate) {
                 classes.push("" + _this.options.baseClass + "-indeterminate");
               }
+              if (_this.options.inverse) {
+                classes.push("" + _this.options.baseClass + "-inverse");
+              }
               if (_this.$element.attr("id")) {
                 classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
               }
@@ -105,7 +108,7 @@
         })(this));
         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.$element.before(this.options.inverse ? this.$off : this.$on).before(this.$label).before(this.options.inverse ? this.$on : this.$off).trigger("init.bootstrapSwitch");
         this._elementHandlers();
         this._handleHandlers();
         this._labelHandlers();
@@ -433,13 +436,15 @@
           })(this),
           "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) {
             return function(e) {
+              var state;
               if (!_this.isLabelDragging) {
                 return;
               }
               e.preventDefault();
               if (_this.isLabelDragged) {
+                state = parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6);
                 _this.isLabelDragged = false;
-                _this.state(parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6));
+                _this.state(_this.options.inverse ? !state : state);
                 if (_this.options.animate) {
                   _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
                 }
@@ -516,6 +521,7 @@
       disabled: false,
       readonly: false,
       indeterminate: false,
+      inverse: false,
       onColor: "primary",
       offColor: "default",
       onText: "ON",