Use custom properties for backend widgets and introduce w16

- added `--widget-col-amount` - added `--widget-cols`
contao · Apr 9, 2024 · 608b93e · 608b93e
1 parent abd0710
commit 608b93e
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 26 deletions.
diff --git a/core-bundle/contao/themes/flexible/backend.78064182.css b/core-bundle/contao/themes/flexible/backend.78064182.css
diff --git a/core-bundle/contao/themes/flexible/backend.78064182.css.map b/core-bundle/contao/themes/flexible/backend.78064182.css.map
diff --git a/core-bundle/contao/themes/flexible/backend.a9391162.css b/core-bundle/contao/themes/flexible/backend.a9391162.css
diff --git a/core-bundle/contao/themes/flexible/backend.a9391162.css.map b/core-bundle/contao/themes/flexible/backend.a9391162.css.map
diff --git a/core-bundle/contao/themes/flexible/entrypoints.json b/core-bundle/contao/themes/flexible/entrypoints.json
@@ -2,7 +2,7 @@
   "entrypoints": {
     "backend": {
       "css": [
-        "/system/themes/flexible/backend.78064182.css"
+        "/system/themes/flexible/backend.a9391162.css"
       ]
     },
     "confirm": {

diff --git a/core-bundle/contao/themes/flexible/manifest.json b/core-bundle/contao/themes/flexible/manifest.json
@@ -1,5 +1,5 @@
 {
-  "backend.css": "/system/themes/flexible/backend.78064182.css",
+  "backend.css": "/system/themes/flexible/backend.a9391162.css",
   "confirm.css": "/system/themes/flexible/confirm.c2996dd4.css",
   "conflict.css": "/system/themes/flexible/conflict.aa6b9c95.css",
   "diff.css": "/system/themes/flexible/diff.171af75f.css",
@@ -8,7 +8,7 @@
   "popup.css": "/system/themes/flexible/popup.4728c2fc.css",
   "tinymce.css": "/system/themes/flexible/tinymce.e5009f94.css",
   "tinymce-dark.css": "/system/themes/flexible/tinymce-dark.596023db.css",
-  "backend.78064182.css.map": "/system/themes/flexible/backend.78064182.css.map",
+  "backend.a9391162.css.map": "/system/themes/flexible/backend.a9391162.css.map",
   "confirm.c2996dd4.css.map": "/system/themes/flexible/confirm.c2996dd4.css.map",
   "conflict.aa6b9c95.css.map": "/system/themes/flexible/conflict.aa6b9c95.css.map",
   "diff.171af75f.css.map": "/system/themes/flexible/diff.171af75f.css.map",

diff --git a/core-bundle/contao/themes/flexible/styles/basic.css b/core-bundle/contao/themes/flexible/styles/basic.css
@@ -351,24 +351,29 @@ fieldset > .widget-group {
 	padding: 0 15px;
 }
 .widget-group {
+	--widget-col-amount: 12;
 	display: grid;
 	grid-column-gap: 30px;
-	grid-template-columns: repeat(12, minmax(0, 1fr));
+	grid-template-columns: repeat(var(--widget-col-amount), minmax(0, 1fr));
 }
 .widget-group > * {
-	grid-column-end: span 12;
+	--widget-cols: 1;
+	grid-column-end: span calc(var(--widget-col-amount) / var(--widget-cols));
 }
 .widget-group > .m12 {
 	margin: 0;
 }
-.widget-group > .w50 {
-	grid-column-end: span 6;
+.w50 {
+	--widget-cols: 2;
 }
-.widget-group > .w33 {
-	grid-column-end: span 4;
+.w33 {
+	--widget-cols: 3;
 }
-.widget-group > .w25 {
-	grid-column-end: span 3;
+.w25 {
+	--widget-cols: 4;
+}
+.w16 {
+	--widget-cols: 6;
 }
 
 .widget {
@@ -1030,12 +1035,8 @@ a.tl_submit {
 		outline: none;
 	}
 
-	.widget-group > .w25,
-	.widget-group > .w33,
-	.widget-group > .w50,
-	.widget-group > .w66,
-	.widget-group > .w75 {
-		grid-column-end: span 6;
+	.w16, .w25, .w33, .w50, .w66, .w75 {
+		--widget-cols: 2;
 	}
 }
 
@@ -1046,12 +1047,8 @@ a.tl_submit {
 		grid-column-gap: 0;
 	}
 
-	.widget-group > .w25,
-	.widget-group > .w33,
-	.widget-group > .w50,
-	.widget-group > .w66,
-	.widget-group > .w75 {
-		grid-column-end: span 12;
+	.w16, .w25, .w33, .w50, .w66, .w75 {
+		--widget-cols: 1;
 	}
 
 	*:not(.widget-group) > .w50 {