css: manage flex grid gutters with negative left margin (#72128) #66
|
@ -12,9 +12,6 @@ $max-cols-mobile : 3 !default;
|
||||||
$max-cols-tablet : 6 !default;
|
$max-cols-tablet : 6 !default;
|
||||||
$max-cols-desktop : 9 !default;
|
$max-cols-desktop : 9 !default;
|
||||||
|
|
||||||
// Computed variables, they should not be redefined.
|
|
||||||
$fx-grid-half-gutter: $fx-grid-gutter / 2;
|
|
||||||
|
|
||||||
// custom media queries
|
// custom media queries
|
||||||
// ex. @media ($max-grid-mobile-viewport) {}
|
// ex. @media ($max-grid-mobile-viewport) {}
|
||||||
$max-grid-mobile-viewport: "max-width: #{$fx-grid-mobile-limit}";
|
$max-grid-mobile-viewport: "max-width: #{$fx-grid-mobile-limit}";
|
||||||
|
@ -28,15 +25,13 @@ $min-grid-desktop-viewport: "min-width: #{min-desktop-viewport($fx-grid-tablet-l
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-left: -1 * $fx-grid-half-gutter;
|
margin-left: -1 * $fx-grid-gutter;
|
||||||
margin-right: -1 * $fx-grid-half-gutter;
|
|
||||||
/* if flex item are list */
|
/* if flex item are list */
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
box-sizing: border-box; // for gadjo
|
box-sizing: border-box; // for gadjo
|
||||||
margin-left: $fx-grid-half-gutter;
|
margin-left: $fx-grid-gutter;
|
||||||
margin-right: $fx-grid-half-gutter;
|
|
||||||
flex-basis: calc(100% - #{$fx-grid-gutter});
|
flex-basis: calc(100% - #{$fx-grid-gutter});
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue