diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss index de63e0f41ce1b961db1f132ff458aa7915e17864..99d9bc021deee1315c2a904c1070d3f7d41a4cd6 100644 --- a/src/patterns/03-layouts/layout/_layout.scss +++ b/src/patterns/03-layouts/layout/_layout.scss @@ -57,14 +57,16 @@ &--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%; + &:not(.is-layout-builder-highlighted){ + &::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 { @@ -81,7 +83,7 @@ --layout-border-width: var(--size-xs); position: relative; &::before { - bottom: -1rem; + bottom: 0; content: ''; position: absolute; background-color: var(--layout-show-border-color); @@ -95,6 +97,9 @@ &.uw-column-separator--narrow { &::before { bottom: 0 !important; + @media(min-width: $screen-md) { + display: none; + } } } &:last-of-type{ @@ -400,12 +405,11 @@ &--uw-4-col { &.uw-column-separator{ &--between { - .layout__region { position: relative; &--first { &::after { - bottom: 0; + bottom: -0.5rem; @media(min-width: $screen-sm){ bottom: -1rem; } @@ -418,14 +422,16 @@ 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-sm){ + 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 { @@ -436,7 +442,7 @@ &--second{ &::before { background-color: var(--layout-show-border-color); - bottom: 0; + bottom: -0.5rem; @media(min-width: $screen-sm){ bottom: -1rem; } @@ -459,6 +465,85 @@ } } } + &--third { + &::before { + bottom: 0; + 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{ + .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, + &::before{ + 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) { + &::after, + &::before{ + display: none; + } + } + } &--third { &::before { bottom: 0; @@ -484,12 +569,15 @@ width: var(--size-xs); } } + @media(min-width: $screen-lg) { + &::after, + &::before{ + display: none; + } + } } } } - &--narrow{ - // - } } } &--uw-inverted-l-right { @@ -572,6 +660,9 @@ } } } + &--narrow{ + // + } } } &--uw-inverted-l-left { @@ -649,7 +740,58 @@ } } &--narrow{ - // + .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; + } + } + } + &--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 { + display: none; + } + } + } + &--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; + } + } + } + } } } } @@ -675,9 +817,16 @@ .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 { +.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrow + .uw-column-separator--narrow { .layout__region { padding-top: var(--size-2); } } - +.uw-section-spacing--none.uw-section-separator--bottom + .uw-column-separator--narrow{ + .layout__region { + padding-top: var(--size-2); + @media(min-width: $screen-lg) { + padding-top: 0; + } + } +} 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 ac3112521dfb7dd29ef40a4f5ceb1890967f6e12..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,4 +1,3 @@ .layout--uw-1-col { display: block; } -