From feb1a35d0a3b4dfddb5cf750735912c54bf7e463 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 25 Mar 2021 11:39:50 +0100
Subject: [PATCH] scss: new grid system with flexbox (#52336)

---
 static/includes/_fx-grid.scss    | 109 +++++++++++++++++++++++++++++++
 static/includes/_publik.scss     |   1 +
 static/includes/gadjo-extra.scss |   2 +-
 3 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 static/includes/_fx-grid.scss

diff --git a/static/includes/_fx-grid.scss b/static/includes/_fx-grid.scss
new file mode 100644
index 00000000..2b6feb4d
--- /dev/null
+++ b/static/includes/_fx-grid.scss
@@ -0,0 +1,109 @@
+// ======
+//	fx-grid.css
+//	flexbox grid system
+// =====
+
+// Publik vars
+$fx-grid-gutter: 1.5rem !default;
+$fx-grid-cell-min-size: 10em !default; // for .fx-grid--auto
+$grid-mobile-limit: $very-small-limit !default;
+$grid-tablet-limit: $mobile-limit !default;
+$max-cols-mobile : 3 !default;
+$max-cols-tablet : 6 !default;
+$max-cols-desktop : 9 !default;
+
+// 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: #{$grid-mobile-limit}";
+$min-grid-tablet-viewport: "min-width: #{min-desktop-viewport($grid-mobile-limit)}";
+$min-grid-desktop-viewport: "min-width: #{min-desktop-viewport($grid-tablet-limit)}";
+
+
+.fx-grid,
+[class*="fx-grid--"] {
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0;
+	padding: 0;
+	margin-left: -1 * $fx-grid-half-gutter;
+	margin-right: -1 * $fx-grid-half-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;
+		flex-basis: calc(100% - #{$fx-grid-gutter});
+		hyphens: auto;
+	}
+}
+
+
+// mode auto
+.fx-grid--auto {
+	> * {
+		flex-basis: $fx-grid-cell-min-size;
+		flex-shrink: 1;
+		flex-grow: 1;
+	}
+}
+
+// mode cols
+@for $i from 2 through $max-cols-mobile {
+	.fx-grid--#{$i} > *,
+	[class*="fx-grid--"][class*="--m#{$i}"] > * {
+		flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
+	}
+}
+@media ($min-grid-tablet-viewport) {
+		@for $i from 2 through $max-cols-tablet {
+		[class*="fx-grid--"][class*="--t#{$i}"] > * {
+			flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
+		}
+	}
+}
+@media ($min-grid-desktop-viewport) {
+		@for $i from 2 through $max-cols-desktop {
+		[class*="fx-grid--"][class*="--d#{$i}"] > * {
+			flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
+		}
+	}
+}
+
+// custom grid cell size
+.fx-grid,
+[class*="fx-grid--"] {
+	@for $i from 1 through $max-cols-mobile {
+		@for $j from 1 through $i {
+			> .size--#{$j}-#{$i},
+			> [class*="size--"][class*="--m#{$j}-#{$i}"] {
+				flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
+				flex-grow: 0;
+			}
+		}
+	}
+	@media ($min-grid-tablet-viewport) {
+		@for $i from 1 through $max-cols-tablet {
+			@for $j from 1 through $i {
+				> [class*="size--"][class*="--t#{$j}-#{$i}"] {
+					flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
+					flex-grow: 0;
+				}
+			}
+		}
+	}
+	@media ($min-grid-desktop-viewport) {
+		@for $i from 1 through $max-cols-desktop {
+			@for $j from 1 through $i {
+				> [class*="size--"][class*="--d#{$j}-#{$i}"] {
+					flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
+					flex-grow: 0;
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/static/includes/_publik.scss b/static/includes/_publik.scss
index 4776d297..437600f2 100644
--- a/static/includes/_publik.scss
+++ b/static/includes/_publik.scss
@@ -2,6 +2,7 @@
 @import 'general';
 @import 'title';
 @import 'layout';
+@import 'fx-grid';
 @import 'header';
 @import 'nav';
 @import 'cells';
diff --git a/static/includes/gadjo-extra.scss b/static/includes/gadjo-extra.scss
index 8a732b1e..434f2667 100644
--- a/static/includes/gadjo-extra.scss
+++ b/static/includes/gadjo-extra.scss
@@ -2,4 +2,4 @@ $widget-focus-outline: none;
 $widget-border: 1px solid #AAA;
 
 @import 'utils';
-@import 'wcs/evaluation';
+@import 'wcs/evaluation';
\ No newline at end of file
-- 
2.20.1

