diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss index 02597cb97c927aa8a465471799665894e80aae12..6ae509108beaf72a4c0be78c079d165fa66d0086 100644 --- a/src/patterns/03-layouts/site-container/_site-container.scss +++ b/src/patterns/03-layouts/site-container/_site-container.scss @@ -14,6 +14,11 @@ z-index: var(--layer-header); } .uw-highlighted { + @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; 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 2b2c6f6c5e2f9b69aac3f896faf2de0dba1bee9d..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 @@ -20,6 +20,9 @@ padding: var(--size-2); } } +.uw-highlighted{ + padding: 0; +} .node-form, .admin-list, .js-media-library-view, 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 8bddf676c788bf81218520484f438f114c27019f..a670ef712999e7a0088dd5bef58391d2a5ee6d51 100644 --- a/src/patterns/04-components/card/card--node/_card--node.scss +++ b/src/patterns/04-components/card/card--node/_card--node.scss @@ -95,32 +95,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; 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/view/_view.scss b/src/patterns/04-components/view/_view.scss index 9e2096fb34de3286e34e98521350d0c23c496efb..5a91a425f303d26d0e1bdb9dfded6d78a44e0640 100644 --- a/src/patterns/04-components/view/_view.scss +++ b/src/patterns/04-components/view/_view.scss @@ -10,7 +10,11 @@ $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%; @@ -34,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;