Skip to content
Snippets Groups Projects
Commit b332b5e3 authored by m26lebla's avatar m26lebla
Browse files

css to make the sidebar content fix width and node content have min-preferred-max widths

parent 95df0c71
No related branches found
No related tags found
1 merge request!17Feature/istwcms 4598 content shrinks w sidebar
Hide whitespace changes
Inline Side-by-side
css/styles.css
+ 33
− 79
View file @ b332b5e3
......@@ -1901,8 +1901,7 @@ svg:not(:root) {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
background: #ffc09f; }
padding: 0 16px; }
@media (min-width: 75rem) {
.layout {
padding-left: 0;
......@@ -1912,7 +1911,6 @@ svg:not(:root) {
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
background: #ffd4ea;
padding: 1rem; }
@media (min-width: 75rem) {
.layout.uw-contained-width {
......@@ -1923,11 +1921,9 @@ svg:not(:root) {
padding: 1rem 0; } }
.layout.uw-contained-width--narrow {
/* Match the width of WCMS2's narrow: 496px */
background: #ffeda5;
max-width: 31rem; }
.layout.uw-contained-width--wide {
/* Match the width of WCMS2's wide: 753px */
background: #ffc0cb;
max-width: 47.0625rem; }
.layout.uw-full-width {
max-width: 100%;
......@@ -1993,100 +1989,58 @@ svg:not(:root) {
order: 1; }
.uw-node__grid {
background: #fff1cc;
display: block; }
.uw-node__sidebar {
display: none; }
.uw-node.uw-node__with-sidebar .uw-node__grid {
background: #ffe174;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
max-width: 75rem; }
justify-content: center; }
.uw-node.uw-node__with-sidebar .uw-node__grid .layout {
max-width: calc(75rem - 20.75rem); }
margin: 0 auto;
width: 100%; }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width {
margin: 0 auto; }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-full-width {
width: 100vw; }
@media (min-width: 48.06rem) {
.uw-node.uw-node__with-sidebar .uw-node__grid {
flex-direction: row; } }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width {
max-width: calc(75rem - 20.75rem); }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--narrow {
max-width: 100%; }
@media (min-width: 48.06rem) {
flex-direction: row;
gap: 1rem; }
.uw-node.uw-node__with-sidebar .uw-node__grid .layout {
width: clamp(320px, 875px, calc(100vw - 333px)); }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width {
width: clamp(320px, 875px, calc(100vw - 333px)); }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--narrow {
margin: 0 auto;
max-width: calc(75rem - 20.75rem); } }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--wide {
margin: 0 auto;
max-width: 100%; }
@media (min-width: 48.06rem) {
width: clamp(320px, 496px, calc(100vw - 333px)); }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--wide {
max-width: 47.0625rem; } }
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-full-width {
margin: inherit;
max-width: 100vw;
padding: 0; }
@media (min-width: 48.06rem) {
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-full-width {
max-width: calc(100vw - 18.75rem); } }
.uw-node.uw-node__with-sidebar .node__content {
background: #ffa500; }
.uw-node.uw-node__with-sidebar .uw-node__node {
flex: 1 0 auto; }
.uw-node.uw-node__with-sidebar .uw-node__node .uw-contained-width {
background: #ffd4ea;
width: 100%; }
.uw-node.uw-node__with-sidebar .uw-node__node .uw-contained-width--narrow {
/* Match the width of WCMS2's narrow: 496px */
background: #3cdcff;
width: 100%; }
@media (min-width: 48.06rem) {
.uw-node.uw-node__with-sidebar .uw-node__node .uw-contained-width--narrow {
max-width: 31rem; } }
.uw-node.uw-node__with-sidebar .uw-node__node .uw-contained-width--wide {
/* Match the width of WCMS2's wide: 753px */
background: #ff96a4;
max-width: 47.0625rem; }
width: clamp(320px, 753px, calc(100vw - 333px)); } }
.uw-node.uw-node__with-sidebar .uw-node__sidebar {
background: #26ff00;
display: block;
padding: 1rem 0;
width: 100%; }
@media (min-width: 48.06rem) {
.uw-node.uw-node__with-sidebar .uw-node__sidebar {
margin-left: 2rem;
max-width: 18.75rem; } }
@media (min-width: 102.5rem) {
.uw-node.uw-node__with-sidebar .uw-node__sidebar {
padding: 1rem 0.25rem 1rem 0; } }
.uw-node.uw-node__with-sidebar .uw-node__sidebar .layout {
max-width: inherit; }
padding: 1rem 0;
width: 18.75rem; }
.uw-node.uw-node__with-sidebar .uw-node__sidebar .layout {
width: inherit; } }
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid {
background: #a1c5ff;
margin: inherit;
max-width: inherit; }
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid .uw-full-width {
max-width: 100vw;
padding: 0;
width: 100%; }
@media (min-width: 48.06rem) {
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid .uw-full-width {
width: calc(100vw - 18.75rem); } }
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid .uw-full-width > .uw-contained-width {
background: #ff414e; }
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid .uw-node__node {
flex: inherit; }
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid .uw-node__node {
width: 100%; }
@media (min-width: 48.06rem) {
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid .uw-node__sidebar {
margin-left: 0;
padding-left: 1rem; } }
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid .uw-node__node {
width: calc(100vw - 325px); } }
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__grid .uw-full-width {
max-width: inherit;
padding: 0;
width: 100%; }
.uw-section-has-full-width.uw-node__with-sidebar .uw-node__sidebar {
padding: 0; }
.l-section {
margin-bottom: 2.5rem; }
......@@ -5286,7 +5240,7 @@ fieldset,
color: #000; }
.social-media-list {
align-items: start;
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
......
source/_patterns/03-layouts/content/content.twig
+ 0
− 1
View file @ b332b5e3
<main id="main" class="uw-main" role="main" tabindex="-1">
{% block content %}
{% endblock %}
{% include '@global/06-break-hints/break-hints.twig' %}
</main>
source/_patterns/03-layouts/layout/_layout.scss
+ 0
− 4
View file @ b332b5e3
.layout {
@include uw-contained-width;
background: #ffc09f;
&.uw-contained-width{
@include uw-contained-width;
background: #ffd4ea;
padding: rem(gesso-spacing(sm));
@include xxl {
......@@ -11,12 +9,10 @@
}
&--narrow {
/* Match the width of WCMS2's narrow: 496px */
background: #ffeda5;
max-width: 31rem;
}
&--wide {
/* Match the width of WCMS2's wide: 753px */
background: #ffc0cb;
max-width: 47.0625rem;
}
}
......
source/_patterns/03-layouts/node/_node.scss
+ 39
− 86
View file @ b332b5e3
$sidebar-width: 18.75rem;
.uw-node {
&__grid {
background: #fff1cc;
display: block;
}
&__sidebar{
......@@ -11,118 +9,73 @@ $sidebar-width: 18.75rem;
// Reset the grid to become flexed when we have sidebar.
&.uw-node__with-sidebar{
.uw-node__grid{
background: #ffe174;
display: flex;
flex-direction: column;
justify-content: center;
margin:0 auto;
max-width:75rem;
.layout{
max-width:calc(75rem - 20.75rem);
}
@include medium {
flex-direction: row;
margin:0 auto;
width:100%;
}
.uw-contained-width{
max-width:calc(75rem - 20.75rem);
}
.uw-contained-width--narrow{
max-width:100%;
@include medium {
margin:0 auto;
max-width:calc(75rem - 20.75rem);
}
}
.uw-contained-width--wide{
margin:0 auto;
max-width:100%;
@include medium {
max-width: 47.0625rem;
}
}
.uw-full-width{
margin:inherit;
max-width:100vw;
@include medium{
max-width:calc(100vw - 18.75rem);
}
padding:0;
width:100vw;
}
}
.node__content{
background: #ffa500;
}
.uw-node__node{
flex:1 0 auto;
.uw-contained-width{
background: #ffd4ea;
width:100%;
&--narrow {
/* Match the width of WCMS2's narrow: 496px */
background: #3cdcff;
width:100%;
@include medium {
max-width: 31rem;
}
@include medium {
flex-direction: row;
gap:1rem;
.layout{
width: clamp(320px, 875px, calc(100vw - 333px));
}
.uw-contained-width{
width: clamp(320px, 875px, calc(100vw - 333px));
}
/* Match the width of WCMS2's narrow: 496px */
.uw-contained-width--narrow{
width: clamp(320px, 496px, calc(100vw - 333px));
}
&--wide {
/* Match the width of WCMS2's wide: 753px */
background: #ff96a4;
max-width: 47.0625rem;
/* Match the width of WCMS2's wide: 753px */
.uw-contained-width--wide{
width: clamp(320px, 753px, calc(100vw - 333px));
}
}
}
.uw-node__sidebar{
background: #26ff00;
// Turn on sidebar with display.
display:block;
padding: rem(gesso-spacing(sm)) 0;
width:100%;
@include medium{
margin-left:2rem;
max-width:$sidebar-width;
}
@include xxl {
padding: 1rem 0.25rem 1rem 0;
}
.layout{
max-width:inherit;
@include medium {
padding: 1rem 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: #a1c5ff;
margin:inherit;
max-width:inherit;
.uw-full-width{
max-width:100vw;
@include medium{
width:calc(100vw - 18.75rem);
}
padding:0;
width:100%;
> .uw-contained-width{
background: #ff414e;
}
}
.uw-node__node{
flex: inherit;
}
.uw-node__sidebar {
width:100%;
@include medium {
margin-left: 0;
padding-left:1rem;
width: calc(100vw - 325px);
}
}
.uw-full-width{
max-width:inherit;
padding:0;
width:100%;
}
}
.uw-node__sidebar{
padding: 0
}
}
source/_patterns/04-components/menu/menu--social/_menu--social.scss
+ 1
− 1
View file @ b332b5e3
.social-media-list {
align-items: start;
align-items:flex-start;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
......
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