feat(colors): add central dynamic color map for every component

fomantic · Dec 21, 2018 · 6e4994d · 6e4994d
1 parent 68b7b00
commit 6e4994d
Show file tree

Hide file tree

Showing 25 changed files with 1,378 additions and 2,089 deletions.
diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less
@@ -1278,97 +1278,17 @@
  Colored
 -----------------------*/
 
-/* Red */
-.ui.grid > .red.row,
-.ui.grid > .red.column,
-.ui.grid > .row > .red.column {
- background-color: @red !important;
- color: @white;
-}
-/* Orange */
-.ui.grid > .orange.row,
-.ui.grid > .orange.column,
-.ui.grid > .row > .orange.column {
- background-color: @orange !important;
- color: @white;
-}
-/* Yellow */
-.ui.grid > .yellow.row,
-.ui.grid > .yellow.column,
-.ui.grid > .row > .yellow.column {
- background-color: @yellow !important;
- color: @white;
-}
-/* Olive */
-.ui.grid > .olive.row,
-.ui.grid > .olive.column,
-.ui.grid > .row > .olive.column {
- background-color: @olive !important;
- color: @white;
-}
-/* Green */
-.ui.grid > .green.row,
-.ui.grid > .green.column,
-.ui.grid > .row > .green.column {
- background-color: @green !important;
- color: @white;
-}
-/* Teal */
-.ui.grid > .teal.row,
-.ui.grid > .teal.column,
-.ui.grid > .row > .teal.column {
- background-color: @teal !important;
- color: @white;
-}
-/* Blue */
-.ui.grid > .blue.row,
-.ui.grid > .blue.column,
-.ui.grid > .row > .blue.column {
- background-color: @blue !important;
- color: @white;
-}
-/* Violet */
-.ui.grid > .violet.row,
-.ui.grid > .violet.column,
-.ui.grid > .row > .violet.column {
- background-color: @violet !important;
- color: @white;
-}
-/* Purple */
-.ui.grid > .purple.row,
-.ui.grid > .purple.column,
-.ui.grid > .row > .purple.column {
- background-color: @purple !important;
- color: @white;
-}
-/* Pink */
-.ui.grid > .pink.row,
-.ui.grid > .pink.column,
-.ui.grid > .row > .pink.column {
- background-color: @pink !important;
- color: @white;
-}
-/* Brown */
-.ui.grid > .brown.row,
-.ui.grid > .brown.column,
-.ui.grid > .row > .brown.column {
- background-color: @brown !important;
- color: @white;
-}
-/* Grey */
-.ui.grid > .grey.row,
-.ui.grid > .grey.column,
-.ui.grid > .row > .grey.column {
- background-color: @grey !important;
- color: @white;
-}
-/* Black */
-.ui.grid > .black.row,
-.ui.grid > .black.column,
-.ui.grid > .row > .black.column {
- background-color: @black !important;
- color: @white;
-}
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+
+ .ui.grid > .@{color}.row,
+ .ui.grid > .@{color}.column,
+ .ui.grid > .row > .@{color}.column {
+ background-color: @c;
+ color: @white;
+ }
+})
 
 
 /*----------------------