Skip to content
Snippets Groups Projects
Commit 7bece26c authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

ISTWCMS-5898: Add the bottom seperator with border,padding,margin

parent 591b4bd1
No related branches found
No related tags found
1 merge request!70ISTWCMS-5898: section-spacing-seperator and column-seperator css
Hide whitespace changes
Inline Side-by-side
src/patterns/03-layouts/layout/_layout-base.scss
+ 4
− 4
View file @ 7bece26c
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
@use '../../03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left' as *; @use '../../03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left' as *;
@use '../../03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right' as *; @use '../../03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right' as *;
:root{ :root{
--layout-border-color: transparent;
--layout-border-style: solid;
--layout-border-width: var(--size-xs);
--layout-border-radius: 0;
--layout-border-shadow: var(--shadow-1); --layout-border-shadow: var(--shadow-1);
--layout-show-seperator-color: var(--gray-3); --layout-show-seperator-color: var(--gray-3);
--layout-show-bottom-color: var(--gray-3); --layout-show-bottom-color: var(--gray-3);
--layout-border-color: var(--layout-show-bottom-color);
--layout-border-style: solid;
--layout-border-width: var(--size-xs);
--layout-border-radius: 0;
} }
.layout__region { .layout__region {
......
src/patterns/03-layouts/layout/_layout.scss
+ 40
− 115
View file @ 7bece26c
@use '../../01-core' as *; @use '../../01-core' as *;
:root { :root {
/* establish a default for calculations */ /* establish a default for calculations */
--base-section-margin: var(--grid-gap); --base-section-margin: calc(var(--grid-gap) * 0.5);
/* use that default as the default spacing */ /* use that default as the default spacing */
--section-margin: var(--base-section-margin); --section-margin: var(--base-section-margin);
--section-line-translate: calc(var(--section-margin) * 0.5);
--layout-max-width-narrow: calc(100vw - 2rem); --layout-max-width-narrow: calc(100vw - 2rem);
} }
.uw-section-spacing { .uw-section-spacing {
&--75 { &--75 {
--section-margin: calc(var(--base-section-margin) * 0.75); --section-margin: calc(var(--base-section-margin) * 0.75);
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout { &.layout {
margin-bottom: var(--section-margin);
&.card__media { &.card__media {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) { &.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before { margin-bottom: var(--section-margin);
transform: translate(0, var(--section-line-translate)); padding-bottom: var(--section-margin);
}
} }
} }
} }
&--50 { &--50 {
--section-margin: calc(var(--base-section-margin) * 0.5); --section-margin: calc(var(--base-section-margin) * 0.5);
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout { &.layout {
margin-bottom: var(--section-margin); margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) { &.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before { margin-bottom: var(--section-margin);
transform: translate(0, var(--section-line-translate)); padding-bottom: var(--section-margin);
}
} }
} }
} }
&--25 { &--25 {
--section-margin: calc(var(--base-section-margin) * 0.25); --section-margin: calc(var(--base-section-margin) * 0.25);
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout { &.layout {
margin-bottom: var(--section-margin); margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) { &.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before { margin-bottom: var(--section-margin);
transform: translate(0, var(--section-line-translate)); padding-bottom: var(--section-margin);
}
} }
} }
} }
...@@ -51,16 +43,15 @@ ...@@ -51,16 +43,15 @@
--section-margin: 0; --section-margin: 0;
&.layout { &.layout {
margin-bottom: var(--section-margin); margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
} }
} }
&--default { &--default {
--section-margin: var(--base-section-margin); --section-margin: var(--base-section-margin);
&.layout{ &.layout{
margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) { &.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before { margin-bottom: var(--section-margin);
transform: translate(0, var(--section-line-translate)); padding-bottom: var(--section-margin);
}
} }
} }
} }
...@@ -72,66 +63,27 @@ ...@@ -72,66 +63,27 @@
} }
// Section seperators. // Section seperators.
.uw-section-separator { .uw-section-separator {
&--none { &--none {
//--layout-border-width: 0; border-color: transparent;
//border-color: var(--layout-border-color);
//border-style: var(--layout-border-style);
//border-bottom-width: var(--layout-border-width);
} }
&--bottom { &--bottom {
--layout-border-width: var(--size-xs);
position: relative; position: relative;
&:not(.is-layout-builder-highlighted){ &:not(.is-layout-builder-highlighted){
&::before { border-color: var(--layout-border-color);
bottom: 0; border-style: var(--layout-border-style);
content: ''; border-bottom-width: var(--layout-border-width);
position: absolute;
background-color: var(--layout-show-bottom-color);
height: var(--layout-border-width);
left: 0;
width: 100%;
}
}
&.uw-column-separator--none {
&::before {
transform: translate(0, 0);
}
}
&:last-of-type {
&::before {
bottom: 0;
transform: translate(0, 0);
}
} }
} }
&--narrow { &--narrow {
--layout-border-width: var(--size-xs); margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
position: relative; position: relative;
&::before { border-color: var(--layout-border-color);
bottom: 0; border-style: var(--layout-border-style);
content: ''; border-bottom-width: var(--layout-border-width);
position: absolute; @media(min-width: $screen-md) {
background-color: var(--layout-show-seperator-color); border-color: transparent;
height: var(--layout-border-width);
left: 0;
transform: translate(0, var(--section-line-translate));
width: 100%;
@media(min-width: $screen-md) {
display: none;
}
}
&.uw-column-separator--narrow {
&::before {
bottom: 0 !important;
@media(min-width: $screen-md) {
display: none;
}
}
}
&:last-of-type {
&::before {
bottom: 0;
}
} }
} }
} }
...@@ -239,12 +191,6 @@ ...@@ -239,12 +191,6 @@
} }
} }
&.layout--uw-inverted-l-right,
&.layout--uw-inverted-l-left {
//@include uw-full-width-padding;
//overflow: hidden;
}
&.card__media { &.card__media {
padding: 0; padding: 0;
} }
...@@ -324,7 +270,7 @@ ...@@ -324,7 +270,7 @@
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
left: 0; left: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
} }
@media(min-width: $screen-md) { @media(min-width: $screen-md) {
&::before { &::before {
...@@ -404,7 +350,7 @@ ...@@ -404,7 +350,7 @@
height: var(--layout-border-width); height: var(--layout-border-width);
left: 0; left: 0;
position: absolute; position: absolute;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
width: 100%; width: 100%;
} }
@media(min-width: $screen-md) { @media(min-width: $screen-md) {
...@@ -421,7 +367,7 @@ ...@@ -421,7 +367,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
} }
@media(min-width: $screen-md) { @media(min-width: $screen-md) {
...@@ -478,7 +424,7 @@ ...@@ -478,7 +424,7 @@
height: var(--layout-border-width); height: var(--layout-border-width);
left: 0; left: 0;
position: absolute; position: absolute;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
width: 100%; width: 100%;
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
...@@ -579,7 +525,7 @@ ...@@ -579,7 +525,7 @@
&::before { &::before {
bottom: 0; bottom: 0;
@media(min-width: $screen-sm) { @media(min-width: $screen-sm) {
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
} }
content: ''; content: '';
position: absolute; position: absolute;
...@@ -596,7 +542,8 @@ ...@@ -596,7 +542,8 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
left: inherit; left: inherit;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
width: var(--size-xs); width: var(--size-xs);
} }
} }
...@@ -624,7 +571,7 @@ ...@@ -624,7 +571,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
right: inherit; right: inherit;
} }
...@@ -636,7 +583,8 @@ ...@@ -636,7 +583,8 @@
height: 100%; height: 100%;
bottom: 0; bottom: 0;
left: inherit; left: inherit;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
&::after { &::after {
...@@ -652,7 +600,7 @@ ...@@ -652,7 +600,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
...@@ -677,7 +625,7 @@ ...@@ -677,7 +625,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
...@@ -714,7 +662,7 @@ ...@@ -714,7 +662,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
right: inherit; right: inherit;
} }
...@@ -736,7 +684,6 @@ ...@@ -736,7 +684,6 @@
} }
} }
} }
&--second{ &--second{
&::before { &::before {
content: ''; content: '';
...@@ -745,7 +692,7 @@ ...@@ -745,7 +692,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
...@@ -770,7 +717,7 @@ ...@@ -770,7 +717,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
...@@ -792,7 +739,7 @@ ...@@ -792,7 +739,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
right: inherit; right: inherit;
} }
...@@ -810,7 +757,7 @@ ...@@ -810,7 +757,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
...@@ -827,7 +774,7 @@ ...@@ -827,7 +774,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
left: 0; left: 0;
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
...@@ -854,25 +801,3 @@ ...@@ -854,25 +801,3 @@
.uw-section-has-full-width .layout.layout--uw-1-col { .uw-section-has-full-width .layout.layout--uw-1-col {
overflow: hidden; overflow: hidden;
} }
.uw-full-width.uw-section-spacing--none + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--bottom + .uw-column-separator--between,
.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--narrow + .uw-column-separator--narrow,
.uw-section-spacing--none.uw-section-separator--bottom + .layout--uw-1-col {
.layout__region {
padding-bottom: var(--size-2);
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;
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment