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

ISTWCMS-5898: Add some spacing updates

parent 1f8c3871
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
Showing
with 169 additions and 112 deletions
src/patterns/01-core/elements/_figure.scss
+ 0
− 3
View file @ 98a3dd82
// @file
// Figure element styles.
:where(figure) {
margin: 0 0 var(--size-2);
}
src/patterns/01-core/elements/_paragraph.scss
+ 8
− 0
View file @ 98a3dd82
......@@ -10,3 +10,11 @@
widows: 3;
}
}
.uw-copy-text{
:where(p) {
&:last-of-type{
margin-bottom: 0;
}
}
}
src/patterns/03-layouts/block/_block.scss
+ 0
− 3
View file @ 98a3dd82
......@@ -8,9 +8,6 @@
.in-layout-builder &{
outline: var(--size-xs) dashed var(--gray-4) !important;
}
&:last-of-type {
margin: 0;
}
.path-dashboard &,
&.block-page-title-block,
&.block-local-tasks-block {
......
src/patterns/03-layouts/layout/_layout-base.scss
+ 3
− 2
View file @ 98a3dd82
......@@ -9,10 +9,11 @@
:root{
--layout-border-color: transparent;
--layout-border-style: solid;
--layout-border-width: var(--size-xs);
--layout-border-width: var(--size-sm);
--layout-border-radius: 0;
--layout-border-shadow: var(--shadow-1);
--layout-show-border-color: var(--gray-3);
--layout-show-seperator-color: var(--blue-6);
--layout-show-bottom-color: var(--red-6);
}
.layout__region {
......
src/patterns/03-layouts/layout/_layout.scss
+ 152
− 98
View file @ 98a3dd82
......@@ -4,28 +4,47 @@
--base-section-margin: var(--grid-gap);
/* use that default as the default spacing */
--section-margin: var(--base-section-margin);
--section-line-translate: calc(var(--section-margin) * 0.5);
--layout-max-width-narrow: calc(100vw - 2rem);
}
.uw-section-spacing {
&--75 {
--section-margin: calc(var(--base-section-margin) * 0.75);
&.layout{
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout {
margin-bottom: var(--section-margin);
&.card__media {
margin-bottom: 0 !important;
}
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before {
transform: translate(0, var(--section-line-translate));
}
}
}
}
&--50 {
--section-margin: calc(var(--base-section-margin) * 0.5);
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout {
margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before {
transform: translate(0, var(--section-line-translate));
}
}
}
}
&--25 {
--section-margin: calc(var(--base-section-margin) * 0.25);
--section-line-translate: calc(var(--section-margin) * 0.5);
&.layout {
margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before {
transform: translate(0, var(--section-line-translate));
}
}
}
}
&--none {
......@@ -38,6 +57,11 @@
--section-margin: var(--base-section-margin);
&.layout{
margin-bottom: var(--section-margin);
&.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
&::before {
transform: translate(0, var(--section-line-translate));
}
}
}
}
&.layout {
......@@ -62,20 +86,21 @@
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-bottom-color);
height: var(--layout-border-width);
left: 0;
width: 100%;
}
}
&.uw-column-separator--none{
&.uw-column-separator--none {
&::before {
bottom: -1rem;
transform: translate(0, 0);
}
}
&:last-of-type {
&::before {
bottom: 0;
transform: translate(0, 0);
}
}
}
......@@ -86,9 +111,10 @@
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
height: var(--layout-border-width);
left: 0;
transform: translate(0, var(--section-line-translate));
width: 100%;
@media(min-width: $screen-md) {
display: none;
......@@ -102,7 +128,7 @@
}
}
}
&:last-of-type{
&:last-of-type {
&::before {
bottom: 0;
}
......@@ -151,17 +177,17 @@
}
}
.uw-section-has-full-width.uw-node__with-sidebar &{
.uw-section-has-full-width.uw-node__with-sidebar & {
padding: 0 var(--size-1) !important;
}
.dashboards-container &{
.dashboards-container & {
@include uw-full-width;
margin-bottom: var(--grid-gap);
overflow: visible; /* otherwise, dropdowns truncate at the border. */
}
.layout-builder &{
.layout-builder & {
padding: var(--size-2);
}
......@@ -173,7 +199,7 @@
.block-inline-blockuw-cbl-image,
.block-uw-cbl-image,
.block-inline-blockuw-cbl-remote-video,
.block-inline-blockuw-cbl-image-gallery{
.block-inline-blockuw-cbl-image-gallery {
@include uw-full-width-margin;
.layout-builder &{
......@@ -186,11 +212,11 @@
margin-left: var(--size-2);
}
.uw-section-has-full-width.uw-node__with-sidebar &{
.uw-section-has-full-width.uw-node__with-sidebar & {
@include uw-full-width-reset;
}
}
.block-inline-blockuw-cbl-google-maps{
.block-inline-blockuw-cbl-google-maps {
@include uw-contained-width;
@media(min-width: $screen-md) {
......@@ -203,7 +229,7 @@
margin-right: 0;
}
.uw-section-has-full-width.uw-node__with-sidebar &{
.uw-section-has-full-width.uw-node__with-sidebar & {
@include uw-full-width-reset;
}
......@@ -219,7 +245,7 @@
//overflow: hidden;
}
&.card__media{
&.card__media {
padding: 0;
}
}
......@@ -255,7 +281,7 @@
// Column separator css.
&--uw-2-col {
&.uw-column-separator{
&.uw-column-separator {
&--between {
.layout__region {
position: relative;
......@@ -263,20 +289,22 @@
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
}
@media(min-width: $screen-md) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: var(--layout-border-width);
height: 100%;
bottom: 0;
transform: inherit;
left: inherit;
right: -1rem;
}
......@@ -284,14 +312,14 @@
}
}
}
&--narrow{
&--narrow {
.layout__region {
position: relative;
&--first {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: 0;
......@@ -308,7 +336,7 @@
}
}
&--uw-3-col {
&.uw-column-separator{
&.uw-column-separator {
&--between {
.layout__region {
position: relative;
......@@ -316,7 +344,7 @@
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: 0;
......@@ -326,7 +354,7 @@
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: var(--layout-border-width);
height: 100%;
bottom: 0;
......@@ -335,9 +363,9 @@
}
}
}
&--second{
&--second {
&::before {
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
height: var(--layout-border-width);
......@@ -347,7 +375,7 @@
}
@media(min-width: $screen-md) {
&::before {
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
height: 100%;
......@@ -358,22 +386,23 @@
}
}
}
&--third{
&--third {
//
}
}
}
&--narrow{
&--narrow {
.layout__region {
position: relative;
&--first {
&::before {
background-color: var(--layout-show-border-color);
bottom: -1rem;
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
height: var(--layout-border-width);
left: 0;
position: absolute;
transform: translate(0, var(--section-line-translate));
width: 100%;
}
@media(min-width: $screen-md) {
......@@ -382,14 +411,15 @@
}
}
}
&--second{
&--second {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
}
@media(min-width: $screen-md) {
......@@ -403,27 +433,25 @@
}
}
&--uw-4-col {
&.uw-column-separator{
&.uw-column-separator {
&--between {
.layout__region {
position: relative;
&--first {
&::after {
bottom: -0.5rem;
@media(min-width: $screen-sm){
bottom: -1rem;
}
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
left: 0;
right: inherit;
transform: translate(0, var(--section-line-translate));
}
&::before {
@media(min-width: $screen-sm){
background-color: var(--layout-show-border-color);
@media(min-width: $screen-sm) {
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
height: 100%;
......@@ -439,28 +467,27 @@
}
}
}
&--second{
&--second {
&::before {
background-color: var(--layout-show-border-color);
bottom: -0.5rem;
@media(min-width: $screen-sm){
bottom: -1rem;
}
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
height: var(--layout-border-width);
left: 0;
position: absolute;
transform: translate(0, var(--section-line-translate));
width: 100%;
}
@media(min-width: $screen-lg) {
&::before {
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
height: 100%;
left: inherit;
position: absolute;
right: -1rem;
transform: translate(0, 0);
width: var(--size-xs);
}
}
......@@ -470,14 +497,14 @@
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
left: 0;
}
@media(min-width: $screen-sm) {
&::before {
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
position: absolute;
......@@ -490,25 +517,25 @@
}
}
}
&--narrow{
&--narrow {
.layout__region {
position: relative;
&--first {
&::after {
bottom: 0;
@media(min-width: $screen-sm){
bottom: -1rem;
@media(min-width: $screen-sm) {
transform: translate(0, var(--section-line-translate));
}
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
left: 0;
right: inherit;
}
&::before {
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
height: 100%;
......@@ -524,11 +551,11 @@
}
}
}
&--second{
&--second {
&::before {
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
bottom: 0;
@media(min-width: $screen-sm){
@media(min-width: $screen-sm) {
bottom: -1rem;
}
content: '';
......@@ -547,19 +574,19 @@
&--third {
&::before {
bottom: 0;
@media(min-width: $screen-sm){
bottom: -1rem;
@media(min-width: $screen-sm) {
transform: translate(0, var(--section-line-translate));
}
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
left: 0;
}
@media(min-width: $screen-sm) {
&::before {
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
bottom: 0;
content: '';
position: absolute;
......@@ -581,7 +608,7 @@
}
}
&--uw-inverted-l-right {
&.uw-column-separator{
&.uw-column-separator {
&--between {
.layout__region {
position: relative;
......@@ -589,17 +616,18 @@
&::after {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
right: inherit;
}
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
......@@ -612,24 +640,26 @@
}
}
}
&--second{
&--second {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
}
@media(min-width: $screen-lg) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
transform: translate(0, 0);
left: inherit;
right: -1rem;
}
......@@ -639,20 +669,22 @@
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
}
@media(min-width: $screen-sm) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
transform: translate(0, 0);
left: inherit;
right: -1rem;
}
......@@ -660,13 +692,13 @@
}
}
}
&--narrow{
&--narrow {
//
}
}
}
&--uw-inverted-l-left {
&.uw-column-separator{
&.uw-column-separator {
&--between {
.layout__region {
position: relative;
......@@ -674,10 +706,11 @@
&::after {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
right: inherit;
}
......@@ -689,33 +722,37 @@
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
transform: translate(0, 0);
left: inherit;
right: -1rem;
}
}
}
&--second{
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
}
@media(min-width: $screen-lg) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
transform: translate(0, 0);
left: inherit;
right: -1rem;
}
......@@ -725,10 +762,11 @@
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
}
@media(min-width: $screen-lg) {
......@@ -739,17 +777,18 @@
}
}
}
&--narrow{
&--narrow {
.layout__region {
position: relative;
&--first {
&::after {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
right: inherit;
}
......@@ -759,14 +798,15 @@
}
}
}
&--second{
&--second {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
}
@media(min-width: $screen-lg) {
......@@ -779,10 +819,11 @@
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
background-color: var(--layout-show-seperator-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
bottom: 0;
transform: translate(0, var(--section-line-translate));
left: 0;
}
@media(min-width: $screen-lg) {
......@@ -800,29 +841,42 @@
.layout.layout--uw-1-col {
&:not(.uw-section-spacing--default, .uw-section-spacing--none, .uw-section-spacing--75, .uw-section-spacing--50, .uw-section-spacing--25) {
margin-bottom: var(--section-margin);
&:last-of-type{
&:last-of-type {
margin-bottom: 0;
}
}
}
.uw-section-has-full-width .layout.layout--uw-1-col{
.uw-section-has-full-width .layout.layout--uw-1-col {
overflow: hidden;
}
.uw-full-width.uw-section-spacing--none.uw-section-separator--bottom:has(img){
padding-bottom: 0;
}
.uw-full-width.uw-section-spacing--none + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--bottom + .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--narrow.uw-column-separator--between + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrow + .uw-column-separator--narrow {
.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrow + .uw-column-separator--narrow,
.uw-section-spacing--none.uw-section-separator--bottom + .layout--uw-1-col {
.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);
// }
//}
}
}
.uw-section-spacing--none.uw-section-separator--bottom + .uw-column-separator--narrow{
.uw-section-spacing--none.uw-section-separator--bottom + .uw-column-separator--narrow {
.layout__region {
padding-top: var(--size-2);
@media(min-width: $screen-lg) {
......
src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
+ 6
− 6
View file @ 98a3dd82
......@@ -104,7 +104,7 @@
// &::after {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// background-color: var(--layout-show-seperator-color);
// width: 100%;
// height: var(--layout-border-width);
// bottom: -1rem;
......@@ -114,7 +114,7 @@
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// background-color: var(--layout-show-seperator-color);
// width: var(--size-xs);
// height: 100%;
// bottom: 0;
......@@ -131,7 +131,7 @@
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// background-color: var(--layout-show-seperator-color);
// width: 100%;
// height: var(--layout-border-width);
// bottom: -1rem;
......@@ -141,7 +141,7 @@
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// background-color: var(--layout-show-seperator-color);
// width: var(--size-xs);
// height: 100%;
// bottom: 0;
......@@ -154,7 +154,7 @@
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// background-color: var(--layout-show-seperator-color);
// width: 100%;
// height: var(--layout-border-width);
// bottom: -1rem;
......@@ -164,7 +164,7 @@
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// background-color: var(--layout-show-seperator-color);
// width: var(--size-xs);
// height: 100%;
// bottom: 0;
......
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