Rewrite of checkbox, new styles, css variables, font file embeds for legitness

src/modules/checkbox.js

@@ -64,6 +64,9 @@ $.fn.checkbox = function(parameters) {
               .on('click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
+            $input
+              .on('keydown' + eventNamespace, module.event.keydown)
+            ;
             $label
               .on('click' + eventNamespace, module.toggle)
             ;
@@ -90,20 +93,41 @@ $.fn.checkbox = function(parameters) {
           ;
         },
 
+        event: {
+          keydown: function(event) {
+            var
+              key     = event.which,
+              keyCode = {
+                enter  : 13,
+                escape : 27
+              }
+            ;
+            if( key == keyCode.escape) {
+              module.verbose('Escape key pressed blurring field');
+              $module
+                .blur()
+              ;
+            }
+            if(!event.ctrlKey && key == keyCode.enter) {
+              $.proxy(module.toggle, this)();
+            }
+          }
+        },
+
         is: {
           radio: function() {
             return $module.hasClass(className.radio);
           },
-          enabled: function() {
+          checked: function() {
             return $input.prop('checked') !== undefined && $input.prop('checked');
           },
-          disabled: function() {
-            return !module.is.enabled();
+          unchecked: function() {
+            return !module.is.checked();
           }
         },
 
         can: {
-          disable: function() {
+          uncheck: function() {
             return (typeof settings.required === 'boolean')
               ? settings.required
               : !module.is.radio()
@@ -111,33 +135,33 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
-        enable: function() {
+        check: function() {
           module.debug('Enabling checkbox', $input);
           $input
             .prop('checked', true)
             .trigger('change')
           ;
           $.proxy(settings.onChange, $input.get())();
-          $.proxy(settings.onEnable, $input.get())();
+          $.proxy(settings.onChecked, $input.get())();
         },
 
-        disable: function() {
+        uncheck: function() {
           module.debug('Disabling checkbox');
           $input
             .prop('checked', false)
             .trigger('change')
           ;
           $.proxy(settings.onChange, $input.get())();
-          $.proxy(settings.onDisable, $input.get())();
+          $.proxy(settings.onUnchecked, $input.get())();
         },
 
         toggle: function(event) {
           module.verbose('Determining new checkbox state');
-          if( module.is.disabled() ) {
-            module.enable();
+          if( module.is.unchecked() ) {
+            module.check();
           }
-          else if( module.is.enabled() && module.can.disable() ) {
-            module.disable();
+          else if( module.is.checked() && module.can.uncheck() ) {
+            module.uncheck();
           }
         },
         setting: function(name, value) {
@@ -329,8 +353,8 @@ $.fn.checkbox.settings = {
   required    : 'auto',
 
   onChange    : function(){},
-  onEnable    : function(){},
-  onDisable   : function(){},
+  onChecked   : function(){},
+  onUnchecked : function(){},
 
   error     : {
     method   : 'The method you called is not defined.'

src/modules/checkbox.less

@@ -9,23 +9,32 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'checkbox';
+
+@import '../semantic.config';
+
+
 /*******************************
            Checkbox
 *******************************/
 
+
 /*--------------
-    Standard
+    Content
 ---------------*/
 
-
-/*--- Content ---*/
-
 .ui.checkbox {
   position: relative;
   display: inline-block;
 
+  height: @checkboxHeight;
+
   min-width: 1em;
-  height: 1.25em;
   line-height: 1em;
 
   outline: none;
@@ -40,84 +49,72 @@
 }
 
 
-/*--- Box ---*/
+/*--------------
+      Box
+---------------*/
+
 
 .ui.checkbox .box,
 .ui.checkbox label {
   cursor: pointer;
-  padding-left: 2em;
+  padding-left: @labelPadding;
   outline: none;
 }
 
 .ui.checkbox .box:before,
 .ui.checkbox label:before {
   position: absolute;
-  top: 0em;
-  left: 0em;
 
   line-height: 1;
-  width: 1em;
-  height: 1em;
-  left: 0em;
+  width: 1.25em;
+  height: 1.25em;
+  top: @boxOffset;
+  left: @boxOffset;
   content: '';
 
-  border-radius: 4px;
-
   background: #FFFFFF;
+  border-radius: 0.25em;
 
   transition:
     background-color 0.3s ease,
+    border 0.3s ease,
     box-shadow 0.3s ease
   ;
-
-  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  border: @checkboxBorder;
 }
 
-/*--- Checkbox ---*/
+/*--------------
+    Checkmark
+---------------*/
+
 .ui.checkbox .box:after,
 .ui.checkbox label:after {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  opacity: 0;
-  content: '';
   position: absolute;
-  background: transparent;
-  border: 0.2em solid #333333;
-  border-top: none;
-  border-right: none;
-  transform: rotate(-45deg);
-}
-.ui.checkbox .box:after,
-.ui.checkbox label:after {
-  top: 0.275em;
-  left: 0.2em;
-  width: 0.45em;
-  height: 0.15em;
+  top: 0em;
+  left: 0em;
+
+  opacity: 0;
+  color: @checkboxColor;
+  transition: opacity 0.1s ease;
 }
 
-/*--- Inside Label ---*/
-.ui.checkbox label {
-  color: rgba(0, 0, 0, 0.6);
+/*--------------
+      Label
+---------------*/
 
+/* Inside */
+.ui.checkbox label,
+.ui.checkbox + label {
+  cursor: pointer;
+  color: @labelColor;
   transition: color 0.2s ease;
-}
-.ui.checkbox label:hover {
-  color: rgba(0, 0, 0, 0.8);
+  user-select: none;
 }
 
-.ui.checkbox input:focus + label {
-  color: rgba(0, 0, 0, 0.8);
-}
-
-/*--- Outside Label  ---*/
+/* Outside */
 .ui.checkbox + label {
-  cursor: pointer;
-  opacity: 0.85;
   vertical-align: middle;
 }
-.ui.checkbox + label:hover {
-  opacity: 1;
-}
 
 
 /*******************************
@@ -125,33 +122,54 @@
 *******************************/
 
 
-/*--- Hover ---*/
+/*--------------
+      Hover
+---------------*/
+
 .ui.checkbox .box:hover::before,
 .ui.checkbox label:hover::before {
-  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  border: 1px solid @selectedBorderColor;
+}
+.ui.checkbox label:hover,
+.ui.checkbox + label:hover {
+  color: @labelHoverColor;
 }
 
-/*--- Down ---*/
+/*--------------
+      Down
+---------------*/
+
 .ui.checkbox .box:active::before,
 .ui.checkbox label:active::before {
   background-color: #F5F5F5;
 }
 
-/*--- Focus ---*/
+/*--------------
+      Focus
+---------------*/
+
 .ui.checkbox input:focus + .box:before,
 .ui.checkbox input:focus + label:before {
-  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  border: 1px solid @selectedBorderColor;
 }
+.ui.checkbox input:focus + label {
+  color: @labelSelectedColor;
+}
+
+
+/*--------------
+     Active
+---------------*/
 
-/*--- Active ---*/
 .ui.checkbox input:checked + .box:after,
 .ui.checkbox input:checked + label:after {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-  filter: alpha(opacity=100);
   opacity: 1;
 }
 
-/*--- Disabled ---*/
+/*--------------
+     Disabled
+---------------*/
+
 .ui.disabled.checkbox + .box:after,
 .ui.checkbox input[disabled] + .box:after,
 .ui.disabled.checkbox label,
@@ -170,26 +188,17 @@
      Radio
 ---------------*/
 
+/* Box */
 .ui.radio.checkbox .box:before,
 .ui.radio.checkbox label:before {
-  min-width: 1em;
-  height: 1em;
-  border-radius: 500px;
+  border-radius: @circularRadius;
   transform: none;
 }
+
+/* Circle */
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
   border: none;
-  top: 0.2em;
-  left: 0.2em;
-
-  width: 0.6em;
-  height: 0.6em;
-
-  background-color: #555555;
-
-  transform: none;
-  border-radius: 500px;
 }
 
 /*--------------
@@ -198,96 +207,75 @@
 
 .ui.slider.checkbox {
   cursor: pointer;
-  min-width: 3em;
-}
-
-/* Line */
-.ui.slider.checkbox:after {
-  position: absolute;
-  top: 0.5em;
-  left: 0em;
-  content: '';
-
-  width: 3em;
-  height: 2px;
-  background-color: rgba(0, 0, 0, 0.1);
 }
 
-/* Button */
 .ui.slider.checkbox .box,
 .ui.slider.checkbox label {
-  padding-left: 4em;
+  padding-left: @sliderLabelDistance;
 }
+
+/* Line */
 .ui.slider.checkbox .box:before,
 .ui.slider.checkbox label:before {
   cursor: pointer;
   display: block;
 
   position: absolute;
-  top: -0.25em;
+  content: '';
+  top: @sliderLineVerticalOffset;
   left: 0em;
   z-index: 1;
+  border: none !important;
 
-  width: 1.5em;
-  height: 1.5em;
+  background-color: @neutralCheckbox;
+  width: @sliderLineWidth;
+  height: @sliderLineHeight;
 
   transform: none;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-
-  border-radius: 50rem;
-
-  transition: left 0.3s ease 0s;
+  border-radius: @circularRadius;
 }
 
-/* Button Activation Light */
+/* Handle */
 .ui.slider.checkbox .box:after,
 .ui.slider.checkbox label:after {
-  opacity: 1;
-
+  background: @handleBackground;
   position: absolute;
   content: '';
-  top: 0.15em;
-  left: 0em;
+  opacity: 1;
   z-index: 2;
 
-  margin-left: 0.375em;
-
   border: none;
-  width: 0.75em;
-  height: 0.75em;
-
-  border-radius: 50rem;
-
-  transform: none;
+  box-shadow: @handleBoxShadow;
+  width: @handleSize;
+  height: @handleSize;
+  top: @sliderHandleOffset;
+  left: 0em;
 
+  border-radius: @circularRadius;
   transition:
     background 0.3s ease 0s,
     left 0.3s ease 0s
   ;
 }
 
-/* Selected Slider Toggle */
-.ui.slider.checkbox input:checked + .box:before,
-.ui.slider.checkbox input:checked + label:before,
-.ui.slider.checkbox input:checked + .box:after,
-.ui.slider.checkbox input:checked + label:after {
-  left: 1.75em;
+/* Focus */
+.ui.slider.checkbox input:focus + .box:before,
+.ui.slider.checkbox input:focus + label:before {
+  background-color: @toggleFocusColor;
+  border: none;
 }
 
-/* Off Color */
-.ui.slider.checkbox .box:after,
-.ui.slider.checkbox label:after {
-  background-color: #D95C5C;
+/* Active */
+.ui.slider.checkbox input:checked + .box:before,
+.ui.slider.checkbox input:checked + label:before {
+  background-color: @positiveCheckbox;
 }
-
-/* On Color */
 .ui.slider.checkbox input:checked + .box:after,
 .ui.slider.checkbox input:checked + label:after {
-  background-color: #89B84C;
+  left: @sliderTravelDistance;
 }
 
 
-
 /*--------------
      Toggle
 ---------------*/
@@ -298,7 +286,7 @@
 
 .ui.toggle.checkbox .box,
 .ui.toggle.checkbox label {
-  padding-left: 4em;
+  padding-left: 3em;
 }
 
 /* Switch */
@@ -309,58 +297,56 @@
 
   position: absolute;
   content: '';
-  top: -0.25em;
+
+  top: @toggleSwitchVerticalOffset;
   left: 0em;
   z-index: 1;
+  border: none;
 
-  background-color: #FFFFFF;
-  width: 3em;
-  height: 1.5em;
-
-  transform: none;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  border-radius: 50rem;
+  background-color: @neutralCheckbox;
+  width: @toggleSwitchWidth;
+  height: @toggleSwitchHeight;
+  border-radius: @circularRadius;
 }
 
-/* Activation Light */
+/* Handle */
 .ui.toggle.checkbox .box:after,
 .ui.toggle.checkbox label:after {
-  opacity: 1;
-
-  background-color: transparent;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-
-  content: '';
+  background: @handleBackground;
   position: absolute;
-  top: 0.15em;
-  left: 0.5em;
+  content: '';
+  opacity: 1;
   z-index: 2;
 
   border: none;
-  width: 0.75em;
-  height: 0.75em;
+  box-shadow: @handleBoxShadow;
+  width: @handleSize;
+  height: @handleSize;
+  top: @sliderHandleOffset;
+  left: 0em;
 
-  background-color: #D95C5C;
-  border-radius: 50rem;
+  border-radius: @circularRadius;
   transition:
     background 0.3s ease 0s,
     left 0.3s ease 0s
   ;
 }
 
-/* Active */
-.ui.toggle.checkbox:active .box:before,
-.ui.toggle.checkbox:active label:before {
-  background-color: #F5F5F5;
+/* Focus */
+.ui.toggle.checkbox input:focus + .box:before,
+.ui.toggle.checkbox input:focus + label:before {
+  background-color: @toggleFocusColor;
+  border: none;
 }
 
 /* Active */
+.ui.toggle.checkbox input:checked + .box:before,
+.ui.toggle.checkbox input:checked + label:before {
+  background-color: @positiveCheckbox;
+}
 .ui.toggle.checkbox input:checked + .box:after,
 .ui.toggle.checkbox input:checked + label:after {
-  left: 1.75em;
-  background-color: #89B84C;
+  left: 1em;
 }
 
 
@@ -377,4 +363,6 @@
 }
 .ui.huge.checkbox {
   font-size: 1.5em;
-}
+}
+
+.loadUIOverrides();