Fixes #1080 issue with computer and tablet only grid

src/definitions/collections/grid.less

@@ -669,98 +669,53 @@ body > .ui.grid:not(.page) {
      Only (Device)
 -----------------------*/
 
-/* Mobile Only */
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
-  .ui.mobile.only.grid,
-  .ui.grid > .mobile.only.row {
-    display: block !important;
-  }
-  .ui.grid > .row > .mobile.only.column {
-    display: inline-block !important;
-  }
-  .ui.celled.mobile.only.grid,
-  .ui.celled.mobile.only.grid .row,
-  .ui.celled.grid .mobile.only.row,
-  .ui.grid .mobile.only.equal.height.row,
-  .ui.mobile.only.grid .equal.height.row  {
-    display: table !important;
-  }
-  .ui.celled.grid > .row > .mobile.only.column,
-  .ui.celled.mobile.only.grid > .row > .column,
-  .ui.celled.mobile.only.grid > .column {
-    display: table-cell !important;
+/* Mobile Only Hide */
+@media only screen and ( max-width : (@tabletBreakpoint - 1px) ) {
+  .ui.tablet:not(.mobile).only.grid,
+  .ui.grid > .tablet:not(.mobile).only.row,
+  .ui.grid > .tablet:not(.mobile).only.column,
+  .ui.grid > .row > .tablet:not(.mobile).only.column {
+    display: none;
   }
-}
-@media only screen and (min-width : @tabletBreakpoint) {
-  .ui.mobile.only.grid,
-  .ui.grid > .mobile.only.row,
-  .ui.grid > .mobile.only.column,
-  .ui.grid > .row > .mobile.only.column {
+  .ui.computer:not(.mobile).only.grid,
+  .ui.grid > .computer:not(.mobile).only.row,
+  .ui.grid > .computer:not(.mobile).only.column,
+  .ui.grid > .row > .computer:not(.mobile).only.column {
     display: none;
   }
 }
-/* Tablet Only */
-@media only screen and (min-width : @tabletBreakpoint) and (max-width : (@computerBreakpoint - 1px)) {
-  .ui.tablet.only.grid,
-  .ui.grid > .tablet.only.row {
-    display: block !important;
-  }
-  .ui.grid > .row > .tablet.only.column {
-    display: inline-block !important;
-  }
-  .ui.celled.tablet.only.grid,
-  .ui.celled.tablet.only.grid .row,
-  .ui.celled.grid .tablet.only.row,
-  .ui.grid .tablet.only.equal.height.row,
-  .ui.tablet.only.grid .equal.height.row  {
-    display: table !important;
-  }
-  .ui.celled.grid > .row > .tablet.only.column,
-  .ui.celled.tablet.only.grid > .row > .column,
-  .ui.celled.tablet.only.grid > .column {
-    display: table-cell !important;
+/* Tablet Only Hide */
+@media only screen and (min-width: (@tabletBreakpoint)) and (max-width: (@computerBreakpoint - 1px) ) {
+  .ui.mobile:not(.tablet).only.grid,
+  .ui.grid > .mobile:not(.tablet).only.row,
+  .ui.grid > .mobile:not(.tablet).only.column,
+  .ui.grid > .row > .mobile:not(.tablet).only.column {
+    display: none;
   }
-}
-@media only screen and (max-width : (@tabletBreakpoint - 1px)), (min-width: @computerBreakpoint) {
-  .ui.tablet.only.grid,
-  .ui.grid > .tablet.only.row,
-  .ui.grid > .tablet.only.column,
-  .ui.grid > .row > .tablet.only.column {
+  .ui.computer:not(.tablet).only.grid,
+  .ui.grid > .computer:not(.tablet).only.row,
+  .ui.grid > .computer:not(.tablet).only.column,
+  .ui.grid > .row > .computer:not(.tablet).only.column {
     display: none;
   }
 }
-/* Computer Only */
-@media only screen and (min-width : @computerBreakpoint) {
-  .ui.computer.only.grid,
-  .ui.grid > .computer.only.row {
-    display: block !important;
-  }
-  .ui.grid > .row > .computer.only.column {
-    display: inline-block !important;
-  }
-  .ui.celled.computer.only.grid,
-  .ui.celled.computer.only.grid .row,
-  .ui.celled.grid .computer.only.row,
-  .ui.grid .computer.only.equal.height.row,
-  .ui.computer.only.grid .equal.height.row  {
-    display: table !important;
-  }
-  .ui.celled.grid > .row > .computer.only.column,
-  .ui.celled.computer.only.grid > .row > .column,
-  .ui.celled.computer.only.grid > .column {
-    display: table-cell !important;
+
+/* Computer Only Hide */
+@media only screen and ( max-width : (@computerBreakpoint - 1px) ) {
+  .ui.mobile:not(.computer).only.grid,
+  .ui.grid > .mobile:not(.computer).only.row,
+  .ui.grid > .mobile:not(.computer).only.column,
+  .ui.grid > .row > .mobile:not(.computer).only.column {
+    display: none;
   }
-}
-@media only screen and (max-width : (@computerBreakpoint - 1px)) {
-  .ui.computer.only.grid,
-  .ui.grid > .computer.only.row,
-  .ui.grid > .computer.only.column,
-  .ui.grid > .row > .computer.only.column {
+  .ui.tablet:not(.computer).only.grid,
+  .ui.grid > .tablet:not(.computer).only.row,
+  .ui.grid > .tablet:not(.computer).only.column,
+  .ui.grid > .row > .tablet:not(.computer).only.column {
     display: none;
   }
 }
 
-
 /*-------------------
       Doubling
 --------------------*/