From f2f28afc0087859850c2c61c95dd5096c55f04ba Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Thu, 17 Sep 2020 15:59:54 -0400
Subject: [PATCH] additional css to make the label same size as wcms2 -
presentation layer changes to grid the outputfor the views for blog,news,
events landing pages
---
css/styles.css | 196 ++++--------------
.../02-html-elements/25-forms/_forms.scss | 7 +-
.../_patterns/04-components/view/_view.scss | 48 ++++-
3 files changed, 86 insertions(+), 165 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 840a61eb..443918a2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -989,12 +989,14 @@ fieldset {
input {
line-height: normal; }
-label {
+label,
+.label {
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- font-size: 16px;
+ font-size: 20.256px;
font-weight: 400;
- margin-bottom: 1rem; }
- label abbr {
+ margin-bottom: 0.5rem; }
+ label abbr,
+ .label abbr {
display: inline;
font-size: 18px; }
@@ -1718,163 +1720,6 @@ svg:not(:root) {
padding: 0;
width: 100%; }
-.layout--uwfivecol {
- display: grid; }
- .layout--uwfivecol.even-split {
- grid-template-columns: 20% 20% 20% 20% 20%; }
- .layout--uwfivecol.larger-left {
- grid-template-columns: 40% 15% 15% 15% 15%; }
- .layout--uwfivecol.larger-second {
- grid-template-columns: 15% 40% 15% 15% 15%; }
- .layout--uwfivecol.larger-third {
- grid-template-columns: 15% 15% 40% 15% 15%; }
- .layout--uwfivecol.larger-fourth {
- grid-template-columns: 15% 15% 15% 40% 15%; }
- .layout--uwfivecol.larger-right {
- grid-template-columns: 15% 15% 15% 15% 40%; }
- .layout--uwfivecol.legacy-23-19-19-19-20 {
- grid-template-columns: 23% 19% 19% 19% 20%; }
- .layout--uwfivecol .layout__region--first {
- grid-column: 1 / 2; }
- .layout--uwfivecol .layout__region--second {
- grid-column: 2 / 3; }
- .layout--uwfivecol .layout__region--third {
- grid-column: 3 / 4; }
- .layout--uwfivecol .layout__region--fourth {
- grid-column: 4 / 5; }
- .layout--uwfivecol .layout__region--fifth {
- grid-column: 5 / 6; }
-
-.layout--uwfourcol {
- display: grid; }
- .layout--uwfourcol .layout__region--first {
- grid-column: 1 / 2; }
- .layout--uwfourcol .layout__region--second {
- grid-column: 2 / 3; }
- .layout--uwfourcol .layout__region--third {
- grid-column: 3 / 4; }
- .layout--uwfourcol .layout__region--fourth {
- grid-column: 4 / 5; }
-
-.layout--uwfourcol.even-split {
- grid-template-columns: 25% 25% 25% 25%; }
-
-.layout--uwfourcol.larger-left {
- grid-template-columns: 50% 16.67% 16.67% 16.66%; }
-
-.layout--uwfourcol.larger-second {
- grid-template-columns: 16.67% 50% 16.67% 16.66%; }
-
-.layout--uwfourcol.larger-third {
- grid-template-columns: 16.67% 16.67% 50% 16.66%; }
-
-.layout--uwfourcol.larger-right {
- grid-template-columns: 16.67% 16.67% 16.66% 50%; }
-
-.layout--uwfourcol.legacy-23-27-27-23 {
- grid-template-columns: 23% 27% 27% 23%; }
-
-.layout--invertedlleft {
- display: grid; }
- .layout--invertedlleft.even-split {
- grid-template-columns: 50% 25% 25%; }
- .layout--invertedlleft.larger-left {
- grid-template-columns: 50% 33.5% 16.5%; }
- .layout--invertedlleft.larger-right {
- grid-template-columns: 50% 16.5% 33.5%; }
- .layout--invertedlleft .layout__region--first {
- grid-column: 1 / 2;
- grid-row: 1 / 3; }
- .layout--invertedlleft .layout__region--second {
- grid-column: 2 / 3;
- grid-row: 1 / 2; }
- .layout--invertedlleft .layout__region--third {
- grid-column: 3 / 4;
- grid-row: 1 / 2; }
- .layout--invertedlleft .layout__region--fourth {
- grid-column: 2 / 4;
- grid-row: 2 / 3; }
-
-.layout--invertedlright {
- display: grid; }
- .layout--invertedlright.even-split {
- grid-template-columns: 25% 25% 50%; }
- .layout--invertedlright.larger-left {
- grid-template-columns: 33.5% 16.5% 50%; }
- .layout--invertedlright.larger-right {
- grid-template-columns: 16.5% 33.5% 50%; }
- .layout--invertedlright .layout__region--first {
- grid-column: 1 / 2;
- grid-row: 1 / 2; }
- .layout--invertedlright .layout__region--first {
- grid-column: 2 / 3;
- grid-row: 1 / 2; }
- .layout--invertedlright .layout__region--third {
- grid-column: 1 / 3;
- grid-row: 2 / 3; }
- .layout--invertedlright .layout__region--fourth {
- grid-column: 3 / 4;
- grid-row: 1 / 3; }
-
-.layout--uwfourcol {
- display: grid;
- grid-template-columns: 100%; }
- .layout--uwfourcol .layout__region--first {
- grid-column: 1 / 2; }
-
-.layout--uwthreecol {
- display: grid; }
- .layout--uwthreecol .layout__region--first {
- grid-column: 1 / 2; }
- .layout--uwthreecol .layout__region--second {
- grid-column: 2 / 3; }
- .layout--uwthreecol .layout__region--third {
- grid-column: 3 / 4; }
-
-.layout--uwthreecol.even-split {
- grid-template-columns: 33% 34% 33%; }
-
-.layout--uwthreecol.larger-left {
- grid-template-columns: 50% 25% 25%; }
-
-.layout--uwthreecol.larger-middle {
- grid-template-columns: 25% 50% 25%; }
-
-.layout--uwthreecol.larger-right {
- grid-template-columns: 25% 25% 50%; }
-
-.layout--uwthreecol.legacy-38-38-24 {
- grid-template-columns: 38% 38% 24%; }
-
-.layout--uwthreecol.legacy-24-38-38 {
- grid-template-columns: 24% 38% 38%; }
-
-.layout.uw-contained-width {
- margin-left: auto;
- margin-right: auto;
- max-width: 63.1875rem;
- padding: 0 16px; }
- @media (min-width: 80rem) {
- .layout.uw-contained-width {
- padding-left: 0;
- padding-right: 0; } }
-
-.layout--uwtwocol {
- display: grid; }
- .layout--uwtwocol .layout__region--first {
- grid-column: 1 / 2; }
- .layout--uwtwocol .layout__region--second {
- grid-column: 2 / 3; }
-
-.layout--uwtwocol.larger-left {
- grid-template-columns: 67% 33%; }
-
-.layout--uwtwocol.larger-right {
- grid-template-columns: 33% 67%; }
-
-.layout--uwtwocol.even-split {
- grid-template-columns: 50% 50%; }
-
.l-media {
display: flex;
flex-direction: column; }
@@ -5062,6 +4907,35 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
margin-right: auto;
text-align: center; }
+.views-element-container {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 63.1875rem;
+ padding: 0 16px;
+ padding: 1rem; }
+ @media (min-width: 80rem) {
+ .views-element-container {
+ padding-left: 0;
+ padding-right: 0; } }
+ @media (min-width: 80rem) {
+ .views-element-container {
+ padding: 1rem 0; } }
+
+.view-content {
+ display: inline-flex;
+ flex-flow: row wrap; }
+
+.view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
+ margin: 1rem;
+ width: 100%; }
+ @media (min-width: 40.06rem) {
+ .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
+ flex-grow: 1;
+ width: 45%; } }
+ @media (min-width: 63.1875rem) {
+ .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
+ width: 32%; } }
+
.view__filters {
margin-bottom: 1rem; }
diff --git a/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss b/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
index 7c040f45..a0f0c637 100644
--- a/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
+++ b/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
@@ -63,11 +63,12 @@ input {
// input[type='url'] {}
// input[type='week'] {}
-label {
+label,
+.label{
font-family: $form-label-font-family;
- font-size: gesso-font-size(0);
+ font-size: gesso-font-size(2);
font-weight: gesso-font-weight(regular);
- margin-bottom: rem(gesso-spacing(sm));
+ margin-bottom: rem(gesso-spacing(xs));
abbr {
display: inline;
font-size: gesso-font-size(1);
diff --git a/source/_patterns/04-components/view/_view.scss b/source/_patterns/04-components/view/_view.scss
index 278eb39b..8a02c61e 100644
--- a/source/_patterns/04-components/view/_view.scss
+++ b/source/_patterns/04-components/view/_view.scss
@@ -1,8 +1,54 @@
// @file
// Styles for a view.
-// .view {}
+// Align the views container to the max width contain-width function.
+.views-element-container{
+ @include uw-contained-width;
+ padding: rem(gesso-spacing(sm));
+ @include xl {
+ padding:rem(gesso-spacing(sm)) 0;
+ }
+}
+// set the layout for the Views container when being used with Blog, news, events
+// to match flexbox in multi list usage.
+.view{
+ // View content container.
+ &-content{
+ display:inline-flex;
+ flex-flow: row wrap;
+ }
+
+ //View container for blog landing page.
+ &.view-uw-view-blogs,
+ // View container for events landing page.
+ &.view-uw-view-events,
+ // View container for newslanding page.
+ &.view-uw-view-news-items{
+ // Universal row for views
+ .views-row{
+ margin: rem(gesso-spacing(sm));
+ width:100%;
+ @include small{
+ flex-grow: 1;
+ width: 45%;
+ }
+ @include large{
+ width: 32%;
+ }
+ }
+ }
+}
+.view-filters{
+ // Universal filter form used on events, blog and news.
+ .views-exposed-form{
+
+ }
+}
+// Previous code .
.view__filters {
margin-bottom: rem(gesso-spacing(sm));
}
+
+
+
--
GitLab