refactor(Label):style changes based on label importance class

eea · May 4, 2022 · ce4d5d1 · ce4d5d1
1 parent e2bbbb9
commit ce4d5d1
Showing 1 changed file with 86 additions and 31 deletions.
diff --git a/theme/themes/eea/elements/label.overrides b/theme/themes/eea/elements/label.overrides
@@ -7,64 +7,119 @@
   line-height: @labelLineHeight;
 }
 
-.ui.label.low {
+.ui.low.labels .label,
+.ui.low.label {
   background-color: @lowImportanceBackground;
   border-color: @lowImportanceBackground;
 }
 
-.ui.label.basic.low {
-  color: @lowImportanceBasicTextColor;
-  background: none @white;
+.ui.medium.labels .label,
+.ui.medium.label {
+  background-color: @mediumImportanceBackground;
+  border-color: @mediumImportanceBackground;
+}
+
+.ui.high.labels .label,
+.ui.high.label {
+  background-color: @highImportanceBackground;
+  border-color: @highImportanceBackground;
+}
+
+.ui.highlight.labels .label,
+.ui.highlight.label {
+  background-color: @highlightImportanceBackground;
+  border-color: @highlightImportanceBackground;
 }
 
-.ui.label.low:hover {
+/* Link */
+.ui.low.labels .label:hover,
+a.ui.low.label:hover{
   background-color: @lowImportanceHoverBackground;
   border-color: @lowImportanceHoverBackground;
 }
 
-.ui.label.medium {
-  background-color: @mediumImportanceBackground;
-  border-color: @mediumImportanceBackground;
+.ui.medium.labels .label:hover,
+a.ui.medium.label:hover{
+  background-color: @mediumImportanceHoverBackground;
+  border-color: @mediumImportanceHoverBackground;
 }
 
-.ui.label.basic.medium {
-  color: @mediumImportanceBasicTextColor;
-  background: none @white;
+.ui.high.labels .label:hover,
+a.ui.high.label:hover{
+  background-color: @highImportanceHoverBackground;
+  border-color: @highImportanceHoverBackground;
 }
 
-.ui.label.medium:hover {
-    background-color: @mediumImportanceHoverBackground;
-    border-color: @mediumImportanceHoverBackground;
+.ui.highlight.labels .label:hover,
+a.ui.highlight.label:hover{
+  background-color: @highlightImportanceHoverBackground;
+  border-color: @highlightImportanceHoverBackground;
 }
 
-.ui.label.high {
-  background-color: @highImportanceBackground;
-  border-color: @highImportanceBackground;
+/* Ribbon */
+.ui.low.ribbon.label {
+  border-color: @lowImportanceBackground;
 }
 
-.ui.label.basic.high {
-  color: @highImportanceBasicTextColor;
-  background: none @white;
+.ui.medium.ribbon.label {
+  border-color: @mediumImportanceBackground;
 }
 
-.ui.label.high:hover {
-    background-color: @highImportanceHoverBackground;
-    border-color: @highImportanceHoverBackground;
+.ui.high.ribbon.label {
+  border-color: @highImportanceBackground;
 }
 
-.ui.label.highlight {
-  background-color: @highlightImportanceBackground;
+.ui.highlight.ribbon.label {
   border-color: @highlightImportanceBackground;
 }
 
-.ui.label.basic.highlight {
-  color: @highlightImportanceBasicTextColor;
-  background: none @white;
+/* Basic */
+.ui.basic.low.label {
+  background: @white;
+  color: @lowImportanceBasicTextColor;
+  border-color: @lowImportanceBackground;
+}
+.ui.basic.low.labels a.label:hover,
+a.ui.basic.low.label:hover {
+  background-color: @white;
+  color: @lowImportanceHoverBackground;
+  border-color: @lowImportanceHoverBackground;
+}
+
+.ui.basic.medium.label {
+  background: @white;
+  color: @mediumImportanceBasicTextColor;
+  border-color: @mediumImportanceBackground;
+}
+.ui.basic.medium.labels a.label:hover,
+a.ui.basic.medium.label:hover {
+  background-color: @white;
+  color: @mediumImportanceHoverBackground;
+  border-color: @mediumImportanceHoverBackground;
+}
+
+.ui.basic.high.label {
+  background: @white;
+  color: @highImportanceBasicTextColor;
+  border-color: @highImportanceBackground;
+}
+.ui.basic.high.labels a.label:hover,
+a.ui.basic.high.label:hover {
+  background-color: @white;
+  color: @highImportanceHoverBackground;
+  border-color: @highImportanceHoverBackground;
 }
 
-.ui.label.highlight:hover {
-    background-color: @highlightImportanceHoverBackground;
-    border-color: @highlightImportanceHoverBackground;
+.ui.basic.highlight.label {
+  background: @white;
+  color: @highlightImportanceBasicTextColor;
+  border-color: @highlightImportanceBackground;
+}
+.ui.basic.highlight.labels a.label:hover,
+a.ui.basic.highlight.label:hover {
+  background-color: @white;
+  color: @highlightImportanceHoverBackground;
+  border-color: @highlightImportanceHoverBackground;
 }
 
 // Custom variations and combinations in slate