From 0bc864372331376571fbac04eaeb092a6f0c9838 Mon Sep 17 00:00:00 2001 From: ciar4n Date: Mon, 9 Sep 2019 18:16:29 +0100 Subject: [PATCH 1/3] Cassiopeia 'mobile-first' CSS --- .../cassiopeia/scss/blocks/_css-grid.scss | 18 +-- templates/cassiopeia/scss/blocks/_layout.scss | 9 +- .../cassiopeia/scss/blocks/_modifiers.scss | 132 +++++++++--------- 3 files changed, 77 insertions(+), 82 deletions(-) diff --git a/templates/cassiopeia/scss/blocks/_css-grid.scss b/templates/cassiopeia/scss/blocks/_css-grid.scss index a9839db34f4d3..bbd878d6adfd6 100644 --- a/templates/cassiopeia/scss/blocks/_css-grid.scss +++ b/templates/cassiopeia/scss/blocks/_css-grid.scss @@ -6,9 +6,11 @@ grid-template-areas: ". head head head head ." ". banner banner banner banner ." + ". comp comp comp comp ." + ". side-l side-l side-l side-l ." + ". side-r side-r side-r side-r ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." - ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." @@ -46,15 +48,13 @@ grid-column: full-start / full-end; } - @include media-breakpoint-down(xs) { + @include media-breakpoint-up(xs) { grid-template-areas: ". head head head head ." ". banner banner banner banner ." - ". comp comp comp comp ." - ". side-l side-l side-l side-l ." - ". side-r side-r side-r side-r ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." + ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." @@ -129,17 +129,17 @@ .container-bottom-b { display: grid; grid-gap: $cassiopeia-grid-gutter; - grid-template-columns: repeat(auto-fit, minmax(24%, 1fr)); + grid-template-columns: 1fr; > div { margin: 0; } - @include media-breakpoint-down(md) { + @include media-breakpoint-up(sm) { grid-template-columns: 1fr 1fr; } - @include media-breakpoint-down(sm) { - grid-template-columns: 1fr; + @include media-breakpoint-up(md) { + grid-template-columns: repeat(auto-fit, minmax(24%, 1fr)); } } diff --git a/templates/cassiopeia/scss/blocks/_layout.scss b/templates/cassiopeia/scss/blocks/_layout.scss index 219f99fd36f92..c4475954e0381 100644 --- a/templates/cassiopeia/scss/blocks/_layout.scss +++ b/templates/cassiopeia/scss/blocks/_layout.scss @@ -92,7 +92,8 @@ header { .container-sidebar-left, .container-sidebar-right, { flex: 0 0 auto; - width: calc(25% - #{$cassiopeia-grid-gutter}); + width: calc(100% - #{$cassiopeia-grid-gutter}); + order: 1; > div { margin-bottom: $cassiopeia-grid-gutter; @@ -102,9 +103,9 @@ header { } } - @include media-breakpoint-down(sm) { - width: calc(100% - #{$cassiopeia-grid-gutter}); - order: 1; + @include media-breakpoint-up(sm) { + width: calc(25% - #{$cassiopeia-grid-gutter}); + order: 0; } } diff --git a/templates/cassiopeia/scss/blocks/_modifiers.scss b/templates/cassiopeia/scss/blocks/_modifiers.scss index 23b721fcb8705..2083f9d6977e5 100644 --- a/templates/cassiopeia/scss/blocks/_modifiers.scss +++ b/templates/cassiopeia/scss/blocks/_modifiers.scss @@ -17,38 +17,38 @@ } @supports (display: grid) { - .span-col-2 { - grid-column-end: span 2; - } - .span-col-3 { - grid-column-end: span 3; - } - .span-col-4 { - grid-column-end: span 4; - } - .span-row-2 { - grid-row-end: span 2; - } - .span-row-3 { - grid-row-end: span 3; - } - .span-row-4 { - grid-row-end: span 4; - } [class^='span-'], [class*=' span-'] { - @include media-breakpoint-down(md) { - grid-column-end: auto; - grid-row-end: auto; - } + grid-column-end: auto; + grid-row-end: auto; } - [class^='span-col'], [class*=' span-col'] { - @include media-breakpoint-down(md) { + + @include media-breakpoint-up(md) { + .span-col-2 { grid-column-end: span 2; } + .span-col-3 { + grid-column-end: span 3; + } + .span-col-4 { + grid-column-end: span 4; + } + .span-row-2 { + grid-row-end: span 2; + } + .span-row-3 { + grid-row-end: span 3; + } + .span-row-4 { + grid-row-end: span 4; + } + } + + [class^='span-col'], [class*=' span-col'] { @include media-breakpoint-down(sm) { - grid-column-end: auto; + grid-column-end: span 2; } } + [class^='container-'], [class*=' container-'] { [class^='span-'], [class*=' span-'] { flex: 0 1 auto; @@ -65,25 +65,22 @@ margin-bottom: $cassiopeia-grid-gutter; margin-left: -($cassiopeia-grid-gutter / 2); padding: 0; - &.columns-2 { - > div { - width: 50%; - } - } - &.columns-3 { - > div { - width: 33.33333%; + width: 100%; + + @include media-breakpoint-up(md) { + &.columns-2 { + > div { + width: 50%; + } } - } - &.columns-4 { - > div { - width: 25%; + &.columns-3 { + > div { + width: 33.33333%; + } } - } - &[class^='columns-'], &[class*=' columns-'] { - > div { - @include media-breakpoint-down(md) { - width: 100%; + &.columns-4 { + > div { + width: 25%; } } } @@ -110,18 +107,16 @@ max-width: none; } } - &.columns-2 { - grid-template-columns: 1fr 1fr; - } - &.columns-3 { - grid-template-columns: 1fr 1fr 1fr; - } - &.columns-4 { - grid-template-columns: 1fr 1fr 1fr 1fr; - } - &[class^='columns-'], &[class*=' columns-'] { - @include media-breakpoint-down(md) { - grid-template-columns: 1fr; + + @include media-breakpoint-up(md) { + &.columns-2 { + grid-template-columns: 1fr 1fr; + } + &.columns-3 { + grid-template-columns: 1fr 1fr 1fr; + } + &.columns-4 { + grid-template-columns: 1fr 1fr 1fr 1fr; } } } @@ -137,18 +132,16 @@ break-inside: avoid; } } - &.masonry-2 { - column-count: 2; - } - &.masonry-3 { - column-count: 3; - } - &.masonry-4 { - column-count: 4; - } - &[class^='masonry-'], &[class*=' masonry-'] { - @include media-breakpoint-down(md) { - column-count: 1; + + @include media-breakpoint-up(md) { + &.masonry-2 { + column-count: 2; + } + &.masonry-3 { + column-count: 3; + } + &.masonry-4 { + column-count: 4; } } } @@ -190,9 +183,10 @@ } } .image-left &, .image-right & { - flex-direction: row; - @include media-breakpoint-down(sm) { - flex-direction: column; + flex-direction: column; + + @include media-breakpoint-up(sm) { + flex-direction: row; } } } From 9d7695b5f5036fd7c4212dc3d8c6ab728d672d8a Mon Sep 17 00:00:00 2001 From: ciar4n Date: Mon, 9 Sep 2019 18:34:55 +0100 Subject: [PATCH 2/3] fix cascade on modifiers --- templates/cassiopeia/scss/blocks/_modifiers.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/cassiopeia/scss/blocks/_modifiers.scss b/templates/cassiopeia/scss/blocks/_modifiers.scss index 2083f9d6977e5..a2e01b5e9c56d 100644 --- a/templates/cassiopeia/scss/blocks/_modifiers.scss +++ b/templates/cassiopeia/scss/blocks/_modifiers.scss @@ -22,6 +22,12 @@ grid-row-end: auto; } + [class^='span-col'], [class*=' span-col'] { + @include media-breakpoint-up(sm) { + grid-column-end: span 2; + } + } + @include media-breakpoint-up(md) { .span-col-2 { grid-column-end: span 2; @@ -43,12 +49,6 @@ } } - [class^='span-col'], [class*=' span-col'] { - @include media-breakpoint-down(sm) { - grid-column-end: span 2; - } - } - [class^='container-'], [class*=' container-'] { [class^='span-'], [class*=' span-'] { flex: 0 1 auto; From 0bee4534fffe4e0302645209bab67dbc785846f2 Mon Sep 17 00:00:00 2001 From: ciar4n Date: Mon, 9 Sep 2019 19:20:50 +0100 Subject: [PATCH 3/3] Update _header.scss --- templates/cassiopeia/scss/blocks/_header.scss | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/templates/cassiopeia/scss/blocks/_header.scss b/templates/cassiopeia/scss/blocks/_header.scss index 62e2da753d2cc..8c31cda163f80 100644 --- a/templates/cassiopeia/scss/blocks/_header.scss +++ b/templates/cassiopeia/scss/blocks/_header.scss @@ -54,11 +54,12 @@ } .mod-menu { - flex-direction: row !important; + flex-direction: column !important; + margin-top: 20px; - @include media-breakpoint-down(md) { - flex-direction: column !important; - margin-top: 20px; + @include media-breakpoint-up(md) { + flex-direction: row !important; + margin-top: 0; } } @@ -79,20 +80,19 @@ } &::after { - position: absolute; - right: 50%; - bottom: 0; - left: 50%; - display: block; - height: 2px; - margin: auto; - content: ""; - background: transparent; - opacity: .2; - transition: all .2s ease, background-color .2s ease; - - @include media-breakpoint-down(md) { - display: none; + + @include media-breakpoint-up(md) { + position: absolute; + right: 50%; + bottom: 0; + left: 50%; + display: block; + height: 2px; + margin: auto; + content: ""; + background: transparent; + opacity: .2; + transition: all .2s ease, background-color .2s ease; } }