Skip to content

Commit

Permalink
fix(grid): fix stackable nested grid
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
lubber-de authored Jan 8, 2023
1 parent 250ba1e commit 99f067f
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 11 deletions.
21 changes: 11 additions & 10 deletions src/definitions/collections/grid.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion src/definitions/modules/popup.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
1 change: 1 addition & 0 deletions src/themes/default/collections/grid.variables
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@

@stackableRowSpacing: @rowSpacing;
@stackableGutter: @gutterWidth;
@stackableMobileGutter: 0;
@stackableMobileBorder: 1px solid @borderColor;
@stackableInvertedMobileBorder: 1px solid @whiteBorderColor;

Expand Down

0 comments on commit 99f067f

Please sign in to comment.