feat(message): support centered variant

This PR adds a centered or center aligned as well as a right aligned variant to the message component just like many other components already support.
fomantic · Dec 19, 2020 · 48c4716 · 48c4716
1 parent 1f0334e
commit 48c4716
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less
@@ -107,9 +107,12 @@
 
 
 /* Icon */
-.ui.message > .icons,
-.ui.message > i.icon {
+.ui.icon.message > .icons,
+.ui.icon.message > i.icon {
   margin-right: @iconDistance;
+  &:last-child {
+    margin: 0 0 0 @iconDistance;
+  }
 }
 
 /* Close Icon */
@@ -170,6 +173,21 @@
 /*******************************
             Variations
 *******************************/
+& when (@variationMessageCentered) {
+  .ui.centered.message,
+  .ui.center.aligned.message {
+    text-align: center;
+    justify-content: center;
+    & > .content {
+      flex: 0 0 auto;
+    }
+  }
+}
+& when (@variationMessageRightAligned) {
+  .ui.right.aligned.message {
+    text-align: right;
+  }
+}
 
 & when (@variationMessageCompact) {
   /*--------------

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -274,6 +274,8 @@
 @variationMessageIcon: true;
 @variationMessageFloating: true;
 @variationMessageConsequences: true;
+@variationMessageCentered: true;
+@variationMessageRightAligned: true;
 @variationMessageSizes: @variationAllSizes;
 
 /* Table */