From fff57a1a0bb463f99270716f51af884f25a8b4cf Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 28 Jun 2022 14:28:04 -0400
Subject: [PATCH] ISTWCMS-5633:rebasing 1.0.x _card.scss conflict resolved
---
src/patterns/01-core/mixins/_focus.scss | 10 +
src/patterns/01-core/mixins/_index.scss | 1 +
src/patterns/01-core/props/_sizes.scss | 14 +-
src/patterns/03-layouts/header/_header.scss | 16 +-
src/patterns/03-layouts/header/header.twig | 19 +
src/patterns/04-components/_index.scss | 6 +
.../04-components/blockquote/_blockquote.scss | 22 +-
.../04-components/button/_button.scss | 10 +-
src/patterns/04-components/card/_card.scss | 10 +-
.../04-components/color-bar/_color-bar.scss | 12 +-
src/patterns/04-components/image/_image.scss | 4 +-
.../menu/menu--footer/_menu--footer.scss | 42 +-
.../menu/menu--header/_menu--header.scss | 136 +++++
.../menu/menu--header/menu--header.twig | 54 ++
.../menu/menu--header/menu--header.yml | 55 ++
.../menu--horizontal/_menu--horizontal.scss | 546 ++++++++++++++++++
.../menu/menu--horizontal/menu--horizontal.js | 205 +++++++
.../menu--horizontal/menu--horizontal.twig | 19 +
.../menu--horizontal/menu--horizontal.yml | 75 +++
.../menu--secondary/_menu--secondary.scss | 66 +++
.../menu/menu--secondary/menu--secondary.twig | 10 +
.../menu/menu--secondary/menu--secondary.yml | 546 ++++++++++++++++++
.../menu/menu--social/_menu--social.scss | 18 +-
src/patterns/04-components/menu/menu.twig | 78 ++-
.../_mobile-menu-button.scss | 86 +++
.../mobile-menu/_mobile-menu.scss | 161 ++++++
.../04-components/site-logo/_site-logo.scss | 26 +
.../04-components/site-logo/site-logo.twig | 5 +
.../_social-media--icon.scss | 2 +-
src/patterns/04-components/tag/_tag.scss | 89 ++-
.../_territorial-statement.scss | 16 +-
31 files changed, 2213 insertions(+), 146 deletions(-)
create mode 100644 src/patterns/01-core/mixins/_focus.scss
create mode 100644 src/patterns/04-components/menu/menu--header/_menu--header.scss
create mode 100644 src/patterns/04-components/menu/menu--header/menu--header.twig
create mode 100644 src/patterns/04-components/menu/menu--header/menu--header.yml
create mode 100644 src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
create mode 100644 src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
create mode 100644 src/patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
create mode 100644 src/patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
create mode 100644 src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss
create mode 100644 src/patterns/04-components/menu/menu--secondary/menu--secondary.twig
create mode 100644 src/patterns/04-components/menu/menu--secondary/menu--secondary.yml
create mode 100644 src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
create mode 100644 src/patterns/04-components/mobile-menu/_mobile-menu.scss
create mode 100644 src/patterns/04-components/site-logo/_site-logo.scss
create mode 100644 src/patterns/04-components/site-logo/site-logo.twig
diff --git a/src/patterns/01-core/mixins/_focus.scss b/src/patterns/01-core/mixins/_focus.scss
new file mode 100644
index 00000000..af7c7703
--- /dev/null
+++ b/src/patterns/01-core/mixins/_focus.scss
@@ -0,0 +1,10 @@
+// @file
+// Focus mixin
+
+@mixin focus($color: var(--uw-black), $width: var(--size-sm), $offset: var(--size-sm)) {
+ outline: $width solid transparent;
+ outline-offset: $offset;
+ &:focus {
+ outline-color: $color;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index 12cb9174..46a21902 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -1,6 +1,7 @@
@forward 'accessiblity';
@forward 'button';
@forward 'clearfix';
+@forward 'focus';
@forward 'headings';
@forward 'image-replace';
@forward 'layout';
diff --git a/src/patterns/01-core/props/_sizes.scss b/src/patterns/01-core/props/_sizes.scss
index 83b5a3af..a15ae157 100644
--- a/src/patterns/01-core/props/_sizes.scss
+++ b/src/patterns/01-core/props/_sizes.scss
@@ -1,21 +1,21 @@
:where(html) {
--size-xs: 0.063rem; // 1px
--size-sm: 0.125rem; // 2px
- --size-05: 0.25rem; // 4px
- --size-1: 0.5rem; // 8px
+ --size-05: 0.25rem; // 4px xxs
+ --size-1: 0.5rem; // 8px xs
--size-105: 0.75rem; // 12px
- --size-2: 1rem; // 16px
+ --size-2: 1rem; // 16px sm
--size-205: 1.25rem; // 20px
- --size-3: 1.5rem; // 24px
- --size-4: 2rem; // 32px
+ --size-3: 1.5rem; // 24px md
+ --size-4: 2rem; // 32px lg
--size-5: 2.5rem; // 40px
--size-6: 3rem; // 48px
- --size-7: 3.5rem; // 56px
+ --size-7: 3.5rem; // 56px xl
--size-8: 4rem; // 64px
--size-9: 4.5rem; // 72px
--size-10: 5rem; // 80px
--size-11: 5.5rem; // 88px
- --size-12: 6rem; // 96px
+ --size-12: 6rem; // 96px xxl
--size-13: 6.5rem; // 104px
--size-14: 7rem; // 112px
--size-15: 7.5rem; // 120px
diff --git a/src/patterns/03-layouts/header/_header.scss b/src/patterns/03-layouts/header/_header.scss
index cd71ae72..23a98d40 100644
--- a/src/patterns/03-layouts/header/_header.scss
+++ b/src/patterns/03-layouts/header/_header.scss
@@ -4,17 +4,17 @@ $site-name-bg: var(--gray-2);
.uw-header {
@include uw-full-width;
- background-color: #000;
+ background-color: var(--uw-black);
&__masthead {
display: flex;
- //font-family:gesso-font-family(condensedbook);
+ font-family: var(--font-condensedbook);
margin-bottom: 0;
- min-height: 3.5rem;
+ min-height: var(--size-7);
padding: var(--size-1);
position: relative;
transition: margin 300ms;
&.open{
- margin-bottom: 4rem;
+ margin-bottom: var(--size-8);
transition: margin 300ms;
}
@media(min-width: $screen-md) {
@@ -30,7 +30,7 @@ $site-name-bg: var(--gray-2);
align-self: flex-end;
margin-right: 2.75rem;
@media(min-width: $screen-md) {
- margin-right: 1rem;
+ margin-right: var(--size-2);
}
}
.uw-header-search {
@@ -56,12 +56,12 @@ $site-name-bg: var(--gray-2);
}
.uw-header__center{
@include layout-constrain;
- border-bottom: 1px solid var(--gray-3);
+ border-bottom: var(--size-xs) solid var(--gray-3);
@media(min-width: $screen-md) {
border-bottom: inherit;
}
display: grid;
- grid-template-columns: auto 4rem;
+ grid-template-columns: auto var(--size-8);
padding: 0;
}
.uw-header__site-name{
@@ -83,6 +83,6 @@ $site-name-bg: var(--gray-2);
grid-row: 2 / 3;
margin-bottom: 0;
margin-top: 0;
- padding: 0 1rem;
+ padding: 0 var(--size-2);
}
}
diff --git a/src/patterns/03-layouts/header/header.twig b/src/patterns/03-layouts/header/header.twig
index ab8155c7..9de3fadd 100644
--- a/src/patterns/03-layouts/header/header.twig
+++ b/src/patterns/03-layouts/header/header.twig
@@ -10,7 +10,14 @@
</div>
{% endif %}
<div class="uw-header__masthead">
+ {% include '@components/site-logo/site-logo.twig' %}
+ {% if branding_level == 'full' %}
+ {% include "@components/menu/menu--header/menu--header.twig" with {
+ 'modifier_classes': 'header',
+ 'include_home': false,
+ } %}
+ {% endif %}
</div>
<!-- Branding colour bar. -->
{% if branding_level == 'full' %}
@@ -30,7 +37,19 @@
</button>
</div>
<div id="uw-header__navigation" class="uw-header__navigation">
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'modifier_classes': 'main',
+ 'menu_name': 'horizontal',
+ 'items': nav_items,
+ 'home_link': home_link,
+ 'include_home': true,
+ }%}
+ {% include "@components/menu/menu--secondary/menu--secondary.twig" with {
+ 'modifier_classes': 'secondary',
+ 'items': secondary_items,
+ 'include_home': false,
+ }%}
</div>
</nav>
</header>
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index f896bdf4..cff7a1d7 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -6,10 +6,16 @@
@forward 'date/date';
@forward 'image/image';
@forward 'menu/menu';
+@forward 'menu/menu--secondary/menu--secondary';
+@forward 'menu/menu--header/menu--header';
+@forward 'menu/menu--horizontal/menu--horizontal';
@forward 'menu/menu--footer/menu--footer';
@forward 'menu/menu--social/menu--social';
+@forward 'mobile-menu/mobile-menu';
+@forward 'mobile-menu-button/mobile-menu-button';
@forward 'social-media/social-media--icon/social-media--icon';
@forward 'svg/svg';
+@forward 'site-logo/site-logo';
@forward 'tag/tag';
@forward 'tag-list/tag-list';
@forward 'territorial-statement/territorial-statement';
diff --git a/src/patterns/04-components/blockquote/_blockquote.scss b/src/patterns/04-components/blockquote/_blockquote.scss
index 16aefd7d..836632fa 100644
--- a/src/patterns/04-components/blockquote/_blockquote.scss
+++ b/src/patterns/04-components/blockquote/_blockquote.scss
@@ -1,22 +1,22 @@
.uw-blockquote {
background-color: var(--gray-1);
- color: var(--uw-black);
+ color: var(--uw-black);
&__wrapper {
display: block;
margin-left: auto;
margin-right: auto;
- padding: var(--size-4) 0;
+ padding: var(--size-4) 0;
text-align: center;
}
&__text {
display: inline-block;
p{
- font-size: var(--font-size-4);
+ font-size: var(--font-size-4);
}
max-width: 640px;
- padding: 0 var(--size-5);
+ padding: 0 var(--size-5);
position: relative;
text-align: left;
@@ -53,20 +53,18 @@
text-align: left;
}
-
-
cite {
color: var(--uw-black);
font-family: var(--font-condensedbook);
font-size: var(--font-size-1);
font-weight: normal;
text-align: left;
- text-transform:uppercase;
- > :first-child::before{
- content: "\2014";
- display:inline-block;
- padding-right:var(--size-1);
- }
+ text-transform: uppercase;
+ > :first-child::before{
+ content: "\2014";
+ display: inline-block;
+ padding-right: var(--size-1);
+ }
}
}
}
diff --git a/src/patterns/04-components/button/_button.scss b/src/patterns/04-components/button/_button.scss
index e6e05c19..a994a91d 100644
--- a/src/patterns/04-components/button/_button.scss
+++ b/src/patterns/04-components/button/_button.scss
@@ -4,7 +4,7 @@
@use '../../01-core' as *;
.button,
- button{
+button{
@include button();
}
@@ -17,7 +17,6 @@
&:focus {
background-color: var(--cgc-3);
color: var(--uw-white);
-
}
&:active {
@@ -65,7 +64,7 @@
color: var(--uw-white);
&:hover,
&:focus {
- background-color: var(--blue-9);
+ background-color: var(--blue-9);
color: var(--uw-white);
}
}
@@ -84,9 +83,8 @@
// Css within pattern lab.
.pattern-lab-content .mobile-menu-button,
.pl-c-pattern__extra-toggle{
- max-width:inherit;
- width:auto;
-
+ max-width: inherit;
+ width: auto;
}
.pl-c-pattern .pl-c-demo button,
.pl-c-pattern .pl-c-demo .button{
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index 34fe34b5..de3793e7 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -50,7 +50,6 @@ $card-padding: var(--size-2) !default;
display: block;
img {
- -webkit-filter: opacity(100%);
filter: opacity(100%);
transition: filter;
}
@@ -58,9 +57,8 @@ $card-padding: var(--size-2) !default;
&:hover,
&:focus {
img {
- -webkit-filter: opacity(62%);
filter: opacity(62%);
- transition:filter;
+ transition: filter;
}
}
}
@@ -85,7 +83,7 @@ $card-padding: var(--size-2) !default;
width: 100%;
.card__node--event & {
- display:grid;
+ display: grid;
grid-template-columns: 1fr auto;
.card__author {
@@ -106,7 +104,6 @@ $card-padding: var(--size-2) !default;
grid-row: 2 / 3;
margin: 0;
padding: var(--size-2) var(--size-2) 0 0;
-
.uw-node__without-image & {
grid-column: 2 / 3;
grid-row: inherit;
@@ -129,7 +126,6 @@ $card-padding: var(--size-2) !default;
width: 100%;
a {
-
@include link-reverse(
var(--uw-black-primary),
var(--uw-black-primary)
@@ -162,7 +158,7 @@ $card-padding: var(--size-2) !default;
width: 100%;
&:empty {
- margin-bottom:0;
+ margin-bottom: 0;
}
}
diff --git a/src/patterns/04-components/color-bar/_color-bar.scss b/src/patterns/04-components/color-bar/_color-bar.scss
index 88800fbb..af4bfbf9 100644
--- a/src/patterns/04-components/color-bar/_color-bar.scss
+++ b/src/patterns/04-components/color-bar/_color-bar.scss
@@ -30,24 +30,20 @@ $lvls: '--color1', 'lvl2', 'lvl3', 'lvl4';
}
.uw-colour-bar__cbar {
- -webkit-box-flex: 1;
- -moz-flex: 1;
- -ms-flex: 1;
- -webkit-flex: 1;
flex: 1;
height: 0.625rem;
margin: 0;
padding: 0;
- @include medium {
+ @media(min-width: $screen-md) {
height: 0.875rem;
}
- @include large {
- height: 1rem;
+ @media(min-width: $screen-lg) {
+ height: var(--size-2);
}
- @include xl {
+ @media(min-width: $screen-xl) {
height: 1.125rem;
}
}
diff --git a/src/patterns/04-components/image/_image.scss b/src/patterns/04-components/image/_image.scss
index dc7ca84f..7c84734a 100644
--- a/src/patterns/04-components/image/_image.scss
+++ b/src/patterns/04-components/image/_image.scss
@@ -1,8 +1,8 @@
.block-uw-cbl-image{
.uw-image {
- display:flex;
+ display: flex;
flex-flow: column;
- width:100%;
+ width: 100%;
img{
display: block;
}
diff --git a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
index 8c7456ad..f760379c 100644
--- a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
+++ b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -4,10 +4,10 @@
@use '../../../01-core' as *;
.menu--uw-footer {
- align-items:flex-start;
- display:flex;
- flex-direction:row;
- flex-wrap:wrap;
+ align-items: flex-start;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
justify-content: flex-start;
list-style-type: none;
padding-bottom: var(--size-2);
@@ -35,54 +35,54 @@
border-width: var(--size-xs) var(--size-xs) 0;
}
&:nth-child(5) {
- border-width: var(--size-xs) 0 0 var(--size-xs);
+ border-width: var(--size-xs) 0 0 var(--size-xs);
}
&:nth-child(6) {
- border-width: var(--size-xs) var(--size-xs) 0;
+ border-width: var(--size-xs) var(--size-xs) 0;
}
&:nth-child(7) {
- border-width: var(--size-xs) 0 0 var(--size-xs);
+ border-width: var(--size-xs) 0 0 var(--size-xs);
}
&:nth-child(8) {
- border-width: var(--size-xs) var(--size-xs) 0;
+ border-width: var(--size-xs) var(--size-xs) 0;
}
&:nth-child(9) {
- border-width: var(--size-xs);
+ border-width: var(--size-xs);
}
@media(min-width: $screen-xs) {
padding: 0 0 0 var(--size-1);
- text-align:left;
+ text-align: left;
&:nth-child(1) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(2) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(3) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(4) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(5) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(6) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(7) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(8) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(9) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
}
@media(min-width: $screen-md) {
- flex: 1 0 33%;
+ flex: 1 0 33%;
padding: 0 0.25rem 0 var(--size-2);
&:nth-child(1),
&:nth-child(4),
@@ -96,7 +96,7 @@
font-family: var(--font-condensedbook);
font-size: var(--font-size-00);
font-weight: 300;
- line-height: 1.50;
+ line-height: 1.5;
outline: none;
text-decoration: none;
&:hover,
diff --git a/src/patterns/04-components/menu/menu--header/_menu--header.scss b/src/patterns/04-components/menu/menu--header/_menu--header.scss
new file mode 100644
index 00000000..2296e38a
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--header/_menu--header.scss
@@ -0,0 +1,136 @@
+@use '../../../01-core' as *;
+
+.uw-horizontal-nav.uw-horizontal-nav--header {
+ background-color: var(--uw-black);
+ max-width: inherit;
+ width: inherit;
+
+ .uw-horizontal-nav--wrapper{
+ background-color: var(--uw-black);
+ display: block;
+ max-width: inherit;
+ padding: 0;
+ position: relative;
+ }
+ .uw-horizontal-nav--home{
+ display: none;
+ grid-column: none;
+ padding: 0;
+ }
+ .uw-horizontal-nav--menu {
+ width: inherit;
+ .menu {
+ border: var(--size-xs) solid var(--uw-white);
+ height: auto;
+ position: relative;
+ width: 6rem;
+ a{
+ color: var(--uw-white);
+ outline: none;
+ outline-offset: unset;
+ width: 100%;
+ &:hover{
+ color: var(--uw-black);
+ }
+ }
+ &.menu__subnav{
+ a{
+ color: var(--uw-black);
+ outline: none;
+ outline-offset: unset;
+ width: 100%;
+ }
+ }
+ &--horizontal {
+ > .menu__item{
+ background-color: var(--uw-black);
+ border-bottom: 0 solid transparent;
+ width: 100%;
+ &.has-submenu {
+ > a{
+ padding-right: var(--size-4);
+ position: relative;
+ &::after {
+ @include svg-background(mobile-arrow-down-w);
+ background-position: center center; // LTR
+ background-repeat: no-repeat;
+ background-size: contain;
+ display: block;
+ height: 0.6rem;
+ position: absolute;
+ text-align: center;
+ width: 0.6rem;
+ }
+ &:hover,
+ &:focus{
+ &::after {
+ @include svg-background(mobile-arrow-down);
+ }
+ }
+ }
+ &.submenu-active{
+ > a{
+ &::after {
+ @include svg-background(mobile-arrow-down);
+ }
+ }
+ }
+ }
+ .no-scroll & {
+ &[aria-expanded="true"]{
+ > a{
+ border-left: inherit;
+ display: inline-block;
+ height: inherit;
+ overflow: inherit;
+ width: inherit;
+ z-index: var(--layer-overlay);
+ span{
+ display: block;
+ }
+ &::after {
+ //transform: scale(0.75, 0.75) rotate(270deg);
+ }
+ }
+ }
+ }
+ }
+ }
+ &__subnav {
+ display: none;
+ }
+ .submenu-active .menu__subnav{
+ background: #f7f7f7;
+ border-width: 0;
+ column-count: 1;
+ display: inherit;
+ height: auto;
+ left: inherit;
+ min-height: auto;
+ min-width: 13rem;
+ padding: var(--size-2) var(--size-1);
+ right: 0;
+ top: inherit;
+ width: auto;
+
+ .menu__item{
+ max-width: inherit;
+ &-parent{
+ display: none;
+ }
+ a{
+ .no-scroll &{
+ border-color: transparent;
+ &:hover{
+ border-color: #e6e6e6;
+ }
+ }
+ }
+ }
+ .menu__subnav{
+ border: 0 solid var(--uw-white);
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--header/menu--header.twig b/src/patterns/04-components/menu/menu--header/menu--header.twig
new file mode 100644
index 00000000..e1b8f90e
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--header/menu--header.twig
@@ -0,0 +1,54 @@
+{% set submenu = [] %}
+
+{% set submenu = submenu|merge([
+ {
+ 'title': 'Admissions',
+ 'url': 'https://uwaterloo.ca/admissions/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'About Waterloo',
+ 'url': 'https://uwaterloo.ca/about/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'Faculties & Academics',
+ 'url': 'https://uwaterloo.ca/faculties-academics/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'Offices & Services',
+ 'url': 'https://uwaterloo.ca/offices-services/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'Support Waterloo',
+ 'url': 'https://uwaterloo.ca/support/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'COVID-19',
+ 'url': 'https://uwaterloo.ca/coronavirus/',
+ 'in_active_trail': false
+ },
+]) %}
+
+{% set items = [] %}
+{% set items = items|merge([
+ {
+ 'title': 'Jump to',
+ 'url': '#',
+ 'in_active_trail': 'false',
+ 'submenu': submenu
+ }
+]) %}
+
+<div class="uw-header-menu">
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'items': items,
+ 'modifier_classes': 'header',
+ 'menu_name': 'horizontal',
+ 'include_home': false,
+ }%}
+</div>
+
diff --git a/src/patterns/04-components/menu/menu--header/menu--header.yml b/src/patterns/04-components/menu/menu--header/menu--header.yml
new file mode 100644
index 00000000..c226f541
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--header/menu--header.yml
@@ -0,0 +1,55 @@
+---
+include_home: false
+modifier_classes: 'header'
+menu_name: 'horizontal'
+items:
+ - title: 'Jump To'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - title: 'Admissions'
+ url: 'https://uwaterloo.ca/admissions/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'About Waterloo'
+ url: 'https://uwaterloo.ca/about/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Faculties & Academics'
+ url: 'https://uwaterloo.ca/faculties-academics/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Offices & Services'
+ url: 'https://uwaterloo.ca/offices-services/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Support Waterloo'
+ url: 'https://uwaterloo.ca/support/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'COVID-19'
+ url: 'https://uwaterloo.ca/coronavirus/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
new file mode 100644
index 00000000..ff0e9958
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -0,0 +1,546 @@
+@use '../../../01-core' as *;
+
+$menu-horizontal-bg: var(--gray-2);
+$menu-horizontal-bar-font: var(--font-book);
+$menu-horizontal-sub-font: var(--font-system);
+$menu-horizontal-sub-font-bold: var(--font-systembold);
+$menu-horizontal-bar-font-size: var(--font-size-000);
+$menu-horizontal-sub-font-size: var(--font-size-000);
+// Colors
+$menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
+@each $faculty in $menu-faculties {
+ @if $faculty == org-default{
+ .#{$faculty} {
+ .uw-horizontal-nav {
+ .uw-site-home__link{
+ svg{
+ .bg-circle{
+ fill: var(--uw-black);
+ stroke: var(--uw-black);
+ }
+ .house{
+ fill: var(--uw-white);
+ }
+ }
+ &:focus{
+ svg{
+ .bg-circle {
+ fill: var(--uw-white);
+ stroke: var(--uw-black);
+ }
+ .house {
+ fill: var(--uw-black);
+ }
+ }
+ }
+ &:hover{
+ svg{
+ .bg-circle {
+ fill: var(--uw-white);
+ stroke: var(--uw-black);
+ }
+ .house {
+ fill: var(--uw-black);
+ }
+ }
+ }
+ }
+ .menu--horizontal {
+ > .is-active-trail {
+ background-color: var(--gray-3);
+ color: var(--uw-black);
+ > .menu__link.active{
+ ~ .menu{
+ .menu__item{
+ &-parent{
+ a{
+ border-bottom: var(--size-xs) solid var(--uw-black);
+ }
+ }
+ }
+ }
+ }
+ }
+ li {
+ > a{
+ color: var(--uw-black);
+ &:focus{
+ background-color: var(--gray-3);
+ color: var(--uw-black);
+ }
+ &.active{
+ background-color: var(--gray-3);
+ color: var(--uw-black);
+ }
+ &:hover{
+ background-color: var(--uw-white);
+ color: var(--uw-black);
+ }
+ }
+ .menu__subnav{
+ a{
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none;
+ &:focus {
+ background-color: inherit;
+ border-bottom: 1px solid var(--uw-black);
+ color: var(--uw-black);
+ }
+ &.active{
+ background-color: inherit;
+ border-bottom: 1px solid var(--uw-black);
+ color: var(--uw-black);
+ &::after{
+ display: none;
+ }
+ &:hover{
+ background-color: inherit;
+ border-bottom: 1px solid var(--gray-3);
+ color: var(--uw-black);
+ }
+ }
+ &:hover{
+ background-color: inherit;
+ border-bottom: 1px solid var(--gray-3);
+ color: var(--uw-black);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ @else {
+ //.#{$faculty} {
+ // .uw-horizontal-nav {
+ // .uw-site-home__link{
+ // svg{
+ // .bg-circle{
+ // fill:gesso-brand($faculty, primary);
+ // stroke:gesso-brand($faculty, primary);
+ // }
+ // .house{
+ // fill:gesso-brand(org-default,uw-white,lvl1);
+ // }
+ //
+ // }
+ // &:focus{
+ // svg{
+ // .bg-circle{
+ // fill:gesso-brand(org-default,uw-white,lvl1);
+ // stroke:gesso-brand($faculty, primary);
+ // }
+ // .house{
+ // fill:gesso-brand($faculty, primary);
+ // }
+ // }
+ // }
+ // &:hover{
+ // svg{
+ // .bg-circle{
+ // fill:gesso-brand(org-default,uw-white,lvl1);
+ // stroke:gesso-brand($faculty, primary);
+ // }
+ // .house{
+ // fill:gesso-brand($faculty, primary);
+ // }
+ // }
+ // }
+ // }
+ // .menu--horizontal {
+ // > .is-active-trail {
+ // background-color: gesso-grayscale(gray-3);
+ // color: gesso-brand(org-default, uw-black, lvl4);
+ // > .menu__link.active{
+ // ~ .menu{
+ // .menu__item{
+ // &__parent{
+ // a{
+ // border-bottom: 1px solid gesso-brand($faculty, primary);
+ // color: gesso-brand($faculty, primary);
+ // }
+ // }
+ // }
+ // }
+ // }
+ // }
+ // li {
+ // > a{
+ // color: gesso-brand(org-default,uw-black,lvl4);
+ // &:focus{
+ // background-color: gesso-grayscale(gray-3);
+ // color: gesso-brand(org-default,uw-black,lvl4);
+ // }
+ // &.active{
+ // background-color: gesso-grayscale(gray-3);
+ // color: gesso-brand(org-default,uw-black,lvl4);
+ // }
+ // &:hover{
+ // background-color: gesso-brand(org-default,uw-white,lvl1);
+ // color: gesso-brand(org-default,uw-black,lvl4);
+ // }
+ // }
+ // .menu__subnav{
+ // a{
+ // background-color:transparent;
+ // border-bottom:1px solid transparent;
+ // text-decoration:none;
+ // &:focus {
+ // background-color: inherit;
+ // border-bottom:1px solid gesso-brand($faculty, primary);
+ // color: gesso-brand(org-default,uw-black,lvl4);
+ // }
+ // &.active{
+ // background-color:inherit;
+ // border-bottom:1px solid gesso-brand($faculty, primary);
+ // color: gesso-brand($faculty, primary);
+ // &::after{
+ // display:none;
+ // }
+ // &:hover{
+ // background-color:inherit;
+ // border-bottom:1px solid gesso-grayscale(gray-3);
+ // color: gesso-brand(org-default,uw-black,lvl4);
+ // }
+ // }
+ // &:hover{
+ // background-color:inherit;
+ // border-bottom:1px solid gesso-brand($faculty, primary);
+ // color:gesso-brand($faculty, primary);
+ // }
+ //
+ // }
+ // }
+ // }
+ // }
+ // }
+ //}
+ }
+}
+
+.uw-horizontal-nav{
+ @include uw-full-width;
+ background-color: var(--gray-2);
+ &--wrapper{
+ @include uw-contained-width;
+ display: grid;
+ padding: 0;
+ position: relative;
+ @media(min-width: $screen-md) {
+ grid-template-columns: var(--size-6) auto;
+ padding: 0 var(--size-1);
+ }
+ @media(min-width: $screen-xl) {
+ padding: 0;
+ }
+ }
+ &--home{
+ display: none;
+ @media(min-width: $screen-md) {
+ display: block;
+ grid-column: 1/2;
+ padding: var(--size-05);
+ .uw-site-home__link{
+ display: block;
+ height: var(--size-3);
+ width: var(--size-3);
+ svg{
+ .bg-circle{
+ stroke-miterlimit: 10;
+ stroke-width: 0.5;
+ }
+ }
+ }
+ }
+ @media(min-width: $screen-xl) {
+ padding: var(--size-05) 0;
+ }
+ }
+ &--menu {
+ @include uw-full-width;
+ @media(min-width: $screen-md) {
+ grid-column: 2/3;
+ }
+ .menu {
+ margin-left: inherit;
+ &__link{
+ position: relative;
+ }
+ .menu__item{
+ a{
+ cursor: pointer;
+ outline: none;
+ outline-offset: unset;
+ &:hover{
+ background-color: var(--uw-white);
+ }
+ }
+
+ }
+ // Top Level <ul> flex top items
+ &--horizontal {
+ @include uw-full-width;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: $menu-horizontal-bar-font;
+ justify-content: flex-start;
+ width: 100%;
+ > .menu__item{
+ border-bottom: var(--size-xs) solid var(--gray-3);
+ font-size: $menu-horizontal-bar-font-size;
+ @media(min-width: $screen-md) {
+ border-bottom: inherit;
+ }
+ width: 100%;
+ @media(min-width: $screen-md) {
+ width: auto;
+ }
+ a{
+ display: inline-block;
+ line-height: var(--font-lineheight-2);
+ padding: var(--size-1);
+ text-decoration: none;
+ width: 100%;
+ }
+ &.has-submenu {
+ > a{
+ padding-right: var(--size-3);
+ position: relative;
+ &::after {
+ @include svg-background(mobile-arrow-down);
+ background-position: center center; // LTR
+ background-repeat: no-repeat;
+ background-size: contain;
+ color: var(--uw-black);
+ content: '';
+ display: block;
+ height: var(--size-1);
+ position: absolute;
+ right: var(--size-05);
+ text-align: center;
+ top: var(--size-105);
+ width: var(--size-1);
+ }
+ }
+ }
+ .no-scroll & {
+ &[aria-expanded="true"]{
+ > a{
+ border-left: var(--size-xs) solid var(--gray-3);
+ display: inline-block;
+ height: 2.25rem;
+ overflow: hidden;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: var(--size-4);
+ z-index: var(--layer-overlay);
+ span{
+ display: none;
+ }
+ &::after {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+ }
+ }
+ // hide all menus that are classed subnav
+ &__subnav {
+ display: none;
+ font-size: $menu-horizontal-sub-font-size;
+ text-transform: none;
+ width: 100%;
+ }
+ .submenu-active {
+ &[aria-expanded="true"]{
+ > a{
+ &::after {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ .menu__subnav{
+ background-color: #f7f7f7;
+ display: block;
+ height: calc(100vh - var(--size-14));
+ position: absolute;
+ top: 0;
+ z-index: var(--layer-dropdown);
+ .menu__subnav{
+ align-items: inherit;
+ background: inherit;
+ box-shadow: none;
+ column-count: inherit;
+ display: inherit;
+ flex-flow: inherit;
+ flex-direction: inherit;
+ flex-wrap: inherit;
+ height: inherit;
+ left: inherit;
+ margin: 0;
+ max-height: inherit;
+ min-height: inherit;
+ padding-top: inherit !important;
+ position: inherit;
+ top: inherit;
+ width: inherit;
+ z-index: inherit;
+ }
+ @media(min-width: $screen-md) {
+ @include uw-contained-width;
+ background-color: #f7f7f7;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.13);
+ break-inside: avoid;
+ column-count: 2;
+ column-fill: balance;
+ column-gap: var(--grid-gap);
+ height: auto;
+ left: var(--size-3);
+ overflow-y: inherit;
+ padding: 0 var(--size-2) var(--size-3) var(--size-2);
+ top: 100%;
+ width: calc(100% - var(--size-12));
+ // Puts the dropdown at z-index 7
+ z-index: var(--layer-dropdown);
+ }
+ @media(min-width: $screen-lg) {
+ column-count: 3;
+ }
+ @media(min-width: $screen-xl) {
+ column-count: 4;
+ }
+ .menu__item{
+ @supports (break-inside: avoid-column) {
+ display: block;
+ }
+ .menu__subnav{
+ padding: 0;
+ }
+ a{
+ font-family: $menu-horizontal-sub-font-bold;
+ font-weight: 400;
+ padding: var(--size-1);
+ padding-right: var(--size-3);
+ .no-scroll &{
+ border-bottom: var(--size-xs) solid #e6e6e6;
+ }
+ @media(min-width: $screen-md) {
+ padding: var(--size-1) var(--size-1) var(--size-1) 0;
+ }
+ }
+ .no-scroll & {
+ &-parent{
+ border-bottom: var(--size-xs) solid #e6e6e6;
+ padding: 0;
+ a{
+ border-bottom: var(--size-xs) solid transparent;
+ }
+ }
+ .menu__item {
+ a {
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ padding-left: var(--size-2);
+ }
+ .menu__item {
+ a {
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ }
+ .menu__item {
+ a {
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ }
+ }
+ }
+ }
+ }
+ @media(min-width: $screen-md) {
+ height: auto;
+ width: 100%;
+ .menu__item{
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ margin-top: inherit;
+ max-width: inherit;
+ padding-left: var(--size-1);
+ a{
+ font-family: $menu-horizontal-sub-font;
+ padding: var(--size-05);
+ }
+ .menu__item{
+ margin-top: inherit;
+ padding-left: var(--size-1);
+ a{
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ }
+ .menu__item{
+ margin-top: inherit;
+ a{
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ }
+ }
+ }
+ }
+ }
+ &-parent{
+ padding: var(--size-05) 0 var(--size-05) 0;
+ top: 0;
+ width: 100%;
+ .menu__link-parent {
+ display: inline-block;
+ position: relative;
+ width: auto;
+ &::after {
+ @include svg-background(mobile-arrow-down);
+ background-position: center center; // LTR
+ background-repeat: no-repeat;
+ background-size: contain;
+ color: var(--uw-black);
+ content: '';
+ display: block;
+ height: var(--size-1);
+ position: absolute;
+ right: var(--size-1);
+ text-align: center;
+ top: var(--size-105);
+ transform: rotate(-90deg);
+ width: var(--size-1);
+ }
+ }
+ @media(min-width: $screen-md) {
+ column-span: all;
+ max-width: inherit !important;
+ padding: var(--size-1) 0 var(--size-1) 0;
+ .menu__link-parent {
+ font-size: var(--font-size-00);
+ margin: 0 0 var(--size-05) 0;
+ &::after {
+ right: -(var(--size-05));
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .sub-1{
+ @media(min-width: $screen-md) {
+ /* for Chrome and Edge Brave Opera */
+ break-inside: avoid;
+ /* for Firefox */
+ display: inline-grid;
+ page-break-inside: avoid;
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
new file mode 100644
index 00000000..b081ab04
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -0,0 +1,205 @@
+/**
+ * @file
+ */
+
+(function ($, Drupal) {
+ Drupal.behaviors.menuhorizontal = {
+ attach: function (context, settings) {
+ // uw-horizontal-nav.
+ $(document).ready(
+ function () {
+
+ // Have to add the run this code only once, so that multiple
+ // loads of the menu are not shown when logged in.
+ $(document, context).once('menuhorizontal').each(
+ function () {
+
+ const toggle = document.querySelector('.uw-navigation-button');
+ const navHeader = document.querySelector('.uw-header__navigation');
+ const menus = document.querySelectorAll('.menu--horizontal');
+ const items = document.querySelectorAll('.menu--item');
+
+ /* Toggle mobile menu */
+ function toggleMenu()
+ {
+
+ if (this.classList.contains('active')) {
+ this.classList.remove('active');
+ this.setAttribute('aria-expanded', 'false');
+ navHeader.classList.remove('open');
+ navHeader.classList.add('close');
+ $('html').removeClass('no-scroll');
+ }
+ else {
+ this.classList.add('active');
+ this.setAttribute('aria-expanded', 'true');
+ navHeader.classList.remove('close');
+ navHeader.classList.add('open');
+ $('html').addClass('no-scroll');
+
+ }
+
+ }
+
+ for (let menu of menus) {
+ /* Activate Submenu */
+
+ function toggleItem()
+ {
+
+ var parent = this.parentNode.parentNode.parentNode.parentNode;
+
+ var screenWidth = $(window).width();
+
+ if (this.classList.contains('submenu-active')) {
+
+ this.classList.remove('submenu-active');
+
+ if (this.hasAttribute('aria-expanded', 'true')) {
+
+ this.setAttribute('aria-expanded', 'false');
+ }
+ // If hamburger.
+ if (screenWidth <= 767) {
+ // Look at parents and reset the menus.
+ if (parent.classList.contains('uw-horizontal-nav--secondary')) {
+ $('.uw-horizontal-nav--main').css('display', 'block');
+ }
+ }
+ }
+ else if ($('.submenu-active')) {
+
+ // Get elements with .submnenu-active then close them,.
+ $('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false');
+
+ // And open this one.
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
+
+ // If hamburger.
+ if (screenWidth <= 767) {
+ // Look at parents and hide other menus if not secondary and open.
+ if (parent.classList.contains('uw-horizontal-nav--secondary')) {
+ $('.uw-horizontal-nav--main').css('display', 'none');
+ $('.uw-horizontal-nav--secondary').css('display', 'block');
+ }
+ }
+ }
+ else {
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
+ }
+ }
+
+ /* Close Submenu From Anywhere */
+ function closeSubmenu(e)
+ {
+
+ let isClickInside = menu.contains(e.target);
+
+ if (!isClickInside && menu.querySelector('.submenu-active')) {
+
+ menu.querySelector('.submenu-active').classList.remove('submenu-active');
+ }
+
+ }
+ document.addEventListener('click', closeSubmenu, FALSE);
+ }
+
+ for (let item of items) {
+ if (item.querySelector('.menu--subnav')) {
+ item.addEventListener('click', toggleItem, FALSE);
+ }
+ // Add event listeners to keyup event of enter and escape keys for the menu--items .
+ item.addEventListener(
+ 'keyup', function (e) {
+
+ if (e.key === 'Enter') {
+ this.click();
+ }
+ if (e.key === 'Escape') {
+ this.click();
+ }
+
+ // Space bar keypress to open close menu
+ // keyCode to be deprecated find way to use key.
+ }
+ );
+ item.addEventListener(
+ 'keypress', function (e) {
+ if (e.keyCode == 32) {
+ this.click();
+ e.preventDefault();
+ }
+ }
+ );
+ }
+
+ // If Toggle on page Add event listeners on the menu toggle button.
+ if (toggle) {
+ toggle.addEventListener('click', toggleMenu, FALSE);
+ }
+
+ // Apply timeout to the to event firing
+ // so it fires at end of event.
+ function debouncer(func)
+ {
+ var timeoutID,
+ timeout = 300;
+ return function () {
+ var scope = this,
+ args = arguments;
+ clearTimeout(timeoutID);
+ timeoutID = setTimeout(
+ function () {
+ func.apply(scope, Array.prototype.slice.call(args));
+ }, timeout
+ );
+ };
+ }
+
+ // Check the width of the screen and
+ // force the button click if wider that 767px.
+ function menuCheckWidth()
+ {
+ // Check if menu is on page.
+ if (navHeader) {
+
+ // Set screenWidth var.
+ var screenWidth = $(window).width();
+
+ if (screenWidth > 767) {
+ if ($('html').hasClass('no-scroll')) {
+ toggle.click();
+ $('.uw-horizontal-nav').css('display', 'block');
+ }
+ else {
+ $('.uw-header__navigation').addClass('close');
+ }
+ }
+ else {
+ if ($('.uw-header__navigation').hasClass('open')) {
+ $('.uw-header__navigation').removeClass('open');
+ $('.uw-header__navigation').addClass('close');
+ }
+ }
+ }
+ }
+
+ // Listen to event resize and apply the debouncer
+ // to the menuCheckWidth function.
+ $(window).resize(
+ debouncer(
+ function () {
+ menuCheckWidth();
+ }
+ )
+ );
+ menuCheckWidth();
+ }
+ );
+ }
+ );
+ }
+ };
+})(jQuery, Drupal);
diff --git a/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.twig b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
new file mode 100644
index 00000000..eb71ccdf
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
@@ -0,0 +1,19 @@
+<nav class="uw-horizontal-nav {% if modifier_classes %} uw-horizontal-nav--{{ modifier_classes }}{% endif %}">
+ <div class="uw-horizontal-nav--wrapper">
+ {% if include_home %}
+ <div class="uw-horizontal-nav--home">
+ <a href="{{ home_link }}" class="uw-site-home__link" title="{{ site_name }} {{ 'Home'|t }}" rel="home">
+ <div class="uw-icon uw-svg uw-svg__home">
+ {% include '@components/svg/icons/_home.svg.twig' %}
+ </div>
+ <span class="off-screen">{{ site_name }} {{ 'Home'|t }}</span>
+ </a>
+ </div>
+ {% endif %}
+ <div class="uw-horizontal-nav--menu">
+ {% include '@components/menu/menu.twig' with {
+ 'items': items
+ } %}
+ </div>
+ </div>
+</nav>
diff --git a/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.yml b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
new file mode 100644
index 00000000..567c4102
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
@@ -0,0 +1,75 @@
+---
+include_home: true
+modifier_classes: 'main'
+menu_name: 'horizontal'
+is_demo: true
+items:
+ - text: 'Link #1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 4
+ submenu:
+ - text: 'Link #1-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-3'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-4'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 0
+ - text: 'Link #3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 0
+ - text: 'Link #4'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 0
+ - text: 'Link #5'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 0
diff --git a/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss b/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss
new file mode 100644
index 00000000..41b0f924
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss
@@ -0,0 +1,66 @@
+@use '../../../01-core' as *;
+
+$menu-horizontal-bg-sm: var(--uw-white);
+
+.uw-horizontal-nav--secondary{
+ @include uw-full-width;
+ background-color: $menu-horizontal-bg-sm !important;
+ @media(min-width: $screen-md) {
+ background-color: var(--uw-white);
+ border-bottom: 3px solid var(--gray-2);
+ }
+ .uw-horizontal-nav--wrapper{
+ @include uw-contained-width;
+ display: grid;
+ padding: 0;
+ position: relative;
+ @media(min-width: $screen-md) {
+ grid-template-columns: var(--size-6) auto;
+ padding: 0 var(--size-1);
+ }
+ }
+ .uw-horizontal-nav--home{
+ display: none;
+ grid-column: none;
+ padding: 0;
+ }
+ .uw-horizontal-nav--menu {
+ @include uw-full-width;
+ .menu {
+ // ALL Menus ul>
+ .menu__item{
+ a{
+ outline: none;
+ outline-offset: unset;
+ }
+ }
+ // Top Level <ul> flex top items
+ &--horizontal {
+ @include uw-full-width;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: var(--font-systembold);
+ font-size: var(--font-size-000);
+ justify-content: flex-start;
+ text-transform: inherit;
+ width: 100%;
+ > .menu__item{
+ @media(min-width: $screen-md) {
+ width: auto;
+ }
+ a{
+ display: inline-block;
+ font-weight: inherit;
+ line-height: 1.25rem;
+ text-decoration: none;
+ &:hover{
+ background-color: var(--gray-2);
+ color: var(--uw-black);
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--secondary/menu--secondary.twig b/src/patterns/04-components/menu/menu--secondary/menu--secondary.twig
new file mode 100644
index 00000000..fc8165fe
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--secondary/menu--secondary.twig
@@ -0,0 +1,10 @@
+{% if items %}
+{% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'modifier_classes': 'secondary',
+ 'menu_name': 'horizontal',
+ 'items': items,
+ 'is_demo': true,
+ 'include_home': false,
+}%}
+
+{% endif %}
diff --git a/src/patterns/04-components/menu/menu--secondary/menu--secondary.yml b/src/patterns/04-components/menu/menu--secondary/menu--secondary.yml
new file mode 100644
index 00000000..21e89990
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--secondary/menu--secondary.yml
@@ -0,0 +1,546 @@
+---
+include_home: false
+modifier_classes: 'secondary'
+menu_name: 'horizontal'
+is_demo: true
+items:
+ - text: 'Undergraduate students '
+ url: '#Parent'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 39
+ submenu:
+ - text: 'Degree Options and Specializations'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'How to become a Psychology Student'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Prospective student'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Future course offerings'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses requiring an application'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Honours Thesis (Psych 499)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Conference opportunities '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ submenu:
+ - text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Publishing opportunities'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Course overrides'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Special Topics and Honours Seminars'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Syllabus Archive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Experiential Learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Psychology co-op'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Assistant (RA) positions'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student success'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Academic standing'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'University policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Department policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Awards '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Convocation and thesis awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Memorial Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Other research awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Distinguished Teacher Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Undergraduate Society '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'About to graduate'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Career Options'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Career advising'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'College programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Employment after Bachelors'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Employment after Masters or PhD'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate studies in Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Letters of recommendation'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Other programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Who can I ask?'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Human Resources Management program '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 10
+ submenu:
+ - text: 'Meet your lecturers'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Minor & Diploma'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Meet Our Students'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student success'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Get involved'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Alumni | Friends'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'HRM Opportunities'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate students'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 19
+ submenu:
+ - text: 'Programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Minimum admission requirements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Application procedures'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Degree requirements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Submission of the Masters Thesis'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Submission of the Masters Research Paper (MASc students)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Forming a PhD Committee'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Guideline for PhD Thesis Defense'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Submission of the PhD thesis following the defense'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Forms'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Funding & Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Careers of Alumni'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'GASP (Graduate Association of Students in Psychology)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Orientation guide'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Policies and procedures'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Showcasing graduate student research'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Teaching assistantships'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Faculty & Staff'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Alumni & Friends'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 4
+ submenu:
+ - text: 'Share your story'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Profiles & Achievements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Make a gift'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Positions available'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
diff --git a/src/patterns/04-components/menu/menu--social/_menu--social.scss b/src/patterns/04-components/menu/menu--social/_menu--social.scss
index 7615068f..8ec163d3 100644
--- a/src/patterns/04-components/menu/menu--social/_menu--social.scss
+++ b/src/patterns/04-components/menu/menu--social/_menu--social.scss
@@ -7,9 +7,9 @@
justify-content: center;
list-style-type: none;
margin: 0 auto;
- padding:0;
- text-align:center;
- width:100%;
+ padding: 0;
+ text-align: center;
+ width: 100%;
@media(min-width: $screen-xs) {
margin: 0;
max-width: inherit;
@@ -19,20 +19,20 @@
}
li {
margin: 0;
- padding:0;
+ padding: 0;
}
}
.social-media-i {
&::before{
- display:block;
- height:100%;
- width:100%;
+ display: block;
+ height: 100%;
+ width: 100%;
}
}
.social-media-link {
background-color: var(--uw-white);
border-radius: 3px;
- display:block;
+ display: block;
height: 2.125rem;
padding: 0.225rem;
position: relative;
@@ -44,7 +44,7 @@
}
&:hover,
&:focus{
- background-color:transparent;
+ background-color: transparent;
text-decoration: none;
}
}
diff --git a/src/patterns/04-components/menu/menu.twig b/src/patterns/04-components/menu/menu.twig
index cb901090..72885a74 100644
--- a/src/patterns/04-components/menu/menu.twig
+++ b/src/patterns/04-components/menu/menu.twig
@@ -1,8 +1,9 @@
{% import _self as menus %}
-{{ menus.menu_links(items, attributes, 0, menu_name) }}
+{% set menu_parent_hide = false %}
+{{ menus.menu_links(items, attributes, 0, menu_name, menu_class, item_class, link_class) }}
-{% macro menu_links(items, attributes, menu_level, menu_name) %}
+{% macro menu_links(items, attributes, menu_level, menu_name, menu_class, item_class, link_class, parent) %}
{% import _self as menus %}
{% if items %}
{% if menu_level == 0 %}
@@ -39,6 +40,10 @@
{% set link_classes = link_classes|merge(['is-active-trail']) %}
{% endif %}
+ {% if item.active %}
+ {% set link_classes = link_classes|merge(['active']) %}
+ {% endif %}
+
{% if item.is_collapsed %}
{% set item_classes = item_classes|merge(['is-collapsed']) %}
{% set link_classes = link_classes|merge(['is-collapsed']) %}
@@ -57,14 +62,81 @@
{% set link_classes = link_classes|merge(original_link_class) %}
{% endif %}
+ {# Check for submenu #}
+ {% if item.submenu %}
+
+ {# Add class for indicating the item has a submenu #}
+ {% set item_classes = item_classes|merge(['has-submenu']) %}
+
+ {# Check if we are in parent menu_level #}
+ {% if menu_level == 0 %}
+
+ {# Add the link class #}
+ {% set link_classes = link_classes|merge(['menu__link-sub']) %}
+
+ {% endif %}
+ {% if menu_level == 1 %}
+ {% set item_classes = item_classes|merge(['sub-1']) %}
+ {% endif %}
+ {% endif %}
+
{% set item_classes = item_classes|join(' ')|trim %}
{% set link_classes = link_classes|join(' ')|trim %}
+ {# Check menu level 1 and parent and not have the hide parent flag
+ Hide the Parent menu item from printing more than once
+ this is the recursive check currently 2 deep
+ #}
+ {% if menu_level == 1 and parent and not menu_parent_hide %}
+
+ {% set menu_parent_hide = true %}
+
+ <li class="menu__item menu__item-parent">
+
+ <a href="{{ parent.url }}" class="menu__link-parent">
+
+ <span class="link-text">
+ {% if parent.title %}
+ {{ parent.title }}
+ {% elseif parent.text %}
+ {{ parent.text }}
+ {% endif %}
+ </span>
+
+ </a>
+
+ </li>
+ {% endif %}
+
<li class="{{ item_classes }}" {{ item.attributes ? item.attributes|without('class') }}>
- <a class="{{ link_classes }}" href="{{ item.url }}">{{ item.title }}</a>
+ <a class="{{ link_classes }}"
+ {% if item.submenu and menu_level == 0 %}
+ tabindex="0"
+ aria-haspopup="true"
+ role="button"
+ {% elseif item.submenu %}
+ href="{{ item.url }}"
+ {% else %}
+ href="{{ item.url }}"
+ {% endif %}
+ >
+ <span class="link-text">
+ {% if item.title %}
+ {{ item.title }}
+ {% elseif item.text %}
+ {{ item.text }}
+ {% endif %}
+ </span>
+ </a>
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+ {% elseif item.submenu %}
+ {% if menu_level == 0 %}
+ {{ menus.menu_links(item.submenu, attributes, menu_level + 1, '', '', '', '', item) }}
+ {% else %}
+ {{ menus.menu_links(item.submenu, attributes, menu_level + 1) }}
+ {% endif %}
{% endif %}
</li>
diff --git a/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss b/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
new file mode 100644
index 00000000..1978048c
--- /dev/null
+++ b/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
@@ -0,0 +1,86 @@
+// @file
+// Styles for the mobile menu buttons.
+
+@use '../../01-core' as *;
+
+.uw-navigation-button{
+ @include focus();
+ background-color: transparent;
+ border-radius: inherit;
+ color: var(--gray-6);
+ cursor: pointer;
+ display: block;
+ @media(min-width: $screen-md) {
+ display: none;
+ }
+ font-family: var(--font-book);
+ font-size: var(--font-size-00000);
+ font-weight: 400;
+ height: 2.98125rem;
+ letter-spacing: 0;
+ margin: inherit;
+ margin-bottom: 0;
+ max-width: inherit;
+ padding: 0;
+ padding-top: var(--size-2);
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ user-select: none;
+ vertical-align: inherit;
+ white-space: nowrap;
+ width: 100%;
+ &:hover,
+ &:focus {
+ border: 0;
+ outline: none !important;
+ }
+ &:active {
+ outline: none !important;
+ }
+ &[disabled] {
+ cursor: default;
+ pointer-events: none;
+ }
+ &[aria-expanded='true'] > .uw-navigation-button__lines{
+ background-color: transparent;
+ transition: background-color, opacity 0s;
+ width: var(--size-3);
+ }
+ > .uw-navigation-button__lines {
+ background-color: gesso-grayscale(gray-5);
+ display: block;
+ font-size: 0;
+ height: var(--size-sm);
+ left: 50%;
+ margin-left: -(var(--size-105));
+ position: absolute;
+ top: 28%;
+ transition: background-color 0.3s;
+ user-select: none;
+ width: var(--size-3);
+ &::before,
+ &::after{
+ background: var(--gray-5);
+ content: '';
+ height: 100%;
+ left: 0;
+ position: absolute;
+ transition: transform 0.3s;
+ width: 100%;
+ }
+ &::before{
+ transform: translateY(-250%);
+ }
+ &::after{
+ transform: translateY(250%);
+ }
+ }
+ &[aria-expanded='true'] > .uw-navigation-button__lines::before{
+ transform: translateY(0) rotate(45deg);
+ }
+ &[aria-expanded='true'] > .uw-navigation-button__lines::after{
+ transform: translateY(0) rotate(-45deg);
+ }
+}
diff --git a/src/patterns/04-components/mobile-menu/_mobile-menu.scss b/src/patterns/04-components/mobile-menu/_mobile-menu.scss
new file mode 100644
index 00000000..4107a2be
--- /dev/null
+++ b/src/patterns/04-components/mobile-menu/_mobile-menu.scss
@@ -0,0 +1,161 @@
+//// @file
+//// Styles for the mobile menu.
+
+@use '../../01-core' as *;
+
+
+//$mobile-menu-fallback-bg-color: gesso-color(ui, generic, background-light) !default;
+//$mobile-menu-bg-color: rgba(gesso-color(ui, generic, background-light), 0.98) !default;
+//$mobile-menu-link-color: gesso-color(ui, generic, text-dark) !default;
+//$mobile-menu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
+//$mobile-menu-submenu-fallback-bg-color: gesso-color(ui, generic, background-lighter) !default;
+//$mobile-menu-submenu-bg-color: rgba(gesso-color(ui, generic, background-lighter), 0.98) !default;
+//$mobile-menu-submenu-link-color: gesso-color(ui, generic, text-dark) !default;
+//$mobile-menu-submenu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
+//$mobile-menu-button-height: 54px;
+//$mobile-menu-button-width: 44px;
+//$mobile-menu-font-size: gesso-font-size(2);
+//$mobile-menu-line-height: gesso-line-height(base);
+//
+//.mobile-menu {
+// background-color: $mobile-menu-fallback-bg-color;
+// background-color: $mobile-menu-bg-color;
+// left: 0;
+// overflow-y: auto;
+// position: fixed;
+// top: 0;
+// width: 100%;
+// z-index: 999999;
+//}
+//
+//.mobile-menu__menu {
+// @include list-clean;
+// margin: 0.75em 0 0;
+//}
+//
+//.mobile-menu__item {
+// margin: 0;
+// padding: 0;
+// position: relative;
+//}
+//
+//.mobile-menu__link {
+// background-color: transparent;
+// border: 0;
+// color: $mobile-menu-link-color;
+// display: block;
+// font-family: gesso-font-family(system);
+// font-size: rem($mobile-menu-font-size);
+// font-weight: gesso-font-weight(bold);
+// line-height: $mobile-menu-line-height;
+// margin: 0;
+// padding: rem(($mobile-menu-button-height - ($mobile-menu-font-size * $mobile-menu-line-height)) / 2) rem(gesso-spacing(sm));
+// text-align: left;
+// text-decoration: none;
+// white-space: normal;
+// width: auto;
+// z-index: 3;
+//
+// &:hover,
+// &:focus,
+// &:active,
+// &.is-active {
+// color: $mobile-menu-link-hover-color;
+// }
+//
+// &.has-subnav {
+// margin-right: $mobile-menu-button-width;
+// }
+//}
+//
+//.mobile-menu__subnav-arrow {
+// @include focus();
+// @include image-replace($mobile-menu-button-width, $mobile-menu-button-height);
+// @include svg-background-inline(mobile-arrow-down);
+// background-attachment: initial;
+// background-color: initial;
+// background-position: 50%;
+// background-repeat: no-repeat;
+// background-size: 19px 12px;
+// border: 0;
+// box-shadow: none;
+// cursor: pointer;
+// display: inline-block;
+// outline-offset: 0;
+// position: absolute;
+// right: 0;
+// top: 0;
+// vertical-align: top;
+// z-index: 2;
+//
+// @if $support-for-rtl {
+// [dir='rtl'] & {
+// left: 0;
+// right: auto;
+// }
+// }
+//
+// &[aria-expanded="true"] {
+// @include svg-background-inline(mobile-arrow-up);
+// }
+//}
+//
+//.mobile-menu__subnav {
+// background-color: $mobile-menu-submenu-fallback-bg-color;
+// background-color: $mobile-menu-submenu-bg-color;
+// display: none;
+// list-style: none;
+// margin: 0;
+// padding: 0;
+//
+// .mobile-menu__link {
+// color: $mobile-menu-submenu-link-color;
+// padding-left: gesso-spacing(md);
+//
+// &:hover,
+// &:focus,
+// &:active {
+// color: $mobile-menu-submenu-link-hover-color;
+// }
+// }
+//}
+
+.uw-header__navigation{
+ display: none;
+ &.close{
+ display: none;
+ }
+ &.open{
+ background-color: var(--gray-2);
+ display: block;
+ // Minus height of header
+ height: calc(100vh - 7rem);
+ }
+ @media(min-width: $screen-md) {
+ display: block !important;
+ &.open{
+ display: block !important;
+ height: auto;
+ }
+ }
+}
+.no-scroll{
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ position: fixed;
+ right: 0;
+ top: 0;
+ .uw-header__navigation{
+ &.open{
+ background: #f7f7f7;
+ display: block;
+ overflow: auto;
+ }
+ @media(min-width: $screen-md) {
+ &.open{
+ display: block !important;
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/site-logo/_site-logo.scss b/src/patterns/04-components/site-logo/_site-logo.scss
new file mode 100644
index 00000000..d85aa521
--- /dev/null
+++ b/src/patterns/04-components/site-logo/_site-logo.scss
@@ -0,0 +1,26 @@
+// @file
+// Styles for Site logo.
+@use '../../01-core' as *;
+
+.uw-site-logo {
+ .uw-site-logo__link {
+ @include svg-background(uwaterloo-logo);
+ background-color: var(--uw-black);
+ background-size: contain;
+ color: var(--uw-white);
+ display: block;
+ height: var(--size-5);
+ outline: var(--size-xs) solid transparent;
+ text-align: center;
+ text-indent: -999rem;
+ width: 8rem;
+ @media(min-width: $screen-xs) {
+ height: 2.5rem;
+ width: 10.6rem;
+ }
+ &:hover,
+ &:focus {
+ outline: 1px solid var(--uw-white);
+ }
+ }
+}
diff --git a/src/patterns/04-components/site-logo/site-logo.twig b/src/patterns/04-components/site-logo/site-logo.twig
new file mode 100644
index 00000000..e95703f2
--- /dev/null
+++ b/src/patterns/04-components/site-logo/site-logo.twig
@@ -0,0 +1,5 @@
+<div class="uw-site-logo">
+ {% if branding_level != 'generic_barebones' %}
+ <a class="uw-site-logo__link" href="https://uwaterloo.ca" title="{{ 'University of Waterloo Home'|t }}" aria-label="{{ 'University of Waterloo Home'|t }}" rel="home"></a>
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss b/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
index 0819d71a..09eec393 100644
--- a/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
+++ b/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
@@ -7,7 +7,7 @@ $social-accounts: 'facebook', 'twitter', 'youtube', 'instagram', 'linkedin', 'sn
height: 100%;
width: 100%;
&::before{
- content:'';
+ content: '';
}
}
}
diff --git a/src/patterns/04-components/tag/_tag.scss b/src/patterns/04-components/tag/_tag.scss
index 457a9b82..1be9bb5c 100644
--- a/src/patterns/04-components/tag/_tag.scss
+++ b/src/patterns/04-components/tag/_tag.scss
@@ -12,8 +12,8 @@ $tag-font-size-small: var(--font-size-0000) !default;
.tag {
@include link-no-underline(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--uw-black-primary),
+ var(--uw-black-primary)
);
background: none;
display: inline-block;
@@ -22,7 +22,7 @@ $tag-font-size-small: var(--font-size-0000) !default;
padding: 0;
text-decoration: none;
text-transform: uppercase;
- transition:background 300ms ease-in;
+ transition: background 300ms ease-in;
&.token{
text-transform: inherit;
}
@@ -33,11 +33,18 @@ $tag-font-size-small: var(--font-size-0000) !default;
&--normal{
font-family: $tag-font-family-normal;
font-size: $tag-font-size-normal;
+ a{
+ font-family: $tag-font-family-normal;
+ font-size: $tag-font-size-normal;
+ }
}
&--small{
font-family: $tag-font-family-small;
font-size: $tag-font-size-small;
-
+ a {
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+ }
}
&--full{
background: var(--uw-gold-3);
@@ -51,52 +58,6 @@ $tag-font-size-small: var(--font-size-0000) !default;
color: var(--uw-gold-3);
text-decoration: none;
}
- }
- &--simple{
- @include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
- );
- font-family: $tag-font-family-normal;
- }
-
-
-
-
-
- a{
- @include link-no-underline(
- var(--uw-black-primary),
- var(--uw-black-primary)
- );
- background:none;
- display: inline-block;
- font-size: $tag-font-size-normal;
- margin: 0 0 var(--size-1) 0;
- padding:0;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- transition:background 300ms ease;
-
- &:hover,
- &:focus {
-
- }
- }
- &--normal{
- a{
- font-family: $tag-font-family-normal;
- font-size: $tag-font-size-normal;
- }
- }
- &--small{
- a {
- font-family: $tag-font-family-small;
- font-size: $tag-font-size-small;
- }
- }
- &--full{
a {
background: var(--uw-gold-3);
color: var(--uw-black-primary);
@@ -112,15 +73,36 @@ $tag-font-size-small: var(--font-size-0000) !default;
}
}
}
- &--simple {
+ &--simple{
+ @include link-reverse(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ font-family: $tag-font-family-normal;
a {
@include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--uw-black-primary),
+ var(--uw-black-primary)
);
font-family: $tag-font-family-normal;
}
}
+
+ a{
+ @include link-no-underline(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ background: none;
+ display: inline-block;
+ font-size: $tag-font-size-normal;
+ margin: 0 0 var(--size-1) 0;
+ padding: 0;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition: background 300ms ease;
+ }
}
@each $faculty in $faculties {
@@ -134,7 +116,6 @@ $tag-font-size-small: var(--font-size-0000) !default;
background-color: var(--uw-gold-3);
color: var(--uw-black-primary);
}
-
}
//@else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc{
// background-color:gesso-brand($faculty,'primary');
diff --git a/src/patterns/04-components/territorial-statement/_territorial-statement.scss b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
index 6f5dee1e..883758d5 100644
--- a/src/patterns/04-components/territorial-statement/_territorial-statement.scss
+++ b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
@@ -1,20 +1,20 @@
@use '../../01-core' as *;
.uw-bg--black{
- background-color:gesso-brand(org-default,uw-black,lvl4);
+ background-color: var(--uw-black);
}
.uw-bg--white{
- background-color:gesso-brand(org-default,uw-white,lvl1);
+ background-color: var(--uw-white);
}
.uw-territorial{
- text-align:center;
+ text-align: center;
p{
color: var(--uw-white);
font-family: var(--font-system);
font-size: var(--font-size-000);
- font-weight:200;
- letter-spacing:0.5px;
- line-height:1.7;
+ font-weight: 200;
+ letter-spacing: 0.5px;
+ line-height: 1.7;
padding: var(--size-2) 0;
.uw-bg--black &{
color: var(--uw-white);
@@ -24,9 +24,9 @@
}
}
@media(min-width: $screen-md) {
- text-align:left;
+ text-align: left;
p{
- line-height:1.5;
+ line-height: 1.5;
}
}
}
--
GitLab