refactor(message): adjust to volto theming

eea · Feb 8, 2022 · 3e950fc · 3e950fc
1 parent f54d380
commit 3e950fc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 132 deletions.
diff --git a/theme/themes/eea/collections/message.overrides b/theme/themes/eea/collections/message.overrides
@@ -2,128 +2,24 @@
          Theme Overrides
 *******************************/
 
-div.ui.message {
-  padding: @padding;
-  background: @background;
-  border-radius: @borderRadius;
-  box-shadow: @boxShadow;
-
-  .header,
-  .header:not(.ui) {
-    font-family: @pageFont;
-    font-size: @headerFontSize;
-    font-weight: @headerFontWeight;
-  }
-
-  p {
-    margin-top: 0;
-    color: @messageColor;
-    font-size: @messageFontSize;
-    font-weight: @headerFontWeight;
-  }
-}
-
-/* Icon next to header */
-div.ui.icon.message {
-  align-items: @iconAlign;
-}
-
-div.ui.icon.message > .icon,
-div.ui.icon.message > .icon:not(.close) {
-  margin-top: 2px;
-  font-size: @iconSize;
-}
-
-div.ui.message .content {
+/* Text size and weight */
+.ui.message p {
   font-size: @messageFontSize;
+  font-weight: @messageFontWeight;
 }
 
-div.ui.attached.message {
-  margin: 0;
-}
-
-/* Success message */
-div.ui.attached.success.message,
-div.ui.success.message {
-  background: @successBackground;
-  box-shadow: @successBoxShadow;
-
-  .header,
-  .header:not(.ui) {
-    color: @successColor;
-  }
-
-  .content p {
-    color: @successColor;
-    font-weight: @headerFontWeight;
-  }
-
-  .icon,
-  .icon:not(.close) {
-    color: @successColor;
-  }
-}
-
-/* Warning Message */
-div.ui.warning.message {
-  background: @warningBackground;
-  box-shadow: @warningBoxShadow;
-
-  .header,
-  .header:not(.ui) {
-    color: @warningColor;
-  }
-
-  .content p {
-    color: @warningColor;
-    font-weight: @headerFontWeight;
-  }
-
-  .icon,
-  .icon:not(.close) {
-    color: @warningColor;
-  }
+/* Text color for non state messages */
+.ui.message:not(.success):not(.error):not(.warning):not(.info):not(.negative):not(.positive) {
+  color: @messageColor;
 }
 
-/* Error Message */
-div.ui.error.message,
-div.ui.negative.message {
-  background: @errorBackground;
-  box-shadow: @errorBoxShadow;
-
-  .header,
-  .header:not(.ui) {
-    color: @errorColor;
-  }
-
-  .content p {
-    color: @errorColor;
-    font-weight: @headerFontWeight;
-  }
-
-  .icon,
-  .icon:not(.close) {
-    color: @errorColor;
-  }
+/* Align icon next to header */
+.ui.icon.message {
+  align-items: @messageItemsAlign;
 }
 
-/* Info message */
-div.ui.info.message {
-  background: @infoBackground;
-  box-shadow: @infoBoxShadow;
-
-  .header,
-  .header:not(.ui) {
-    color: @infoColor;
-  }
-
-  .content p {
-    color: @infoColor;
-    font-weight: @headerFontWeight;
-  }
-
-  .icon,
-  .icon:not(.close) {
-    color: @infoColor;
-  }
+/* Icon margin to align with header text size */
+div.ui.icon.message > .icon,
+div.ui.icon.message > .icon:not(.close) {
+  margin: @iconMargin;
 }
diff --git a/theme/themes/eea/collections/message.variables b/theme/themes/eea/collections/message.variables
@@ -14,6 +14,7 @@
 @padding: @verticalPadding @horizontalPadding;
 @background: #F2F2F2;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
+@messageItemsAlign: flex-start;
 
 @borderRadius: @defaultBorderRadius;
 @borderWidth: 0;
@@ -37,10 +38,11 @@
 @headerParagraphDistance: 0.15em;
 
 /* Paragraph */
-@messageTextOpacity: 0.85;
+@messageTextOpacity: 1;
 @messageParagraphMargin: 0;
 @messageColor: @black;
 @messageFontSize: 13px;
+@messageFontWeight: @bold;
 
 /* List */
 @listOpacity: 0.85;
@@ -64,7 +66,7 @@
 --------------------*/
 
 /* Icon Message */
-@iconAlign: flex-start;
+@iconMargin: 0.09rem 0.6rem 0 0;
 @iconSize: 1rem;
 @iconOpacity: 0.8;
 @iconContentDistance: 0rem;
@@ -132,22 +134,10 @@
 ;
 
 /* Warning / Positive / Negative / Info */
-@positiveBoxShadow:
-  0px 0px 0px @borderWidth @positiveBorderColor inset,
-  @shadowShadow
-;
-
+@positiveBoxShadow: none;
 @negativeBoxShadow: none;
 @infoBoxShadow: none;
-@infoBackground: #EEF2FA;
-@infoColor: #2E5AAC;
 @warningBoxShadow: none;
-@warningBackground: #FFF4EC;
-@warningColor: #B95000;
 @errorBoxShadow: none;
-@errorBackground: #FEEFEF;
-@errorColor: #DA1414;
 @successBoxShadow: none;
-@successBackground: #EDF9F0;
-@successColor: #287D3C;