diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index 69ec58169..aa6f2e4c3 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -828,57 +828,6 @@ } -/*---------------------- - Only (Device) ------------------------*/ - -/* Mobile Only Hide */ -@media only screen and ( max-width: @largestMobileScreen ) { - .ui.tablet:not(.mobile).only.grid, - .ui.grid > [class*="tablet only"].row:not(.mobile), - .ui.grid > [class*="tablet only"].column:not(.mobile), - .ui.grid > .row > [class*="tablet only"].column:not(.mobile) { - display: none !important; - } - .ui[class*="computer only"].grid:not(.mobile), - .ui.grid > [class*="computer only"].row:not(.mobile), - .ui.grid > [class*="computer only"].column:not(.mobile), - .ui.grid > .row > [class*="computer only"].column:not(.mobile) { - display: none !important; - } -} -/* Tablet Only Hide */ -@media only screen and (min-width: (@tabletBreakpoint)) and (max-width: @largestTabletScreen ) { - .ui[class*="mobile only"].grid:not(.tablet), - .ui.grid > [class*="mobile only"].row:not(.tablet), - .ui.grid > [class*="mobile only"].column:not(.tablet), - .ui.grid > .row > [class*="mobile only"].column:not(.tablet) { - display: none !important; - } - .ui[class*="computer only"].grid:not(.tablet), - .ui.grid > [class*="computer only"].row:not(.tablet), - .ui.grid > [class*="computer only"].column:not(.tablet), - .ui.grid > .row > [class*="computer only"].column:not(.tablet) { - display: none !important; - } -} - -/* Computer Only Hide */ -@media only screen and ( min-width: (@computerBreakpoint) ) { - .ui[class*="mobile only"].grid:not(.computer), - .ui.grid > [class*="mobile only"].row:not(.computer), - .ui.grid > [class*="mobile only"].column:not(.computer), - .ui.grid > .row > [class*="mobile only"].column:not(.computer) { - display: none !important; - } - .ui[class*="tablet only"].grid:not(.computer), - .ui.grid > [class*="tablet only"].row:not(.computer), - .ui.grid > [class*="tablet only"].column:not(.computer), - .ui.grid > .row > [class*="tablet only"].column:not(.computer) { - display: none !important; - } -} - /*------------------- Doubling --------------------*/ @@ -1086,4 +1035,58 @@ } +/*---------------------- + Only (Device) +-----------------------*/ + + +/* These include arbitrary class repetitions for forced specificity */ + +/* Mobile Only Hide */ +@media only screen and ( max-width: @largestMobileScreen ) { + .ui.tablet:not(.mobile).only.grid.grid.grid, + .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { + display: none !important; + } +} +/* Tablet Only Hide */ +@media only screen and (min-width: (@tabletBreakpoint)) and (max-width: @largestTabletScreen ) { + .ui[class*="mobile only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { + display: none !important; + } +} + +/* Computer Only Hide */ +@media only screen and ( min-width: (@computerBreakpoint) ) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } +} + .loadUIOverrides(); \ No newline at end of file