fix(grid): fix stackable nested grid

This PR reverts and corrects #1739 for stackable nested grids.
The margins on mobile screens for stackable grid has now been adjusted so it only takes place when a stackable grid is not nested in another grid or a segment.

Author: lubber-de

src/definitions/collections/grid.less

@@ -1009,15 +1009,15 @@
     ----------------------- */
 
     .ui.padded.grid:not(.vertically):not(.horizontally) {
-        margin: 0 !important;
+        margin: 0;
     }
     [class*="horizontally padded"].ui.grid {
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+        margin-left: 0;
+        margin-right: 0;
     }
     [class*="vertically padded"].ui.grid {
-        margin-top: 0 !important;
-        margin-bottom: 0 !important;
+        margin-top: 0;
+        margin-bottom: 0;
     }
 }
 
@@ -1678,10 +1678,11 @@
     -------------------- */
 
     @media only screen and (max-width: @largestMobileScreen) {
-        .ui.ui.ui.ui.stackable.grid {
+        body > .ui.stackable.grid,
+        .ui:not(.segment):not(.grid) .ui.stackable.grid {
             width: auto;
-            margin-left: 0 !important;
-            margin-right: 0 !important;
+            margin-left: @stackableMobileGutter;
+            margin-right: @stackableMobileGutter;
         }
         .ui.stackable.grid > .row > .wide.column,
         .ui.stackable.grid > .wide.column,
@@ -1710,8 +1711,8 @@
         /* Don't pad inside segment or nested grid */
         .ui.grid .ui.stackable.grid,
         .ui.segment:not(.vertical) .ui.stackable.page.grid {
-            margin-left: -(@stackableGutter / 2) !important;
-            margin-right: -(@stackableGutter / 2) !important;
+            margin-left: -(@stackableGutter / 2);
+            margin-right: -(@stackableGutter / 2);
         }
 
         /* Divided Stackable */

src/definitions/modules/popup.less

@@ -694,7 +694,7 @@
 *******************************/
 
 /* Immediate Nested Grid */
-.ui.popup > .ui.grid:not(.padded) {
+.ui.ui.ui.popup > .ui.grid:not(.padded) {
     width: @nestedGridWidth;
     margin: @nestedGridMargin;
 }

src/themes/default/collections/grid.variables

@@ -67,6 +67,7 @@
 
 @stackableRowSpacing: @rowSpacing;
 @stackableGutter: @gutterWidth;
+@stackableMobileGutter: 0;
 @stackableMobileBorder: 1px solid @borderColor;
 @stackableInvertedMobileBorder: 1px solid @whiteBorderColor;