From c89c7a9b8e8e846bf81f73e370ccb79b27cde0fe Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Mon, 28 Sep 2020 16:34:40 -0400
Subject: [PATCH] Additional css to cta bread crumbs and mailman sub
---
css/styles.css | 112 ++++++++++++++----
source/_patterns/03-layouts/footer/footer.yml | 2 +-
.../04-components/breadcrumb/_breadcrumb.scss | 4 -
.../04-components/breadcrumb/breadcrumb.twig | 6 -
.../04-components/breadcrumb/breadcrumb.yml | 9 +-
.../call-to-action/_call-to-action.scss | 58 +++++----
.../call-to-action/call-to-action.twig | 4 +
.../call-to-action/call-to-action.yml | 39 ++++--
.../_mailman-subscription.scss | 11 +-
.../territorial-statement.twig | 2 +-
10 files changed, 167 insertions(+), 80 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 68fd69c9..e9dd862e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2057,9 +2057,6 @@ ul.toolbar-menu {
.breadcrumb__item::after {
color: #000;
content: ' » '; }
- .breadcrumb__item:last-child::after {
- content: '';
- margin-left: 0; }
.breadcrumb__link {
color: #4e4e4e;
@@ -2320,10 +2317,21 @@ ul.toolbar-menu {
.uw-cta__aside.org-school:hover .uw-cta__text--medium {
color: #80001f; }
+.uw-cta__center-wrapper {
+ align-items: center;
+ display: flex;
+ -ms-flex-align: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%; }
+
.uw-cta {
clear: both;
height: 100%;
- padding: 1rem;
+ padding: 1.5rem;
width: 100%; }
.uw-cta.uw-contained-width {
margin-left: auto;
@@ -2337,8 +2345,13 @@ ul.toolbar-menu {
padding-right: 0; } }
.uw-cta .uw-cta__aside {
background-color: #000;
- flex: 1 0 30%;
- margin: 0 1rem 0 0; }
+ flex: 1 0 100%; }
+ @media (min-width: 40.06rem) {
+ .uw-cta .uw-cta__aside {
+ flex: 1 0 50%; } }
+ @media (min-width: 40.06rem) {
+ .uw-cta .uw-cta__aside {
+ flex: 1 0 30%; } }
.uw-cta .uw-cta__aside:last-child {
margin: 0; }
@@ -2353,42 +2366,86 @@ ul.toolbar-menu {
text-decoration: none; }
.uw-cta__text {
- font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; }
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ text-align: center; }
.uw-cta__text--big {
font-size: 1.424rem;
letter-spacing: 0.05rem;
line-height: 1.2;
- padding: 0 0.25rem 0.313rem; }
+ padding: 0 0.25rem 0.313rem 0.25rem; }
.uw-cta__text--medium {
color: #fff;
font-size: 1rem;
- letter-spacing: 0.05rem;
line-height: 1.2;
- padding: 0 0.25rem 0.313rem;
+ padding: 0 0.25rem 0.25rem 0.25rem;
text-transform: uppercase; }
.uw-cta__text--small {
color: #fff;
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-size: 0.79rem;
- letter-spacing: 0.02rem;
line-height: 1;
- padding: 0 0.15rem 0.313rem;
+ padding: 0 0.25rem 0.25rem 0.25rem;
text-transform: uppercase; }
-.uw-cta__center-wrapper {
- align-items: center;
- display: flex;
- -ms-flex-align: center;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- margin-left: auto;
- margin-right: auto;
- text-align: center;
- width: 100%; }
+.call-to-action-theme-neutral {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
+
+.call-to-action-theme-org-default {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
+
+.call-to-action-theme-org-ahs {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
+
+.call-to-action-theme-org-art {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
+
+.call-to-action-theme-org-eng {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
+
+.call-to-action-theme-org-env {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
+
+.call-to-action-theme-org-mat {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
+
+.call-to-action-theme-org-sci {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
+
+.call-to-action-theme-org-school {
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle; }
.uw-cta__wrapper {
- padding: 1rem 0; }
+ display: table;
+ float: left;
+ height: 6.25rem;
+ width: 100%; }
.uw-caption .caption {
background: #eee;
@@ -3586,7 +3643,7 @@ fieldset,
width: 100%; }
.uw-mailman__label {
display: block;
- margin-bottom: .35rem; }
+ margin-bottom: 0.5rem; }
.uw-mailman__label--email {
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 1.424rem;
@@ -3594,6 +3651,11 @@ fieldset,
.uw-mailman__servername {
text-align: center; }
+.uw-mailmain__email .uw-input--submit {
+ font-size: 1rem;
+ font-weight: 400;
+ max-width: 8.5rem; }
+
.menu {
list-style-type: none;
margin: 0;
diff --git a/source/_patterns/03-layouts/footer/footer.yml b/source/_patterns/03-layouts/footer/footer.yml
index 0befe264..34f936bd 100644
--- a/source/_patterns/03-layouts/footer/footer.yml
+++ b/source/_patterns/03-layouts/footer/footer.yml
@@ -76,4 +76,4 @@ social_media:
url: "https://www.linkedin.com/edu/school?id=10875"
social_media_placement: "global-site-footer"
modifier_classes: 'black'
-territorial_text: '<p>The University of Waterloo acknowledges that our work is on the traditional territory of ‎ the Neutral, Anishinaabeg and Haudenosaunee peoples. Our institution is situated on the Haldimand Tract, the land promised to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/human-rights-equity-inclusion/about/indigenous-initiatives" >Indigenous Initiatives Office</a>.</p>'
\ No newline at end of file
+territorial_text: '<p>The University of Waterloo acknowledges that much of our work takes place on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our main campus is situated on the Haldimand Tract, the land promised to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/human-rights-equity-inclusion/about/indigenous-initiatives" >Indigenous Initiatives Office</a>.</p>'
\ No newline at end of file
diff --git a/source/_patterns/04-components/breadcrumb/_breadcrumb.scss b/source/_patterns/04-components/breadcrumb/_breadcrumb.scss
index 5ef9cb58..f34920d8 100644
--- a/source/_patterns/04-components/breadcrumb/_breadcrumb.scss
+++ b/source/_patterns/04-components/breadcrumb/_breadcrumb.scss
@@ -37,10 +37,6 @@ $breadcrumb-text-color: gesso-color(text, primary) !default;
color: $breadcrumb-divider-color;
content: ' » ';
}
- &:last-child::after {
- content: '';
- margin-left: 0;
- }
}
.breadcrumb__link {
@include link($breadcrumb-link-color, $breadcrumb-text-color);
diff --git a/source/_patterns/04-components/breadcrumb/breadcrumb.twig b/source/_patterns/04-components/breadcrumb/breadcrumb.twig
index a04740f7..6292fef4 100644
--- a/source/_patterns/04-components/breadcrumb/breadcrumb.twig
+++ b/source/_patterns/04-components/breadcrumb/breadcrumb.twig
@@ -4,13 +4,7 @@
<ol class="breadcrumb__list">
{% for item in breadcrumb %}
<li class="breadcrumb__item">
- {% if item.url %}
<a class="breadcrumb__link {% if loop.index0 > 0 %} active_trail {% endif %} " title="{{ item.link_title }}" href="{{ item.url }}">{{ item.text }}</a>
- {% else %}
- <span aria-current="page">
- {{ item.text }}
- </span>
- {% endif %}
</li>
{% endfor %}
</ol>
diff --git a/source/_patterns/04-components/breadcrumb/breadcrumb.yml b/source/_patterns/04-components/breadcrumb/breadcrumb.yml
index fadfdc83..8a556dc6 100644
--- a/source/_patterns/04-components/breadcrumb/breadcrumb.yml
+++ b/source/_patterns/04-components/breadcrumb/breadcrumb.yml
@@ -4,16 +4,13 @@ heading: ''
breadcrumb:
-
url: '#'
- text: 'Home'
+ text: 'About Waterloo'
link_title: 'this is link title'
-
url: '#'
- text: 'Level 1'
+ text: 'Reports'
link_title: 'this is link title'
-
url: '#'
- text: 'Level 2'
- link_title: 'this is link title'
- -
- text: 'Current item'
+ text: 'Reports Level 2'
link_title: 'this is link title'
diff --git a/source/_patterns/04-components/call-to-action/_call-to-action.scss b/source/_patterns/04-components/call-to-action/_call-to-action.scss
index 80395a73..e78fac35 100644
--- a/source/_patterns/04-components/call-to-action/_call-to-action.scss
+++ b/source/_patterns/04-components/call-to-action/_call-to-action.scss
@@ -48,11 +48,21 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env'
}
}
}
-
+.uw-cta__center-wrapper {
+ align-items: center;
+ display: flex;
+ -ms-flex-align: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+}
.uw-cta {
clear: both;
height: 100%;
- padding: 1rem;
+ padding: rem(gesso-spacing(md));
width: 100%;
&.uw-contained-width {
@@ -62,8 +72,13 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env'
.uw-cta__aside {
background-color: $uw-black;
- flex: 1 0 30%;
- margin: 0 1rem 0 0;
+ flex: 1 0 100%;
+ @include small{
+ flex: 1 0 50%;
+ }
+ @include small{
+ flex: 1 0 30%;
+ }
}
.uw-cta__aside:last-child {
@@ -86,20 +101,19 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env'
.uw-cta__text {
font-family:gesso-font-family(condensedbook);
-
+ text-align: center;
&--big {
font-size:rem(gesso-font-size(3));
letter-spacing: 0.05rem;
line-height: 1.2;
- padding: 0 0.25rem 0.313rem;
+ padding: 0 rem(gesso-spacing(xxs)) 0.313rem rem(gesso-spacing(xxs));
}
&--medium {
color: $uw-white;
font-size:rem(gesso-font-size(0));
- letter-spacing: 0.05rem;
line-height: 1.2;
- padding: 0 0.25rem 0.313rem;
+ padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
text-transform: uppercase;
}
@@ -107,26 +121,22 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env'
color: $uw-white;
font-family:gesso-font-family(systemmedium);
font-size:rem(gesso-font-size(-2));
- letter-spacing: 0.02rem;
line-height: 1;
- padding: 0 0.15rem 0.313rem;
+ padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
text-transform: uppercase;
}
}
-
-.uw-cta__center-wrapper {
- align-items: center;
- display: flex;
- -ms-flex-align: center;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- margin-left: auto;
- margin-right: auto;
- text-align: center;
- width: 100%;
+@each $faculty in $faculties {
+ .call-to-action-theme-#{$faculty}{
+ border: 1px solid #fff;
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle;
+ }
}
-
.uw-cta__wrapper {
- padding: 1rem 0;
+ display: table;
+ float: left;
+ height: 6.25rem;
+ width: 100%;
}
diff --git a/source/_patterns/04-components/call-to-action/call-to-action.twig b/source/_patterns/04-components/call-to-action/call-to-action.twig
index fbb3a0e9..c7003a4b 100644
--- a/source/_patterns/04-components/call-to-action/call-to-action.twig
+++ b/source/_patterns/04-components/call-to-action/call-to-action.twig
@@ -10,9 +10,13 @@
{% endif %}
<div class="uw-cta__wrapper">
+ <div class="call-to-action-theme-{{ cta.theme }}">
{% for detail in cta.details %}
+
<div class="uw-cta__text uw-cta__text--{{ detail.type }}">{{ detail.text }}</div>
+
{% endfor %}
+ </div>
</div>
{% if cta.link %}
diff --git a/source/_patterns/04-components/call-to-action/call-to-action.yml b/source/_patterns/04-components/call-to-action/call-to-action.yml
index 15b5a663..f3382c83 100644
--- a/source/_patterns/04-components/call-to-action/call-to-action.yml
+++ b/source/_patterns/04-components/call-to-action/call-to-action.yml
@@ -3,26 +3,43 @@ ctas:
link: '#'
details:
-
- text: 'BT#1'
- type: 'big'
- -
- text: 'MT#1'
- type: 'medium'
- -
- text: 'ST#1'
+ text: 'Small Text Here '
type: 'small'
+
+ - text: 'UW WIDE MESSAGE'
+ type: 'big'
theme: 'org-default'
-
link: '#'
details:
- - text: 'BT#2'
- type: 'big'
- - text: 'ST#2'
+ - text: 'Faculty of'
type: 'small'
+
+ - text: 'Applied Health Sciences'
+ type: 'big'
theme: 'org-ahs'
-
link: '#'
details:
- - text: 'BT#3'
+ - text: 'Faculty of'
+ type: 'medium'
+
+ - text: 'Engineering'
type: 'big'
theme: 'org-eng'
+ - link: '#'
+ details:
+ - text: 'Faculty of'
+ type: 'medium'
+
+ - text: 'Environment'
+ type: 'big'
+ theme: 'org-env'
+ - link: '#'
+ details:
+ - text: 'Faculty of'
+ type: 'small'
+
+ - text: 'Science'
+ type: 'big'
+ theme: 'org-sci'
diff --git a/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss b/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss
index 5ef31da0..d6d66ee3 100644
--- a/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss
+++ b/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss
@@ -1,10 +1,10 @@
.uw-mailman {
- padding: 1rem 0;
+ padding: rem(gesso-spacing(sm)) 0;
width: 100%;
&__label {
display: block;
- margin-bottom: .35rem;
+ margin-bottom: rem(gesso-spacing(xs));
&--email {
font-family: gesso-font-family(condensedbook);
@@ -17,3 +17,10 @@
text-align: center;
}
}
+.uw-mailmain__email{
+ .uw-input--submit{
+ font-size:rem(gesso-font-size(0));
+ font-weight: gesso-font-weight(regular);
+ max-width:8.5rem;
+ }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/territorial-statement/territorial-statement.twig b/source/_patterns/04-components/territorial-statement/territorial-statement.twig
index 34be7e48..483a249a 100644
--- a/source/_patterns/04-components/territorial-statement/territorial-statement.twig
+++ b/source/_patterns/04-components/territorial-statement/territorial-statement.twig
@@ -1,5 +1,5 @@
<div class="uw-bg--{{ modifier_classes }}">
<div class="uw-territorial">
- <p>The University of Waterloo acknowledges that our work is on the traditional territory of ‎ the Neutral, Anishinaabeg and Haudenosaunee peoples. Our institution is situated on the Haldimand Tract, the land promised to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/human-rights-equity-inclusion/about/indigenous-initiatives" >Indigenous Initiatives Office</a>.</p>
+ <p>The University of Waterloo acknowledges that much of our work takes place on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our main campus is situated on the Haldimand Tract, the land promised to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/human-rights-equity-inclusion/about/indigenous-initiatives" >Indigenous Initiatives Office</a>.</p>
</div>
</div>
\ No newline at end of file
--
GitLab