Skip to content

Commit

Permalink
fix(grid): fix gutter for all browsers (#21)
Browse files Browse the repository at this point in the history
* fix(grid): fix gutter for all browsers

* deploy

* fix(mixin): change the span mixin
  • Loading branch information
Celeste Glavin authored Mar 12, 2019
1 parent 0eddf53 commit ae20298
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions packages/core/src/global/material-grid/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,16 @@
width: calc(#{$percent} - #{$gutter});
width: calc(#{$percent} - var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}));

// fallback for IE11 gutter (grid-gap doesn't work in IE11)
margin: 0 $gutter / 2;
margin: 0 calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);

@supports (display: grid) {
width: auto;
grid-column-end: span min($span, map-get($mdc-layout-grid-columns, $size));

// fallback for IE11 gutter (grid-gap doesn't work in IE11)
margin: 0;
}
}

Expand Down Expand Up @@ -140,12 +147,6 @@
@include mdc-layout-grid-cell-span_($size, $default-span, $gutter);

box-sizing: border-box;
margin: $gutter / 2;
margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);

@supports (display: grid) {
margin: 0;
}
}

@mixin mdc-layout-grid-cell-order($order) {
Expand Down

0 comments on commit ae20298

Please sign in to comment.