From 2c50dcc55c863c3151e43d06c5948749d447eb06 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Wed, 1 Jun 2022 08:33:38 -0400
Subject: [PATCH] ISTWCMS-5593: code cleanup
---
src/patterns/01-core/mixins/_uw-mixins.scss | 36 ++++++++++++++-----
.../03-layouts/layout/_layout-base.scss | 5 +++
src/patterns/03-layouts/layout/_layout.scss | 21 +++++++++++
.../layout/layout--2-col/_layout--2-col.scss | 8 +++++
.../layout/layout--3-col/_layout--3-col.scss | 18 ++++++++++
.../layout/layout--4-col/_layout--4-col.scss | 28 +++++++++++++++
.../layout/layout--5-col/_layout--5-col.scss | 20 ++++++++++-
.../_layout--inverted-l-left.scss | 19 +++++++---
.../_layout--inverted-l-right.scss | 17 ++++++++-
9 files changed, 158 insertions(+), 14 deletions(-)
diff --git a/src/patterns/01-core/mixins/_uw-mixins.scss b/src/patterns/01-core/mixins/_uw-mixins.scss
index 0fe17871..ffd832bf 100644
--- a/src/patterns/01-core/mixins/_uw-mixins.scss
+++ b/src/patterns/01-core/mixins/_uw-mixins.scss
@@ -28,19 +28,21 @@ $test-color-12: var(--green-5);
@include xl{
padding-left: 0;
padding-right: 0;
-
}
}
+
@mixin uw-full-width {
max-width: 100%;
padding: 0;
width: 100%;
}
+
@mixin uw-full-width-padding {
max-width: 100%;
padding: 0 var(--size-1);
width: 100%;
}
+
@mixin uw-full-width-margin {
left: 50%;
margin-left: -50vw;
@@ -51,6 +53,7 @@ $test-color-12: var(--green-5);
right: 50%;
width: 100vw;
}
+
@mixin uw-full-width-reset {
left: inherit;
margin-left: -1rem;
@@ -61,16 +64,19 @@ $test-color-12: var(--green-5);
right: inherit;
width: inherit;
}
+
@mixin uw-contained-width-reset() {
margin-left:inherit;
margin-right: inherit;
max-width: inherit;
padding: inherit;
+
@media(min-width: $screen-xl) {
padding-left:inherit;
padding-right:inherit;
}
}
+
// Flexbox display
@mixin flexbox {
display: flex;
@@ -85,8 +91,10 @@ $test-color-12: var(--green-5);
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
// Set a variable to be used by box-flex properties
$fg-boxflex: $fg;
+
// Box-Flex only supports a flex-grow value so lets grab the
// first item in the list and just return that.
@if type-of($fg) == 'list' {
@@ -104,6 +112,7 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// row (default) | row-reverse | column | column-reverse
@mixin flex-direction($direction: row) {
+
@if $direction == row-reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
@@ -134,6 +143,7 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
@mixin flex-wrap($value: nowrap) {
+
// No Webkit/FF Box fallback.
-webkit-flex-wrap: $value;
@if $value == nowrap {
@@ -148,6 +158,7 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($values: (row nowrap)) {
+
// No Webkit/FF Box fallback.
-webkit-flex-flow: $values;
-ms-flex-flow: $values;
@@ -162,7 +173,6 @@ $test-color-12: var(--green-5);
-moz-box-ordinal-group: $int + 1;
-ms-flex-order: $int;
-webkit-order: $int;
-
order: $int;
}
@@ -174,7 +184,6 @@ $test-color-12: var(--green-5);
-moz-box-flex: $int;
-ms-flex: $int;
-webkit-flex-grow: $int;
-
flex-grow: $int;
}
@@ -182,7 +191,6 @@ $test-color-12: var(--green-5);
// - applies to: flex item shrink factor
// <number>
@mixin flex-shrink($int: 0) {
-
-ms-flex: $int;
-webkit-flex-shrink: $int;
-moz-flex-shrink: $int;
@@ -202,6 +210,7 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
@mixin justify-content($value: flex-start) {
+
@if $value == flex-start {
-webkit-box-pack: start;
-moz-box-pack: start;
@@ -221,6 +230,7 @@ $test-color-12: var(--green-5);
-moz-box-pack: $value;
-ms-flex-pack: $value;
}
+
-webkit-justify-content: $value;
justify-content: $value;
}
@@ -229,8 +239,10 @@ $test-color-12: var(--green-5);
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($value: stretch) {
+
// No Webkit Box Fallback.
-webkit-align-content: $value;
+
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
@@ -245,6 +257,7 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
@mixin align-items($value: stretch) {
+
@if $value == flex-start {
-webkit-box-align: start;
-moz-box-align: start;
@@ -258,6 +271,7 @@ $test-color-12: var(--green-5);
-moz-box-align: $value;
-ms-flex-align: $value;
}
+
-webkit-align-items: $value;
align-items: $value;
}
@@ -266,8 +280,10 @@ $test-color-12: var(--green-5);
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($value: auto) {
+
// No Webkit Box Fallback.
-webkit-align-self: $value;
+
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
@@ -278,10 +294,9 @@ $test-color-12: var(--green-5);
align-self: $value;
}
-
-
// Display of elements in gridded style.
@mixin uw-flex-grid($value: flexbox){
+
@if $value == inline-flex {
@include inline-flex();
@include flex-flow(row wrap);
@@ -302,15 +317,18 @@ $test-color-12: var(--green-5);
gap: var(--grid-gap);
}
}
+
// Display of grid item.
@mixin uw-flex-grid-item(){
@include flex();
@include align-items(flex-start);
width: 100%;
+
@media(min-width: $screen-md) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
+
.uw-contained-width--narrow &,
.layout--uw-inverted-l-right &,
.layout--uw-inverted-l-left &,
@@ -320,8 +338,10 @@ $test-color-12: var(--green-5);
width: 100% !important;
}
}
+
@media(min-width: $screen-lg) {
width: 30%;
+
.uw-contained-width--wide &{
width: 45% !important;
}
@@ -332,15 +352,16 @@ $test-color-12: var(--green-5);
@mixin uw-flex-term-item(){
align-self: flex-start;
width: 100%;
+
@media(min-width: $screen-md) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
}
+
@media(min-width: $screen-lg) {
//width: 30%;
}
-
}
// Display of elements in list style.
@@ -357,5 +378,4 @@ $test-color-12: var(--green-5);
// Display of gallery item.
@mixin uw-flex-gallery-item(){
-
}
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index 6427793b..3225dc88 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -6,12 +6,17 @@
@use '../../03-layouts/layout/layout--5-col/layout--5-col' as *;
@use '../../03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left' as *;
@use '../../03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right' as *;
+
.layout__region {
+
.layout-builder &{
+
//outline: 2px dashed #2f91da;
outline: 2px dashed var(--blue-6);
}
+
.pl & {
+
//outline: 2px dashed #2f91da;
outline: 2px dashed var(--blue-6);
padding: 1.5rem;
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index 6700c059..8916c64e 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -9,9 +9,11 @@
padding: var(--size-1) 0;
}
}
+
&.uw-contained-width {
@include layout-constrain;
padding: var(--size-1);
+
@media(min-width: $screen-xxl) {
padding: var(--size-1) 0;
}
@@ -30,25 +32,31 @@
&.uw-full-width {
@include uw-full-width-padding;
overflow: hidden;
+
.uw-caption{
> p{
padding-left: var(--size-2);
}
}
+
.uw-section-has-full-width.uw-node__with-sidebar &{
padding: 0 var(--size-1) !important;
}
+
.dashboards-container &{
@include uw-full-width;
margin-bottom: var(--grid-gap);
overflow: visible; /* otherwise, dropdowns truncate at the border. */
}
+
.layout-builder &{
padding: var(--size-2);
}
+
.layout-builder__region {
padding: var(--size-2);
}
+
&.layout--uw-1-col{
.block-inline-blockuw-cbl-banner-images,
.block-inline-blockuw-cbl-image,
@@ -56,31 +64,39 @@
.block-inline-blockuw-cbl-remote-video,
.block-inline-blockuw-cbl-image-gallery{
@include uw-full-width-margin;
+
.layout-builder &{
@include uw-full-width-reset;
margin-left: 0;
margin-right: 0;
}
+
h2{
margin-left: var(--size-2);
}
+
.uw-section-has-full-width.uw-node__with-sidebar &{
@include uw-full-width-reset;
}
}
+
.block-inline-blockuw-cbl-google-maps{
@include layout-constrain;
+
@media(min-width: $screen-md) {
@include uw-full-width-margin;
}
+
.layout-builder &{
@include uw-full-width-reset;
margin-left: 0;
margin-right: 0;
}
+
.uw-section-has-full-width.uw-node__with-sidebar &{
@include uw-full-width-reset;
}
+
h2{
margin-left: var(--size-2);
}
@@ -90,20 +106,25 @@
// When wrapped with class to identify sidebar
.uw-node__with-sidebar & {
margin: inherit;
+
@media(min-width: $screen-md) {
@include layout-constrain;
}
+
&.uw-contained-width {
@include layout-constrain;
margin: inherit;
padding: var(--size-1);
+
@media(min-width: $screen-xxl) {
padding: var(--size-1) 0;
}
+
&--narrow {
/* Match the width of WCMS2's narrow: 496px */
margin: inherit;
}
+
&--wide {
/* Match the width of WCMS2's wide: 753px */
margin: inherit;
diff --git a/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss b/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
index 532358ab..120b0f41 100644
--- a/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
+++ b/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
@@ -4,30 +4,38 @@
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
+
&.larger-left {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 2fr) 1fr;
}
}
+
&.larger-right {
@media(min-width: $screen-md){
grid-template-columns: 1fr minmax(0, 2fr);
}
}
+
&.even-split {
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: repeat(2, 1fr);
}
}
+
.layout__region{
+
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
+
&--second {
grid-column: 1 / 2;
grid-row: 2/ 3;
+
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
diff --git a/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss b/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
index b4a83382..26000f11 100644
--- a/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
+++ b/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
@@ -3,58 +3,76 @@
.layout--uw-3-col {
display: grid;
gap: var(--grid-gap);
+
&.even-split {
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-left {
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-middle {
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}
}
+
&.larger-right {
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}
}
+
&.legacy-38-38-24 {
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24%;
}
}
+
&.legacy-24-38-38 {
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr);
}
}
+
.layout__region{
+
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
+
&--second {
grid-column: 1 / 2;
grid-row: 2 / 3;
+
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
+
&--third {
grid-column: 1 / 2;
grid-row: 3 / 4;
+
@media(min-width: $screen-md) {
grid-column: 3 / 4;
grid-row: 1 / 2;
diff --git a/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss b/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
index 171efeb6..6154c477 100644
--- a/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
+++ b/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
@@ -1,41 +1,56 @@
@use '../../../01-core' as *;
+
.layout--uw-4-col {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
+
&.even-split {
+
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
+
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-left {
+
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
+
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-second {
+
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
+
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-third {
+
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
+
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
}
}
+
&.larger-right {
+
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@@ -44,43 +59,56 @@
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
}
}
+
&.legacy-23-27-27-23 {
+
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
+
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
}
}
+
.layout__region{
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
+
&--second {
grid-column: 1 / 2;
+
@media(min-width: $screen-sm) {
grid-column: 2 / 3;
}
+
@media(min-width: $screen-lg) {
grid-column: 2 / 3;
}
}
+
&--third {
+
@media(min-width: $screen-sm) {
grid-column: 1 / 2;
}
+
@media(min-width: $screen-lg) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
}
+
&--fourth {
+
@media(min-width: $screen-sm) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
+
@media(min-width: $screen-lg) {
grid-column: 4 / 5;
grid-row: 1 / 2;
diff --git a/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss b/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
index 5964fb87..86dd77ef 100644
--- a/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
+++ b/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
@@ -1,75 +1,93 @@
@use '../../../01-core' as *;
+
.layout--uw-5-col {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
+
&.even-split {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-left {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-second {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-third {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-fourth {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
}
}
+
&.larger-right {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
}
}
+
&.legacy-23-19-19-19-20 {
@media(min-width: $screen-md) {
grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%;
}
}
- .layout__region{
+
+ .layout__region {
+
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
+
&--second {
grid-column: 1 / 2;
grid-row: 2 / 3;
+
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
+
&--third {
grid-column: 1 / 2;
grid-row: 3 / 4;
+
@media(min-width: $screen-md) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
}
+
&--fourth {
grid-column: 1 / 2;
grid-row: 4 / 5;
+
@media(min-width: $screen-md) {
grid-column: 4 / 5;
grid-row: 1 / 2;
}
}
+
&--fifth {
grid-column: 1 / 2;
grid-row: 5 / 6;
+
@media(min-width: $screen-md) {
grid-column: 5 / 6;
grid-row: 1 / 2;
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss b/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
index 2a86b770..0337fdb3 100644
--- a/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
@@ -1,56 +1,67 @@
@use '../../../01-core' as *;
+
.layout--uw-inverted-l-left {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
+
&.even-split {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
+
&.larger-left {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
+
&.larger-right {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
+
.uw-inverted-l--left-side {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
+
.uw-inverted-l--right-side {
display: grid;
gap: var(--grid-gap);
grid-column: 1 / 2;
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
+
@media(min-width: $screen-lg) {
grid-column: 2 / 3;
}
}
- .layout__region{
- &--first{
- //
- }
+
+ .layout__region {
+
&--second {
@media(min-width: $screen-md) {
grid-column: 1 / 2;
}
}
+
&--third {
grid-column: 1 / 2;
+
@media(min-width: $screen-md) {
grid-column: 2 / 3;
}
}
+
&--fourth {
grid-column: 1 / 2;
+
@media(min-width: $screen-md) {
grid-column: 1 / 3;
}
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss b/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
index c8fb4229..17b2f7e9 100644
--- a/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
@@ -1,58 +1,73 @@
@use '../../../01-core' as *;
+
.layout--uw-inverted-l-right {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
+
&.even-split {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
+
&.larger-left {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
+
&.larger-right {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
+
.uw-inverted-l--left-side {
display: grid;
gap: var(--grid-gap);
grid-column: 1 / 2;
grid-row: 1 / 2;
grid-template-columns: 100%;
+
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
+
.uw-inverted-l--right-side {
grid-column: 1 / 2;
grid-row: 2 / 3;
+
@media(min-width: $screen-lg) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
- .layout__region{
+
+ .layout__region {
+
&--first {
grid-column: 1 / 2;
+
@media(min-width: $screen-md) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
}
+
&--second {
grid-column: 1 / 2;
+
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
+
&--third {
grid-column: 1 / 2;
+
@media(min-width: $screen-md) {
grid-column: 1 / 3;
grid-row: 2 / 3;
--
GitLab