Add new color rules to statistic #2280

src/definitions/views/statistic.less

@@ -312,115 +312,148 @@
      Colors
 ---------------*/
 
-.ui.blue.statistics .statistic > .value,
-.ui.statistics .blue.statistic > .value,
-.ui.blue.statistic > .value {
-  color: @blue;
-}
-.ui.green.statistics .statistic > .value,
-.ui.statistics .green.statistic > .value,
-.ui.green.statistic > .value {
-  color: @green;
+.ui.red.statistics .statistic > .value,
+.ui.statistics .red.statistic > .value,
+.ui.red.statistic > .value {
+  color: @red;
 }
 .ui.orange.statistics .statistic > .value,
 .ui.statistics .orange.statistic > .value,
 .ui.orange.statistic > .value {
   color: @orange;
 }
-.ui.pink.statistics .statistic > .value,
-.ui.statistics .pink.statistic > .value,
-.ui.pink.statistic > .value {
-  color: @pink;
-}
-.ui.purple.statistics .statistic > .value,
-.ui.statistics .purple.statistic > .value,
-.ui.purple.statistic > .value {
-  color: @purple;
+.ui.yellow.statistics .statistic > .value,
+.ui.statistics .yellow.statistic > .value,
+.ui.yellow.statistic > .value {
+  color: @yellow;
 }
-.ui.red.statistics .statistic > .value,
-.ui.statistics .red.statistic > .value,
-.ui.red.statistic > .value {
-  color: @red;
+.ui.green.statistics .statistic > .value,
+.ui.statistics .green.statistic > .value,
+.ui.green.statistic > .value {
+  color: @green;
 }
 .ui.teal.statistics .statistic > .value,
 .ui.statistics .teal.statistic > .value,
 .ui.teal.statistic > .value {
   color: @teal;
 }
-.ui.yellow.statistics .statistic > .value,
-.ui.statistics .yellow.statistic > .value,
-.ui.yellow.statistic > .value {
-  color: @yellow;
+.ui.blue.statistics .statistic > .value,
+.ui.statistics .blue.statistic > .value,
+.ui.blue.statistic > .value {
+  color: @blue;
 }
-
-/*--------------
-    Floated
----------------*/
-
-.ui[class*="left floated"].statistic {
-  float: left;
-  margin: @leftFloatedMargin;
+.ui.violet.statistics .statistic > .value,
+.ui.statistics .violet.statistic > .value,
+.ui.violet.statistic > .value {
+  color: @violet;
 }
-.ui[class*="right floated"].statistic {
-  float: right;
-  margin: @rightFloatedMargin;
+.ui.purple.statistics .statistic > .value,
+.ui.statistics .purple.statistic > .value,
+.ui.purple.statistic > .value {
+  color: @purple;
 }
-.ui.floated.statistic:last-child {
-  margin-bottom: 0em;
+.ui.pink.statistics .statistic > .value,
+.ui.statistics .pink.statistic > .value,
+.ui.pink.statistic > .value {
+  color: @pink;
+}
+.ui.brown.statistics .statistic > .value,
+.ui.statistics .brown.statistic > .value,
+.ui.brown.statistic > .value {
+  color: @brown;
+}
+.ui.grey.statistics .statistic > .value,
+.ui.statistics .grey.statistic > .value,
+.ui.grey.statistic > .value {
+  color: @grey;
 }
 
 /*--------------
     Inverted
 ---------------*/
 
+.ui.inverted.statistics .statistic > .value,
 .ui.inverted.statistic .value {
   color: @invertedValueColor;
 }
+.ui.inverted.statistics .statistic > .label,
 .ui.inverted.statistic .label {
   color: @invertedLabelColor;
 }
 
-.ui.inverted.blue.statistics .statistic > .value,
-.ui.statistics .inverted.blue.statistic > .value,
-.ui.inverted.blue.statistic > .value {
-  color: @lightBlue;
+.ui.inverted.red.statistics .statistic > .value,
+.ui.statistics .inverted.red.statistic > .value,
+.ui.inverted.red.statistic > .value {
+  color: @lightRed;
+}
+.ui.inverted.orange.statistics .statistic > .value,
+.ui.statistics .inverted.orange.statistic > .value,
+.ui.inverted.orange.statistic > .value {
+  color: @lightOrange;
+}
+.ui.inverted.yellow.statistics .statistic > .value,
+.ui.statistics .inverted.yellow.statistic > .value,
+.ui.inverted.yellow.statistic > .value {
+  color: @lightYellow;
 }
 .ui.inverted.green.statistics .statistic > .value,
 .ui.statistics .inverted.green.statistic > .value,
 .ui.inverted.green.statistic > .value {
   color: @lightGreen;
 }
-.ui.inverted.orange.statistics .statistic > .value,
-.ui.statistics .inverted.orange.statistic > .value,
-.ui.inverted.orange.statistic > .value {
-  color: @lightOrange;
+.ui.inverted.teal.statistics .statistic > .value,
+.ui.statistics .inverted.teal.statistic > .value,
+.ui.inverted.teal.statistic > .value {
+  color: @lightTeal;
 }
-.ui.inverted.pink.statistics .statistic > .value,
-.ui.statistics .inverted.pink.statistic > .value,
-.ui.inverted.pink.statistic > .value {
-  color: @lightPink;
+.ui.inverted.blue.statistics .statistic > .value,
+.ui.statistics .inverted.blue.statistic > .value,
+.ui.inverted.blue.statistic > .value {
+  color: @lightBlue;
+}
+.ui.inverted.violet.statistics .statistic > .value,
+.ui.statistics .inverted.violet.statistic > .value,
+.ui.inverted.violet.statistic > .value {
+  color: @lightViolet;
 }
 .ui.inverted.purple.statistics .statistic > .value,
 .ui.statistics .inverted.purple.statistic > .value,
 .ui.inverted.purple.statistic > .value {
   color: @lightPurple;
 }
-.ui.inverted.red.statistics .statistic > .value,
-.ui.statistics .inverted.red.statistic > .value,
-.ui.inverted.red.statistic > .value {
-  color: @lightRed;
+.ui.inverted.pink.statistics .statistic > .value,
+.ui.statistics .inverted.pink.statistic > .value,
+.ui.inverted.pink.statistic > .value {
+  color: @lightPink;
 }
-.ui.inverted.teal.statistics .statistic > .value,
-.ui.statistics .inverted.teal.statistic > .value,
-.ui.inverted.teal.statistic > .value {
-  color: @lightTeal;
+.ui.inverted.brown.statistics .statistic > .value,
+.ui.statistics .inverted.brown.statistic > .value,
+.ui.inverted.brown.statistic > .value {
+  color: @lightBrown;
 }
-.ui.inverted.yellow.statistics .statistic > .value,
-.ui.statistics .inverted.yellow.statistic > .value,
-.ui.inverted.yellow.statistic > .value {
-  color: @lightYellow;
+.ui.inverted.grey.statistics .statistic > .value,
+.ui.statistics .inverted.grey.statistic > .value,
+.ui.inverted.grey.statistic > .value {
+  color: @lightGrey;
 }
 
+/*--------------
+    Floated
+---------------*/
+
+.ui[class*="left floated"].statistic {
+  float: left;
+  margin: @leftFloatedMargin;
+}
+.ui[class*="right floated"].statistic {
+  float: right;
+  margin: @rightFloatedMargin;
+}
+.ui.floated.statistic:last-child {
+  margin-bottom: 0em;
+}
+
+
 /*--------------
      Sizes
 ---------------*/