Browse Source

Fix background colors with grids

pull/2034/head
jlukic 9 years ago
parent
commit
dfa2e029d3
1 changed files with 23 additions and 20 deletions
  1. 43
      src/definitions/collections/grid.less

43
src/definitions/collections/grid.less

@ -127,11 +127,20 @@
Loose Coupling Loose Coupling
--------------------*/ --------------------*/
/* Collapse Margin */
.ui.grid > .ui.grid:first-child {
margin-top: 0em;
}
.ui.grid > .ui.grid:last-child {
margin-bottom: 0em;
}
/* Place Divider */
.ui.grid .row + .ui.divider { .ui.grid .row + .ui.divider {
margin: (@rowSpacing / 2) (@gutterWidth / 2); margin: (@rowSpacing / 2) (@gutterWidth / 2);
} }
/* remove Border on last horizontal segment */
/* Remove border on last horizontal segment */
.ui.grid > .row > .column:last-child > .horizontal.segment, .ui.grid > .row > .column:last-child > .horizontal.segment,
.ui.grid > .column:last-child > .horizontal.segment { .ui.grid > .column:last-child > .horizontal.segment {
box-shadow: none; box-shadow: none;
@ -146,21 +155,7 @@
Page Grid Page Grid
-------------------------*/ -------------------------*/
.ui.page.grid {
padding-left: @computerGutter;
padding-right: @computerGutter;
width: @computerWidth;
}
/* Collapse Margin */
.ui.grid > .ui.grid:first-child {
margin-top: 0em;
}
.ui.grid > .ui.grid:last-child {
margin-bottom: 0em;
}
@media only screen and (max-width: (@largestMobileScreen)) {
@media only screen and (max-width: @largestMobileScreen) {
.ui.page.grid { .ui.page.grid {
width: @mobileWidth; width: @mobileWidth;
padding-left: @mobileGutter; padding-left: @mobileGutter;
@ -169,7 +164,7 @@
margin-right: 0em; margin-right: 0em;
} }
} }
@media only screen and (min-width: @tabletBreakpoint ) {
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
.ui.page.grid { .ui.page.grid {
width: @tabletWidth; width: @tabletWidth;
margin-left: @tabletMargin; margin-left: @tabletMargin;
@ -178,7 +173,7 @@
padding-right: @tabletGutter; padding-right: @tabletGutter;
} }
} }
@media only screen and (min-width: @computerBreakpoint) {
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
.ui.page.grid { .ui.page.grid {
width: @computerWidth; width: @computerWidth;
margin-left: @computerMargin; margin-left: @computerMargin;
@ -187,7 +182,7 @@
padding-right: @computerGutter; padding-right: @computerGutter;
} }
} }
@media only screen and (min-width: @largeMonitorBreakpoint) {
@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
.ui.page.grid { .ui.page.grid {
width: @largeMonitorWidth; width: @largeMonitorWidth;
margin-left: @largeMonitorMargin; margin-left: @largeMonitorMargin;
@ -1289,6 +1284,7 @@
-----------------------*/ -----------------------*/
.ui.grid > .white.row, .ui.grid > .white.row,
.ui.grid > .white.column,
.ui.grid > .row > .white.column { .ui.grid > .row > .white.column {
background-color: @white !important; background-color: @white !important;
color: @textColor; color: @textColor;
@ -1301,6 +1297,7 @@
} }
.ui.grid > .black.row, .ui.grid > .black.row,
.ui.grid > .black.column,
.ui.grid > .row > .black.column { .ui.grid > .row > .black.column {
background-color: @black !important; background-color: @black !important;
color: @white; color: @white;
@ -1313,6 +1310,7 @@
} }
.ui.grid > .blue.row, .ui.grid > .blue.row,
.ui.grid > .blue.column,
.ui.grid > .row > .blue.column { .ui.grid > .row > .blue.column {
background-color: @blue !important; background-color: @blue !important;
color: @white; color: @white;
@ -1325,6 +1323,7 @@
} }
.ui.grid > .green.row, .ui.grid > .green.row,
.ui.grid > .green.column,
.ui.grid > .row > .green.column { .ui.grid > .row > .green.column {
background-color: @green !important; background-color: @green !important;
color: @white; color: @white;
@ -1337,6 +1336,7 @@
} }
.ui.grid > .orange.row, .ui.grid > .orange.row,
.ui.grid > .orange.column,
.ui.grid > .row > .orange.column { .ui.grid > .row > .orange.column {
background-color: @orange !important; background-color: @orange !important;
color: @white; color: @white;
@ -1361,6 +1361,7 @@
} }
.ui.grid > .purple.row, .ui.grid > .purple.row,
.ui.grid > .purple.column,
.ui.grid > .row > .purple.column { .ui.grid > .row > .purple.column {
background-color: @purple !important; background-color: @purple !important;
color: @white; color: @white;
@ -1373,6 +1374,7 @@
} }
.ui.grid > .red.row, .ui.grid > .red.row,
.ui.grid > .red.column,
.ui.grid > .row > .red.column { .ui.grid > .row > .red.column {
background-color: @red !important; background-color: @red !important;
color: @white; color: @white;
@ -1385,6 +1387,7 @@
} }
.ui.grid > .teal.row, .ui.grid > .teal.row,
.ui.grid > .teal.column,
.ui.grid > .row > .teal.column { .ui.grid > .row > .teal.column {
background-color: @teal !important; background-color: @teal !important;
color: @white; color: @white;
@ -1397,6 +1400,7 @@
} }
.ui.grid > .yellow.row, .ui.grid > .yellow.row,
.ui.grid > .yellow.column,
.ui.grid > .row > .yellow.column { .ui.grid > .row > .yellow.column {
background-color: @yellow !important; background-color: @yellow !important;
color: @white; color: @white;
@ -1476,7 +1480,6 @@
.ui[class*="equal height"].grid > .row > .column, .ui[class*="equal height"].grid > .row > .column,
.ui.grid > [class*="equal height"].row > .column { .ui.grid > [class*="equal height"].row > .column {
display: block; display: block;
flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }

Loading…
Cancel
Save