Fix input spacing rule on dropdown, add colored box shadows, add border colors to message

RELEASE-NOTES.md

@@ -59,6 +59,7 @@
 - **Table** - `striped selectable` table would not correctly show hover color on striped rows
 
 **Enhancements**
+- **Site** - Added colored box shadow defaults. `ui message` now includes individual colored border shadows based on new site defaults.
 - **Dropdown** - Added `1px` offset for current text so that the text position cursor does not overlap first pixel of text.
 - **Dropdown** - Added new convenience method `restore placeholder text`
 - **Rating** - Added new setting `fireOnInit` for rating, which defaults to `false`. When set to true `onRate` will fire when rating is initialized #3712

src/definitions/collections/message.less

@@ -351,6 +351,7 @@
 .ui.red.message {
   background-color: @redBackground;
   color: @redTextColor;
+  box-shadow: @redBoxShadow;
 }
 .ui.red.message .header {
   color: @redHeaderColor;
@@ -359,6 +360,7 @@
 .ui.orange.message {
   background-color: @orangeBackground;
   color: @orangeTextColor;
+  box-shadow: @orangeBoxShadow;
 }
 .ui.orange.message .header {
   color: @orangeHeaderColor;
@@ -367,6 +369,7 @@
 .ui.yellow.message {
   background-color: @yellowBackground;
   color: @yellowTextColor;
+  box-shadow: @yellowBoxShadow;
 }
 .ui.yellow.message .header {
   color: @yellowHeaderColor;
@@ -375,6 +378,7 @@
 .ui.olive.message {
   background-color: @oliveBackground;
   color: @oliveTextColor;
+  box-shadow: @oliveBoxShadow;
 }
 .ui.olive.message .header {
   color: @oliveHeaderColor;
@@ -383,6 +387,7 @@
 .ui.green.message {
   background-color: @greenBackground;
   color: @greenTextColor;
+  box-shadow: @greenBoxShadow;
 }
 .ui.green.message .header {
   color: @greenHeaderColor;
@@ -391,6 +396,7 @@
 .ui.teal.message {
   background-color: @tealBackground;
   color: @tealTextColor;
+  box-shadow: @tealBoxShadow;
 }
 .ui.teal.message .header {
   color: @tealHeaderColor;
@@ -399,6 +405,7 @@
 .ui.blue.message {
   background-color: @blueBackground;
   color: @blueTextColor;
+  box-shadow: @blueBoxShadow;
 }
 .ui.blue.message .header {
   color: @blueHeaderColor;
@@ -407,6 +414,7 @@
 .ui.violet.message {
   background-color: @violetBackground;
   color: @violetTextColor;
+  box-shadow: @violetBoxShadow;
 }
 .ui.violet.message .header {
   color: @violetHeaderColor;
@@ -415,6 +423,7 @@
 .ui.purple.message {
   background-color: @purpleBackground;
   color: @purpleTextColor;
+  box-shadow: @purpleBoxShadow;
 }
 .ui.purple.message .header {
   color: @purpleHeaderColor;
@@ -423,6 +432,7 @@
 .ui.pink.message {
   background-color: @pinkBackground;
   color: @pinkTextColor;
+  box-shadow: @pinkBoxShadow;
 }
 .ui.pink.message .header {
   color: @pinkHeaderColor;
@@ -431,6 +441,7 @@
 .ui.brown.message {
   background-color: @brownBackground;
   color: @brownTextColor;
+  box-shadow: @brownBoxShadow;
 }
 .ui.brown.message .header {
   color: @brownHeaderColor;
@@ -440,6 +451,12 @@
      Sizes
 ---------------*/
 
+.ui.mini.message {
+  font-size: @relativeMini;
+}
+.ui.tiny.message {
+  font-size: @relativeTiny;
+}
 .ui.small.message {
   font-size: @relativeSmall;
 }
@@ -449,6 +466,9 @@
 .ui.large.message {
   font-size: @relativeLarge;
 }
+.ui.big.message {
+  font-size: @relativeBig;
+}
 .ui.huge.message {
   font-size: @relativeHuge;
 }

src/definitions/modules/dropdown.js

@@ -3325,10 +3325,10 @@ $.fn.dropdown.settings = {
 
 
   apiSettings            : false,
-  saveRemoteData         : true,      // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh
-  throttle               : 200,       // How long to wait after last user input to search remotely
+  saveRemoteData         : true,       // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh
+  throttle               : 200,        // How long to wait after last user input to search remotely
 
-  context                : window,      // Context to use when determining if on screen
+  context                : window,     // Context to use when determining if on screen
   direction              : 'auto',     // Whether dropdown should always open in one direction
   keepOnScreen           : true,       // Whether dropdown should check whether it is on screen before showing
 
@@ -3357,7 +3357,7 @@ $.fn.dropdown.settings = {
   transition             : 'auto',     // auto transition will slide down or up based on direction
   duration               : 200,        // duration of transition
 
-  glyphWidth             : 1.037,     // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
+  glyphWidth             : 1.037,      // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
 
   // label settings on multi-select
   label: {

src/definitions/modules/dropdown.less

@@ -667,7 +667,7 @@ select.ui.dropdown {
   line-height: @multipleSelectionChildLineHeight;
 }
 .ui.multiple.dropdown > .label ~ input.search {
-  margin-left: @multipleSelectionSearchAfterLabelDistance;
+  margin-left: @multipleSelectionSearchAfterLabelDistance !important;
 }
 .ui.multiple.dropdown > .label ~ .text {
   display: none;

src/themes/default/collections/message.variables

@@ -84,6 +84,52 @@
   @floatingShadow
 ;
 
+/* Colors */
+@redBoxShadow:
+  0px 0px 0px @borderWidth @redBorderColor inset,
+  @shadowShadow
+;
+@orangeBoxShadow:
+  0px 0px 0px @borderWidth @orangeBorderColor inset,
+  @shadowShadow
+;
+@yellowBoxShadow:
+  0px 0px 0px @borderWidth @yellowBorderColor inset,
+  @shadowShadow
+;
+@oliveBoxShadow:
+  0px 0px 0px @borderWidth @oliveBorderColor inset,
+  @shadowShadow
+;
+@greenBoxShadow:
+  0px 0px 0px @borderWidth @greenBorderColor inset,
+  @shadowShadow
+;
+@tealBoxShadow:
+  0px 0px 0px @borderWidth @tealBorderColor inset,
+  @shadowShadow
+;
+@blueBoxShadow:
+  0px 0px 0px @borderWidth @blueBorderColor inset,
+  @shadowShadow
+;
+@violetBoxShadow:
+  0px 0px 0px @borderWidth @violetBorderColor inset,
+  @shadowShadow
+;
+@purpleBoxShadow:
+  0px 0px 0px @borderWidth @purpleBorderColor inset,
+  @shadowShadow
+;
+@pinkBoxShadow:
+  0px 0px 0px @borderWidth @pinkBorderColor inset,
+  @shadowShadow
+;
+@brownBoxShadow:
+  0px 0px 0px @borderWidth @brownBorderColor inset,
+  @shadowShadow
+;
+
 /* Warning / Positive / Negative / Info */
 @positiveBoxShadow:
   0px 0px 0px @borderWidth @positiveBorderColor inset,
@@ -108,4 +154,4 @@
 @successBoxShadow:
   0px 0px 0px @borderWidth @successBorderColor inset,
   @shadowShadow
-;
+;

src/themes/default/globals/site.variables

@@ -261,6 +261,19 @@
 @pinkTextColor   : @pink;
 @brownTextColor  : @brown;
 
+/*--- Colored Border ---*/
+@redBorderColor    : @redTextColor;
+@orangeBorderColor : @orangeTextColor;
+@yellowBorderColor : @yellowTextColor;
+@oliveBorderColor  : @oliveTextColor;
+@greenBorderColor  : @greenTextColor;
+@tealBorderColor   : @tealTextColor;
+@blueBorderColor   : @blueTextColor;
+@violetBorderColor : @violetTextColor;
+@purpleBorderColor : @purpleTextColor;
+@pinkBorderColor   : @pinkTextColor;
+@brownBorderColor  : @brownTextColor;
+
 /*-------------------
      Alpha Colors
 --------------------*/