|
@ -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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|