diff --git a/source/_patterns/00-config/01-mixins/_mixins.uw.scss b/source/_patterns/00-config/01-mixins/_mixins.uw.scss index b79100112f5f1fa9922e63dc8cbe99bd77b118ce..5487271e14466ec76e51b75796bbff900406ad0a 100644 --- a/source/_patterns/00-config/01-mixins/_mixins.uw.scss +++ b/source/_patterns/00-config/01-mixins/_mixins.uw.scss @@ -58,14 +58,14 @@ $test-color-12: #f00; width: 100vw; } @mixin uw-full-width-reset { - left: 0; + left: inherit; margin-left: -1rem; - margin-right: -1rem; - max-width: 100%; - padding: 0; + margin-right: -2rem; + max-width: inherit; + padding:inherit; position: relative; - right: 0; - width: 100%; + right: inherit; + width: inherit; } @mixin uw-contained-width-reset() { margin-left:inherit; diff --git a/source/_patterns/03-layouts/node/_node.scss b/source/_patterns/03-layouts/node/_node.scss index 3d4a0379079604b3755e216171f74e84257bbf16..4528f4f14d8490bbb6c10506efd6667404374e77 100644 --- a/source/_patterns/03-layouts/node/_node.scss +++ b/source/_patterns/03-layouts/node/_node.scss @@ -6,9 +6,6 @@ $sidebar-gap: $grid-gap; } &__sidebar{ display:none; - *{ - // padding-right:0.25rem; - } } // Reset the grid to become flexed when we have sidebar. &.uw-node__with-sidebar{ @@ -25,25 +22,30 @@ $sidebar-gap: $grid-gap; margin:0 auto; } .uw-full-width{ - width:100vw; } @include medium { flex-direction: row; gap:$sidebar-gap; + .layout{ + padding-right:0; width: clamp(320px, 868px, calc(100vw - 347px)); } .uw-contained-width{ + padding-right:0; width: clamp(320px, 868px, calc(100vw - 347px)); } /* Match the width of WCMS2's narrow: 496px */ .uw-contained-width--narrow{ + padding-right:0; width: clamp(320px, 496px, calc(100vw - 347px)); + } /* Match the width of WCMS2's wide: 753px */ .uw-contained-width--wide{ + padding-right:0; width: clamp(320px, 753px, calc(100vw - 347px)); } } @@ -51,36 +53,45 @@ $sidebar-gap: $grid-gap; .uw-node__sidebar{ // Turn on sidebar with display. display:block; + padding:0 1rem; width:100%; + + .layout{ + padding:0; + } @include medium { - padding: 1rem 0; + padding:0; width: $sidebar-width; .layout{ width:inherit; } } - } } } // Class appears when full width content loads with sidebar on page .uw-section-has-full-width.uw-node__with-sidebar { .uw-node__grid { + background:$test-color-3; + justify-content: space-between; .uw-node__node{ + background:$test-color-5; width:100%; @include medium { + background:$test-color-3; + padding-right:0; width: calc(100vw - 347px); } - } + } .uw-full-width{ + background:$test-color-6; max-width:inherit; padding:0; width:100%; } } .uw-node__sidebar{ + background:$test-color-8; padding: 0 } - - }