Consolidate input browser line height across components, fix multi select to match input height in all cases

src/definitions/modules/dropdown.less

@@ -592,6 +592,7 @@ select.ui.dropdown {
 /* Multiple Selection */
 .ui.multiple.dropdown {
   padding: @multipleSelectionPadding;
+  min-height: @multipleSelectionMinHeight;
 }
 .ui.multiple.dropdown .menu {
   cursor: auto;
@@ -609,13 +610,13 @@ select.ui.dropdown {
   display: inline-block;
   vertical-align: baseline;
   padding: @labelPadding;
-  margin: (@labelVerticalSpacing / 2) @labelHorizontalSpacing (@labelVerticalSpacing / 2) 0em;
+  margin: @labelVerticalSpacing @labelHorizontalSpacing @labelVerticalSpacing 0em;
 }
 
 /* Dropdown Icon */
 .ui.multiple.dropdown .dropdown.icon {
-  margin: 0em -@labelHorizontalPadding 0em 0em;
-  padding: @labelPadding;
+  margin: @multipleSelectionDropdownIconMargin;
+  padding: @multipleSelectionDropdownIconPadding;
 }
 
 /* Text */
@@ -623,9 +624,8 @@ select.ui.dropdown {
   position: static;
   padding: 0;
   max-width: 100%;
-  min-height: @searchSelectionLineHeight;
-  line-height: @searchSelectionLineHeight;
-  margin: @multipleSelectionInlineMargin;
+  margin: @multipleSelectionChildMargin;
+  line-height: @multipleSelectionChildLineHeight;
 }
 .ui.multiple.dropdown > .label ~ .text {
   display: none;
@@ -642,8 +642,8 @@ select.ui.dropdown {
   top: 0;
   left: 0;
   padding: inherit;
-  margin: @multipleSelectionInlineMargin;
-  line-height: @searchSelectionLineHeight;
+  margin: @multipleSelectionChildMargin;
+  line-height: @multipleSelectionChildLineHeight;
 }
 
 .ui.multiple.search.dropdown > .label ~ .text {
@@ -656,7 +656,7 @@ select.ui.dropdown {
   padding: 0;
   max-width: 100%;
   width: @multipleSelectionSearchStartWidth;
-  margin: @multipleSelectionInlineMargin;
+  margin: @multipleSelectionChildMargin;
 }
 
 

src/definitions/modules/sticky.js

@@ -332,8 +332,8 @@ $.fn.sticky = function(parameters) {
               $container = $module.offsetParent();
             }
             else {
-              module.debug('Settings container size', module.cache.context.height);
               if( Math.abs($container.height() - module.cache.context.height) > 5) {
+                module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
                 $container.css({
                   height: module.cache.context.height
                 });

src/themes/default/collections/form.variables

@@ -30,7 +30,7 @@
 @inputFontSize: 1em;
 @inputVerticalPadding: 0.78571em;
 @inputHorizontalPadding: 1em;
-@inputLineHeight: 1.2142em;
+@inputLineHeight: @defaultInputLineHeight;
 @inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
 @inputBackground: #FFFFFF;
 @inputBorder: 1px solid @borderColor;

src/themes/default/elements/input.variables

@@ -10,7 +10,7 @@
 @verticalPadding: 0.78571em;
 @horizontalPadding: 1em;
 
-@lineHeight: 1.2142em;
+@lineHeight: @defaultInputLineHeight;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
 
 @padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding;

src/themes/default/globals/site.variables

@@ -386,6 +386,9 @@
     Derived Values
 --------------------*/
 
+/* Line Height Default For Inputs in Browser */
+@defaultInputLineHeight: 1.2142em;
+
 /* Rendered Scrollbar Width */
 @scrollbarWidth: 15px;
 

src/themes/default/modules/dropdown.variables

@@ -207,7 +207,7 @@
 @searchMinWidth: '';
 
 /* Search Selection */
-@searchSelectionLineHeight: 1.2142em; /* browser default for webkit <input> */
+@searchSelectionLineHeight: @defaultInputLineHeight;
 @searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2);
 @searchSelectionVerticalPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset);
 @searchSelectionHorizontalPadding: @selectionHorizontalPadding;
@@ -219,26 +219,32 @@
 @searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
 
 /* Multiple Selection */
+@multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding / 2); /* Split Padding Between Child and Group */
+@multipleSelectionLeftPadding: (@selectionHorizontalPadding - @labelHorizontalPadding);
+@multipleSelectionRightPadding: @selectionIconDistance;
+@multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding;
+@multipleSelectionMinHeight: (@multipleSelectionVerticalPadding * 2) + @multipleSelectionChildLineHeight + (@multipleSelectionChildVerticalMargin * 2);
+
+/* Child Elements */
+@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding / 2);
+@multipleSelectionChildSpacing: 0.4285em;
+@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildSpacing;
+@multipleSelectionChildLineHeight: @searchSelectionLineHeight;
+@multipleSelectionSearchStartWidth: (@glyphWidth * 2);
+
+/* Dropdown Icon */
+@multipleSelectionDropdownIconMargin: 0em -@labelHorizontalPadding 0em 0em;
+@multipleSelectionDropdownIconPadding: @labelPadding;
+
+/* Selection Label */
 @labelVerticalPadding: 0.4285em;
 @labelSize: @relativeSmall;
 @labelHorizontalPadding: @relativeMini;
 @labelPadding: @labelVerticalPadding @labelHorizontalPadding;
-
 @labelHorizontalSpacing: 0.5em;
-@labelVerticalSpacing: 0.5em;
+@labelVerticalSpacing: (0.3333em / 2);
 
 
-/* This is calculated from @selectionPadding - @labelSize * labelPadding */
-@multipleSelectionTopPadding: 0.2857em;
-@multipleSelectionRightPadding: @selectionIconDistance;
-@multipleSelectionBottomPadding: @multipleSelectionTopPadding;
-@multipleSelectionLeftPadding: (@selectionHorizontalPadding - @labelHorizontalPadding);
-@multipleSelectionPadding: @multipleSelectionTopPadding @multipleSelectionRightPadding @multipleSelectionBottomPadding @multipleSelectionLeftPadding;
-
-@multipleSelectionInlineMargin: 0.4em 0em 0.4em 0.5em;
-@multipleSelectionInlineLineHeight: @searchSelectionLineHeight;
-
-@multipleSelectionSearchStartWidth: (@glyphWidth * 2);
 
 /* Inline */
 @inlineIconMargin: 0em 0.5em 0em 0.25em;

src/themes/default/modules/search.variables

@@ -6,7 +6,7 @@
 @promptFontSize: @relativeMedium;
 @promptVerticalPadding: 0.78571em;
 @promptHorizontalPadding: 1em;
-@promptLineHeight: 1.2142em;
+@promptLineHeight: @defaultInputLineHeight;
 @promptPadding: (@promptVerticalPadding + ((1em - @promptLineHeight) / 2)) @promptHorizontalPadding;
 @promptBackground: @white;
 @promptBorder: 1px solid @borderColor;