From 7bece26c833c3ebcc574d214ceb69713eec00c85 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 2 Mar 2023 11:41:34 -0500
Subject: [PATCH] ISTWCMS-5898: Add the bottom seperator with
border,padding,margin
---
.../03-layouts/layout/_layout-base.scss | 8 +-
src/patterns/03-layouts/layout/_layout.scss | 155 +++++-------------
2 files changed, 44 insertions(+), 119 deletions(-)
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index abaa8a12..87d2ab2c 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -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 {
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index 33cb7860..d9d4e8b8 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -1,49 +1,41 @@
@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;
- }
- }
-}
--
GitLab