diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index a6af740fb..02a6d7a26 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -201,6 +201,12 @@ Column Count --------------------*/ +/* Assume full width with one column */ +.ui.grid > .column:only-child, +.ui.grid > .row > .column:only-child { + width: @oneColumn; +} + /* Grid Based */ .ui[class*="one column"].grid > .row > .column, .ui[class*="one column"].grid > .column { @@ -317,11 +323,6 @@ width: @sixteenColumn !important; } -/* Assume full width with one column */ -.ui.grid > .column:only-child, -.ui.grid > .row > .column:only-child { - width: @oneColumn; -} /*------------------- Column Width @@ -510,8 +511,8 @@ Divided -----------------------*/ -.ui.divided.grid:not(.vertically) > .column:not(.row), -.ui.divided.grid:not(.vertically) > .row > .column { +.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column { box-shadow: @dividedBorder; } @@ -531,8 +532,8 @@ } /* No divider on first column on row */ -.ui.divided.grid:not(.vertically) > .column:first-child, -.ui.divided.grid:not(.vertically) > .row > .column:first-child { +.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: none; } @@ -573,12 +574,12 @@ } /* Inverted Divided */ -.ui.inverted.divided.grid:not(.vertical) > .column, -.ui.inverted.divided.grid:not(.vertical) > .row > .column { +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column, +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { box-shadow: @dividedInvertedBorder; } -.ui.inverted.divided.grid:not(.vertical) > .column:first-child, -.ui.inverted.divided.grid:not(.vertical) > .row > .column:first-child { +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:first-child, +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: none; } .ui.inverted[class*="vertically divided"].grid > .row { @@ -613,7 +614,7 @@ .ui.celled.grid > .column.row:first-child { display: table; table-layout: fixed; - width: 100%; + width: 100% !important; margin: 0em; padding: 0em; box-shadow: 0px (-@celledWidth) 0px 0px @celledBorderColor; @@ -632,6 +633,16 @@ box-shadow: none; } +/* Internally Celled */ +.ui[class*="internally celled"].grid { + box-shadow: none; +} +.ui[class*="internally celled"].grid > .row:first-child { + box-shadow: none; +} +.ui[class*="internally celled"].grid > .row > .column:first-child { + box-shadow: none; +} /*---------------------- Horizontally Centered @@ -858,10 +869,11 @@ table-layout: fixed; width: @tableWidth; } +.ui[class*="equal height"].grid > .row, .ui[class*="equal height"].row { display: table; table-layout: fixed; - width: 100%; + width: 100% !important; } .ui[class*="equal height"].grid > .column, .ui[class*="equal height"].grid > .row > .column, @@ -877,16 +889,21 @@ /* Mobily Only */ @media only screen and (max-width: @largestMobileScreen) { + .ui.doubling.grid { + width: 100% !important; + } .ui.grid > .doubling.row, .ui.doubling.grid > .row { - margin: 0em; - padding: 0em; + display: block !important; + margin: 0em !important; + padding: 0em !important; } .ui.grid > .doubling.row > .column, .ui.doubling.grid > .row > .column { + display: inline-block !important; padding-top: (@rowSpacing / 2) !important; padding-bottom: (@rowSpacing / 2) !important; - margin: 0em; + margin: 0em !important; } .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="two column"].doubling:not(.stackable).grid > .column, @@ -952,13 +969,17 @@ /* Tablet Only */ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.doubling.grid { + width: 100% !important; + } .ui.grid > .doubling.row, .ui.doubling.grid > .row { - margin: 0em; - padding: 0em; + margin: 0em !important; + padding: 0em !important; } .ui.grid > .doubling.row > .column, .ui.doubling.grid > .row > .column { + display: inline-block !important; padding-top: (@rowSpacing / 2) !important; padding-bottom: (@rowSpacing / 2) !important; margin: 0em; @@ -1032,6 +1053,7 @@ @media only screen and (max-width: @largestMobileScreen) { .ui.stackable.grid { display: block !important; + width: 100%; padding: 0em; margin: 0em !important; }