From d674c7098d83eabadc690236b443f09c9fb4b649 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 22 Feb 2023 11:30:03 -0500
Subject: [PATCH] ISTWCMS-5898: Update to grid seperators to use transform x,y
for positioning
---
.../03-layouts/layout/_layout-base.scss | 6 +-
src/patterns/03-layouts/layout/_layout.scss | 68 ++++++++-----------
2 files changed, 33 insertions(+), 41 deletions(-)
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index 64a2a2da..abaa8a12 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 a8569541..33cb7860 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);
- // }
- //}
}
}
--
GitLab