Create global input variables and center all other valus around them

src/themes/default/collections/form.variables

@@ -28,7 +28,6 @@
 @inputFont: @pageFont;
 @inputWidth: 100%;
 @inputFontSize: 1em;
-@inputLineHeight: @defaultInputLineHeight;
 @inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
 @inputBorder: 1px solid @borderColor;
 @inputBorderRadius: @absoluteBorderRadius;

src/themes/default/elements/input.variables

@@ -10,13 +10,13 @@
 @verticalPadding: @inputVerticalPadding;
 @horizontalPadding: @inputHorizontalPadding;
 
-@lineHeight: @defaultInputLineHeight;
+@lineHeight: @inputLineHeight;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
 
 @padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding;
 
 @textAlign: left;
-@background: #FFFFFF;
+@background: @inputBackground;
 @borderWidth: 1px;
 @border: @borderWidth solid @borderColor;
 @boxShadow: none;

src/themes/default/globals/site.variables

@@ -62,11 +62,11 @@
 @headerFontWeight : bold;
 @headerLineHeight : 1.2857em;
 
-@h1               : 2rem;
-@h2               : 1.714rem;
-@h3               : 1.28rem;
-@h4               : 1.071rem;
-@h5               : 1rem;
+@h1 : 2rem;
+@h2 : 1.714rem;
+@h3 : 1.28rem;
+@h4 : 1.071rem;
+@h5 : 1rem;
 
 /*--------------
    Form Input
@@ -79,7 +79,7 @@
 @inputPadding           : @inputVerticalPadding @inputHorizontalPadding;
 
 /* Line Height Default For Inputs in Browser */
-@defaultInputLineHeight: 1.2142em;
+@inputLineHeight: 1.2142em;
 
 /*-------------------
         Sizes

src/themes/default/modules/dropdown.variables

@@ -118,15 +118,19 @@
 /*-------------------
         Types
 --------------------*/
-/* Selection */
-@selectionMinWidth: 200px;
-@selectionBorderEmWidth:  @relative1px;
-@selectionMinHeight: @defaultInputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth;
-@selectionBackground: @white;
-@selectionDisplay: inline-block;
+
+/*------------
+   Selection
+--------------*/
+
+@selectionMinWidth: 14em;
 @selectionVerticalPadding: @inputVerticalPadding;
 @selectionHorizontalPadding: @inputHorizontalPadding;
-@selectionIconDistance: 2em;
+@selectionBorderEmWidth:  @relative1px;
+@selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth;
+@selectionBackground: @inputBackground;
+@selectionDisplay: inline-block;
+@selectionIconDistance: @inputHorizontalPadding + @glyphWidth + 0.5em;
 @selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding;
 @selectionZIndex: 10;
 
@@ -185,7 +189,7 @@
 @selectionHoverBorderColor: @selectedBorderColor;
 @selectionHoverBoxShadow: none;
 
-/* Hover */
+/* Focus */
 @selectionFocusBorderColor: @selectedBorderColor;
 @selectionFocusBoxShadow: none;
 @selectionFocusMenuBoxShadow: @raisedShadow;
@@ -206,11 +210,14 @@
 @selectionVisibleConnectingBorder: 0em;
 @selectionVisibleIconOpacity: 1;
 
-/* Search */
+/*--------------
+     Search
+--------------*/
+
 @searchMinWidth: '';
 
 /* Search Selection */
-@searchSelectionLineHeight: @defaultInputLineHeight;
+@searchSelectionLineHeight: @inputLineHeight;
 @searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2);
 @searchSelectionVerticalPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset);
 @searchSelectionHorizontalPadding: @selectionHorizontalPadding;
@@ -229,7 +236,9 @@
 @inlineMenuBorderRadius: @borderRadius;
 
 
-/* Multiple */
+/*--------------
+    Multiple
+--------------*/
 
 /* Split Actual Padding Between Child and Parent (allows for label spacing) */
 @multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3));
@@ -239,8 +248,8 @@
 
 /* Child Elements */
 @multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3));
-@multipleSelectionChildSpacing: @relative6px;
-@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildSpacing;
+@multipleSelectionChildLeftMargin: (@inputHorizontalPadding - @multipleSelectionLeftPadding);
+@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildLeftMargin;
 @multipleSelectionChildLineHeight: @searchSelectionLineHeight;
 @multipleSelectionSearchStartWidth: (@glyphWidth * 2);
 
@@ -250,9 +259,9 @@
 
 /* Selection Label */
 @labelSize: @relativeMedium;
-@labelHorizontalSpacing: @4px;
-@labelVerticalSpacing: (@relative4px / 2);
-@labelMargin: @labelVerticalSpacing @labelHorizontalSpacing @labelVerticalSpacing 0em;
+@labelHorizontalMargin: @4px;
+@labelVerticalMargin: (@relative6px / 2);
+@labelMargin: @labelVerticalMargin @labelHorizontalMargin @labelVerticalMargin 0em;
 @labelBorderWidth: 1px;
 @labelBoxShadow: 0px 0px 0px @labelBorderWidth @borderColor inset;
 
@@ -260,7 +269,6 @@
 @labelHorizontalPadding: @relativeMini;
 @labelPadding: @labelVerticalPadding @labelHorizontalPadding;
 
-
 /*-------------------
        States
 --------------------*/

src/themes/default/modules/search.variables

@@ -3,12 +3,12 @@
 *******************************/
 
 /* Search Prompt */
-@promptFontSize: @relativeMedium;
+@promptBackground: @inputBackground;
 @promptVerticalPadding: @inputVerticalPadding;
 @promptHorizontalPadding: @inputHorizontalPadding;
-@promptLineHeight: @defaultInputLineHeight;
+@promptLineHeight: @inputLineHeight;
+@promptFontSize: @relativeMedium;
 @promptPadding: (@promptVerticalPadding + ((1em - @promptLineHeight) / 2)) @promptHorizontalPadding;
-@promptBackground: @white;
 @promptBorder: 1px solid @borderColor;
 @promptBorderRadius: @circularRadius;
 @promptColor: @textColor;