diff --git a/src/patterns/01-core/elements/_blockquote.scss b/src/patterns/01-core/elements/_blockquote.scss
index 9d5e96e3e8f8bce09d15e86097963c3c083aff6e..38e9cfd3f5e1cef4804ed3576e6ad797e18b5e40 100644
--- a/src/patterns/01-core/elements/_blockquote.scss
+++ b/src/patterns/01-core/elements/_blockquote.scss
@@ -2,10 +2,12 @@
// Blockquote styles.
:where(blockquote) {
- * + & {
- margin-top: var(--size-5);
+ &:not(.uw-blockquote) {
+ background-color: var(--gray-1);
+ color: var(--uw-black);
+ font-size: var(--font-size-4);
+ padding: var(--size-3);
}
-
p {
color: inherit;
font-family: inherit;
diff --git a/src/patterns/01-core/elements/_button.scss b/src/patterns/01-core/elements/_button.scss
index ffe2b59e94ee6ce4df27cac84ba2e6d4a644e527..a78411d525e0aefc09c7473bfc40df739c2b3ab9 100644
--- a/src/patterns/01-core/elements/_button.scss
+++ b/src/patterns/01-core/elements/_button.scss
@@ -14,3 +14,7 @@
cursor: pointer;
touch-action: manipulation;
}
+
+#drupal-off-canvas input[type="submit"].button {
+ box-sizing: border-box;
+}
diff --git a/src/patterns/01-core/elements/_figure.scss b/src/patterns/01-core/elements/_figure.scss
index fb5d193e919bdd7d9418cda79a9f7f5cf25848d0..ba480bf2e224d4e4b9130eb0f59376a134aa6c52 100644
--- a/src/patterns/01-core/elements/_figure.scss
+++ b/src/patterns/01-core/elements/_figure.scss
@@ -1,6 +1,2 @@
// @file
// Figure element styles.
-
-:where(figure) {
- margin: 0 0 var(--size-2);
-}
diff --git a/src/patterns/01-core/elements/_paragraph.scss b/src/patterns/01-core/elements/_paragraph.scss
index 41502ec774caa2ae1a66bcdbaff4cc361be3532e..e61bf50090cc4b47fe850e67e685496639c21e57 100644
--- a/src/patterns/01-core/elements/_paragraph.scss
+++ b/src/patterns/01-core/elements/_paragraph.scss
@@ -10,3 +10,11 @@
widows: 3;
}
}
+
+.uw-copy-text{
+ :where(p) {
+ &:last-of-type{
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/src/patterns/01-core/mixins/_headings.scss b/src/patterns/01-core/mixins/_headings.scss
index c3dec645980f971a78c30acbd4ac21eb5525b435..32459d464b6aa93876e1d8bfdf7678c6ae27ebfb 100644
--- a/src/patterns/01-core/mixins/_headings.scss
+++ b/src/patterns/01-core/mixins/_headings.scss
@@ -20,7 +20,8 @@
}
// Add top margin when headers are preceded by other elements (p, ul, etc.)
- * + & {
+ // (excluding the uw-admin-label that identifies the blocks in layout builder)
+ *:not(.uw-admin-label) + & {
margin-top: var(--size-2);
}
@@ -34,6 +35,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..586eb7a5ff5dd63de5c5c52744a0f37a7e78c30f 100644
--- a/src/patterns/03-layouts/block/_block.scss
+++ b/src/patterns/03-layouts/block/_block.scss
@@ -5,14 +5,33 @@
.block {
margin-bottom: var(--grid-gap);
+ .in-layout-builder &{
+ outline: var(--size-xs) dashed var(--gray-4) !important;
+ }
.path-dashboard &,
&.block-page-title-block,
&.block-local-tasks-block {
margin-bottom: 0;
}
+ // On nodes, move block title to top of block, while preserving spacing underneath.
+ .uw-main & > {
+ h2:first-child,
+ .uw-admin-label + h2 {
+ margin-top: -0.25em; /* Using ems so it adjusts to font size. */
+ padding-top: 0;
+ }
+ }
&:last-of-type {
margin-bottom: 0;
}
+ // On nodes, move an initial header in copy text to top of block, while preserving spacing underneath, unless there was a block title..
+ .uw-main & .uw-admin-label + .contextual + .uw-copy-text,
+ .uw-main & .uw-copy-text:first-child {
+ .uw-copy-text__wrapper > :where(h2, h3, h4, h5, h6):first-child {
+ margin-top: -0.25em; /* Using ems so it adjusts to font size. */
+ padding-top: 0;
+ }
+ }
}
// disable margin for layout builder blocks
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..87d2ab2c37b43c824ff79bb27de2e7c83c6845a4 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -6,15 +6,19 @@
@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-shadow: var(--shadow-1);
+ --layout-show-seperator-color: var(--gray-3);
+ --layout-show-bottom-color: var(--gray-3);
+ --layout-border-color: var(--layout-show-bottom-color);
+ --layout-border-style: solid;
+ --layout-border-width: var(--size-xs);
+ --layout-border-radius: 0;
+}
.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..d68f89a8828519bbe541d02f3de52da6ac8d3c26 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -1,28 +1,113 @@
@use '../../01-core' as *;
+:root {
+ /* establish a default for calculations */
+ --base-section-margin: calc(var(--grid-gap) * 0.5);
+ /* 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);
+ padding-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);
+ padding-bottom: var(--section-margin);
+ }
+ }
+ &--25 {
+ --section-margin: calc(var(--base-section-margin) * 0.25);
+ &.layout {
+ margin-bottom: var(--section-margin);
+ padding-bottom: var(--section-margin);
+ }
+ }
+ &--none {
+ --section-margin: 0;
+ &.layout {
+ margin-bottom: var(--section-margin);
+ padding-bottom: var(--section-margin);
+ }
+ }
+ &--default {
+ --section-margin: var(--base-section-margin);
+ &.layout {
+ margin-bottom: var(--section-margin);
+ padding-bottom: var(--section-margin);
+ }
+ }
+ &.layout {
+ &.card__media {
+ margin-bottom: 0 !important;
+ }
+ }
+}
+// Section seperators.
+.uw-section-separator {
+ &--none {
+ border-color: transparent;
+ }
+ &--bottom {
+ position: relative;
+ &:not(.is-layout-builder-highlighted){
+ border-color: var(--layout-border-color);
+ border-style: var(--layout-border-style);
+ border-bottom-width: var(--layout-border-width);
+ }
+ }
+ &--narrow {
+ margin-bottom: var(--section-margin);
+ padding-bottom: var(--section-margin);
+ position: relative;
+ border-color: var(--layout-border-color);
+ border-style: var(--layout-border-style);
+ border-bottom-width: var(--layout-border-width);
+ @media(min-width: $screen-md) {
+ border-color: transparent;
+ }
+ }
+}
.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));
+ }
+ &.layout-builder__layout {
+ padding-top: var(--size-2);
+ }
+ // Set default spacing to match old block spacing if no classes
+ &:not(.uw-section-spacing--default, .uw-section-spacing--none, .uw-section-spacing--75, .uw-section-spacing--50, .uw-section-spacing--25) {
+ margin-bottom: var(--section-margin);
+ padding-bottom: var(--section-margin);
+ &:last-of-type {
+ margin-bottom: 0;
}
}
- &.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 +119,6 @@
max-width: 47.0625rem;
}
}
-
&.uw-full-width {
@include uw-full-width-padding;
overflow: hidden;
@@ -45,22 +129,22 @@
}
}
- .uw-section-has-full-width.uw-node__with-sidebar &{
+ .uw-section-has-full-width.uw-node__with-sidebar & {
padding: 0 var(--size-1) !important;
}
- .dashboards-container &{
+ .dashboards-container & {
@include uw-full-width;
margin-bottom: var(--grid-gap);
overflow: visible; /* otherwise, dropdowns truncate at the border. */
}
- .layout-builder &{
+ .layout-builder & {
padding: var(--size-2);
}
.layout-builder__region {
- padding: var(--size-2);
+ padding: var(--size-1) 0 0;
}
&.layout--uw-1-col{
@@ -68,7 +152,7 @@
.block-inline-blockuw-cbl-image,
.block-uw-cbl-image,
.block-inline-blockuw-cbl-remote-video,
- .block-inline-blockuw-cbl-image-gallery{
+ .block-inline-blockuw-cbl-image-gallery {
@include uw-full-width-margin;
.layout-builder &{
@@ -81,12 +165,11 @@
margin-left: var(--size-2);
}
- .uw-section-has-full-width.uw-node__with-sidebar &{
+ .uw-section-has-full-width.uw-node__with-sidebar & {
@include uw-full-width-reset;
}
}
-
- .block-inline-blockuw-cbl-google-maps{
+ .block-inline-blockuw-cbl-google-maps {
@include uw-contained-width;
@media(min-width: $screen-md) {
@@ -99,7 +182,7 @@
margin-right: 0;
}
- .uw-section-has-full-width.uw-node__with-sidebar &{
+ .uw-section-has-full-width.uw-node__with-sidebar & {
@include uw-full-width-reset;
}
@@ -108,10 +191,12 @@
}
}
}
- &.card__media{
+
+ &.card__media {
padding: 0;
}
}
+
// When wrapped with class to identify sidebar
.uw-node__with-sidebar & {
margin: inherit;
@@ -140,8 +225,614 @@
}
}
}
+
+ // Column separator css.
+ &--uw-2-col {
+ &.uw-column-separator {
+ &--between {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--layout-border-width);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ }
+ }
+ }
+ }
+ }
+ &--narrow {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ left: 0;
+ transform: translate(0, var(--size-2));
+ }
+ @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-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ left: 0;
+ transform: translate(0, var(--size-2));
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--layout-border-width);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ }
+ }
+ }
+ &--second {
+ &::before {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ height: var(--layout-border-width);
+ left: 0;
+ position: absolute;
+ transform: translate(0, var(--size-2));
+ width: 100%;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ height: 100%;
+ left: inherit;
+ position: absolute;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ width: var(--layout-border-width);
+ }
+ }
+ }
+ }
+ }
+ &--narrow {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::before {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ height: var(--layout-border-width);
+ left: 0;
+ position: absolute;
+ transform: translate(0, var(--size-2));
+ width: 100%;
+ }
+ @media(min-width: $screen-md) {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ &--second {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ 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;
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ left: 0;
+ right: inherit;
+ transform: translate(0, var(--size-2));
+ }
+ &::before {
+ @media(min-width: $screen-sm) {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ height: 100%;
+ left: inherit;
+ position: absolute;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ width: var(--size-xs);
+ }
+ }
+ @media(min-width: $screen-lg) {
+ &::after {
+ display: none;
+ }
+ }
+ }
+ &--second {
+ &::before {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ height: var(--layout-border-width);
+ left: 0;
+ position: absolute;
+ transform: translate(0, var(--size-2));
+ width: 100%;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ height: 100%;
+ left: inherit;
+ position: absolute;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ width: var(--size-xs);
+ }
+ }
+ }
+ &--third {
+ &::before {
+ bottom: 0;
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ left: 0;
+ transform: translate(0, var(--size-2));
+ }
+ @media(min-width: $screen-sm) {
+ &::before {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ position: absolute;
+ height: 100%;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ width: var(--size-xs);
+ }
+ }
+ }
+ }
+ }
+ &--narrow {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::after {
+ bottom: 0;
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ left: 0;
+ right: inherit;
+ transform: translate(0, var(--size-2));
+ }
+ &::before {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ height: 100%;
+ left: inherit;
+ position: absolute;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ width: var(--size-xs);
+ }
+ @media(min-width: $screen-lg) {
+ &::after,
+ &::before{
+ display: none;
+ }
+ }
+ }
+ &--second {
+ &::before {
+ background-color: var(--layout-show-seperator-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) {
+ &::after,
+ &::before{
+ display: none;
+ }
+ }
+ }
+ &--third {
+ &::before {
+ bottom: 0;
+ @media(min-width: $screen-sm) {
+ transform: translate(0, var(--size-2));
+ }
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ left: 0;
+ }
+ @media(min-width: $screen-sm) {
+ &::before {
+ background-color: var(--layout-show-seperator-color);
+ bottom: 0;
+ content: '';
+ position: absolute;
+ height: 100%;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ width: var(--size-xs);
+ }
+ }
+ @media(min-width: $screen-lg) {
+ &::after,
+ &::before{
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &--uw-inverted-l-right {
+ &.uw-column-separator {
+ &--between {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::after {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ right: inherit;
+ }
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ }
+ @media(min-width: $screen-lg) {
+ &::after {
+ display: none;
+ }
+ }
+ }
+ &--second {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ }
+ }
+ }
+ &--third {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ }
+ }
+ }
+ &--fourth {
+ @media(min-width: $screen-lg) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--size-xs);
+ height: 100%;
+ top: 0;
+ left: 0;
+ transform: translate(calc((var(--size-2) * -1) - 1px), 0);
+ }
+ // Fix height of separator when block has title showing (requires browser with :has support).
+ .uw-main &:has(.block > h2:first-child)::before {
+ height: calc(100% - 0.45em);
+ top: 0.45em;
+ }
+ }
+ }
+ }
+ }
+ &--narrow {
+ //
+ }
+ }
+ }
+ &--uw-inverted-l-left {
+ &.uw-column-separator {
+ &--between {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::after {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ right: inherit;
+ }
+
+ @media(min-width: $screen-lg) {
+ &::after {
+ display: none;
+ }
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ }
+ }
+ }
+ &--second{
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: inherit;
+ right: 0;
+ transform: translate(var(--size-2), 0);
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: 0;
+ transform: translate(calc((var(--size-2) * -1) - 1px), 0);
+ }
+ }
+ }
+ &--third {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ &--fourth {
+ @media(min-width: $screen-lg) {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: var(--size-xs);
+ height: 100%;
+ bottom: 0;
+ left: 0;
+ transform: translate(calc((var(--size-2) * -1) - 1px), 0);
+ }
+ }
+ }
+ }
+ }
+ &--narrow {
+ .layout__region {
+ position: relative;
+ &--first {
+ &::after {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ right: inherit;
+ }
+ @media(min-width: $screen-lg) {
+ &::after {
+ display: none;
+ }
+ }
+ }
+ &--second {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ &--third {
+ &::before {
+ content: '';
+ position: absolute;
+ background-color: var(--layout-show-seperator-color);
+ width: 100%;
+ height: var(--layout-border-width);
+ bottom: 0;
+ transform: translate(0, var(--size-2));
+ left: 0;
+ }
+ @media(min-width: $screen-lg) {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
-.uw-section-has-full-width .layout.layout--uw-1-col{
+.uw-section-has-full-width .layout.layout--uw-1-col {
overflow: hidden;
}
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..a66dcbfb4b41f78b31877a8e90af1a6a9a462c5c 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,3 @@
.layout--uw-1-col {
- display: grid;
- gap: var(--grid-gap);
- grid-template-columns: 100%;
-}
-
-
-.layout--uw-1-col .layout__region--first {
- grid-column: 1 / 2;
+ display: block;
}
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..1a21fed1095d321fb1f5c6fc15a46ef6e59f9f83 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-seperator-color);
+ // width: 100%;
+ // height: var(--layout-border-width);
+ // bottom: -1rem;
+ // left: 0;
+ // right: inherit;
+ // }
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // background-color: var(--layout-show-seperator-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-seperator-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-seperator-color);
+ // width: var(--size-xs);
+ // height: 100%;
+ // bottom: 0;
+ // left: inherit;
+ // right: -1rem;
+ // }
+ // }
+ // }
+ // &--third {
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // background-color: var(--layout-show-seperator-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-seperator-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..6ae509108beaf72a4c0be78c079d165fa66d0086 100644
--- a/src/patterns/03-layouts/site-container/_site-container.scss
+++ b/src/patterns/03-layouts/site-container/_site-container.scss
@@ -14,16 +14,17 @@
z-index: var(--layer-header);
}
.uw-highlighted {
- @include uw-contained-width;
+ @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));
+ }
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..a66879b2ea8a513f718cdb2430cd6c997ebc61cf 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,22 @@
.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);
+ }
+}
+.uw-highlighted{
+ padding: 0;
+}
.node-form,
.admin-list,
.js-media-library-view,
@@ -16,10 +32,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 +41,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..ea502fb84f8f4c73150b21e163e720b7b24e9a01 100644
--- a/src/patterns/04-components/card/card--node/_card--node.scss
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -10,12 +10,15 @@
> .card__header,
> .card__footer {
margin: 0 auto;
- max-width: var(--layout-max-width);
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ @include uw-contained-width(var(--layout-max-width));
+ }
}
- .uw-node__with-media &{
+ .uw-node__with-media & {
> .card__header {
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
+ padding: 0;
+ &.uw-node__with-media{
padding: var(--size-2) 0;
}
}
@@ -33,6 +36,9 @@
}
.card__header {
padding: 0 0 var(--size-2) 0;
+ &:not(:has(*)) {
+ padding: 0;
+ }
}
}
.card__tags {
@@ -55,11 +61,16 @@
}
// CSS for specific node card presentations:
- &--web-page{
+ &--web-page {
// Currently this is PL demo only
// needs to be implemented correctly when webpage has media.
.uw-node__with-media & {
- .card__featured-image{
+ .card__header {
+ &.uw-node__with-media{
+ padding: var(--size-2) 0;
+ }
+ }
+ .card__featured-image {
align-items: center;
background-position: center center;
background-repeat: no-repeat;
@@ -89,32 +100,46 @@
}
// CSS for specific node card presentations:
&--contact {
- @include uw-contained-width();
+ @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));
+ }
display: block;
@media(min-width: $screen-md) {
display: grid;
grid-template-columns: 100%;
}
.card__media{
- @include uw-full-width-margin;
grid-column: 1 / 3;
grid-row: 1 / 2;
margin-bottom: var(--size-2);
@media(min-width: $screen-md) {
margin-bottom: 0;
+ margin-left: 0;
+ margin-right: 0;
+ }
+ &.uw-full-width{
+ @include uw-full-width-margin;
}
&.uw-contained-width{
+ margin-left: 0;
+ margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
}
}
&.uw-contained-width--wide{
+ margin-left: 0;
+ margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
max-width: 47.0625rem;
}
}
&.uw-contained-width--narrow{
+ margin-left: 0;
+ margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
max-width: 31rem;
@@ -210,21 +235,24 @@
&--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) 0;
+ }
}
.card__footer,
.card__tags {
@@ -248,6 +276,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 +313,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/contact/_contact.scss b/src/patterns/04-components/contact/_contact.scss
index e29dfe2b2e5d4dac3a4280128e654004a47bbfb2..65abed42f876dbc4b5e607af2fe990519844c0de 100644
--- a/src/patterns/04-components/contact/_contact.scss
+++ b/src/patterns/04-components/contact/_contact.scss
@@ -103,6 +103,10 @@ $details-background-color: var(--gray-2) !default;
.node {
// &--type-uw-ct-profile
&--type-uw-ct-contact{
- @include uw-contained-width();
+ @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));
+ }
}
}
diff --git a/src/patterns/04-components/image/_image.scss b/src/patterns/04-components/image/_image.scss
index ff6891d249705d77de8518ad4830a5e8166c27be..0b8e414e5a214bea4ab1a0afee604ad261238e48 100644
--- a/src/patterns/04-components/image/_image.scss
+++ b/src/patterns/04-components/image/_image.scss
@@ -9,7 +9,7 @@
}
&__figure{
display: table;
- min-width: 15rem;
+ min-width: 9rem;
}
&__caption{
caption-side: bottom;
diff --git a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
index 7d057c2c92e5dfbd2494e8eb4814e7d929d55f01..1a407e50380945db4265a38b1e6404b315aba89f 100644
--- a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
+++ b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -10,9 +10,11 @@
flex-wrap: wrap;
justify-content: flex-start;
list-style-type: none;
+ margin-left: 0 !important;
padding-bottom: var(--size-2);
text-align: center;
text-transform: uppercase;
+
li {
border-color: var(--gray-6);
border-style: solid;
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..660e689ff0ba3fa1f2da3c3e7775f0a4c8941f48 100644
--- a/src/patterns/04-components/view/_view.scss
+++ b/src/patterns/04-components/view/_view.scss
@@ -10,25 +10,22 @@ $sidebar-width: 18.75rem;
// to match flexbox in multi list usage.
.view {
&s-element-container{
- @include uw-contained-width;
+ @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));
+ }
+ 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;
}
@@ -41,7 +38,11 @@ $sidebar-width: 18.75rem;
padding-right: 0;
}
&-interact{
- @include uw-contained-width;
+ @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));
+ }
display: flex;
gap: var(--size-1);
grid-row-gap: 0;
@@ -335,13 +336,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;
@@ -409,3 +403,9 @@ $sidebar-width: 18.75rem;
gap: var(--size-1);
justify-content: flex-end;
}
+
+// Make views display properly in layout builder (particularly narrow columns).
+.layout-builder-block.views-element-container {
+ padding: 1.5em; /* The default for layout builder blocks; for some reason it only works if I set it explicitly */
+ width: auto;
+}