From 5fe79ff3a1d918d2406a3304e07bcbac1a46c530 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 21 Dec 2022 17:28:43 -0500
Subject: [PATCH] ISTWCMS-5898: Adding the bottom lines when narrow and
adjusting spacing in cards: event news blog and web page
---
src/patterns/01-core/mixins/_headings.scss | 3 +
src/patterns/01-core/mixins/_uw-mixins.scss | 5 -
src/patterns/03-layouts/block/_block.scss | 6 +
src/patterns/03-layouts/footer/_footer.scss | 3 +
src/patterns/03-layouts/header/_header.scss | 3 +
.../03-layouts/layout/_layout-base.scss | 15 +-
src/patterns/03-layouts/layout/_layout.scss | 570 +++++++++++++++++-
.../layout/layout--1-col/_layout--1-col.scss | 8 +-
.../layout/layout--2-col/_layout--2-col.scss | 2 -
.../layout/layout--3-col/_layout--3-col.scss | 1 -
.../layout/layout--4-col/_layout--4-col.scss | 2 -
.../layout/layout--5-col/_layout--5-col.scss | 82 +++
.../_layout--inverted-l-left.scss | 2 -
.../_layout--inverted-l-right.scss | 2 -
.../site-container/_site-container.scss | 4 -
.../03-layouts/site-footer/_site-footer.scss | 3 +-
.../layout-builder/_layout-builder.scss | 22 +-
.../04-components/caption/_caption.scss | 3 +
.../card/card--node/_card--node.scss | 47 +-
.../04-components/page-title/_page-title.scss | 5 +
.../04-components/site-name/_site-name.scss | 7 +-
src/patterns/04-components/view/_view.scss | 18 +-
22 files changed, 726 insertions(+), 87 deletions(-)
diff --git a/src/patterns/01-core/mixins/_headings.scss b/src/patterns/01-core/mixins/_headings.scss
index c3dec645..babd9f99 100644
--- a/src/patterns/01-core/mixins/_headings.scss
+++ b/src/patterns/01-core/mixins/_headings.scss
@@ -34,6 +34,9 @@
@include heading-base;
line-height: var(--font-lineheight-1);
font-size: var(--font-size-8);
+ &.card__title{
+ margin: 0;
+ }
}
@mixin heading-2 {
diff --git a/src/patterns/01-core/mixins/_uw-mixins.scss b/src/patterns/01-core/mixins/_uw-mixins.scss
index 920a5b1e..c0bebd0c 100644
--- a/src/patterns/01-core/mixins/_uw-mixins.scss
+++ b/src/patterns/01-core/mixins/_uw-mixins.scss
@@ -22,11 +22,6 @@ $test-color-12: var(--green-5);
margin-left: auto;
margin-right: auto;
max-width: $value;
- padding: 0 var(--size-2);
- @media(min-width: 75rem) {
- padding-left: 0;
- padding-right: 0;
- }
}
@mixin uw-full-width {
diff --git a/src/patterns/03-layouts/block/_block.scss b/src/patterns/03-layouts/block/_block.scss
index 0e33f9ab..c61ae1d0 100644
--- a/src/patterns/03-layouts/block/_block.scss
+++ b/src/patterns/03-layouts/block/_block.scss
@@ -5,6 +5,12 @@
.block {
margin-bottom: var(--grid-gap);
+ .in-layout-builder &{
+ outline: var(--size-xs) dashed var(--gray-4) !important;
+ }
+ &:last-of-type {
+ margin: 0;
+ }
.path-dashboard &,
&.block-page-title-block,
&.block-local-tasks-block {
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
index c8fad0cd..9cf00738 100644
--- a/src/patterns/03-layouts/footer/_footer.scss
+++ b/src/patterns/03-layouts/footer/_footer.scss
@@ -18,6 +18,9 @@
@media(min-width: $screen-md) {
grid-template-columns: 25% auto 17rem;
}
+ @media(min-width: $screen-xl) {
+ padding: var(--size-2) 0;
+ }
}
&__address {
font-family: var(--font-systemmedium);
diff --git a/src/patterns/03-layouts/header/_header.scss b/src/patterns/03-layouts/header/_header.scss
index 2f26dfc9..0820e20b 100644
--- a/src/patterns/03-layouts/header/_header.scss
+++ b/src/patterns/03-layouts/header/_header.scss
@@ -26,6 +26,9 @@ $site-name-bg: var(--gray-2);
min-height: inherit;
padding: var(--size-2);
}
+ @media(min-width: $screen-xl) {
+ padding: var(--size-2) 0;
+ }
.uw-site-logo {
align-self: flex-start;
flex: 1;
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index f15a9928..a86ea378 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -6,15 +6,18 @@
@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 *;
-
+:root{
+ --layout-border-color: transparent;
+ --layout-border-style: solid;
+ --layout-border-width: var(--size-xs);
+ --layout-border-radius: 0;
+ --layout-border-shadow: var(--shadow-1);
+ --layout-show-border-color: var(--gray-3);
+}
.layout__region {
- .layout-builder &{
- outline: var(--size-sm) dashed var(--blue-6);
- }
-
.pl & {
- outline: var(--size-sm) dashed var(--blue-6);
+ outline: var(--size-xs) dashed var(--blue-6);
padding: var(--size-3);
text-align: center;
.pl-labels{
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index 36a398a9..404a9874 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -1,28 +1,130 @@
@use '../../01-core' as *;
+:root {
+ /* establish a default for calculations */
+ --base-section-margin: var(--grid-gap);
+ /* use that default as the default spacing */
+ --section-margin: var(--base-section-margin);
+ --layout-max-width-narrow: calc(100vw - 2rem);
+}
+.uw-section-spacing {
+ &--75 {
+ --section-margin: calc(var(--base-section-margin) * 0.75);
+ &.layout{
+ margin-bottom: var(--section-margin);
+ &.card__media {
+ margin-bottom: 0 !important;
+ }
+ }
+ }
+ &--50 {
+ --section-margin: calc(var(--base-section-margin) * 0.5);
+ &.layout {
+ margin-bottom: var(--section-margin);
+ }
+ }
+ &--25 {
+ --section-margin: calc(var(--base-section-margin) * 0.25);
+ &.layout {
+ margin-bottom: var(--section-margin);
+ }
+ }
+ &--none {
+ --section-margin: 0;
+ &.layout {
+ margin-bottom: var(--section-margin);
+ }
+ }
+ &--default {
+ --section-margin: var(--base-section-margin);
+ &.layout{
+ margin-bottom: var(--section-margin);
+ }
+ }
+ &.layout {
+ &.card__media {
+ margin-bottom: 0 !important;
+ }
+ }
+}
+// Section seperators.
+.uw-section-separator {
+ &--none {
+ //--layout-border-width: 0;
+ //border-color: var(--layout-border-color);
+ //border-style: var(--layout-border-style);
+ //border-bottom-width: var(--layout-border-width);
+ }
+ &--bottom {
+ --layout-border-width: var(--size-xs);
+ position: relative;
+ &::before {
+ bottom: 0;
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ height: var(--layout-border-width);
+ left: 0;
+ width: 100%;
+ }
+ &.uw-column-separator--none{
+ &::before {
+ bottom: -1rem;
+ }
+ }
+ &:last-of-type {
+ &::before {
+ bottom: 0;
+ }
+ }
+ }
+ &--narrow {
+ --layout-border-width: var(--size-xs);
+ position: relative;
+ &::before {
+ bottom: -1rem;
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ height: var(--layout-border-width);
+ left: 0;
+ width: 100%;
+ @media(min-width: $screen-md) {
+ display: none;
+ }
+ }
+ &.uw-column-separator--narrow {
+ &::before {
+ bottom: 0 !important;
+ }
+ }
+ &:last-of-type{
+ &::before {
+ bottom: 0;
+ }
+ }
+ }
+}
.layout {
- @include uw-contained-width;
- .uw-node__with-media .card__node & {
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
- }
+ --layout-border-width: var(--size-xs);
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ @include uw-contained-width(var(--layout-max-width));
}
- &.card__media{
+ &.card__media {
padding: 0 var(--size-2);
+ @media(min-width: $screen-xl) {
+ padding: 0;
+ }
}
&.uw-contained-width {
- @include uw-contained-width;
- padding: var(--size-2);
-
+ @include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
}
- &.card__media{
- padding: 0 var(--size-2);
- @media(min-width: $screen-xl) {
- padding: 0;
- }
+ &.card__media {
+ max-width: var(--layout-max-width);
}
&--narrow {
/* Match the width of WCMS2's narrow: 496px */
@@ -34,7 +136,6 @@
max-width: 47.0625rem;
}
}
-
&.uw-full-width {
@include uw-full-width-padding;
overflow: hidden;
@@ -60,9 +161,8 @@
}
.layout-builder__region {
- padding: var(--size-2);
+ padding: var(--size-1) 0 0;
}
-
&.layout--uw-1-col{
.block-inline-blockuw-cbl-banner-images,
.block-inline-blockuw-cbl-image,
@@ -85,7 +185,6 @@
@include uw-full-width-reset;
}
}
-
.block-inline-blockuw-cbl-google-maps{
@include uw-contained-width;
@@ -108,10 +207,18 @@
}
}
}
+
+ &.layout--uw-inverted-l-right,
+ &.layout--uw-inverted-l-left {
+ //@include uw-full-width-padding;
+ //overflow: hidden;
+ }
+
&.card__media{
padding: 0;
}
}
+
// When wrapped with class to identify sidebar
.uw-node__with-sidebar & {
margin: inherit;
@@ -140,8 +247,429 @@
}
}
}
-}
+ // Column separator css.
+ &--uw-2-col {
+ &.uw-column-separator{
+ &--between {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: -1rem;
+ left: 0;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: var(--layout-border-width);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: -1rem;
+ }
+ }
+ }
+ }
+ }
+ &--narrow{
+ .layout__region {
+ position: relative;
+ &--first {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ left: 0;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &--uw-3-col {
+ &.uw-column-separator{
+ &--between {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ left: 0;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: var(--layout-border-width);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: -1rem;
+ }
+ }
+ }
+ &--second{
+ &::before {
+ background-color: var(--layout-show-border-color);
+ bottom: 0;
+ content: '';
+ height: var(--layout-border-width);
+ left: 0;
+ position: absolute;
+ width: 100%;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ background-color: var(--layout-show-border-color);
+ bottom: 0;
+ content: '';
+ height: 100%;
+ left: inherit;
+ position: absolute;
+ right: -1rem;
+ width: var(--layout-border-width);
+ }
+ }
+ }
+ &--third{
+ //
+ }
+ }
+ }
+ &--narrow{
+ .layout__region {
+ position: relative;
+ &--first {
+ &::before {
+ background-color: var(--layout-show-border-color);
+ bottom: -1rem;
+ content: '';
+ height: var(--layout-border-width);
+ left: 0;
+ position: absolute;
+ width: 100%;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ &--second{
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: -1rem;
+ left: 0;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &--uw-4-col {
+ &.uw-column-separator{
+ &--between {
+
+ .layout__region {
+ position: relative;
+ &--first {
+ &::after {
+ bottom: 0;
+ @media(min-width: $screen-sm){
+ bottom: -1rem;
+ }
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ left: 0;
+ right: inherit;
+ }
+ &::before {
+ background-color: var(--layout-show-border-color);
+ bottom: 0;
+ content: '';
+ height: 100%;
+ left: inherit;
+ position: absolute;
+ right: -1rem;
+ width: var(--size-xs);
+ }
+ @media(min-width: $screen-lg) {
+ &::after {
+ display: none;
+ }
+ }
+ }
+ &--second{
+ &::before {
+ background-color: var(--layout-show-border-color);
+ bottom: 0;
+ @media(min-width: $screen-sm){
+ bottom: -1rem;
+ }
+ content: '';
+ height: var(--layout-border-width);
+ left: 0;
+ position: absolute;
+ width: 100%;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ background-color: var(--layout-show-border-color);
+ bottom: 0;
+ content: '';
+ height: 100%;
+ left: inherit;
+ position: absolute;
+ right: -1rem;
+ width: var(--size-xs);
+ }
+ }
+ }
+ &--third {
+ &::before {
+ bottom: 0;
+ @media(min-width: $screen-sm){
+ bottom: -1rem;
+ }
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ left: 0;
+ }
+ @media(min-width: $screen-sm) {
+ &::before {
+ background-color: var(--layout-show-border-color);
+ bottom: 0;
+ content: '';
+ position: absolute;
+ height: 100%;
+ left: inherit;
+ right: -1rem;
+ width: var(--size-xs);
+ }
+ }
+ }
+ }
+ }
+ &--narrow{
+ //
+ }
+ }
+ }
+ &--uw-inverted-l-right {
+ &.uw-column-separator{
+ &--between {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::after {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: -1rem;
+ left: 0;
+ right: inherit;
+ }
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: -1rem;
+ }
+ @media(min-width: $screen-lg) {
+ &::after {
+ display: none;
+ }
+ }
+ }
+ &--second{
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: -1rem;
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: -1rem;
+ }
+ }
+ }
+ &--third {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: -1rem;
+ left: 0;
+ }
+ @media(min-width: $screen-sm) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: -1rem;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &--uw-inverted-l-left {
+ &.uw-column-separator{
+ &--between {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::after {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: -1rem;
+ left: 0;
+ right: inherit;
+ }
+
+ @media(min-width: $screen-lg) {
+ &::after {
+ display: none;
+ }
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: -1rem;
+ }
+ }
+ }
+ &--second{
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: -1rem;
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: -1rem;
+ }
+ }
+ }
+ &--third {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-border-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: -1rem;
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ &--narrow{
+ //
+ }
+ }
+ }
+}
.uw-section-has-full-width .layout.layout--uw-1-col{
overflow: hidden;
}
+
+
+.uw-full-width.uw-section-spacing--none.uw-section-separator--bottom:has(img){
+ padding-bottom: 0;
+}
+.uw-full-width.uw-section-spacing--none + .uw-column-separator--between,
+.uw-section-spacing--none.uw-section-separator--bottom + .uw-column-separator--between,
+.uw-section-spacing--none.uw-section-separator--bottom.uw-column-separator--between + .uw-column-separator--between,
+.uw-section-spacing--none.uw-section-separator--bottom.uw-column-separator--narrow + .uw-column-separator--between,
+.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--between + .uw-column-separator--between,
+.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrrow + .uw-column-separator--between {
+ .layout__region {
+ padding-top: var(--size-2);
+ }
+}
+
diff --git a/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss b/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
index 4d492285..ac311252 100644
--- a/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
+++ b/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
@@ -1,10 +1,4 @@
.layout--uw-1-col {
- display: grid;
- gap: var(--grid-gap);
- grid-template-columns: 100%;
+ display: block;
}
-
-.layout--uw-1-col .layout__region--first {
- grid-column: 1 / 2;
-}
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 120b0f41..3e44df48 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
@@ -3,8 +3,6 @@
.layout--uw-2-col {
display: grid;
gap: var(--grid-gap);
- grid-template-columns: 100%;
-
&.larger-left {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 2fr) 1fr;
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 26000f11..5f20399b 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,7 +3,6 @@
.layout--uw-3-col {
display: grid;
gap: var(--grid-gap);
-
&.even-split {
grid-template-columns: 100%;
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 6154c477..d89cd4f2 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
@@ -3,8 +3,6 @@
.layout--uw-4-col {
display: grid;
gap: var(--grid-gap);
- grid-template-columns: 100%;
-
&.even-split {
@media(min-width: $screen-sm) {
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 86dd77ef..3c592d33 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
@@ -94,4 +94,86 @@
}
}
}
+ // @todo
+ //&.uw-column-separator {
+ // &--between {
+ // --layout-border-width: var(--size-xs);
+ // .layout__region {
+ // position: relative;
+ // &--first {
+ // &::after {
+ // content: '';
+ // position: absolute;
+ // background-color: var(--layout-show-border-color);
+ // width: 100%;
+ // height: var(--layout-border-width);
+ // bottom: -1rem;
+ // left: 0;
+ // right: inherit;
+ // }
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // background-color: var(--layout-show-border-color);
+ // width: var(--size-xs);
+ // height: 100%;
+ // bottom: 0;
+ // left: inherit;
+ // right: -1rem;
+ // }
+ // @media(min-width: $screen-lg) {
+ // &::after {
+ // display: none;
+ // }
+ // }
+ // }
+ // &--second{
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // background-color: var(--layout-show-border-color);
+ // width: 100%;
+ // height: var(--layout-border-width);
+ // bottom: -1rem;
+ // left: 0;
+ // }
+ // @media(min-width: $screen-lg) {
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // background-color: var(--layout-show-border-color);
+ // width: var(--size-xs);
+ // height: 100%;
+ // bottom: 0;
+ // left: inherit;
+ // right: -1rem;
+ // }
+ // }
+ // }
+ // &--third {
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // background-color: var(--layout-show-border-color);
+ // width: 100%;
+ // height: var(--layout-border-width);
+ // bottom: -1rem;
+ // left: 0;
+ // }
+ // @media(min-width: $screen-sm) {
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // background-color: var(--layout-show-border-color);
+ // width: var(--size-xs);
+ // height: 100%;
+ // bottom: 0;
+ // left: inherit;
+ // right: -1rem;
+ // }
+ // }
+ // }
+ // }
+ // }
+ //}
}
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 0337fdb3..7a7e53e4 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
@@ -3,8 +3,6 @@
.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);
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 17b2f7e9..0804e533 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
@@ -3,8 +3,6 @@
.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);
diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss
index b56621ab..02597cb9 100644
--- a/src/patterns/03-layouts/site-container/_site-container.scss
+++ b/src/patterns/03-layouts/site-container/_site-container.scss
@@ -14,16 +14,12 @@
z-index: var(--layer-header);
}
.uw-highlighted {
- @include uw-contained-width;
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative;
width: 100%;
// Puts the content at z-index 3
z-index: var(--layer-content);
- @media(min-width: $screen-xl) {
- padding: 0;
- }
}
.block-uw-cbl-special-alert {
diff --git a/src/patterns/03-layouts/site-footer/_site-footer.scss b/src/patterns/03-layouts/site-footer/_site-footer.scss
index 88f88259..0c8b828a 100644
--- a/src/patterns/03-layouts/site-footer/_site-footer.scss
+++ b/src/patterns/03-layouts/site-footer/_site-footer.scss
@@ -7,8 +7,7 @@
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto auto auto;
- padding-bottom: var(--size-2);
- padding-top: var(--size-2);
+ padding: var(--size-2);
@media(min-width: $screen-md) {
grid-template-columns: auto 18rem;
}
diff --git a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index ddfadb9c..2b2c6f6c 100644
--- a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -7,6 +7,19 @@
.uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
+.layout-builder__message,
+.field--name-moderation-state {
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
+ margin-bottom: 0;
+ padding: var(--size-2) 0;
+ .form-wrapper{
+ padding: var(--size-2);
+ }
+}
.node-form,
.admin-list,
.js-media-library-view,
@@ -16,10 +29,7 @@
.uw-content-moderation__wrapper,
form {
@include uw-contained-width;
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
- }
+ padding: var(--size-2) 0;
}
// Reset padding
.uw-content-moderation__wrapper{
@@ -28,6 +38,10 @@ form {
padding: var(--size-2);
.user-logged-in &{
display: block;
+ margin: var(--size-2);
+ @media(min-width: $screen-xl) {
+ margin: 0 auto var(--size-2) auto;
+ }
}
}
// right column on edit
diff --git a/src/patterns/04-components/caption/_caption.scss b/src/patterns/04-components/caption/_caption.scss
index 66732e89..6f7bde02 100644
--- a/src/patterns/04-components/caption/_caption.scss
+++ b/src/patterns/04-components/caption/_caption.scss
@@ -7,4 +7,7 @@
font-size: var(--font-size-000);
padding: var(--size-1);
}
+ p{
+ margin: 0;
+ }
}
diff --git a/src/patterns/04-components/card/card--node/_card--node.scss b/src/patterns/04-components/card/card--node/_card--node.scss
index baf2f70e..8bddf676 100644
--- a/src/patterns/04-components/card/card--node/_card--node.scss
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -14,10 +14,7 @@
}
.uw-node__with-media &{
> .card__header {
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
- }
+ padding: 0;
}
}
.uw-node__without-media & {
@@ -59,6 +56,15 @@
// Currently this is PL demo only
// needs to be implemented correctly when webpage has media.
.uw-node__with-media & {
+ .card__header {
+ &.uw-node__with-media{
+ padding: var(--size-2);
+ @media(min-width: $screen-xl) {
+ padding: var(--size-2) 0;
+ }
+ }
+ }
+
.card__featured-image{
align-items: center;
background-position: center center;
@@ -210,21 +216,27 @@
&--event {
.uw-node__without-media & {
- @include uw-contained-width();
- padding: 0;
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
}
-
.uw-node__with-media & {
+
.card__header{
display: grid;
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
- }
+ padding: 0;
.card__title{
margin: 0;
padding: var(--size-2) 0;
}
+ &.uw-node__with-media{
+ padding: var(--size-2);
+ @media(min-width: $screen-xl) {
+ padding: var(--size-2) 0;
+ }
+ }
}
.card__footer,
.card__tags {
@@ -248,6 +260,12 @@
// Width is experimental to match one of the wide-width in
// layouts for small width page look.
@include uw-contained-width(49.0625rem);
+ &.uw-node__with-media{
+ padding: 0;
+ //@media(min-width: $screen-xl) {
+ // padding: var(--size-2) 0;
+ //}
+ }
align-self: end;
margin-bottom: 0;
margin-top: 0;
@@ -279,6 +297,13 @@
}
}
}
+ .card__content {
+ .layout {
+ &:first-of-type {
+ padding: var(--size-2) 0 0;
+ }
+ }
+ }
}
// CSS for displaying the title within the node :
}
diff --git a/src/patterns/04-components/page-title/_page-title.scss b/src/patterns/04-components/page-title/_page-title.scss
index 54f22ae2..4b3ce6b3 100644
--- a/src/patterns/04-components/page-title/_page-title.scss
+++ b/src/patterns/04-components/page-title/_page-title.scss
@@ -4,6 +4,11 @@
@use '../../01-core' as *;
.block-page-title-block{
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
margin-bottom: 0;
}
.page-title {
diff --git a/src/patterns/04-components/site-name/_site-name.scss b/src/patterns/04-components/site-name/_site-name.scss
index a3ce43e5..7791e09e 100644
--- a/src/patterns/04-components/site-name/_site-name.scss
+++ b/src/patterns/04-components/site-name/_site-name.scss
@@ -6,9 +6,12 @@ $site-slogan-font-size: var(--font-size-2);
.uw-site-name {
&__wrapper {
- padding: 0 var(--size-1);
+ padding: 0 var(--size-2);
@media(min-width: $screen-md) {
- @include uw-contained-width();
+ @include uw-contained-width;
+ }
+ @media(min-width: $screen-xl) {
+ padding: 0;
}
}
diff --git a/src/patterns/04-components/view/_view.scss b/src/patterns/04-components/view/_view.scss
index c8c7ec50..9e2096fb 100644
--- a/src/patterns/04-components/view/_view.scss
+++ b/src/patterns/04-components/view/_view.scss
@@ -11,24 +11,17 @@ $sidebar-width: 18.75rem;
.view {
&s-element-container{
@include uw-contained-width;
+ padding: 0;
position: relative;
width: 100%;
- &.block-views,
- .block-views &,
- .block-layout-builder &{
- padding: 0;
- }
}
&s-projects-container{
margin-left: auto;
margin-right: auto;
max-width: var(--layout-max-width);
- padding: 0 var(--size-2);
+ padding: var(--size-2) 0;
position: relative;
width: 100%;
- @media(min-width: $screen-xl) {
- padding: 0;
- }
.views-element-container{
padding: 0;
}
@@ -335,13 +328,6 @@ $sidebar-width: 18.75rem;
}
.path-taxonomy {
- .view-content {
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
- padding: 0;
- }
- }
-
.view-uw-view-catalog-show-nodes {
.view-content {
padding: 0;
--
GitLab