diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss index 9ff438b4634ed329d71834e0757cc172140ad326..d68f89a8828519bbe541d02f3de52da6ac8d3c26 100644 --- a/src/patterns/03-layouts/layout/_layout.scss +++ b/src/patterns/03-layouts/layout/_layout.scss @@ -643,6 +643,25 @@ } } } + &--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 { @@ -708,6 +727,16 @@ 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 { @@ -727,6 +756,20 @@ } } } + &--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 {