Wasted day of noodling over rendering, and dealing with indeterminate state issues

src/definitions/modules/checkbox.js

@@ -56,14 +56,16 @@ $.fn.checkbox = function(parameters) {
         initialize: function() {
           module.verbose('Initializing checkbox', settings);
 
+          module.fix.input();
+
           module.create.label();
           module.bind.events();
 
           module.set.input.tabbable();
-          module.setup();
           module.observeChanges();
 
           module.instantiate();
+          module.setup();
         },
 
         instantiate: function() {
@@ -82,6 +84,16 @@ $.fn.checkbox = function(parameters) {
           ;
         },
 
+        fix: {
+          input: function() {
+            if( $module.is(selector.input) ) {
+              module.debug('Fixing incorrect reference to module in invocation');
+              $module = $module.closest(selector.checkbox);
+              module.refresh();
+            }
+          }
+        },
+
         setup: function() {
           if( module.is.checked() ) {
             module.debug('Setting initial value to checked');
@@ -355,26 +367,34 @@ $.fn.checkbox = function(parameters) {
             module.debug('Removing events');
             $module
               .off(eventNamespace)
-              .removeData(moduleNamespace)
-            ;
-            $label
-              .off(eventNamespace)
             ;
           }
         },
 
         check: function() {
-          module.debug('Enabling checkbox', $input);
-          module.set.input.determinate();
+          module.debug('Checking checkbox', $input);
+          if(module.is.indeterminate()) {
+            module.set.input.determinate();
+            module.set.determinate();
+          }
+          if(module.is.checked()) {
+            module.debug('Module is already checked');
+            return;
+          }
           module.set.input.checked();
-          module.set.determinate();
           module.set.checked();
         },
 
         uncheck: function() {
-          module.debug('Disabling checkbox');
-          module.set.input.determinate();
-          module.set.determinate();
+          module.debug('Unchecking checkbox');
+          if(module.is.indeterminate()) {
+            module.set.input.determinate();
+            module.set.determinate();
+          }
+          if(module.is.unchecked()) {
+            module.debug('Module is already unchecked');
+            return;
+          }
           module.set.input.unchecked();
           module.set.unchecked();
         },
@@ -418,11 +438,12 @@ $.fn.checkbox = function(parameters) {
             }
             return;
           }
-          module.verbose('Determining new checkbox state');
-          if( module.is.indeterminate() || module.is.unchecked() ) {
+          if( module.is.unchecked() ) {
+            module.debug('Currently unchecked');
             module.check();
           }
           else if( module.is.checked() && module.can.uncheck() ) {
+            module.debug('Currently checked');
             module.uncheck();
           }
         },
@@ -614,7 +635,7 @@ $.fn.checkbox.settings = {
 
   // delegated event context
   uncheckable     : 'auto',
-  fireOnInit      : true,
+  fireOnInit      : false,
 
   onChange        : function(){},
 
@@ -636,7 +657,7 @@ $.fn.checkbox.settings = {
   },
 
   error     : {
-    method : 'The method you called is not defined'
+    method       : 'The method you called is not defined'
   },
 
   selector : {

src/definitions/modules/checkbox.less

@@ -76,11 +76,11 @@
 .ui.checkbox .box:before,
 .ui.checkbox label:before {
   position: absolute;
+  top: 0px;
+  left: 0px;
 
   width: @checkboxSize;
   height: @checkboxSize;
-  top: @checkboxTop;
-  left: @checkboxLeft;
   content: '';
 
   background: @checkboxBackground;
@@ -100,7 +100,6 @@
   font-size: @checkboxCheckFontSize;
   top: @checkboxCheckTop;
   left: @checkboxCheckLeft;
-  line-height: @checkboxCheckLineHeight;
   width: @checkboxCheckSize;
   height: @checkboxCheckSize;
   text-align: center;
@@ -192,20 +191,30 @@
      Active
 ---------------*/
 
-.ui.checkbox input:indeterminate ~ .box:before,
-.ui.checkbox input:indeterminate ~ label:before,
 .ui.checkbox input:checked ~ .box:before,
 .ui.checkbox input:checked ~ label:before {
   background: @checkboxActiveBackground;
   border-color: @checkboxActiveBorderColor;
 }
-
-.ui.checkbox input:indeterminate ~ .box:after,
-.ui.checkbox input:indeterminate ~ label:after,
 .ui.checkbox input:checked ~ .box:after,
 .ui.checkbox input:checked ~ label:after {
-  opacity: 1;
-  color: @checkboxActiveColor;
+  opacity: @checkboxActiveCheckOpacity;
+  color: @checkboxActiveCheckColor;
+}
+
+/*--------------
+  Indeterminate
+---------------*/
+
+.ui.checkbox input:indeterminate ~ .box:before,
+.ui.checkbox input:indeterminate ~ label:before {
+  background: @checkboxIndeterminateBackground;
+  border-color: @checkboxIndeterminateBorderColor;
+}
+.ui.checkbox input:indeterminate ~ .box:after,
+.ui.checkbox input:indeterminate ~ label:after {
+  opacity: @checkboxIndeterminateCheckOpacity;
+  color: @checkboxIndeterminateCheckColor;
 }
 
 /*--------------
@@ -276,7 +285,7 @@
   left: @radioLeft;
 }
 
-/* Circle */
+/* Bullet */
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
   border: none;
@@ -284,14 +293,13 @@
   width: @radioSize;
   height: @radioSize;
   line-height: @radioSize;
-  top: @radioTop;
-  left: @radioLeft;
-  font-size: @radioCircleSize;
 }
 
 /* Radio Checkbox */
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
+  top: @bulletTop;
+  left: @bulletLeft;
   width: @radioSize;
   height: @radioSize;
   border-radius: @bulletRadius;
@@ -338,6 +346,7 @@
   display: block;
   position: absolute;
   content: '';
+  transform: none;
   border: none !important;
   left: 0em;
   z-index: 1;
@@ -442,6 +451,7 @@
   position: absolute;
   content: '';
   z-index: 1;
+  transform: none;
   border: none;
 
   top: @toggleLaneVerticalOffset;

src/themes/colored/modules/checkbox.variables

@@ -1,7 +1,7 @@
 /* Checkbox */
 @checkboxActiveBackground: @primaryColor;
-@checkboxActiveColor: @white;
 @checkboxActiveBorderColor: @primaryColor;
+@checkboxActiveCheckColor: @white;
 @checkboxTransition: none;
 
 /* Slider */
@@ -9,7 +9,6 @@
 
 /* Radio */
 @radioActiveBackground: @primaryColor;
-@checkboxActiveBulletColor: @primaryColor;
 
 /* Handle */
 @handleBackground: @white @subtleGradient;

src/themes/default/modules/checkbox.variables

@@ -10,23 +10,20 @@
 @labelDistance: 1.85714em; /* 26px @ 14/em */
 
 /* Checkbox */
-@checkboxTop: 0px;
-@checkboxLeft: 0px;
 @checkboxBackground: @white;
 @checkboxBorder: 1px solid @solidBorderColor;
-@checkboxBorderRadius: @defaultBorderRadius;
+@checkboxBorderRadius: @3px;
 @checkboxTransition:
-  background-color @defaultDuration @defaultEasing,
   border @defaultDuration @defaultEasing,
   opacity @defaultDuration @defaultEasing,
+  transform @defaultDuration @defaultEasing,
   box-shadow @defaultDuration @defaultEasing
 ;
 
 /* Checkmark */
 @checkboxCheckFontSize: 14px;
-@checkboxCheckTop: @checkboxTop;
-@checkboxCheckLeft: @checkboxLeft;
-@checkboxCheckLineHeight: @checkboxLineHeight;
+@checkboxCheckTop: 0px;
+@checkboxCheckLeft: 0px;
 @checkboxCheckSize: @checkboxSize;
 
 /* Label */
@@ -38,25 +35,35 @@
         States
 --------------------*/
 
+/* Hover */
 @checkboxHoverBackground: @checkboxBackground;
 @checkboxHoverBorderColor: @selectedBorderColor;
 @labelHoverColor: @hoveredTextColor;
 
+/* Pressed */
 @checkboxPressedBackground: @offWhite;
 @checkboxPressedBorderColor: @selectedBorderColor;
 @checkboxPressedColor: @selectedTextColor;
 @labelPressedColor: @selectedTextColor;
 
+/* Focused */
 @checkboxFocusedBackground: @offWhite;
 @checkboxFocusedBorderColor: @selectedBorderColor;
 @checkboxFocusedColor: @selectedTextColor;
 @labelFocusedColor: @selectedTextColor;
 
-@checkboxActiveBackground: #FFFFFF;
+/* Active */
+@checkboxActiveBackground: @white;
 @checkboxActiveBorderColor: @selectedBorderColor;
-@checkboxActiveColor: @selectedTextColor;
+@checkboxActiveCheckOpacity: 1;
+@checkboxActiveCheckColor: @selectedTextColor;
 @labelActiveColor: @selectedTextColor;
 
+/* Indeterminate */
+@checkboxIndeterminateBackground: @checkboxActiveBackground;
+@checkboxIndeterminateBorderColor: @checkboxActiveBorderColor;
+@checkboxIndeterminateCheckOpacity: 0.8;
+@checkboxIndeterminateCheckColor: @checkboxActiveCheckColor;
 
 /* Disabled */
 @disabledCheckboxOpacity: 0.5;
@@ -69,18 +76,19 @@
 /* Radio */
 /* Uses px to avoid rounding issues with circles */
 
-@radioSize: 14px;
-@radioCircleSize: 9px;
+@radioSize: 15px;
 @radioTop: 1px;
 @radioLeft: 0px;
 @radioLabelDistance: @labelDistance;
 
-@bulletScale: (6 / 14); /* 6px as unitless value from radio size */
+@bulletTop: 1px;
+@bulletLeft: 0px;
+@bulletScale: (7 / 15); /* 8px as unitless value from radio size */
 @bulletColor: @textColor;
 @bulletRadius: @circularRadius;
 
 @radioActiveBackground: @white;
-@radioActiveBulletColor: @checkboxActiveColor;
+@radioActiveBulletColor: @checkboxActiveCheckColor;
 
 /* Slider & Toggle Handle */
 @handleBackground: @white @subtleGradient;