Update to checkbox/label/image/header, related to spacing and consistency

src/definitions/behaviors/state.js

@@ -246,7 +246,11 @@ $.fn.state = function(parameters) {
 
           text: function() {
             if( module.is.textEnabled() ) {
-              if( module.is.active() ) {
+              if(module.is.disabled() ) {
+                module.verbose('Changing text to disabled text', text.hover);
+                module.update.text(text.disabled);
+              }
+              else if( module.is.active() ) {
                 if(text.hover) {
                   module.verbose('Changing text to hover text', text.hover);
                   module.update.text(text.hover);
@@ -321,16 +325,18 @@ $.fn.state = function(parameters) {
         },
 
         flash: {
-          text: function(text, duration) {
+          text: function(text, duration, callback) {
             var
               previousText = module.get.text()
             ;
             module.debug('Flashing text message', text, duration);
             text     = text     || settings.text.flash;
             duration = duration || settings.flashDuration;
+            callback = callback || function() {};
             module.update.text(text);
             setTimeout(function(){
               module.update.text(previousText);
+              $.proxy(callback, element)();
             }, duration);
           }
         },
@@ -652,6 +658,7 @@ $.fn.state.settings = {
   },
 
   text     : {
+    disabled : false,
     flash    : false,
     hover    : false,
     active   : false,

src/definitions/collections/form.less

@@ -48,7 +48,7 @@
   margin: 0em 0em 0.3em;
   display: block;
 
-  color: #555555;
+  color: #111111;
   font-size: 0.875em;
 }
 
@@ -79,7 +79,7 @@
 .ui.form input[type="tel"] {
 
   margin: 0em;
-  padding: 0.5em 1em;
+  padding: 0.65em 1em;
   font-size: 1em;
 
   background-color: #FFFFFF;

src/definitions/collections/grid.less

@@ -75,8 +75,8 @@ body > .ui.grid {
 .ui.grid > .row {
   display: block;
   width: 100% !important;
-  margin-top: @rowSpacing;
-  padding: @rowSpacing 0% 0%;
+  margin-top: (@rowSpacing / 2);
+  padding: (@rowSpacing / 2) 0% 0%;
   font-size: 0rem;
 }
 .ui.grid > .row:first-child {

src/definitions/collections/menu.less

@@ -80,8 +80,7 @@
   color: rgba(0, 0, 0, 0.85);
 }
 /* Active */
-.ui.menu .active.item,
-.ui.menu .active.item a:not(.button) {
+.ui.menu .active.item {
   color: @selectedTextColor;
 }
 
@@ -998,6 +997,11 @@
   text-transform: uppercase;
   font-weight: bold;
 }
+.ui.text.menu .text.item {
+  opacity: 1;
+  color: rgba(50, 50, 50, 0.8);
+  font-weight: bold;
+}
 
 /*--- fluid text ---*/
 .ui.text.item.menu .item {
@@ -1192,8 +1196,7 @@
 .ui.inverted.menu .item .item > a {
   color: @invertedSubMenuColor;
 }
-.ui.inverted.menu .dropdown .menu .item,
-.ui.inverted.menu .dropdown .menu .item a {
+.ui.inverted.menu .dropdown .menu .item {
   color: @dropdownTextColor !important;
 }
 .ui.inverted.menu .item.disabled,
@@ -1238,8 +1241,7 @@
   box-shadow: none !important;
   background-color: rgba(255, 255, 255, 0.2);
 }
-.ui.inverted.menu .active.item,
-.ui.inverted.menu .active.item a {
+.ui.inverted.menu .active.item {
   color: rgba(255, 255, 255, 1) !important;
 }
 .ui.inverted.vertical.menu .item .menu .active.item {

src/definitions/elements/header.less

@@ -45,7 +45,7 @@
 }
 
 /* Icon and Content Together */
-.ui.header .icon {
+.ui.header > .icon {
   display: table-cell;
   font-size: @iconSize;
   padding-top: @iconOffset;
@@ -53,7 +53,7 @@
   vertical-align: @iconAlignment;
   padding-right: (@iconMargin / 2);
 }
-.ui.header .icon + .content {
+.ui.header > .icon + .content {
   padding-left: (@iconMargin / 2);
   display: table-cell;
 }
@@ -70,6 +70,12 @@
 }
 
 /* Positioning */
+.ui.header:first-child {
+  margin-top: 0em;
+}
+.ui.header:last-child {
+  margin-bottom: 0em;
+}
 .ui.header + p {
   margin-top: @precedingParagraphMargin;
 }

src/definitions/elements/image.less

@@ -115,7 +115,6 @@ img.ui.image {
 }
 
 
-
 /*-------------------
        Floated
 --------------------*/

src/definitions/elements/label.less

@@ -99,6 +99,14 @@ a.ui.label {
   opacity: 1;
 }
 
+/*-------------------
+       Group
+--------------------*/
+
+.ui.labels .label {
+  margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em;
+}
+
 
 /*-------------------
        Coupling

src/definitions/modules/checkbox.less

@@ -301,7 +301,6 @@
   content: '';
 
   top: @toggleSwitchVerticalOffset;
-  left: 0em;
   z-index: 1;
   border: none;
 
@@ -334,6 +333,18 @@
   ;
 }
 
+/* Off */
+/*
+.ui.toggle.checkbox input + .box:before,
+.ui.toggle.checkbox input + label:before {
+  background-color: @negativeCheckbox;
+}
+*/
+.ui.toggle.checkbox input + .box:after,
+.ui.toggle.checkbox input + label:after {
+  left: @toggleOffOffset;
+}
+
 /* Focus */
 .ui.toggle.checkbox input:focus + .box:before,
 .ui.toggle.checkbox input:focus + label:before {
@@ -342,13 +353,17 @@
 }
 
 /* Active */
+.ui.toggle.checkbox input:checked + .box,
+.ui.toggle.checkbox input:checked + label {
+  color: @positiveCheckbox;
+}
 .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: 1em;
+  left: @toggleOnOffset;
 }
 
 

src/definitions/modules/dropdown.js

@@ -432,6 +432,20 @@ $.fn.dropdown = function(parameters) {
         },
 
         set: {
+          scrollPosition: function() {
+            var
+              $activeItem  = module.get.item(),
+              activeOffset = ($activeItem.size() > 0)
+                ? $activeItem.position().top
+                : false
+            ;
+            if(activeOffset) {
+              module.debug('Scrolling to active item');
+              $menu
+                .scrollTop(activeOffset)
+              ;
+            }
+          },
           text: function(text) {
             if(settings.action == 'combo') {
               module.debug('Changing combo button text', text, $combo);

src/definitions/modules/dropdown.less

@@ -299,7 +299,7 @@
   white-space: normal;
 
   background-color: #FFFFFF;
-  padding: 0.5em 1em;
+  padding: 0.65em 1em;
 
   line-height: 1.33;
   color: rgba(0, 0, 0, 0.8);

src/definitions/modules/search.js

@@ -98,6 +98,8 @@ $.fn.search = function(parameters) {
             $module
               .addClass(className.focus)
             ;
+            clearTimeout(module.timer);
+            module.search.throttle();
             module.results.show();
           },
           blur: function() {
@@ -105,7 +107,7 @@ $.fn.search = function(parameters) {
             $module
               .removeClass(className.focus)
             ;
-            module.results.hide();
+            module.timer = setTimeout(module.results.hide, settings.hideDelay);
           }
         },
         handleKeyboard: function(event) {
@@ -137,8 +139,8 @@ $.fn.search = function(parameters) {
           if($results.filter(':visible').size() > 0) {
             if(keyCode == keys.enter) {
               module.verbose('Enter key pressed, selecting active result');
-              if( $result.filter('.' + activeClass).exists() ) {
-                $.proxy(module.results.select, $result.filter('.' + activeClass) )();
+              if( $result.filter('.' + activeClass).size() > 0 ) {
+                $.proxy(module.results.select, $result.filter('.' + activeClass) )(event);
                 event.preventDefault();
                 return false;
               }
@@ -400,9 +402,6 @@ $.fn.search = function(parameters) {
                 target = $link.attr('target') || false
               ;
               module.results.hide();
-              $prompt
-                .val(title)
-              ;
               if(href) {
                 if(target == '_blank' || event.ctrlKey) {
                   window.open(href);
@@ -415,6 +414,13 @@ $.fn.search = function(parameters) {
           }
         },
 
+        // displays mesage visibly in search results
+        message: function(text, type) {
+          type = type || 'standard';
+          module.results.add( settings.templates.message(text, type) );
+          return settings.templates.message(text, type);
+        },
+
         setting: function(name, value) {
           if( $.isPlainObject(name) ) {
             $.extend(true, settings, name);
@@ -616,6 +622,7 @@ $.fn.search.settings = {
 
   automatic      : 'true',
   type           : 'simple',
+  hideDelay      : 600,
   minCharacters  : 3,
   searchThrottle : 300,
   maxResults     : 7,

src/definitions/modules/search.less

@@ -99,17 +99,16 @@
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
-  width: 38px;
-  height: 38px;
+  height: 30px;
 }
 .ui.search .result .image img {
   display: block;
-  width: 38px;
-  height: 38px;
+  width: 73px;
+  height: 30px;
 }
 .ui.search .result .image ~ .info {
   float: none;
-  margin-left: 50px;
+  margin-left: 80px;
 }
 
 .ui.search .result .info {
@@ -179,6 +178,7 @@
   background-color: #FFFFFF;
   margin-left: 80px;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 /* View All Results */
@@ -217,7 +217,7 @@
 ---------------*/
 
 .ui.search.loading .input .icon {
-  background: url(../images/loader-mini.gif) no-repeat 50% 50%;
+  background: url(../../themes/packages/default/assets/images/loader-mini.gif) no-repeat 50% 50%;
 }
 .ui.search.loading .input .icon:before,
 .ui.search.loading .input .icon:after {

src/definitions/modules/sticky.js

@@ -88,6 +88,10 @@ $.fn.sticky = function(parameters) {
         destroy: function() {
           module.verbose('Destroying previous module');
           module.reset();
+          $window
+            .off('resize', module.event.resize)
+            .off('scroll', module.event.scroll)
+          ;
           $module
             .removeData(moduleNamespace)
           ;
@@ -201,7 +205,7 @@ $.fn.sticky = function(parameters) {
         set: {
           containerSize: function() {
             if($module.is(':visible') && $container.get(0).tagName === 'HTML') {
-              module.error(error.container);
+              module.error(error.container, $container.get(0), $container.get(0).tagName);
             }
             else {
               module.debug('Settings container size', module.cache.context.height);
@@ -259,6 +263,10 @@ $.fn.sticky = function(parameters) {
                 if( screen.top < element.top ) {
                   module.unfix();
                 }
+                else if( bottomEdge > context.bottom ) {
+                  module.debug('Top attached rail has reached bottom of container');
+                  module.bindBottom();
+                }
               }
               if(module.is.bottom() ) {
                 // top edge
@@ -267,10 +275,10 @@ $.fn.sticky = function(parameters) {
                 }
                 // bottom edge
                 else if(screen.bottom > context.bottom) {
+                  module.debug('Bottom attached rail has reached bottom of container');
                   module.bindBottom();
                 }
               }
-              // exit bottom of container
               if( bottomEdge > context.bottom ) {
                 module.bindBottom();
               }

src/themes/packages/default/elements/button.variables

@@ -83,7 +83,7 @@
 @downBackgroundImage: '';
 @downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
 
-@activeBackgroundColor: #EAEAEA;
+@activeBackgroundColor: #DDDDDD;
 @activeBackgroundImage: none;
 @activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
 

src/themes/packages/default/elements/input.variables

@@ -85,7 +85,7 @@
 @errorBoxShadow: none;
 
 /* Loading */
-@loadingImage: "../images/loader-mini.gif";
+@loadingImage: "@{imagePath}/loader-mini.gif";
 
 /*-------------------
       Variations

src/themes/packages/default/elements/label.variables

@@ -10,9 +10,12 @@
       Standard
 --------------------*/
 
-@verticalMargin: -0.25em;
+@verticalMargin: 0.25em;
 @horizontalMargin: 0.125em;
 
+@groupVerticalMargin: 0.75em;
+@groupHorizontalMargin: 0.5em;
+
 @backgroundColor: #E8E8E8;
 @backgroundImage: none;
 

src/themes/packages/default/modules/checkbox.variables

@@ -68,11 +68,12 @@
 @toggleSwitchVerticalOffset: (1em - @toggleSwitchHeight) / 2;
 
 @toggleFocusColor: @strongTransparentBlack;
-
 @toggleHandleOffset: (1em - @handleSize) / 2;
 @toggleTravelDistance: @toggleSwitchWidth - @handleSize;
 @toggleLabelDistance: @toggleSwitchWidth + 1em;
 
+@toggleOffOffset: -0.15em;
+@toggleOnOffset: 1em;