entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

css: manage flex grid gutters with negative left margin (#75194) #8

Merged
fpeters merged 1 commits from wip/75194-flex-grid-margins into main 2023-04-20 08:22:46 +02:00
Conversation 0 Commits 1 Files Changed 1 +3 -8
1 changed files with 3 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
gadjo/static/css/_fx-grid.scss
View File

@ -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;
}
@ -105,4 +100,4 @@ $min-grid-desktop-viewport: "min-width: #{$fx-grid-tablet-limit + 1}";
}
}
}
}
}