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