Browse Source

Make stackable/mobile page grids use same gutter width as columns

pull/1177/head
jlukic 10 years ago
parent
commit
275eed5d96
3 changed files with 7 additions and 12 deletions
  1. 12
      src/definitions/collections/grid.less
  2. 2
      src/definitions/elements/divider.less
  3. 5
      src/themes/packages/default/collections/grid.variables

12
src/definitions/collections/grid.less

@ -163,8 +163,9 @@
@media only screen and (max-width: (@largestMobileScreen)) {
.ui.page.grid {
width: @mobileWidth;
padding-left: @mobileGutter;
padding-right: @mobileGutter;
padding-left: 0em;
padding-right: 0em;
margin: 0em;
}
}
@media only screen and (min-width: @tabletBreakpoint) {
@ -1079,7 +1080,7 @@
width: auto !important;
margin: (@stackableRowSpacing / 2) 0em 0em !important;
padding: (@stackableRowSpacing / 2) 0em 0em !important;
padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) 0em !important;
box-shadow: none !important;
}
@ -1107,11 +1108,6 @@
border-top: none !important;
}
.ui.stackable.page.grid > .row > .column,
.ui.stackable.page.grid > .column {
padding-left: @stackableGutterWidth !important;
padding-right: @stackableGutterWidth !important;
}
.ui[class*="equal height"].stackable.page.grid {
display: block !important;
width: 100% !important;

2
src/definitions/elements/divider.less

@ -139,7 +139,7 @@
.ui.grid .stackable.row .ui.vertical.divider {
position: relative;
margin: @margin;
left: 0;
left: 50%;
height: auto;
overflow: hidden;
line-height: 1;

5
src/themes/packages/default/collections/grid.variables

@ -31,8 +31,7 @@
---------------*/
/* Column Gutters */
@mobileWidth: 100%;
@mobileGutter: 1rem;
@mobileWidth: auto;
@tabletWidth: auto;
@tabletGutter: 8%;
@ -89,7 +88,7 @@
---------------*/
@stackableRowSpacing: @rowSpacing;
@stackableGutterWidth: 1.5em;
@stackableGutter: @gutterWidth;
@stackableMobileBorder: 1px solid @borderColor;
@stackableInvertedMobileBorder: 1px solid @whiteBorderColor;
Loading…
Cancel
Save