diff --git a/src/patterns/01-core/mixins/_headings.scss b/src/patterns/01-core/mixins/_headings.scss index c3dec645980f971a78c30acbd4ac21eb5525b435..babd9f9980cb1bb82a6f0f4b5a80e54555973f93 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 920a5b1ea9abde071c8f3c36e5607efab8262cd6..c0bebd0cac3c46c28dd8dbfd37f1b2c37158f12a 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 0e33f9abf4bf1367ea7c78aecc2681e20e6346bb..c61ae1d027d3a0d6d133e58b59ff084d47152baa 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 c8fad0cd9035f6a5546c5112c24b412bb2841afa..9cf0073891c01a451db9d8b6d83c25e9ee45d982 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 2f26dfc9e06be9f120f07d49ad4a9975a36d7161..0820e20bc78289d0d67de28b8753c91ef0383c23 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 f15a9928a35c59966e7e1c06dd6cb5f3a04f399c..a86ea37853b008f670febce1cb483fd45be4e541 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 36a398a916111b03ed4b131bbe23b4186c7524c7..404a9874225a04dc2cca97b7d57337975178c73f 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 4d492285b1fba96a844ad4b931d263910cac384e..ac3112521dfb7dd29ef40a4f5ceb1890967f6e12 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 120b0f41ccc8a11b41151a01d2ff0aa088c519c2..3e44df48301c6fc1ae13599ec9211c36978cc543 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 26000f118e56028fa877b97e7b08376062ef044f..5f20399b972f704f36079f61bb0f6d8b123b6d8b 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 6154c477f3911f4ce31402e94de5345b2c377d58..d89cd4f2d2c04460fd45f473449af19f6b5242a6 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 86dd77effbe526065f13e6dbbc9c1d58d70fd208..3c592d33747e986477ea9bfd28658597650e6516 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 0337fdb3e02227b88ee2f84d3b1f32e26a2ab654..7a7e53e44d3495db97f269f1b914d16713fd9190 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 17b2f7e9f9488b235f1419978f017e056719c0b2..0804e533283b66b63f208cb21ed386eb1b5aabe9 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 b56621ab98abbe05780775009450f9c1e1080778..02597cb97c927aa8a465471799665894e80aae12 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 88f882598b5b2265735518292c2efedb3faeae75..0c8b828a1598aadab5079355a6b136753dcb3250 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 ddfadb9ca55a85df381506267776471ccd64edc4..2b2c6f6c5e2f9b69aac3f896faf2de0dba1bee9d 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 66732e893f9b91bc6bd65807956cdc3c414cce37..6f7bde0290463594b5a6fea554d52f51d3951bd1 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 baf2f70ea3a6e4bd6844adb173f317518a874e3b..8bddf676c788bf81218520484f438f114c27019f 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 54f22ae2f73bf4098302efc54e7b0b56c9edef7b..4b3ce6b341e2e040808e714ca07ec67e6f9febbc 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 a3ce43e5fa8bda444b4543f0c08ee3c00a498f00..7791e09e2d43d18f4cafd5d8fb64bd1ce87e42f3 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 c8c7ec50be3503a84975500e4fcb9ed7fdf91b4b..9e2096fb34de3286e34e98521350d0c23c496efb 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;