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

ISTWCMS-5898: css for inverted l's

parent 57ae3050
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.scss
+ 175
− 26
View file @ 1f8c3871
......@@ -57,14 +57,16 @@
&--bottom {
--layout-border-width: var(--size-xs);
position: relative;
&::before {
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
height: var(--layout-border-width);
left: 0;
width: 100%;
&:not(.is-layout-builder-highlighted){
&::before {
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
height: var(--layout-border-width);
left: 0;
width: 100%;
}
}
&.uw-column-separator--none{
&::before {
......@@ -81,7 +83,7 @@
--layout-border-width: var(--size-xs);
position: relative;
&::before {
bottom: -1rem;
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
......@@ -95,6 +97,9 @@
&.uw-column-separator--narrow {
&::before {
bottom: 0 !important;
@media(min-width: $screen-md) {
display: none;
}
}
}
&:last-of-type{
......@@ -400,12 +405,11 @@
&--uw-4-col {
&.uw-column-separator{
&--between {
.layout__region {
position: relative;
&--first {
&::after {
bottom: 0;
bottom: -0.5rem;
@media(min-width: $screen-sm){
bottom: -1rem;
}
......@@ -418,14 +422,16 @@
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-sm){
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 {
......@@ -436,7 +442,7 @@
&--second{
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
bottom: -0.5rem;
@media(min-width: $screen-sm){
bottom: -1rem;
}
......@@ -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 {
&::before {
bottom: 0;
......@@ -484,12 +569,15 @@
width: var(--size-xs);
}
}
@media(min-width: $screen-lg) {
&::after,
&::before{
display: none;
}
}
}
}
}
&--narrow{
//
}
}
}
&--uw-inverted-l-right {
......@@ -572,6 +660,9 @@
}
}
}
&--narrow{
//
}
}
}
&--uw-inverted-l-left {
......@@ -649,7 +740,58 @@
}
}
&--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 @@
.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--narrrow + .uw-column-separator--between {
.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrow + .uw-column-separator--narrow {
.layout__region {
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 @ 1f8c3871
.layout--uw-1-col {
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