fix(message): add floating to colored messages

Closes #123 / Semantic-Org/Semantic-UI#6590
fomantic · Sep 20, 2018 · 6fe1954 · 6fe1954
1 parent e764530
commit 6fe1954
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 166 deletions.
diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less
@@ -264,191 +264,69 @@
      Types
 ---------------*/
 
-/* Positive */
-.ui.positive.message {
-  background-color: @positiveBackgroundColor;
-  color: @positiveTextColor;
-}
-.ui.positive.message,
-.ui.attached.positive.message {
-  box-shadow: @positiveBoxShadow;
-}
-.ui.positive.message .header {
-  color: @positiveHeaderColor;
+.addMessageType(@color; @backgroundSuffix: "") {
+  @_messageBackground: "@{color}Background@{backgroundSuffix}";
+  @_messageTextColor: "@{color}TextColor";
+  @_messageHeaderColor: "@{color}HeaderColor";
+  @_messageShadow: "@{color}BoxShadow";
+  @_messageFloatingShadow: "@{color}BoxFloatingShadow";
+
+  .ui.@{color}.message {
+    background-color: @@_messageBackground;
+    color: @@_messageTextColor;
+  }
+
+  .ui.@{color}.message,
+  .ui.attached.@{color}.message {
+    box-shadow: @@_messageShadow;
+  }
+
+  .ui.floating.@{color}.message {
+    box-shadow: @@_messageFloatingShadow;
+  }
+
+  .ui.@{color}.message .header {
+    color: @@_messageHeaderColor;
+  }
 }
 
+/* Positive */
+.addMessageType(positive, ~"Color");
+
 /* Negative */
-.ui.negative.message {
-  background-color: @negativeBackgroundColor;
-  color: @negativeTextColor;
-}
-.ui.negative.message,
-.ui.attached.negative.message {
-  box-shadow: @negativeBoxShadow;
-}
-.ui.negative.message .header {
-  color: @negativeHeaderColor;
-}
+.addMessageType(negative, ~"Color");
 
 /* Info */
-.ui.info.message {
-  background-color: @infoBackgroundColor;
-  color: @infoTextColor;
-}
-.ui.info.message,
-.ui.attached.info.message {
-  box-shadow: @infoBoxShadow;
-}
-.ui.info.message .header {
-  color: @infoHeaderColor;
-}
+.addMessageType(info, ~"Color");
 
 /* Warning */
-.ui.warning.message {
-  background-color: @warningBackgroundColor;
-  color: @warningTextColor;
-}
-.ui.warning.message,
-.ui.attached.warning.message {
-  box-shadow: @warningBoxShadow;
-}
-.ui.warning.message .header {
-  color: @warningHeaderColor;
-}
+.addMessageType(warning, ~"Color");
 
 /* Error */
-.ui.error.message {
-  background-color: @errorBackgroundColor;
-  color: @errorTextColor;
-}
-.ui.error.message,
-.ui.attached.error.message {
-  box-shadow: @errorBoxShadow;
-}
-.ui.error.message .header {
-  color: @errorHeaderColor;
-}
+.addMessageType(error, ~"Color");
 
 /* Success */
-.ui.success.message {
-  background-color: @successBackgroundColor;
-  color: @successTextColor;
-}
-.ui.success.message,
-.ui.attached.success.message {
-  box-shadow: @successBoxShadow;
-}
-.ui.success.message .header {
-  color: @successHeaderColor;
-}
-
+.addMessageType(success, ~"Color");
 
 /* Colors */
+.addMessageType(red);
+.addMessageType(orange);
+.addMessageType(yellow);
+.addMessageType(olive);
+.addMessageType(green);
+.addMessageType(teal);
+.addMessageType(blue);
+.addMessageType(violet);
+.addMessageType(purple);
+.addMessageType(pink);
+.addMessageType(brown);
+
 .ui.inverted.message,
 .ui.black.message {
   background-color: @black;
   color: @invertedTextColor;
 }
 
-.ui.red.message {
-  background-color: @redBackground;
-  color: @redTextColor;
-  box-shadow: @redBoxShadow;
-}
-.ui.red.message .header {
-  color: @redHeaderColor;
-}
-
-.ui.orange.message {
-  background-color: @orangeBackground;
-  color: @orangeTextColor;
-  box-shadow: @orangeBoxShadow;
-}
-.ui.orange.message .header {
-  color: @orangeHeaderColor;
-}
-
-.ui.yellow.message {
-  background-color: @yellowBackground;
-  color: @yellowTextColor;
-  box-shadow: @yellowBoxShadow;
-}
-.ui.yellow.message .header {
-  color: @yellowHeaderColor;
-}
-
-.ui.olive.message {
-  background-color: @oliveBackground;
-  color: @oliveTextColor;
-  box-shadow: @oliveBoxShadow;
-}
-.ui.olive.message .header {
-  color: @oliveHeaderColor;
-}
-
-.ui.green.message {
-  background-color: @greenBackground;
-  color: @greenTextColor;
-  box-shadow: @greenBoxShadow;
-}
-.ui.green.message .header {
-  color: @greenHeaderColor;
-}
-
-.ui.teal.message {
-  background-color: @tealBackground;
-  color: @tealTextColor;
-  box-shadow: @tealBoxShadow;
-}
-.ui.teal.message .header {
-  color: @tealHeaderColor;
-}
-
-.ui.blue.message {
-  background-color: @blueBackground;
-  color: @blueTextColor;
-  box-shadow: @blueBoxShadow;
-}
-.ui.blue.message .header {
-  color: @blueHeaderColor;
-}
-
-.ui.violet.message {
-  background-color: @violetBackground;
-  color: @violetTextColor;
-  box-shadow: @violetBoxShadow;
-}
-.ui.violet.message .header {
-  color: @violetHeaderColor;
-}
-
-.ui.purple.message {
-  background-color: @purpleBackground;
-  color: @purpleTextColor;
-  box-shadow: @purpleBoxShadow;
-}
-.ui.purple.message .header {
-  color: @purpleHeaderColor;
-}
-
-.ui.pink.message {
-  background-color: @pinkBackground;
-  color: @pinkTextColor;
-  box-shadow: @pinkBoxShadow;
-}
-.ui.pink.message .header {
-  color: @pinkHeaderColor;
-}
-
-.ui.brown.message {
-  background-color: @brownBackground;
-  color: @brownTextColor;
-  box-shadow: @brownBoxShadow;
-}
-.ui.brown.message .header {
-  color: @brownHeaderColor;
-}
-
 /*--------------
      Sizes
 ---------------*/

diff --git a/src/themes/default/collections/message.variables b/src/themes/default/collections/message.variables
@@ -90,69 +90,137 @@
   0px 0px 0px @borderWidth @redBorderColor inset,
   @shadowShadow
 ;
+@redBoxFloatingShadow:
+  0px 0px 0px @borderWidth @redBorderColor inset,
+  @floatingShadow
+;
 @orangeBoxShadow:
   0px 0px 0px @borderWidth @orangeBorderColor inset,
   @shadowShadow
 ;
+@orangeBoxFloatingShadow:
+  0px 0px 0px @borderWidth @orangeBorderColor inset,
+  @floatingShadow
+;
 @yellowBoxShadow:
   0px 0px 0px @borderWidth @yellowBorderColor inset,
   @shadowShadow
 ;
+@yellowBoxFloatingShadow:
+   0px 0px 0px @borderWidth @yellowBorderColor inset,
+   @floatingShadow
+;
 @oliveBoxShadow:
   0px 0px 0px @borderWidth @oliveBorderColor inset,
   @shadowShadow
 ;
+@oliveBoxFloatingShadow:
+  0px 0px 0px @borderWidth @oliveBorderColor inset,
+  @floatingShadow
+;
 @greenBoxShadow:
   0px 0px 0px @borderWidth @greenBorderColor inset,
   @shadowShadow
 ;
+@greenBoxFloatingShadow:
+  0px 0px 0px @borderWidth @greenBorderColor inset,
+  @floatingShadow
+;
 @tealBoxShadow:
   0px 0px 0px @borderWidth @tealBorderColor inset,
   @shadowShadow
 ;
+@tealBoxFloatingShadow:
+  0px 0px 0px @borderWidth @tealBorderColor inset,
+  @floatingShadow
+;
 @blueBoxShadow:
   0px 0px 0px @borderWidth @blueBorderColor inset,
   @shadowShadow
 ;
+@blueBoxFloatingShadow:
+  0px 0px 0px @borderWidth @blueBorderColor inset,
+  @floatingShadow
+;
 @violetBoxShadow:
   0px 0px 0px @borderWidth @violetBorderColor inset,
   @shadowShadow
 ;
+@violetBoxFloatingShadow:
+  0px 0px 0px @borderWidth @violetBorderColor inset,
+  @floatingShadow
+;
 @purpleBoxShadow:
   0px 0px 0px @borderWidth @purpleBorderColor inset,
   @shadowShadow
 ;
+@purpleBoxFloatingShadow:
+  0px 0px 0px @borderWidth @purpleBorderColor inset,
+  @floatingShadow
+;
 @pinkBoxShadow:
   0px 0px 0px @borderWidth @pinkBorderColor inset,
   @shadowShadow
 ;
+@pinkBoxFloatingShadow:
+  0px 0px 0px @borderWidth @pinkBorderColor inset,
+  @floatingShadow
+;
 @brownBoxShadow:
   0px 0px 0px @borderWidth @brownBorderColor inset,
   @shadowShadow
 ;
+@brownBoxFloatingShadow:
+  0px 0px 0px @borderWidth @brownBorderColor inset,
+  @floatingShadow
+;
 
 /* Warning / Positive / Negative / Info */
 @positiveBoxShadow:
   0px 0px 0px @borderWidth @positiveBorderColor inset,
   @shadowShadow
 ;
+@positiveBoxFloatingShadow:
+  0px 0px 0px @borderWidth @positiveBorderColor inset,
+  @floatingShadow
+;
 @negativeBoxShadow:
   0px 0px 0px @borderWidth @negativeBorderColor inset,
   @shadowShadow
 ;
+@negativeBoxFloatingShadow:
+  0px 0px 0px @borderWidth @negativeBorderColor inset,
+  @floatingShadow
+;
 @infoBoxShadow:
   0px 0px 0px @borderWidth @infoBorderColor inset,
   @shadowShadow
 ;
+@infoBoxFloatingShadow:
+  0px 0px 0px @borderWidth @infoBorderColor inset,
+  @floatingShadow
+;
 @warningBoxShadow:
   0px 0px 0px @borderWidth @warningBorderColor inset,
   @shadowShadow
 ;
+@warningBoxFloatingShadow:
+  0px 0px 0px @borderWidth @warningBorderColor inset,
+  @floatingShadow
+;
 @errorBoxShadow:
   0px 0px 0px @borderWidth @errorBorderColor inset,
   @shadowShadow
 ;
+@errorBoxFloatingShadow:
+  0px 0px 0px @borderWidth @errorBorderColor inset,
+  @floatingShadow
+;
 @successBoxShadow:
   0px 0px 0px @borderWidth @successBorderColor inset,
   @shadowShadow
 ;
+@successBoxFloatingShadow:
+  0px 0px 0px @borderWidth @successBorderColor inset,
+  @floatingShadow
+;