diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss index 64a2a2da3332c98bdf37394ad0ccf83cbfc037f3..abaa8a1239004141f307b08958287cd3564b940b 100644 --- a/src/patterns/03-layouts/layout/_layout-base.scss +++ b/src/patterns/03-layouts/layout/_layout-base.scss @@ -9,11 +9,11 @@ :root{ --layout-border-color: transparent; --layout-border-style: solid; - --layout-border-width: var(--size-sm); + --layout-border-width: var(--size-xs); --layout-border-radius: 0; --layout-border-shadow: var(--shadow-1); - --layout-show-seperator-color: var(--blue-6); - --layout-show-bottom-color: var(--red-6); + --layout-show-seperator-color: var(--gray-3); + --layout-show-bottom-color: var(--gray-3); } .layout__region { diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss index a8569541664a869296ff925ee4afc980dabb6b6c..33cb7860571e4a99a9dc9fc4f3b8e8402e857f3b 100644 --- a/src/patterns/03-layouts/layout/_layout.scss +++ b/src/patterns/03-layouts/layout/_layout.scss @@ -293,7 +293,7 @@ width: 100%; height: var(--layout-border-width); bottom: 0; - transform: translate(0, var(--section-line-translate)); + transform: translate(0, var(--size-2)); left: 0; } @media(min-width: $screen-md) { @@ -304,9 +304,9 @@ width: var(--layout-border-width); height: 100%; bottom: 0; - transform: inherit; left: inherit; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); } } } @@ -324,6 +324,7 @@ height: var(--layout-border-width); bottom: 0; left: 0; + transform: translate(0, var(--section-line-translate)); } @media(min-width: $screen-md) { &::before { @@ -349,6 +350,7 @@ height: var(--layout-border-width); bottom: 0; left: 0; + transform: translate(0, var(--size-2)); } @media(min-width: $screen-md) { &::before { @@ -359,7 +361,8 @@ height: 100%; bottom: 0; left: inherit; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); } } } @@ -371,6 +374,7 @@ height: var(--layout-border-width); left: 0; position: absolute; + transform: translate(0, var(--size-2)); width: 100%; } @media(min-width: $screen-md) { @@ -381,14 +385,12 @@ height: 100%; left: inherit; position: absolute; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); width: var(--layout-border-width); } } } - &--third { - // - } } } &--narrow { @@ -447,7 +449,7 @@ height: var(--layout-border-width); left: 0; right: inherit; - transform: translate(0, var(--section-line-translate)); + transform: translate(0, var(--size-2)); } &::before { @media(min-width: $screen-sm) { @@ -457,7 +459,8 @@ height: 100%; left: inherit; position: absolute; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); width: var(--size-xs); } } @@ -486,8 +489,8 @@ height: 100%; left: inherit; position: absolute; - right: -1rem; - transform: translate(0, 0); + right: 0; + transform: translate(var(--size-2), 0); width: var(--size-xs); } } @@ -501,6 +504,7 @@ width: 100%; height: var(--layout-border-width); left: 0; + transform: translate(0, var(--size-2)); } @media(min-width: $screen-sm) { &::before { @@ -510,7 +514,8 @@ position: absolute; height: 100%; left: inherit; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); width: var(--size-xs); } } @@ -523,9 +528,6 @@ &--first { &::after { bottom: 0; - @media(min-width: $screen-sm) { - transform: translate(0, var(--section-line-translate)); - } content: ''; position: absolute; background-color: var(--layout-show-seperator-color); @@ -533,6 +535,7 @@ height: var(--layout-border-width); left: 0; right: inherit; + transform: translate(0, var(--size-2)); } &::before { background-color: var(--layout-show-seperator-color); @@ -541,7 +544,8 @@ height: 100%; left: inherit; position: absolute; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); width: var(--size-xs); } @media(min-width: $screen-lg) { @@ -659,9 +663,9 @@ width: var(--size-xs); height: 100%; bottom: 0; - transform: translate(0, 0); left: inherit; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); } } } @@ -676,7 +680,7 @@ transform: translate(0, var(--section-line-translate)); left: 0; } - @media(min-width: $screen-sm) { + @media(min-width: $screen-lg) { &::before { content: ''; position: absolute; @@ -684,9 +688,9 @@ width: var(--size-xs); height: 100%; bottom: 0; - transform: translate(0, 0); left: inherit; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); } } } @@ -726,9 +730,9 @@ width: var(--size-xs); height: 100%; bottom: 0; - transform: translate(0, 0); left: inherit; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); } } } @@ -752,9 +756,9 @@ width: var(--size-xs); height: 100%; bottom: 0; - transform: translate(0, 0); left: inherit; - right: -1rem; + right: 0; + transform: translate(var(--size-2), 0); } } } @@ -861,18 +865,6 @@ .layout__region { padding-bottom: var(--size-2); padding-top: var(--size-2); - //&:nth-of-type(3), - //&:nth-of-type(4){ - // padding-bottom: 0; - // padding-top: 0; - //} - //@media(min-width: $screen-lg) { - // &:nth-of-type(3), - // &:nth-of-type(4){ - // padding-bottom: var(--size-2); - // padding-top: var(--size-2); - // } - //} } }