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 @@
@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 *;
: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-show-seperator-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 {
......
src/patterns/03-layouts/layout/_layout.scss
+ 40
− 115
View file @ 7bece26c
@use '../../01-core' as *;
:root {
/* 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 */
--section-margin: var(--base-section-margin);
--section-line-translate: calc(var(--section-margin) * 0.5);
--layout-max-width-narrow: calc(100vw - 2rem);
}
.uw-section-spacing {
&--75 {
--section-margin: calc(var(--base-section-margin) * 0.75);
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout {
margin-bottom: var(--section-margin);
&.card__media {
margin-bottom: 0 !important;
}
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before {
transform: translate(0, var(--section-line-translate));
}
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
}
}
}
&--50 {
--section-margin: calc(var(--base-section-margin) * 0.5);
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout {
margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before {
transform: translate(0, var(--section-line-translate));
}
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
}
}
}
&--25 {
--section-margin: calc(var(--base-section-margin) * 0.25);
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout {
margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before {
transform: translate(0, var(--section-line-translate));
}
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
}
}
}
......@@ -51,16 +43,15 @@
--section-margin: 0;
&.layout {
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
}
}
&--default {
--section-margin: var(--base-section-margin);
&.layout{
margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before {
transform: translate(0, var(--section-line-translate));
}
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
}
}
}
......@@ -72,66 +63,27 @@
}
// Section seperators.
.uw-section-separator {
&--none {
//--layout-border-width: 0;
//border-color: var(--layout-border-color);
//border-style: var(--layout-border-style);
//border-bottom-width: var(--layout-border-width);
border-color: transparent;
}
&--bottom {
--layout-border-width: var(--size-xs);
position: relative;
&:not(.is-layout-builder-highlighted){
&::before {
bottom: 0;
content: '';
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);
}
border-color: var(--layout-border-color);
border-style: var(--layout-border-style);
border-bottom-width: var(--layout-border-width);
}
}
&--narrow {
--layout-border-width: var(--size-xs);
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
position: relative;
&::before {
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-seperator-color);
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;
}
border-color: var(--layout-border-color);
border-style: var(--layout-border-style);
border-bottom-width: var(--layout-border-width);
@media(min-width: $screen-md) {
border-color: transparent;
}
}
}
......@@ -239,12 +191,6 @@
}
}
&.layout--uw-inverted-l-right,
&.layout--uw-inverted-l-left {
//@include uw-full-width-padding;
//overflow: hidden;
}
&.card__media {
padding: 0;
}
......@@ -324,7 +270,7 @@
height: var(--layout-border-width);
bottom: 0;
left: 0;
transform: translate(0, var(--section-line-translate));
transform: translate(0, var(--size-2));
}
@media(min-width: $screen-md) {
&::before {
......@@ -404,7 +350,7 @@
height: var(--layout-border-width);
left: 0;
position: absolute;
transform: translate(0, var(--section-line-translate));
transform: translate(0, var(--size-2));
width: 100%;
}
@media(min-width: $screen-md) {
......@@ -421,7 +367,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) {
......@@ -478,7 +424,7 @@
height: var(--layout-border-width);
left: 0;
position: absolute;
transform: translate(0, var(--section-line-translate));
transform: translate(0, var(--size-2));
width: 100%;
}
@media(min-width: $screen-lg) {
......@@ -579,7 +525,7 @@
&::before {
bottom: 0;
@media(min-width: $screen-sm) {
transform: translate(0, var(--section-line-translate));
transform: translate(0, var(--size-2));
}
content: '';
position: absolute;
......@@ -596,7 +542,8 @@
position: absolute;
height: 100%;
left: inherit;
right: -1rem;
right: 0;
transform: translate(var(--size-2), 0);
width: var(--size-xs);
}
}
......@@ -624,7 +571,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;
right: inherit;
}
......@@ -636,7 +583,8 @@
height: 100%;
bottom: 0;
left: inherit;
right: -1rem;
right: 0;
transform: translate(var(--size-2), 0);
}
@media(min-width: $screen-lg) {
&::after {
......@@ -652,7 +600,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-lg) {
......@@ -677,7 +625,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-lg) {
......@@ -714,7 +662,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;
right: inherit;
}
......@@ -736,7 +684,6 @@
}
}
}
&--second{
&::before {
content: '';
......@@ -745,7 +692,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-lg) {
......@@ -770,7 +717,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-lg) {
......@@ -792,7 +739,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;
right: inherit;
}
......@@ -810,7 +757,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-lg) {
......@@ -827,7 +774,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-lg) {
......@@ -854,25 +801,3 @@
.uw-section-has-full-width .layout.layout--uw-1-col {
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