From 3a98e3f11a5d6fc4ede7f296e2e33875a2f5bc91 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 16 Jun 2021 22:40:53 +0000
Subject: [PATCH] fixes for the layout display to have minmax(0, *fr)
---
css/styles.css | 70 +++++++++----------
css/uw-dashboards.css | 70 +++++++++----------
.../layout/layout--2-col/_layout--2-col.scss | 4 +-
.../layout/layout--3-col/_layout--3-col.scss | 12 ++--
.../layout/layout--4-col/_layout--4-col.scss | 24 +++----
.../layout/layout--5-col/_layout--5-col.scss | 14 ++--
.../_layout--inverted-l-left.scss | 8 +--
.../_layout--inverted-l-right.scss | 8 +--
8 files changed, 105 insertions(+), 105 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 4eea2efd..2d69849a 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2142,10 +2142,10 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-2-col.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) 1fr; } }
@media (min-width: 48.06rem) {
.layout--uw-2-col.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: 1fr minmax(0, 2fr); } }
.layout--uw-2-col.even-split {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
@@ -2169,32 +2169,32 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.even-split {
- grid-template-columns: repeat(3, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-left {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-left {
- grid-template-columns: 2fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-middle {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-middle {
- grid-template-columns: 1fr 2fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-right {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-right {
- grid-template-columns: 1fr 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-3-col.legacy-38-38-24 {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.legacy-38-38-24 {
- grid-template-columns: repeat(2, 1fr) 24%; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24%; } }
.layout--uw-3-col.legacy-24-38-38 {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.legacy-24-38-38 {
- grid-template-columns: 24% repeat(2, 1fr); } }
+ grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -2219,40 +2219,40 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 40.06rem) {
.layout--uw-4-col.even-split {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.even-split {
- grid-template-columns: repeat(4, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-left {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-left {
- grid-template-columns: 3fr repeat(3, 1fr); } }
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-second {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-second {
- grid-template-columns: 1fr 3fr repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-third {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-third {
- grid-template-columns: repeat(2, 1fr) 3fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-right {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-right {
- grid-template-columns: repeat(3, 1fr) 3fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.legacy-23-27-27-23 {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.legacy-23-27-27-23 {
- grid-template-columns: 0.8fr repeat(2, 1.1fr) 0.8fr; } }
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); } }
.layout--uw-4-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -2286,25 +2286,25 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-5-col.even-split {
- grid-template-columns: repeat(5, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-left {
- grid-template-columns: 3fr 1fr 1fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-second {
- grid-template-columns: 1fr 3fr 1fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-third {
- grid-template-columns: 1fr 1fr 3fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-fourth {
- grid-template-columns: 1fr 1fr 1fr 3fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-right {
- grid-template-columns: 1fr 1fr 1fr 1fr 3fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.legacy-23-19-19-19-20 {
- grid-template-columns: 23% 1fr 1fr 1fr 20%; } }
+ grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%; } }
.layout--uw-5-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -2343,13 +2343,13 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.even-split {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-inverted-l-left .uw-inverted-l--left-side {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -2360,7 +2360,7 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-inverted-l-left .uw-inverted-l--right-side {
- grid-template-columns: 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left .uw-inverted-l--right-side {
grid-column: 2 / 3; } }
@@ -2384,13 +2384,13 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.even-split {
- grid-template-columns: 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-inverted-l-right .uw-inverted-l--left-side {
display: grid;
gap: 2rem;
@@ -2399,7 +2399,7 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-inverted-l-right .uw-inverted-l--left-side {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-inverted-l-right .uw-inverted-l--right-side {
grid-column: 1 / 2;
grid-row: 2 / 3; }
diff --git a/css/uw-dashboards.css b/css/uw-dashboards.css
index 21e44825..0e20cfbd 100644
--- a/css/uw-dashboards.css
+++ b/css/uw-dashboards.css
@@ -531,10 +531,10 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-2-col.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) 1fr; } }
@media (min-width: 48.06rem) {
.layout--uw-2-col.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: 1fr minmax(0, 2fr); } }
.layout--uw-2-col.even-split {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
@@ -558,32 +558,32 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.even-split {
- grid-template-columns: repeat(3, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-left {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-left {
- grid-template-columns: 2fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-middle {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-middle {
- grid-template-columns: 1fr 2fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-right {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-right {
- grid-template-columns: 1fr 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-3-col.legacy-38-38-24 {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.legacy-38-38-24 {
- grid-template-columns: repeat(2, 1fr) 24%; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24%; } }
.layout--uw-3-col.legacy-24-38-38 {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.legacy-24-38-38 {
- grid-template-columns: 24% repeat(2, 1fr); } }
+ grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -608,40 +608,40 @@
grid-template-columns: 100%; }
@media (min-width: 40.06rem) {
.layout--uw-4-col.even-split {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.even-split {
- grid-template-columns: repeat(4, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-left {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-left {
- grid-template-columns: 3fr repeat(3, 1fr); } }
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-second {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-second {
- grid-template-columns: 1fr 3fr repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-third {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-third {
- grid-template-columns: repeat(2, 1fr) 3fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-right {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-right {
- grid-template-columns: repeat(3, 1fr) 3fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.legacy-23-27-27-23 {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.legacy-23-27-27-23 {
- grid-template-columns: 0.8fr repeat(2, 1.1fr) 0.8fr; } }
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); } }
.layout--uw-4-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -675,25 +675,25 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-5-col.even-split {
- grid-template-columns: repeat(5, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-left {
- grid-template-columns: 3fr 1fr 1fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-second {
- grid-template-columns: 1fr 3fr 1fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-third {
- grid-template-columns: 1fr 1fr 3fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-fourth {
- grid-template-columns: 1fr 1fr 1fr 3fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-right {
- grid-template-columns: 1fr 1fr 1fr 1fr 3fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.legacy-23-19-19-19-20 {
- grid-template-columns: 23% 1fr 1fr 1fr 20%; } }
+ grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%; } }
.layout--uw-5-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -732,13 +732,13 @@
grid-template-columns: 100%; }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.even-split {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-inverted-l-left .uw-inverted-l--left-side {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -749,7 +749,7 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-inverted-l-left .uw-inverted-l--right-side {
- grid-template-columns: 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left .uw-inverted-l--right-side {
grid-column: 2 / 3; } }
@@ -773,13 +773,13 @@
grid-template-columns: 100%; }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.even-split {
- grid-template-columns: 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-inverted-l-right .uw-inverted-l--left-side {
display: grid;
gap: 2rem;
@@ -788,7 +788,7 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-inverted-l-right .uw-inverted-l--left-side {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-inverted-l-right .uw-inverted-l--right-side {
grid-column: 1 / 2;
grid-row: 2 / 3; }
diff --git a/source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss b/source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
index f9c12651..275c26e3 100644
--- a/source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
@@ -4,12 +4,12 @@
grid-template-columns:100%;
&.larger-left {
@include medium{
- grid-template-columns: 2fr 1fr;
+ grid-template-columns: minmax(0, 2fr) 1fr;
}
}
&.larger-right {
@include medium{
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: 1fr minmax(0, 2fr);
}
}
&.even-split {
diff --git a/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss b/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
index 355dc755..6a670eac 100644
--- a/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
@@ -4,37 +4,37 @@
&.even-split {
grid-template-columns:100%;
@include medium{
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
grid-template-columns:100%;
@include medium{
- grid-template-columns: 2fr 1fr 1fr;
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-middle {
grid-template-columns:100%;
@include medium{
- grid-template-columns: 1fr 2fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
grid-template-columns:100%;
@include medium{
- grid-template-columns: 1fr 1fr 2fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}
}
&.legacy-38-38-24 {
grid-template-columns:100%;
@include medium{
- grid-template-columns: repeat(2, 1fr) 24%;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24%;
}
}
&.legacy-24-38-38 {
grid-template-columns:100%;
@include medium{
- grid-template-columns: 24% repeat(2, 1fr);
+ grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr);
}
}
.layout__region{
diff --git a/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss b/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
index b628cb0a..d23d8dd1 100644
--- a/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
@@ -4,54 +4,54 @@
grid-template-columns:100%;
&.even-split {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: 3fr repeat(3, 1fr);
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-second {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: 1fr 3fr repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-third {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: repeat(2, 1fr) 3fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
}
}
&.larger-right {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: repeat(3, 1fr) 3fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
}
}
&.legacy-23-27-27-23 {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: 0.8fr repeat(2, 1.1fr) 0.8fr;
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
}
}
.layout__region{
diff --git a/source/_patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss b/source/_patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
index 72bffce6..160cb038 100644
--- a/source/_patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
@@ -4,37 +4,37 @@
grid-template-columns:100%;
&.even-split {
@include medium{
- grid-template-columns: repeat(5, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
@include medium{
- grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-second {
@include medium{
- grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-third {
@include medium{
- grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-fourth {
@include medium{
- grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
}
}
&.larger-right {
@include medium{
- grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
}
}
&.legacy-23-19-19-19-20 {
@include medium{
- grid-template-columns: 23% 1fr 1fr 1fr 20%;
+ grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%;
}
}
.layout__region{
diff --git a/source/_patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss b/source/_patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
index 563d445a..d44db24f 100644
--- a/source/_patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
+++ b/source/_patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
@@ -4,17 +4,17 @@
grid-template-columns:100%;
&.even-split {
@include large{
- grid-template-columns: repeat(2 , 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
@include large{
- grid-template-columns: 2fr 1fr;
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
@include large{
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
.uw-inverted-l--left-side {
@@ -27,7 +27,7 @@
grid-column: 1 / 2;
grid-template-columns: 100%;
@include medium {
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large{
grid-column: 2 / 3;
diff --git a/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss b/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
index 9caee288..f977a286 100644
--- a/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
+++ b/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
@@ -4,17 +4,17 @@
grid-template-columns:100%;
&.even-split {
@include large{
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
&.larger-left {
@include large{
- grid-template-columns: 2fr 1fr;
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
@include large{
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
.uw-inverted-l--left-side {
@@ -24,7 +24,7 @@
grid-row: 1 / 2;
grid-template-columns: 100%;
@include medium{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.uw-inverted-l--right-side {
--
GitLab