From afdb58997c606c53793cc4b05b5546d426900d67 Mon Sep 17 00:00:00 2001 From: Thomas JUND Date: Tue, 7 Mar 2023 11:13:48 +0100 Subject: [PATCH] css: manage flex grid gutters with negative left margin (#75194) --- gadjo/static/css/_fx-grid.scss | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/gadjo/static/css/_fx-grid.scss b/gadjo/static/css/_fx-grid.scss index c76c1da..0783b8f 100644 --- a/gadjo/static/css/_fx-grid.scss +++ b/gadjo/static/css/_fx-grid.scss @@ -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}"; } } } -} \ No newline at end of file +} -- 2.39.2