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 @@
: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 {
......
src/patterns/03-layouts/layout/_layout.scss
+ 30
− 38
View file @ d674c709
......@@ -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);
// }
//}
}
}
......
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