From 7e7d8ed3cce30fa004d90fd8a261ae6df783c80e Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 15 Apr 2015 13:02:47 -0400 Subject: [PATCH] Consolidate input browser line height across components, fix multi select to match input height in all cases --- src/definitions/modules/dropdown.less | 18 +++++----- src/definitions/modules/sticky.js | 2 +- src/themes/default/collections/form.variables | 2 +- src/themes/default/elements/input.variables | 2 +- src/themes/default/globals/site.variables | 3 ++ src/themes/default/modules/dropdown.variables | 34 +++++++++++-------- src/themes/default/modules/search.variables | 2 +- 7 files changed, 36 insertions(+), 27 deletions(-) diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index bbc2f0d61..0f323f196 100755 --- a/src/definitions/modules/dropdown.less +++ b/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; } diff --git a/src/definitions/modules/sticky.js b/src/definitions/modules/sticky.js index 11f67a576..8dad2963e 100644 --- a/src/definitions/modules/sticky.js +++ b/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 }); diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index 0eed10440..4d4a3392f 100644 --- a/src/themes/default/collections/form.variables +++ b/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; diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables index 3b29bc787..437934321 100644 --- a/src/themes/default/elements/input.variables +++ b/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; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 4e76d3720..7e73c69d1 100644 --- a/src/themes/default/globals/site.variables +++ b/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; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index 768c577af..c8cd17a57 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -207,7 +207,7 @@ @searchMinWidth: ''; /* Search Selection */ -@searchSelectionLineHeight: 1.2142em; /* browser default for webkit */ +@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; diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables index c22941712..26b07dcf9 100644 --- a/src/themes/default/modules/search.variables +++ b/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;