Implment reversed divided, reversed vertically divided, reversed celled, reversed internally celled grid #2685

src/definitions/collections/grid.less

@@ -331,6 +331,10 @@
   width: @sixteenColumn !important;
 }
 
+/* Celled Page */
+.ui.celled.page.grid {
+  box-shadow: none;
+}
 
 /*-------------------
     Column Width
@@ -1116,27 +1120,24 @@
 .ui.celled.grid {
   width: 100%;
   margin: @celledMargin;
-  box-shadow: 0px 0px 0px @celledWidth @celledBorderColor;
+  box-shadow: @celledGridDivider;
 }
-.ui.celled.grid > .row,
-.ui.celled.grid > .column.row,
-.ui.celled.grid > .column.row:first-child {
+
+.ui.celled.grid > .row {
   width: 100% !important;
   margin: 0em;
   padding: 0em;
-  box-shadow: 0px (-@celledWidth) 0px 0px @celledBorderColor;
+  box-shadow: @celledRowDivider;
 }
 .ui.celled.grid > .column:not(.row),
 .ui.celled.grid > .row > .column {
-  box-shadow: (-@celledWidth) 0px 0px 0px @celledBorderColor;
+  box-shadow: @celledColumnDivider;
 }
+
 .ui.celled.grid > .column:first-child,
 .ui.celled.grid > .row > .column:first-child {
   box-shadow: none;
 }
-.ui.celled.page.grid {
-  box-shadow: none;
-}
 
 .ui.celled.grid > .column:not(.row),
 .ui.celled.grid > .row > .column {
@@ -1405,6 +1406,7 @@
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
   .ui[class*="mobile reversed"].grid,
+  .ui[class*="mobile reversed"].grid > .row,
   .ui.grid > [class*="mobile reversed"].row {
     flex-direction: row-reverse;
   }
@@ -1412,28 +1414,102 @@
   .ui.stackable[class*="mobile reversed"] {
     flex-direction: column-reverse;
   }
+
+  /* Divided Reversed */
+  .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+  .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+    box-shadow: @dividedBorder;
+  }
+  .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+  .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+    box-shadow: none;
+  }
+  /* Vertically Divided Reversed */
+  .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
+    box-shadow: @verticallyDividedBorder;
+  }
+  .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
+    box-shadow: none;
+  }
+  /* Celled Reversed */
+  .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
+    box-shadow: @celledColumnDivider;
+  }
+  .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
+    box-shadow: none;
+  }
 }
 
 /* Tablet */
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
   .ui[class*="tablet reversed"].grid,
+  .ui[class*="tablet reversed"].grid > .row,
   .ui.grid > [class*="tablet reversed"].row {
     flex-direction: row-reverse;
   }
   .ui[class*="tablet vertically reversed"].grid {
     flex-direction: column-reverse;
   }
+
+  /* Divided Reversed */
+  .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+  .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+    box-shadow: @dividedBorder;
+  }
+  .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+  .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+    box-shadow: none;
+  }
+  /* Vertically Divided Reversed */
+  .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
+    box-shadow: @verticallyDividedBorder;
+  }
+  .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
+    box-shadow: none;
+  }
+  /* Celled Reversed */
+  .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
+    box-shadow: @celledColumnDivider;
+  }
+  .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
+    box-shadow: none;
+  }
 }
 
-/* Mobile */
+/* Computer */
 @media only screen and (min-width: @computerBreakpoint) {
   .ui[class*="computer reversed"].grid,
+  .ui[class*="computer reversed"].grid > .row,
   .ui.grid > [class*="computer reversed"].row {
     flex-direction: row-reverse;
   }
   .ui[class*="computer vertically reversed"].grid {
     flex-direction: column-reverse;
   }
+
+  /* Divided Reversed */
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+    box-shadow: @dividedBorder;
+  }
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+    box-shadow: none;
+  }
+  /* Vertically Divided Reversed */
+  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
+    box-shadow: @verticallyDividedBorder;
+  }
+  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
+    box-shadow: none;
+  }
+  /* Celled Reversed */
+  .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
+    box-shadow: @celledColumnDivider;
+  }
+  .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
+    box-shadow: none;
+  }
 }
 
 

src/themes/default/collections/grid.variables

@@ -57,6 +57,11 @@
 @celledRelaxedPadding: 1.5em;
 @celledVeryRelaxedPadding: 2em;
 
+@celledGridDivider: 0px 0px 0px @celledWidth @celledBorderColor;
+@celledRowDivider: 0px (-@celledWidth) 0px 0px @celledBorderColor;
+@celledColumnDivider: (-@celledWidth) 0px 0px 0px @celledBorderColor;
+
+
 /*--------------
     Stackable
 ---------------*/