From 57ae3050c4278805745857e271f581ee0bd294b9 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 22 Dec 2022 10:38:49 -0500
Subject: [PATCH] ISTWCMS-5898: css for card header section spacing and default
spacing without new classes
---
src/patterns/03-layouts/layout/_layout.scss | 10 +++++++++-
.../card/card--node/_card--node.scss | 19 +++++++++----------
2 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index 404a9874..de63e0f4 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -654,11 +654,19 @@
}
}
}
+// Set default spacing to match old block margin if no classes
+.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{
+ margin-bottom: 0;
+ }
+ }
+}
.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;
}
diff --git a/src/patterns/04-components/card/card--node/_card--node.scss b/src/patterns/04-components/card/card--node/_card--node.scss
index a670ef71..66bea642 100644
--- a/src/patterns/04-components/card/card--node/_card--node.scss
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -10,11 +10,17 @@
> .card__header,
> .card__footer {
margin: 0 auto;
- max-width: var(--layout-max-width);
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ @include uw-contained-width(var(--layout-max-width));
+ }
}
.uw-node__with-media &{
> .card__header {
padding: 0;
+ &.uw-node__with-media{
+ padding: var(--size-2) 0;
+ }
}
}
.uw-node__without-media & {
@@ -58,13 +64,9 @@
.uw-node__with-media & {
.card__header {
&.uw-node__with-media{
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
- }
+ padding: var(--size-2) 0;
}
}
-
.card__featured-image{
align-items: center;
background-position: center center;
@@ -246,10 +248,7 @@
padding: var(--size-2) 0;
}
&.uw-node__with-media{
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
- }
+ padding: var(--size-2) 0;
}
}
.card__footer,
--
GitLab