breaking changes on methods names, implemented focusable wrapper div, updated docs, renamed deactivated in disabled

build/css/bootstrap2/bootstrap-switch.css

@@ -65,6 +65,10 @@
   user-select: none;
   vertical-align: middle;
   min-width: 100px;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
 .has-switch.switch-mini {
   min-width: 72px;
@@ -84,13 +88,13 @@
 .has-switch.switch-large {
   min-width: 120px;
 }
-.has-switch.deactivate {
+.has-switch.disabled {
   opacity: 0.5;
   filter: alpha(opacity=50);
   cursor: default !important;
 }
-.has-switch.deactivate label,
-.has-switch.deactivate span {
+.has-switch.disabled label,
+.has-switch.disabled span {
   cursor: default !important;
 }
 .has-switch > div {

build/css/bootstrap3/bootstrap-switch.css

@@ -36,6 +36,14 @@
   user-select: none;
   vertical-align: middle;
   min-width: 100px;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+.has-switch:focus {
+  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);
 }
 .has-switch.switch-mini {
   min-width: 72px;
@@ -55,13 +63,13 @@
 .has-switch.switch-large {
   min-width: 120px;
 }
-.has-switch.deactivate {
+.has-switch.disabled {
   opacity: 0.5;
   filter: alpha(opacity=50);
   cursor: default !important;
 }
-.has-switch.deactivate label,
-.has-switch.deactivate span {
+.has-switch.disabled label,
+.has-switch.disabled span {
   cursor: default !important;
 }
 .has-switch > div {

build/js/bootstrap-switch.js

@@ -26,7 +26,7 @@
       methods = {
         init: function() {
           return this.each(function() {
-            var $div, $element, $form, $label, $switchLeft, $switchRight, $wrapper, changeStatus;
+            var $div, $element, $form, $label, $switchLeft, $switchRight, $wrapper, changeState;
             $element = $(this);
             $switchLeft = $("<span>", {
               "class": "switch-left",
@@ -70,13 +70,15 @@
             });
             $div = $("<div>");
             $wrapper = $("<div>", {
-              "class": "has-switch"
+              "class": "has-switch",
+              tabindex: 0
             });
             $form = $element.closest("form");
-            changeStatus = function() {
-              if (!$label.hasClass("label-change-switch")) {
-                return $label.trigger("mousedown").trigger("mouseup").trigger("click");
+            changeState = function() {
+              if ($label.hasClass("label-change-switch")) {
+                return;
               }
+              return $label.trigger("mousedown").trigger("mouseup").trigger("click");
             };
             $element.data("bootstrap-switch", true);
             if ($element.attr("class")) {
@@ -102,8 +104,8 @@
             $wrapper = $div.wrap($wrapper).parent();
             $element.before($switchLeft).before($label).before($switchRight);
             $div.addClass($element.is(":checked") ? "switch-on" : "switch-off");
-            if ($element.is(":disabled")) {
-              $wrapper.addClass("deactivate");
+            if ($element.is(":disabled") || $element.is("[readonly]")) {
+              $wrapper.addClass("disabled");
             }
             $element.on("keydown", function(e) {
               if (e.keyCode !== 32) {
@@ -111,11 +113,11 @@
               }
               e.stopImmediatePropagation();
               e.preventDefault();
-              return changeStatus($(e.target).find("span:first"));
+              return changeState();
             }).on("change", function(e, skip) {
               var isChecked, state;
               isChecked = $element.is(":checked");
-              state = $div.is(".switch-off");
+              state = $div.hasClass("switch-off");
               e.preventDefault();
               $div.css("left", "");
               if (state !== isChecked) {
@@ -137,11 +139,32 @@
                 value: isChecked
               });
             });
+            $wrapper.on("keydown", function(e) {
+              if (!e.which || $element.is(":disabled") || $element.is("[readonly]")) {
+                return;
+              }
+              switch (e.which) {
+                case 32:
+                  e.preventDefault();
+                  return changeState();
+                case 37:
+                  e.preventDefault();
+                  if ($element.is(":checked")) {
+                    return changeState();
+                  }
+                  break;
+                case 39:
+                  e.preventDefault();
+                  if (!$element.is(":checked")) {
+                    return changeState();
+                  }
+              }
+            });
             $switchLeft.on("click", function() {
-              return changeStatus();
+              return changeState();
             });
             $switchRight.on("click", function() {
-              return changeStatus();
+              return changeState();
             });
             $label.on("mousedown touchstart", function(e) {
               var moving;
@@ -149,7 +172,7 @@
               e.preventDefault();
               e.stopImmediatePropagation();
               $div.removeClass("switch-animate");
-              if ($element.is(":disabled") || $element.hasClass("radio-no-uncheck")) {
+              if ($element.is(":disabled") || $element.is("[readonly]") || $element.hasClass("radio-no-uncheck")) {
                 return $label.unbind("click");
               }
               return $label.on("mousemove touchmove", function(e) {
@@ -200,28 +223,50 @@
             }
           });
         },
-        toggleActivation: function() {
+        setDisabled: function(disabled) {
+          var $element, $wrapper;
+          $element = $(this);
+          $wrapper = $element.parents(".has-switch");
+          if (disabled) {
+            $wrapper.addClass("disabled");
+            $element.prop("disabled", true);
+          } else {
+            $wrapper.removeClass("disabled");
+            $element.prop("disabled", false);
+          }
+          return $element;
+        },
+        toggleDisabled: function() {
           var $element;
           $element = $(this);
-          $element.prop("disabled", !$element.is(":disabled")).parents(".has-switch").toggleClass("deactivate");
+          $element.prop("disabled", !$element.is(":disabled")).parents(".has-switch").toggleClass("disabled");
           return $element;
         },
-        isActive: function() {
-          return !$(this).is(":disabled");
+        isDisabled: function() {
+          return $(this).is(":disabled");
         },
-        setActive: function(active) {
+        setReadOnly: function(readonly) {
           var $element, $wrapper;
           $element = $(this);
           $wrapper = $element.parents(".has-switch");
-          if (active) {
-            $wrapper.removeClass("deactivate");
-            $element.prop("disabled", false);
+          if (readonly) {
+            $wrapper.addClass("disabled");
+            $element.prop("readonly", true);
           } else {
-            $wrapper.addClass("deactivate");
-            $element.prop("disabled", true);
+            $wrapper.removeClass("disabled");
+            $element.prop("readonly", false);
           }
           return $element;
         },
+        toggleReadOnly: function() {
+          var $element;
+          $element = $(this);
+          $element.prop("readonly", !$element.is("[readonly]")).parents(".has-switch").toggleClass("disabled");
+          return $element;
+        },
+        isReadOnly: function() {
+          return $(this).is("[readonly]");
+        },
         toggleState: function(skip) {
           var $element;
           $element = $(this);
@@ -331,7 +376,7 @@
           $element.siblings("label").html(value ? "<i class=\"icon " + value + "\"></i>" : "&nbsp;");
           return $element;
         },
-        status: function() {
+        state: function() {
           return $(this).is(":checked");
         },
         destroy: function() {

docs/index.html

@@ -114,11 +114,13 @@ $('#animated-switch').bootstrapSwitch('setAnimated', true);
 
 // Disables animation for the selected item
 $('#animated-switch').bootstrapSwitch('setAnimated', false);</code></pre>
-          <h2><a name="disabled" class="anchor" href="#disabled">Disabled</a></h2>
+          <h2><a name="disabled" class="anchor" href="#disabled">Disabled / Readonly</a></h2>
           <div class="bs-docs-example">
             <input type="checkbox" checked disabled>
+            <input type="checkbox" checked readonly>
           </div>
-          <pre class="language-markup"><code>&lt;input type="checkbox" checked disabled></code></pre>
+          <pre class="language-markup"><code>&lt;input type="checkbox" checked disabled>
+&lt;input type="checkbox" checked readonly></code></pre>
           <h2><a name="text" class="anchor" href="#text">Text</a></h2>
           <div class="bs-docs-example">
             <input type="checkbox" id="label-switch" checked data-on-label="SI" data-off-label="NO">
@@ -163,44 +165,28 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');</code></pre>
 });</code></pre>
           <h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript">Label Event handler <small>JavaScript</small></a></h2>
           <div class="bs-docs-example">
-            <h5>Label 1</h5>
             <label id="label-toggle-switch">Click on this Text to change the switch state</label>
             <input type="checkbox" checked class="label-toggle-switch">
-            <h5>Label 2</h5>
-            <div id="label2-toggle-switch">
-              <label class="label-change-switch">Click on this Text to change the switch state
-                <input type="checkbox" checked class="label2-toggle-switch">
-              </label>
-            </div>
           </div>
           <pre class="language-markup"><code>&lt;label id="label-toggle-switch">Click on this Text to change the switch state&lt;/label>
-&lt;input type="checkbox" checked />
-
-&lt;div id="label2-toggle-switch">
-&lt;label class="label-change-switch">Click on this Text to change the switch state
-  &lt;input type="checkbox" checked />
-&lt;/label>
-&lt;/div></code></pre>
+&lt;input type="checkbox" checked></code></pre>
           <pre class="language-javascript"><code>$('#label-toggle-switch').on('click', function(e, data) {
     $('.label-toggle-switch').bootstrapSwitch('toggleState');
 });
 $('.label-toggle-switch').on('switch-change', function (e, data) {
     alert(data.value);
-});
-$('#label2-toggle-switch').on('switch-change', function(e, data) {
-    alert(data.value);
 });</code></pre>
           <h2><a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>javascript</small></a></h2>
           <div class="bs-docs-example">
             <input type="checkbox" id="toggle-state-switch" checked>
             <br>
             <br>
-            <div id="toggle-state-switch-button-status" class="btny">Status!</div>
-            <div id="toggle-state-switch-button-on" class="btn btn-default">ON!</div>
-            <div id="toggle-state-switch-button" class="btn btn-default">Toggle me!</div>
-            <div id="toggle-state-switch-button-off" class="btn btn-default">OFF!</div>
+            <div id="toggle-state-switch-button-state" class="btn btn-default">State!</div>
+            <div id="toggle-state-switch-button-on" class="btn btn-default">On</div>
+            <div id="toggle-state-switch-button" class="btn btn-default">Toggle</div>
+            <div id="toggle-state-switch-button-off" class="btn btn-default">Off</div>
           </div>
-          <pre class="language-javascript"><code>$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
+          <pre class="language-javascript"><code>$('#toggle-state-switch').bootstrapSwitch('state'); // true || false
 $('#toggle-state-switch').bootstrapSwitch('toggleState');
 $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</code></pre>
           <h2><a name="destroy" class="anchor" href="#destroy">Destroy <small>javascript</small></a></h2>
@@ -219,20 +205,34 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</
             <div id="btn-create" class="btn btn-default">Create</div>
           </div>
           <pre class="language-javascript"><code>$('#create-switch').bootstrapSwitch();</code></pre>
-        <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disabled <small>javascript</small></a></h2>
+        <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disable / Readonly <small>javascript</small></a></h2>
           <div class="bs-docs-example">
-            <label for="disable-switch-input">amazing label</label>
+            <label for="disable-switch">Disable controls</label>
             <input type="checkbox" id="disable-switch" checked>
             <br>
             <br>
-            <button id="btn-is-active-switch" class="btn btn-default">Is active?</button>
-            <button id="btn-toggle-activation-switch" class="btn btn-default">Toggle activation!</button>
-            <button id="btn-disable-switch" class="btn btn-default">Disable!</button>
-            <button id="btn-activate-switch" class="btn btn-default">Activate!</button>
+            <button id="btn-disable-is" class="btn btn-default">Is disabled?</button>
+            <button id="btn-disable-toggle" class="btn btn-default">Toggle Disable</button>
+            <button id="btn-disable-set" class="btn btn-default">Set Disable</button>
+            <button id="btn-disable-remove" class="btn btn-default">Remove Disable</button>
+            <br>
+            <br>
+            <label for="readonly-switch">Readonly controls</label>
+            <input type="checkbox" id="readonly-switch" checked>
+            <br>
+            <br>
+            <button id="btn-readonly-is" class="btn btn-default">Is readonly?</button>
+            <button id="btn-readonly-toggle" class="btn btn-default">Toggle readonly</button>
+            <button id="btn-readonly-set" class="btn btn-default">Set readonly</button>
+            <button id="btn-readonly-remove" class="btn btn-default">Remove readonly</button>
           </div>
-          <pre class="language-javascript"><code>$('#disable-switch').bootstrapSwitch('isActive');
-$('#disable-switch').bootstrapSwitch('toggleActivation');
-$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</code></pre>
+          <pre class="language-javascript"><code>$('#disable-switch').bootstrapSwitch('isDisabled');
+$('#disable-switch').bootstrapSwitch('toggleDisabled');
+$('#disable-switch').bootstrapSwitch('setDisabled', true);  // true || false
+
+$('#readonly-switch').bootstrapSwitch('isReadOnly');
+$('#readonly-switch').bootstrapSwitch('toggleReadOnly');
+$('#readonly-switch').bootstrapSwitch('setReadOnly', true);  // true || false</code></pre>
           <h2><a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>javascript</small></a></h2>
           <div class="bs-docs-example">
             <div class="form-group">
@@ -287,7 +287,7 @@ $('.radio1').on('switch-change', function () {
           <pre class="language-javascript"><code>$('.radio2').on('switch-change', function () {
     $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
 });</code></pre>
-          <h2><a name="form" class="anchor" href="#form">Form <small>- try to use tab, space and reset button</small></a></h2>
+          <h2><a name="form" class="anchor" href="#form">Form</a></h2>
           <div class="bs-docs-example">
             <form class="clearfix" role="form">
               <div class="form-group">

docs/index.js

@@ -26,8 +26,8 @@ $(function() {
   $('#toggle-state-switch-button-off').on('click', function () {
     $('#toggle-state-switch').bootstrapSwitch('setState', false);
   });
-  $('#toggle-state-switch-button-status').on('click', function () {
-    alert($('#toggle-state-switch').bootstrapSwitch('status'));
+  $('#toggle-state-switch-button-state').on('click', function () {
+    alert($('#toggle-state-switch').bootstrapSwitch('state'));
   });
 
   // destroy
@@ -41,21 +41,37 @@ $(function() {
     $(this).remove();
   });
 
-  // ACTIVATION
-  $('#btn-is-active-switch').on('click', function () {
-    alert($('#disable-switch').bootstrapSwitch('isActive'));
+  // activation
+  var $disable = $('#disable-switch');
+  $('#btn-disable-is').on('click', function () {
+    alert($disable.bootstrapSwitch('isDisabled'));
   });
-  $('#btn-toggle-activation-switch').on('click', function () {
-    $('#disable-switch').bootstrapSwitch('toggleActivation');
+  $('#btn-disable-toggle').on('click', function () {
+    $disable.bootstrapSwitch('toggleDisabled');
   });
-  $('#btn-disable-switch').on('click', function () {
-    $('#disable-switch').bootstrapSwitch('setActive', false);
+  $('#btn-disable-set').on('click', function () {
+    $disable.bootstrapSwitch('setDisabled', true);
   });
-  $('#btn-activate-switch').on('click', function () {
-    $('#disable-switch').bootstrapSwitch('setActive', true);
+  $('#btn-disable-remove').on('click', function () {
+    $disable.bootstrapSwitch('setDisabled', false);
   });
 
-  // LABEL
+  // readonly
+  var $readonly = $('#readonly-switch');
+  $('#btn-readonly-is').on('click', function () {
+    alert($readonly.bootstrapSwitch('isReadOnly'));
+  });
+  $('#btn-readonly-toggle').on('click', function () {
+    $readonly.bootstrapSwitch('toggleReadOnly');
+  });
+  $('#btn-readonly-set').on('click', function () {
+    $readonly.bootstrapSwitch('setReadOnly', true);
+  });
+  $('#btn-readonly-remove').on('click', function () {
+    $readonly.bootstrapSwitch('setReadOnly', false);
+  });
+
+  // label
   $('#btn-label-on-switch').on('click', function() {
     $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
   });
@@ -69,9 +85,6 @@ $(function() {
   $('.label-toggle-switch').on('switch-change', function(e, data) {
     alert(data.value);
   });
-  $('#label2-toggle-switch').on('switch-change', function(e, data) {
-    alert(data.value);
-  });
 
   // event handler
   $('#switch-change').on('switch-change', function (e, data) {
@@ -81,7 +94,7 @@ $(function() {
     console.log(e, $element, value);
   });
 
-  // COLOR
+  // color
   $('#btn-color-on-switch').on('click', function() {
     $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
   });
@@ -89,7 +102,7 @@ $(function() {
     $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
   });
 
-  // ANIMATION
+  // animation
   $('#btn-animate-switch').on('click', function() {
     $('#animated-switch').bootstrapSwitch('setAnimated', true);
   });
@@ -97,7 +110,7 @@ $(function() {
     $('#animated-switch').bootstrapSwitch('setAnimated', false);
   });
 
-  // RADIO
+  // radio
   $('.radio1').on('switch-change', function () {
     $('.radio1').bootstrapSwitch('toggleRadioState');
   });

src/coffee/bootstrap-switch.coffee

@@ -33,10 +33,19 @@
               html
           )
           $div = $("<div>")
-          $wrapper = $("<div>", class: "has-switch")
+          $wrapper = $("<div>",
+            class: "has-switch"
+            tabindex: 0
+          )
           $form = $element.closest("form")
-          changeStatus = ->
-            $label.trigger("mousedown").trigger("mouseup").trigger "click"  unless $label.hasClass("label-change-switch")
+          changeState = ->
+            return if $label.hasClass("label-change-switch")
+
+            $label
+            .trigger("mousedown")
+            .trigger("mouseup")
+            .trigger "click"
+
 
           # set bootstrap-switch flag
           $element.data "bootstrap-switch", true
@@ -64,7 +73,7 @@
           # 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("deactivate") if $element.is(":disabled")
+          $wrapper.addClass "disabled" if $element.is(":disabled") or $element.is("[readonly]")
 
           # element handlers
           $element
@@ -73,10 +82,12 @@
 
             e.stopImmediatePropagation()
             e.preventDefault()
-            changeStatus $(e.target).find("span:first")
-          ).on "change", (e, skip) ->
-            isChecked = $element.is(":checked")
-            state = $div.is(".switch-off")
+
+            changeState()
+          )
+          .on "change", (e, skip) ->
+            isChecked = $element.is ":checked"
+            state = $div.hasClass "switch-off"
 
             e.preventDefault()
 
@@ -95,9 +106,24 @@
               el: $element
               value: isChecked
 
+          # wrapper handlers
+          $wrapper.on "keydown", (e) ->
+            return if not e.which or $element.is(":disabled") or $element.is("[readonly]")
+
+            switch e.which
+              when 32
+                e.preventDefault()
+                changeState()
+              when 37
+                e.preventDefault()
+                changeState() if $element.is ":checked"
+              when 39
+                e.preventDefault()
+                changeState() unless $element.is ":checked"
+
           # switch handlers
-          $switchLeft.on "click", -> changeStatus()
-          $switchRight.on "click", -> changeStatus()
+          $switchLeft.on "click", -> changeState()
+          $switchRight.on "click", -> changeState()
 
           # label handlers
           $label.on "mousedown touchstart", (e) ->
@@ -107,7 +133,7 @@
             e.stopImmediatePropagation()
 
             $div.removeClass "switch-animate"
-            return $label.unbind "click" if $element.is(":disabled") or $element.hasClass("radio-no-uncheck")
+            return $label.unbind "click" if $element.is(":disabled") or $element.is("[readonly]") or $element.hasClass("radio-no-uncheck")
 
             # other label event handlers
             $label
@@ -163,27 +189,48 @@
               , 1)
             ).data "bootstrap-switch", true
 
-      toggleActivation: ->
+      setDisabled: (disabled) ->
         $element = $(@)
+        $wrapper = $element.parents(".has-switch")
 
-        $element.prop("disabled", not $element.is(":disabled")).parents(".has-switch").toggleClass "deactivate"
+        if disabled
+          $wrapper.addClass "disabled"
+          $element.prop "disabled", true
+        else
+          $wrapper.removeClass "disabled"
+          $element.prop "disabled", false
         $element
 
-      isActive: ->
-        not $(@).is(":disabled")
+      toggleDisabled: ->
+        $element = $(@)
 
-      setActive: (active) ->
+        $element.prop("disabled", not $element.is(":disabled")).parents(".has-switch").toggleClass "disabled"
+        $element
+
+      isDisabled: ->
+        $(@).is(":disabled")
+
+      setReadOnly: (readonly) ->
         $element = $(@)
         $wrapper = $element.parents(".has-switch")
 
-        if active
-          $wrapper.removeClass "deactivate"
-          $element.prop "disabled", false
+        if readonly
+          $wrapper.addClass "disabled"
+          $element.prop "readonly", true
         else
-          $wrapper.addClass "deactivate"
-          $element.prop "disabled", true
+          $wrapper.removeClass "disabled"
+          $element.prop "readonly", false
         $element
 
+      toggleReadOnly: ->
+        $element = $(@)
+
+        $element.prop("readonly", not $element.is("[readonly]")).parents(".has-switch").toggleClass "disabled"
+        $element
+
+      isReadOnly: ->
+        $(@).is("[readonly]")
+
       toggleState: (skip) ->
         $element = $(@)
 
@@ -270,7 +317,6 @@
             $switchLeft.addClass cls
             $label.addClass cls
             $switchRight.addClass cls
-
         $element
 
       setTextLabel: (value) ->
@@ -285,7 +331,7 @@
         $element.siblings("label").html(if value then "<i class=\"icon #{value}\"></i>" else "&nbsp;")
         $element
 
-      status: ->
+      state: ->
         $(@).is ":checked"
 
       destroy: ->

src/less/bootstrap2/bootstrap-switch.less

@@ -14,6 +14,7 @@
   .user-select(none);
   vertical-align: middle;
   min-width: 100px;
+  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
   &.switch-mini {
     min-width: 72px;
@@ -37,7 +38,7 @@
     min-width: 120px;
   }
 
-  &.deactivate {
+  &.disabled {
     .opacity(50);
     cursor: default !important;
 
@@ -68,11 +69,7 @@
 
   input[type=radio],
   input[type=checkbox] {
-    // debug
     display: none;
-    // position: absolute;
-    // margin-left: 60%;
-    // z-index: 123;
   }
 
   span,

src/less/bootstrap3/bootstrap-switch.less

@@ -14,6 +14,8 @@
   .user-select(none);
   vertical-align: middle;
   min-width: 100px;
+  .form-control-focus();
+  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
   &.switch-mini {
     min-width: 72px;
@@ -37,7 +39,7 @@
     min-width: 120px;
   }
 
-  &.deactivate {
+  &.disabled {
     .opacity(.5);
     cursor: default !important;
 
@@ -68,11 +70,7 @@
 
   input[type=radio],
   input[type=checkbox] {
-    // debug
     display: none;
-    // position: absolute;
-    // margin-left: 60%;
-    // z-index: 123;
   }
 
   span,