entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 9 Releases Wiki Activity

css: manage flex grid gutters with negative left margin (#72128) #66

Merged
tjund merged 1 commits from wip/72128-flex-grid-margins into main 2022-12-12 16:46:48 +01:00
Conversation 0 Commits 1 Files Changed 1 +2 -7
1 changed files with 2 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
static/includes/_fx-grid.scss
View File

@ -12,9 +12,6 @@ $max-cols-mobile : 3 !default;
$max-cols-tablet : 6 !default;
$max-cols-desktop : 9 !default;
// Computed variables, they should not be redefined.
$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: #{min-desktop-viewport($fx-grid-tablet-l
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;
}