From 98a3dd82c98df708211587af774054a5ae9b5263 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Fri, 17 Feb 2023 17:03:01 -0500
Subject: [PATCH] ISTWCMS-5898: Add some spacing updates
---
src/patterns/01-core/elements/_figure.scss | 3 -
src/patterns/01-core/elements/_paragraph.scss | 8 +
src/patterns/03-layouts/block/_block.scss | 3 -
.../03-layouts/layout/_layout-base.scss | 5 +-
src/patterns/03-layouts/layout/_layout.scss | 250 +++++++++++-------
.../layout/layout--5-col/_layout--5-col.scss | 12 +-
6 files changed, 169 insertions(+), 112 deletions(-)
diff --git a/src/patterns/01-core/elements/_figure.scss b/src/patterns/01-core/elements/_figure.scss
index fb5d193e..7a5184c2 100644
--- a/src/patterns/01-core/elements/_figure.scss
+++ b/src/patterns/01-core/elements/_figure.scss
@@ -1,6 +1,3 @@
// @file
// Figure element styles.
-:where(figure) {
- margin: 0 0 var(--size-2);
-}
diff --git a/src/patterns/01-core/elements/_paragraph.scss b/src/patterns/01-core/elements/_paragraph.scss
index 41502ec7..e61bf500 100644
--- a/src/patterns/01-core/elements/_paragraph.scss
+++ b/src/patterns/01-core/elements/_paragraph.scss
@@ -10,3 +10,11 @@
widows: 3;
}
}
+
+.uw-copy-text{
+ :where(p) {
+ &:last-of-type{
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/block/_block.scss b/src/patterns/03-layouts/block/_block.scss
index c61ae1d0..da90a1ae 100644
--- a/src/patterns/03-layouts/block/_block.scss
+++ b/src/patterns/03-layouts/block/_block.scss
@@ -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 {
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index a86ea378..64a2a2da 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -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 {
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index 99d9bc02..a8569541 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -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) {
diff --git a/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss b/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
index 3c592d33..1a21fed1 100644
--- a/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
+++ b/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
@@ -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;
--
GitLab