From 80fe8b5df8d12752b1c6ca8ca9be28bfa3754868 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 23 Nov 2021 19:16:06 +0000
Subject: [PATCH] ISTWCMS-4970: additional css to align the sidebar correctly
when used next to full screen widths as well as when it is collapsed in
smaller views
---
.../00-config/01-mixins/_mixins.uw.scss | 12 ++++----
source/_patterns/03-layouts/node/_node.scss | 29 +++++++++++++------
2 files changed, 26 insertions(+), 15 deletions(-)
diff --git a/source/_patterns/00-config/01-mixins/_mixins.uw.scss b/source/_patterns/00-config/01-mixins/_mixins.uw.scss
index b7910011..5487271e 100644
--- a/source/_patterns/00-config/01-mixins/_mixins.uw.scss
+++ b/source/_patterns/00-config/01-mixins/_mixins.uw.scss
@@ -58,14 +58,14 @@ $test-color-12: #f00;
width: 100vw;
}
@mixin uw-full-width-reset {
- left: 0;
+ left: inherit;
margin-left: -1rem;
- margin-right: -1rem;
- max-width: 100%;
- padding: 0;
+ margin-right: -2rem;
+ max-width: inherit;
+ padding:inherit;
position: relative;
- right: 0;
- width: 100%;
+ right: inherit;
+ width: inherit;
}
@mixin uw-contained-width-reset() {
margin-left:inherit;
diff --git a/source/_patterns/03-layouts/node/_node.scss b/source/_patterns/03-layouts/node/_node.scss
index 3d4a0379..4528f4f1 100644
--- a/source/_patterns/03-layouts/node/_node.scss
+++ b/source/_patterns/03-layouts/node/_node.scss
@@ -6,9 +6,6 @@ $sidebar-gap: $grid-gap;
}
&__sidebar{
display:none;
- *{
- // padding-right:0.25rem;
- }
}
// Reset the grid to become flexed when we have sidebar.
&.uw-node__with-sidebar{
@@ -25,25 +22,30 @@ $sidebar-gap: $grid-gap;
margin:0 auto;
}
.uw-full-width{
-
width:100vw;
}
@include medium {
flex-direction: row;
gap:$sidebar-gap;
+
.layout{
+ padding-right:0;
width: clamp(320px, 868px, calc(100vw - 347px));
}
.uw-contained-width{
+ padding-right:0;
width: clamp(320px, 868px, calc(100vw - 347px));
}
/* Match the width of WCMS2's narrow: 496px */
.uw-contained-width--narrow{
+ padding-right:0;
width: clamp(320px, 496px, calc(100vw - 347px));
+
}
/* Match the width of WCMS2's wide: 753px */
.uw-contained-width--wide{
+ padding-right:0;
width: clamp(320px, 753px, calc(100vw - 347px));
}
}
@@ -51,36 +53,45 @@ $sidebar-gap: $grid-gap;
.uw-node__sidebar{
// Turn on sidebar with display.
display:block;
+ padding:0 1rem;
width:100%;
+
+ .layout{
+ padding:0;
+ }
@include medium {
- padding: 1rem 0;
+ padding:0;
width: $sidebar-width;
.layout{
width:inherit;
}
}
-
}
}
}
// Class appears when full width content loads with sidebar on page
.uw-section-has-full-width.uw-node__with-sidebar {
.uw-node__grid {
+ background:$test-color-3;
+ justify-content: space-between;
.uw-node__node{
+ background:$test-color-5;
width:100%;
@include medium {
+ background:$test-color-3;
+ padding-right:0;
width: calc(100vw - 347px);
}
- }
+ }
.uw-full-width{
+ background:$test-color-6;
max-width:inherit;
padding:0;
width:100%;
}
}
.uw-node__sidebar{
+ background:$test-color-8;
padding: 0
}
-
-
}
--
GitLab