From 183679b11f32deb40d1a6bba78868e172fa6eff8 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 22 May 2015 16:33:14 -0400 Subject: [PATCH] #2280 Grid colors, and reduce ruleset --- src/definitions/collections/grid.less | 161 +++++++++++--------------- 1 file changed, 68 insertions(+), 93 deletions(-) diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index 0466fb626..148b8b97e 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -1276,135 +1276,110 @@ body > .ui.grid { Colored -----------------------*/ -.ui.grid > .white.row, -.ui.grid > .white.column, -.ui.grid > .row > .white.column { - background-color: @white !important; - color: @textColor; -} -.ui.grid > .row > .white.column { +.ui.grid > .row > .red.column, +.ui.grid > .row > .orange.column, +.ui.grid > .row > .yellow.column, +.ui.grid > .row > .green.column, +.ui.grid > .row > .teal.column, +.ui.grid > .row > .blue.column, +.ui.grid > .row > .violet.column, +.ui.grid > .row > .purple.column, +.ui.grid > .row > .pink.column, +.ui.grid > .row > .brown.column, +.ui.grid > .row > .grey.column, +.ui.grid > .row > .black.column { margin-top: -(@rowSpacing / 2); margin-bottom: -(@rowSpacing / 2); padding-top: (@rowSpacing / 2); padding-bottom: (@rowSpacing / 2); } -.ui.grid > .black.row, -.ui.grid > .black.column, -.ui.grid > .row > .black.column { - background-color: @black !important; +/* Red */ +.ui.grid > .red.row, +.ui.grid > .red.column, +.ui.grid > .row > .red.column { + background-color: @red !important; color: @white; } -.ui.grid > .row > .black.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); -} - -.ui.grid > .blue.row, -.ui.grid > .blue.column, -.ui.grid > .row > .blue.column { - background-color: @blue !important; +/* Orange */ +.ui.grid > .orange.row, +.ui.grid > .orange.column, +.ui.grid > .row > .orange.column { + background-color: @orange !important; color: @white; } -.ui.grid > .row > .blue.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); +/* Yellow */ +.ui.grid > .yellow.row, +.ui.grid > .yellow.column, +.ui.grid > .row > .yellow.column { + background-color: @yellow !important; + color: @white; } - +/* Green */ .ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column { background-color: @green !important; color: @white; } -.ui.grid > .row > .green.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); -} - -.ui.grid > .orange.row, -.ui.grid > .orange.column, -.ui.grid > .row > .orange.column { - background-color: @orange !important; +/* Teal */ +.ui.grid > .teal.row, +.ui.grid > .teal.column, +.ui.grid > .row > .teal.column { + background-color: @teal !important; color: @white; } -.ui.grid > .row > .orange.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); -} - -.ui.grid > .pink.row, -.ui.grid .pink.column { - background-color: @pink !important; +/* Blue */ +.ui.grid > .blue.row, +.ui.grid > .blue.column, +.ui.grid > .row > .blue.column { + background-color: @blue !important; color: @white; } -.ui.grid > .row > .pink.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); +/* 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; } -.ui.grid > .row > .purple.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); -} - -.ui.grid > .red.row, -.ui.grid > .red.column, -.ui.grid > .row > .red.column { - background-color: @red !important; +/* Pink */ +.ui.grid > .pink.row, +.ui.grid > .pink.column, +.ui.grid > .row > .pink.column { + background-color: @pink !important; color: @white; } -.ui.grid > .row > .red.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); -} - -.ui.grid > .teal.row, -.ui.grid > .teal.column, -.ui.grid > .row > .teal.column { - background-color: @teal !important; +/* Brown */ +.ui.grid > .brown.row, +.ui.grid > .brown.column, +.ui.grid > .row > .brown.column { + background-color: @brown !important; color: @white; } -.ui.grid > .row > .teal.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); -} - -.ui.grid > .yellow.row, -.ui.grid > .yellow.column, -.ui.grid > .row > .yellow.column { - background-color: @yellow !important; +/* Grey */ +.ui.grid > .grey.row, +.ui.grid > .grey.column, +.ui.grid > .row > .grey.column { + background-color: @grey !important; color: @white; } -.ui.grid > .row > .yellow.column { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); +/* Black */ +.ui.grid > .black.row, +.ui.grid > .black.column, +.ui.grid > .row > .black.column { + background-color: @black !important; + color: @white; } + /*---------------------- Equal Width -----------------------*/