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

ISTWCMS-5898: Update to grid seperators to use transform x,y for positioning

parent 484fb012
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
+ 3
− 3
View file @ d674c709
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
:root{ :root{
--layout-border-color: transparent; --layout-border-color: transparent;
--layout-border-style: solid; --layout-border-style: solid;
--layout-border-width: var(--size-sm); --layout-border-width: var(--size-xs);
--layout-border-radius: 0; --layout-border-radius: 0;
--layout-border-shadow: var(--shadow-1); --layout-border-shadow: var(--shadow-1);
--layout-show-seperator-color: var(--blue-6); --layout-show-seperator-color: var(--gray-3);
--layout-show-bottom-color: var(--red-6); --layout-show-bottom-color: var(--gray-3);
} }
.layout__region { .layout__region {
......
src/patterns/03-layouts/layout/_layout.scss
+ 30
− 38
View file @ d674c709
...@@ -293,7 +293,7 @@ ...@@ -293,7 +293,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) {
...@@ -304,9 +304,9 @@ ...@@ -304,9 +304,9 @@
width: var(--layout-border-width); width: var(--layout-border-width);
height: 100%; height: 100%;
bottom: 0; bottom: 0;
transform: inherit;
left: inherit; left: inherit;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
} }
} }
} }
...@@ -324,6 +324,7 @@ ...@@ -324,6 +324,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));
} }
@media(min-width: $screen-md) { @media(min-width: $screen-md) {
&::before { &::before {
...@@ -349,6 +350,7 @@ ...@@ -349,6 +350,7 @@
height: var(--layout-border-width); height: var(--layout-border-width);
bottom: 0; bottom: 0;
left: 0; left: 0;
transform: translate(0, var(--size-2));
} }
@media(min-width: $screen-md) { @media(min-width: $screen-md) {
&::before { &::before {
...@@ -359,7 +361,8 @@ ...@@ -359,7 +361,8 @@
height: 100%; height: 100%;
bottom: 0; bottom: 0;
left: inherit; left: inherit;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
} }
} }
} }
...@@ -371,6 +374,7 @@ ...@@ -371,6 +374,7 @@
height: var(--layout-border-width); height: var(--layout-border-width);
left: 0; left: 0;
position: absolute; position: absolute;
transform: translate(0, var(--size-2));
width: 100%; width: 100%;
} }
@media(min-width: $screen-md) { @media(min-width: $screen-md) {
...@@ -381,14 +385,12 @@ ...@@ -381,14 +385,12 @@
height: 100%; height: 100%;
left: inherit; left: inherit;
position: absolute; position: absolute;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
width: var(--layout-border-width); width: var(--layout-border-width);
} }
} }
} }
&--third {
//
}
} }
} }
&--narrow { &--narrow {
...@@ -447,7 +449,7 @@ ...@@ -447,7 +449,7 @@
height: var(--layout-border-width); height: var(--layout-border-width);
left: 0; left: 0;
right: inherit; right: inherit;
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--size-2));
} }
&::before { &::before {
@media(min-width: $screen-sm) { @media(min-width: $screen-sm) {
...@@ -457,7 +459,8 @@ ...@@ -457,7 +459,8 @@
height: 100%; height: 100%;
left: inherit; left: inherit;
position: absolute; position: absolute;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
width: var(--size-xs); width: var(--size-xs);
} }
} }
...@@ -486,8 +489,8 @@ ...@@ -486,8 +489,8 @@
height: 100%; height: 100%;
left: inherit; left: inherit;
position: absolute; position: absolute;
right: -1rem; right: 0;
transform: translate(0, 0); transform: translate(var(--size-2), 0);
width: var(--size-xs); width: var(--size-xs);
} }
} }
...@@ -501,6 +504,7 @@ ...@@ -501,6 +504,7 @@
width: 100%; width: 100%;
height: var(--layout-border-width); height: var(--layout-border-width);
left: 0; left: 0;
transform: translate(0, var(--size-2));
} }
@media(min-width: $screen-sm) { @media(min-width: $screen-sm) {
&::before { &::before {
...@@ -510,7 +514,8 @@ ...@@ -510,7 +514,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);
} }
} }
...@@ -523,9 +528,6 @@ ...@@ -523,9 +528,6 @@
&--first { &--first {
&::after { &::after {
bottom: 0; bottom: 0;
@media(min-width: $screen-sm) {
transform: translate(0, var(--section-line-translate));
}
content: ''; content: '';
position: absolute; position: absolute;
background-color: var(--layout-show-seperator-color); background-color: var(--layout-show-seperator-color);
...@@ -533,6 +535,7 @@ ...@@ -533,6 +535,7 @@
height: var(--layout-border-width); height: var(--layout-border-width);
left: 0; left: 0;
right: inherit; right: inherit;
transform: translate(0, var(--size-2));
} }
&::before { &::before {
background-color: var(--layout-show-seperator-color); background-color: var(--layout-show-seperator-color);
...@@ -541,7 +544,8 @@ ...@@ -541,7 +544,8 @@
height: 100%; height: 100%;
left: inherit; left: inherit;
position: absolute; position: absolute;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
width: var(--size-xs); width: var(--size-xs);
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
...@@ -659,9 +663,9 @@ ...@@ -659,9 +663,9 @@
width: var(--size-xs); width: var(--size-xs);
height: 100%; height: 100%;
bottom: 0; bottom: 0;
transform: translate(0, 0);
left: inherit; left: inherit;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
} }
} }
} }
...@@ -676,7 +680,7 @@ ...@@ -676,7 +680,7 @@
transform: translate(0, var(--section-line-translate)); transform: translate(0, var(--section-line-translate));
left: 0; left: 0;
} }
@media(min-width: $screen-sm) { @media(min-width: $screen-lg) {
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
...@@ -684,9 +688,9 @@ ...@@ -684,9 +688,9 @@
width: var(--size-xs); width: var(--size-xs);
height: 100%; height: 100%;
bottom: 0; bottom: 0;
transform: translate(0, 0);
left: inherit; left: inherit;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
} }
} }
} }
...@@ -726,9 +730,9 @@ ...@@ -726,9 +730,9 @@
width: var(--size-xs); width: var(--size-xs);
height: 100%; height: 100%;
bottom: 0; bottom: 0;
transform: translate(0, 0);
left: inherit; left: inherit;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
} }
} }
} }
...@@ -752,9 +756,9 @@ ...@@ -752,9 +756,9 @@
width: var(--size-xs); width: var(--size-xs);
height: 100%; height: 100%;
bottom: 0; bottom: 0;
transform: translate(0, 0);
left: inherit; left: inherit;
right: -1rem; right: 0;
transform: translate(var(--size-2), 0);
} }
} }
} }
...@@ -861,18 +865,6 @@ ...@@ -861,18 +865,6 @@
.layout__region { .layout__region {
padding-bottom: var(--size-2); padding-bottom: var(--size-2);
padding-top: 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);
// }
//}
} }
} }
......
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