Skip to content

Commit 48c4716

Browse files
authored
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.
1 parent 1f0334e commit 48c4716

File tree

2 files changed

+22
-2
lines changed

2 files changed

+22
-2
lines changed

src/definitions/collections/message.less

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,12 @@
107107

108108

109109
/* Icon */
110-
.ui.message > .icons,
111-
.ui.message > i.icon {
110+
.ui.icon.message > .icons,
111+
.ui.icon.message > i.icon {
112112
margin-right: @iconDistance;
113+
&:last-child {
114+
margin: 0 0 0 @iconDistance;
115+
}
113116
}
114117

115118
/* Close Icon */
@@ -170,6 +173,21 @@
170173
/*******************************
171174
Variations
172175
*******************************/
176+
& when (@variationMessageCentered) {
177+
.ui.centered.message,
178+
.ui.center.aligned.message {
179+
text-align: center;
180+
justify-content: center;
181+
& > .content {
182+
flex: 0 0 auto;
183+
}
184+
}
185+
}
186+
& when (@variationMessageRightAligned) {
187+
.ui.right.aligned.message {
188+
text-align: right;
189+
}
190+
}
173191

174192
& when (@variationMessageCompact) {
175193
/*--------------

src/themes/default/globals/variation.variables

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,8 @@
274274
@variationMessageIcon: true;
275275
@variationMessageFloating: true;
276276
@variationMessageConsequences: true;
277+
@variationMessageCentered: true;
278+
@variationMessageRightAligned: true;
277279
@variationMessageSizes: @variationAllSizes;
278280

279281
/* Table */

0 commit comments

Comments
 (0)