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

ISTWCMS-5898: css for inverted l's

parent 6b268a2a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/patterns/03-layouts/layout/_layout.scss
+ 175
− 26
View file @ 29899c0a
...@@ -57,14 +57,16 @@ ...@@ -57,14 +57,16 @@
&--bottom { &--bottom {
--layout-border-width: var(--size-xs); --layout-border-width: var(--size-xs);
position: relative; position: relative;
&::before { &:not(.is-layout-builder-highlighted){
bottom: 0; &::before {
content: ''; bottom: 0;
position: absolute; content: '';
background-color: var(--layout-show-border-color); position: absolute;
height: var(--layout-border-width); background-color: var(--layout-show-border-color);
left: 0; height: var(--layout-border-width);
width: 100%; left: 0;
width: 100%;
}
} }
&.uw-column-separator--none{ &.uw-column-separator--none{
&::before { &::before {
...@@ -81,7 +83,7 @@ ...@@ -81,7 +83,7 @@
--layout-border-width: var(--size-xs); --layout-border-width: var(--size-xs);
position: relative; position: relative;
&::before { &::before {
bottom: -1rem; bottom: 0;
content: ''; content: '';
position: absolute; position: absolute;
background-color: var(--layout-show-border-color); background-color: var(--layout-show-border-color);
...@@ -95,6 +97,9 @@ ...@@ -95,6 +97,9 @@
&.uw-column-separator--narrow { &.uw-column-separator--narrow {
&::before { &::before {
bottom: 0 !important; bottom: 0 !important;
@media(min-width: $screen-md) {
display: none;
}
} }
} }
&:last-of-type{ &:last-of-type{
...@@ -400,12 +405,11 @@ ...@@ -400,12 +405,11 @@
&--uw-4-col { &--uw-4-col {
&.uw-column-separator{ &.uw-column-separator{
&--between { &--between {
.layout__region { .layout__region {
position: relative; position: relative;
&--first { &--first {
&::after { &::after {
bottom: 0; bottom: -0.5rem;
@media(min-width: $screen-sm){ @media(min-width: $screen-sm){
bottom: -1rem; bottom: -1rem;
} }
...@@ -418,14 +422,16 @@ ...@@ -418,14 +422,16 @@
right: inherit; right: inherit;
} }
&::before { &::before {
background-color: var(--layout-show-border-color); @media(min-width: $screen-sm){
bottom: 0; background-color: var(--layout-show-border-color);
content: ''; bottom: 0;
height: 100%; content: '';
left: inherit; height: 100%;
position: absolute; left: inherit;
right: -1rem; position: absolute;
width: var(--size-xs); right: -1rem;
width: var(--size-xs);
}
} }
@media(min-width: $screen-lg) { @media(min-width: $screen-lg) {
&::after { &::after {
...@@ -436,7 +442,7 @@ ...@@ -436,7 +442,7 @@
&--second{ &--second{
&::before { &::before {
background-color: var(--layout-show-border-color); background-color: var(--layout-show-border-color);
bottom: 0; bottom: -0.5rem;
@media(min-width: $screen-sm){ @media(min-width: $screen-sm){
bottom: -1rem; bottom: -1rem;
} }
...@@ -459,6 +465,85 @@ ...@@ -459,6 +465,85 @@
} }
} }
} }
&--third {
&::before {
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
left: 0;
}
@media(min-width: $screen-sm) {
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
content: '';
position: absolute;
height: 100%;
left: inherit;
right: -1rem;
width: var(--size-xs);
}
}
}
}
}
&--narrow{
.layout__region {
position: relative;
&--first {
&::after {
bottom: 0;
@media(min-width: $screen-sm){
bottom: -1rem;
}
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
left: 0;
right: inherit;
}
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
content: '';
height: 100%;
left: inherit;
position: absolute;
right: -1rem;
width: var(--size-xs);
}
@media(min-width: $screen-lg) {
&::after,
&::before{
display: none;
}
}
}
&--second{
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
@media(min-width: $screen-sm){
bottom: -1rem;
}
content: '';
height: var(--layout-border-width);
left: 0;
position: absolute;
width: 100%;
}
@media(min-width: $screen-lg) {
&::after,
&::before{
display: none;
}
}
}
&--third { &--third {
&::before { &::before {
bottom: 0; bottom: 0;
...@@ -484,12 +569,15 @@ ...@@ -484,12 +569,15 @@
width: var(--size-xs); width: var(--size-xs);
} }
} }
@media(min-width: $screen-lg) {
&::after,
&::before{
display: none;
}
}
} }
} }
} }
&--narrow{
//
}
} }
} }
&--uw-inverted-l-right { &--uw-inverted-l-right {
...@@ -572,6 +660,9 @@ ...@@ -572,6 +660,9 @@
} }
} }
} }
&--narrow{
//
}
} }
} }
&--uw-inverted-l-left { &--uw-inverted-l-left {
...@@ -649,7 +740,58 @@ ...@@ -649,7 +740,58 @@
} }
} }
&--narrow{ &--narrow{
// .layout__region {
position: relative;
&--first {
&::after {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
right: inherit;
}
@media(min-width: $screen-lg) {
&::after {
display: none;
}
}
}
&--second{
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
}
@media(min-width: $screen-lg) {
&::before {
display: none;
}
}
}
&--third {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
}
@media(min-width: $screen-lg) {
&::before {
display: none;
}
}
}
}
} }
} }
} }
...@@ -675,9 +817,16 @@ ...@@ -675,9 +817,16 @@
.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--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--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--between + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrrow + .uw-column-separator--between { .uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrow + .uw-column-separator--narrow {
.layout__region { .layout__region {
padding-top: 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;
}
}
}
src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
+ 0
− 1
View file @ 29899c0a
.layout--uw-1-col { .layout--uw-1-col {
display: block; display: block;
} }
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