From c7acb3523e43ddd035b2cef4889c4a3c6617776e Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 4 Jan 2023 10:33:11 -0500
Subject: [PATCH] ISTWCMS-5898: continue rebase
---
.../site-container/_site-container.scss | 5 +++++
.../layout-builder/_layout-builder.scss | 3 +++
.../card/card--node/_card--node.scss | 18 ++++++++++++++++--
.../04-components/contact/_contact.scss | 6 +++++-
src/patterns/04-components/view/_view.scss | 12 ++++++++++--
5 files changed, 39 insertions(+), 5 deletions(-)
diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss
index 02597cb9..6ae50910 100644
--- a/src/patterns/03-layouts/site-container/_site-container.scss
+++ b/src/patterns/03-layouts/site-container/_site-container.scss
@@ -14,6 +14,11 @@
z-index: var(--layer-header);
}
.uw-highlighted {
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative;
diff --git a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index 2b2c6f6c..a66879b2 100644
--- a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -20,6 +20,9 @@
padding: var(--size-2);
}
}
+.uw-highlighted{
+ padding: 0;
+}
.node-form,
.admin-list,
.js-media-library-view,
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 8bddf676..a670ef71 100644
--- a/src/patterns/04-components/card/card--node/_card--node.scss
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -95,32 +95,46 @@
}
// CSS for specific node card presentations:
&--contact {
- @include uw-contained-width();
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
display: block;
@media(min-width: $screen-md) {
display: grid;
grid-template-columns: 100%;
}
.card__media{
- @include uw-full-width-margin;
grid-column: 1 / 3;
grid-row: 1 / 2;
margin-bottom: var(--size-2);
@media(min-width: $screen-md) {
margin-bottom: 0;
+ margin-left: 0;
+ margin-right: 0;
+ }
+ &.uw-full-width{
+ @include uw-full-width-margin;
}
&.uw-contained-width{
+ margin-left: 0;
+ margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
}
}
&.uw-contained-width--wide{
+ margin-left: 0;
+ margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
max-width: 47.0625rem;
}
}
&.uw-contained-width--narrow{
+ margin-left: 0;
+ margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
max-width: 31rem;
diff --git a/src/patterns/04-components/contact/_contact.scss b/src/patterns/04-components/contact/_contact.scss
index e29dfe2b..65abed42 100644
--- a/src/patterns/04-components/contact/_contact.scss
+++ b/src/patterns/04-components/contact/_contact.scss
@@ -103,6 +103,10 @@ $details-background-color: var(--gray-2) !default;
.node {
// &--type-uw-ct-profile
&--type-uw-ct-contact{
- @include uw-contained-width();
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
}
}
diff --git a/src/patterns/04-components/view/_view.scss b/src/patterns/04-components/view/_view.scss
index 9e2096fb..5a91a425 100644
--- a/src/patterns/04-components/view/_view.scss
+++ b/src/patterns/04-components/view/_view.scss
@@ -10,7 +10,11 @@ $sidebar-width: 18.75rem;
// to match flexbox in multi list usage.
.view {
&s-element-container{
- @include uw-contained-width;
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
padding: 0;
position: relative;
width: 100%;
@@ -34,7 +38,11 @@ $sidebar-width: 18.75rem;
padding-right: 0;
}
&-interact{
- @include uw-contained-width;
+ @include uw-contained-width(var(--layout-max-width-narrow));
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
display: flex;
gap: var(--size-1);
grid-row-gap: 0;
--
GitLab