diff --git a/source/_patterns/01-global/01-colors-bars/_color-bar.twig b/source/_patterns/01-global/01-colors-bars/_color-bar.twig
deleted file mode 100644
index 4c5eca49f0c29f2ac15fd7b0358998e8bbc17837..0000000000000000000000000000000000000000
--- a/source/_patterns/01-global/01-colors-bars/_color-bar.twig
+++ /dev/null
@@ -1,10 +0,0 @@
-{% set lvls = 4 %}
-<div id="color-bar" class="uw_site--colors">
- <div class="uw-section--innner">
- <div class="uw-site--cbar">
- {% for lvl in range(1,lvls) %}
- <div class="uw-colors--lvl{{ lvl }}--background uw-cbar"></div>
- {% endfor %}
- </div>
- </div>
-</div>
diff --git a/source/_patterns/01-global/01-colors-bars/_colors-bars.scss b/source/_patterns/01-global/01-colors-bars/_colors-bars.scss
deleted file mode 100755
index e79412afd980a266cdff03f239f6994e43226425..0000000000000000000000000000000000000000
--- a/source/_patterns/01-global/01-colors-bars/_colors-bars.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import "../00-colors/colors.scss";
-
-// Classes attached to the body or header that color bars colors.
-$different-color-bars: (
- default: $uw-colors-uw-golds-hex,
- fac-ahs: $uw-colors-fac-ahs-hex,
- fac-art: $uw-colors-fac-art-hex,
- fac-eng: $uw-colors-fac-eng-hex,
- fac-env: $uw-colors-fac-env-hex,
- fac-mat: $uw-colors-fac-mat-hex,
- fac-sci: $uw-colors-fac-sci-hex,
- sch: $uw-colors-school-hex,
-);
-
-// All the colors are for the bars are already generated in base-colors
-// The only one that is not, is when there is no class.
-@each $ckey, $hex in $uw-colors-uw-golds-hex {
- header.default .uw-colors--#{$ckey}--background {
- background: $hex;
- }
-
- header.default .uw-colors--#{$ckey}--foreground {
- color: $hex;
- }
-}
-
-.uw-site--colours {
- margin-left: auto;
- margin-right: auto;
- max-width: 100%;
-}
-
-.uw-site--cbar {
- display: flex;
- flex-direction: row wrap;
- justify-content: flex-start;
- width: 100%;
-}
-
-@media screen and (min-width: 1rem) {
- .uw-cbar {
- height: 0.625rem;
- }
-}
-
-@media screen and (min-width: 40.0625rem) {
- .uw-cbar {
- height: 0.875rem;
- }
-}
-
-@media screen and (min-width: 48.0625rem) {
- .uw-cbar {
- height: 1rem;
- }
-}
-
-@media screen and (min-width: 63.1875rem) {
- .uw-cbar {
- height: 1.125rem;
- }
-}
-
-.uw-cbar {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin: 0;
- padding: 0;
-}
diff --git a/source/_patterns/01-global/01-colors-bars/colors-bars.twig b/source/_patterns/01-global/01-colors-bars/colors-bars.twig
deleted file mode 100755
index a4ea3f7a83e612d052df047761f00754c830455d..0000000000000000000000000000000000000000
--- a/source/_patterns/01-global/01-colors-bars/colors-bars.twig
+++ /dev/null
@@ -1,36 +0,0 @@
-{% set lvl = 0 %}
-{% set cbar_num = 0 %}
-{% for group in items.groups %}
- <h1> {{ group.name }}</h1>
- {% if (group.sub_groups) %}
- {% for sub_group in group.sub_groups %}
- <h2>{{ sub_group.name }}</h2>
- <div id="color-bar{{ cbar_num }}" class="uw_site--colors">
- <div class="uw-cbar" style="background: black"></div>
- <div class="uw-section--innner">
- <div class="uw-site--cbar">
- {% set lvl = 0 %}
- {% for hex in sub_group.colors %}
- {% set lvl = lvl + 1 %}
- <div class="uw-colors--lvl{{ lvl }} uw-cbar" style="background: {{ hex }}"></div>
- {% endfor %}
- </div>
- </div>
- </div>
- {% endfor %}
- {% else %}
- <div id="color-bar{{ cbar_num }}" class="uw_site--colors">
- <div class="uw-cbar" style="background: black"></div>
- <div class="uw-section--innner">
- <div class="uw-site--cbar">
- {% set lvl = 0 %}
- {% for hex in group.colors %}
- {% set lvl = lvl + 1 %}
- <div class="uw-colors--lvl{{ lvl }} uw-cbar" style="background: {{ hex }}"></div>
- {% endfor %}
- </div>
- </div>
- </div>
-
- {% endif %}
-{% endfor %}
diff --git a/source/_patterns/01-global/01-colors-bars/colors-bars.yml b/source/_patterns/01-global/01-colors-bars/colors-bars.yml
deleted file mode 100755
index 73cb2fd1826cabd3bbfca2a567b77073d650a79c..0000000000000000000000000000000000000000
--- a/source/_patterns/01-global/01-colors-bars/colors-bars.yml
+++ /dev/null
@@ -1,70 +0,0 @@
-items:
- groups:
- -
- name: "University of Waterloo"
- abbv: uw
- colors:
- - '#ffffaa'
- - '#ffea3d'
- - '#ffd54f'
- - '#e4b429'
- -
- name: "Faculties"
- abbv: fac
- sub_groups:
- -
- name: "Faculty of Arts"
- abbv: art
- colors:
- - '#ffd5a5'
- - '#fbaf00'
- - '#e78100'
- - '#d93f00'
- -
- name: "Faculty of Applied Health Sciences"
- abbv: ahs
- colors:
- - '#97dfef'
- - '#00bed0'
- - '#0098a5'
- - '#005963'
- -
- name: "Faculty of Engineering"
- abbv: eng
- colors:
- - '#d0b4ef'
- - '#be33da'
- - '#8100b4'
- - '#57058b'
- -
- name: "Faculty of Environment"
- abbv: env
- colors:
- - '#daf582'
- - '#bed500'
- - '#b4be00'
- - '#607000'
- -
- name: "Faculty of Math"
- abbv: mat
- colors:
- - '#ffbeef'
- - '#ff63aa'
- - '#df2498'
- - '#c60078'
- -
- name: "Faculty of Science"
- abbv: sci
- colors:
- - '#b4d5ff'
- - '#63a0ff'
- - '#0073ce'
- - '#0033be'
- -
- name: "Schools and Satellite Campuses"
- abbv: sch
- colors:
- - '#ffA5aa'
- - '#e41740'
- - '#b71233'
- - '#80001f'
diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss
index 73351870c7dddf71e413ea0ea22831bc118b4e5a..a4e70e44f5b3e14c38343b60af5a43a63e63f9b4 100644
--- a/source/_patterns/03-layouts/header/_header.scss
+++ b/source/_patterns/03-layouts/header/_header.scss
@@ -8,27 +8,42 @@
&__wrapper {
display: grid;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- grid-template-columns: 25% 75%;
+ grid-template-columns: auto 12.5rem 50.5rem auto;
margin-left: auto;
margin-right: auto;
- max-width: 63.125rem;
- padding: 0.5rem 0;
+ padding: 1rem 0 0;
position: relative;
.uw-site-logo {
- grid-column: 1 / 2;
+ grid-column: 2 / 3;
grid-row: 1 / 2;
+ padding: 1rem 0;
}
.uw-header-menu {
- grid-column: 2 / 3;
+ grid-column: 3 / 4;
grid-row: 1 / 2;
padding-top: 1.2rem;
}
- .menu--main {
- grid-column: 1 / 3;
+ .uw-colour-bar {
+ grid-column: 1 / 5;
grid-row: 2 / 3;
+ padding-top: 1rem;
+ }
+
+ .uw-main-nav {
+ grid-column: 1 / 5;
+ grid-row: 3 / 4;
+ }
+
+ .messages-list {
+ background-color: $uw-white;
+ grid-column: 1 / 5;
+ grid-row: 4 / 5;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0 1rem;
}
}
}
diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig
index 2d862a1d68f31b4216c5be5c08e96f8a94bf1284..4e84c78e573e1fd9e8125627029e63913f2635ed 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -1,15 +1,20 @@
-{% set additional_attributes = {
- 'class': classes,
-} %}
+{% set faculty = faculty ? faculty : 'org-default' %}
-<header {{ add_attributes(additional_attributes) }} role="banner">
- <div class="uw-header__wrapper">
- {% include "@components/site-logo/site-logo.twig"%}
- {% block content %}
- {% include "@components/menu/menu--header/menu--header.twig" with {
- 'items': items
- } %}
- {% endblock %}
- </div>
- {% include "@global/01-colors-bars/_color-bar.twig" %}
+<header class="uw-header" role="banner">
+ <div class="uw-header__wrapper">
+ {% include '@components/site-logo/site-logo.twig' %}
+ {% block content %}
+ {% include "@components/menu/menu--header/menu--header.twig" with {
+ 'menu_name': 'uw-header',
+ 'items': items
+ } %}
+ {% include "@components/menu/menu--main/menu--main.twig" with {
+ 'menu_name': 'main',
+ 'items': nav_items
+ } %}
+ {% endblock %}
+ {% include '@components/color-bar/color-bar.twig' with {
+ 'faculty': faculty
+ }%}
+ </div>
</header>
diff --git a/source/_patterns/03-layouts/header/header.yml b/source/_patterns/03-layouts/header/header.yml
index c57dc16e78fac26fcfb7eae3a7cbb5fb1f66cb52..0043dbf5138df5e1e3683667d0689c0a5bde128a 100644
--- a/source/_patterns/03-layouts/header/header.yml
+++ b/source/_patterns/03-layouts/header/header.yml
@@ -36,24 +36,21 @@ items:
attributes:
class: ''
in_active_trail: false
-classes:
- - 'uw-header'
- - 'default'
-main_menu:
+nav_items:
- text: 'Home'
url: '/front'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
- - text: 'Link #1'
+ active_trail: false
+ - text: 'This is a long menu link'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
submenu:
- text: 'Link #1-1'
url: '/front'
@@ -61,35 +58,64 @@ main_menu:
options:
attributes:
class: ''
- in_active_trail: false
- - text: 'Link #1-2'
+ active_trail: false
+ - text: 'This is an even longer menu link'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Link #1-2-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Link #1-2-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Link #1-2-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Link #1-3'
url: '/front'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
- text: 'Link #2'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
- text: 'Link #3'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
- text: 'Link #4'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: true
submenu:
- text: 'Link #4-1'
url: '/front'
@@ -97,32 +123,76 @@ main_menu:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: true
- text: 'Link #4-2'
url: '/front'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
- text: 'Link #5'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
- text: 'Link #6'
url: 'https://uwaterloo.ca/'
original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Link #6-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Link #6-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Link #6-2-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Link #6-2-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Link #6-2-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Link #6-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
- text: 'Link #7'
url: 'https://uwaterloo.ca/'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
diff --git a/source/_patterns/03-layouts/navigation/_navigation.scss b/source/_patterns/03-layouts/navigation/_navigation.scss
deleted file mode 100644
index 5790434cecbe22a3697c8d54eacdb1ffe5f3335d..0000000000000000000000000000000000000000
--- a/source/_patterns/03-layouts/navigation/_navigation.scss
+++ /dev/null
@@ -1,307 +0,0 @@
-@each $gkey, $group in $colors {
- @if $gkey == fac {
- @each $sgkey, $sub_group in $group {
- .#{$sgkey} {
- @each $key, $value in $sub_group {
- @if $key == lvl1 {
- .uw-main-nav {
- &__home {
- &:hover {
- svg {
- fill: #{$value};
- }
- }
- }
- &__more {
- &:hover {
- svg {
- fill: #{$value};
- }
- }
- }
- }
-
- .menu--main {
- > .is-active-trail {
- border-top: 4px solid #{$value};
-
- &.has-submenu {
- &::after {
- border-top: 4px solid #{$value};
- }
- }
- }
-
- .has-submenu {
- &:hover {
- &::after {
- border-top: 4px solid #{$value};
- }
- }
- }
-
- .has-children {
- &:hover {
- &::after {
- border-left: 4px solid #{$value};
- }
- }
- }
-
- li {
- &:hover > a {
- color: #{$value};
- }
-
- ul {
- border-top: 4px solid #{$value};
- }
-
- ul {
- .is-active-trail {
- color: #{$value};
- }
-
- li {
- ul {
- border-left: 4px solid #{$value};
-
- &::before {
- border-right: 5px solid #{$value};
- }
- }
- }
- }
-
- .is-active-trail {
- color: #{$value};
- }
- }
- }
- }
- }
- }
- }
- }
-}
-
-.uw-main-nav {
- background-color: $uw-black;
- display: block;
- width: 100%;
-
- &__wrapper {
- display: grid;
- grid-template-columns: 25px auto 40px;
- margin-left: auto;
- margin-right: auto;
- max-width: 63rem;
- }
-
- &__home {
- background-color: $uw-black;
- grid-column: 1 / 2;
-
- &:hover {
- background-color: $uw-black;
-
- svg {
- fill: $uw-gold;
- }
- }
-
- a {
- display: flex;
- height: 100%;
-
- svg {
- fill: $uw-white;
- margin: auto;
- }
- }
- }
-
- &__navigation {
- grid-column: 2 / 3;
- }
-
- &__more {
- grid-column: 3 / 4;
-
- &:hover {
- ul {
- display: block;
- }
-
- svg {
- fill: $uw-gold;
- }
- }
-
- &--icon {
- height: 100%;
- position: relative;
-
- svg {
- fill: $uw-white;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- position: absolute;
- top: 25%;
- }
- }
-
- ul {
- display: none;
- }
- }
-}
-
-.menu--main {
- background: $uw-black;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- display: flex;
- list-style: none;
- margin: 0;
- padding: 0;
-
- > .is-active-trail {
- border: 0;
- border-top: 4px solid $uw-gold;
- position: relative;
-
- &.has-submenu {
- &::after {
- border-top: 4px solid $uw-gold;
- }
- }
- }
-
- .has-submenu {
- &::after {
- border: 0;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid $uw-white;
- content: '';
- display: initial;
- height: 0;
- position: absolute;
- right: 2px;
- top: 45%;
- width: 0;
- }
-
- &:hover {
- &::after {
- border-top: 4px solid $uw-gold;
- }
- }
- }
-
- .has-children {
- &::after {
- border-bottom: 4px solid transparent;
- border-left: 4px solid $uw-white;
- border-top: 4px solid transparent;
- content: '';
- display: initial;
- height: 0;
- position: absolute;
- right: 2px;
- top: 40%;
- width: 0;
- }
-
- &:hover {
- &::after {
- border-left: 4px solid $uw-gold;
- }
- }
- }
-
- li {
- flex: 1 auto;
- float: left;
- max-width: 200px;
- position: relative;
-
- &:hover > a {
- color: $uw-gold;
- }
-
- &:hover > ul,
- li ul li:hover > ul {
- display: block;
- opacity: 1;
- visibility: visible;
- }
-
- ul,
- ul li ul {
- background: $uw-black;
- border-top: 4px solid $uw-gold;
- height: auto;
- margin: 0;
- min-width: 200px;
- opacity: 0;
- padding: 0;
- position: absolute;
- visibility: hidden;
- z-index: 1000;
- }
-
- ul li ul {
- border: 0;
- border-top: 0;
- }
-
- ul {
-
- li {
- float: none;
-
- &:hover > ul {
- left: 200px;
- top: 0;
- }
-
- a {
- border: 0;
- padding: 10px;
- }
-
- ul {
- border: 0;
- border-left: 4px solid $uw-gold;
- left: 230px;
- top: 0;
- }
- }
-
- .is-active-trail {
- color: $uw-gold;
- }
- }
-
- a {
- color: $uw-white;
- display: flex;
- height: 100%;
- padding: 0.5rem 1rem;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
-
- .link-text {
- margin: auto;
- }
- }
-
- .is-active-trail {
- color: $uw-gold;
- }
- }
-}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/navigation/navigation.twig b/source/_patterns/03-layouts/navigation/navigation.twig
deleted file mode 100644
index 845ab4952775f65d2a389c3c51477bf2984b4856..0000000000000000000000000000000000000000
--- a/source/_patterns/03-layouts/navigation/navigation.twig
+++ /dev/null
@@ -1,37 +0,0 @@
-<nav class="uw-main-nav">
- <div class="uw-main-nav__wrapper">
- <div class="uw-main-nav__home">
- <a href="/home" class="uw-site-home__link">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
- <span class="off-screen">Home</span>
- </a>
- </div>
- <div class="uw-main-nav__links">
- {% if items|length > 5 %}
- {% set main_links = items|slice(1, 5) %}
- {% else %}
- {% set main_links = items %}
- {% endif %}
- {% include '@components/menu/menu.twig' with {
- 'menu_name': 'main',
- 'items': main_links
- } %}
- </div>
- {% if items|length > 5 %}
- <div class="uw-main-nav__more">
- <div class="uw-main-nav__more--icon">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 992 992">
- <circle cx="144.3" cy="496" r="144.3"/>
- <circle cx="496" cy="496" r="144.3"/>
- <circle cx="847.7" cy="496" r="144.3"/>
- </svg>
- </div>
- {% set more_links = items|slice(6, item.length) %}
- {% include '@components/menu/menu.twig' with {
- 'menu_name': 'main-more',
- 'items': more_links
- } %}
- </div>
- {% endif %}
- </div>
-</nav>
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/navigation/navigation.yml b/source/_patterns/03-layouts/navigation/navigation.yml
deleted file mode 100644
index bef39370fc46ff1adac15f91e63867dc15d99aad..0000000000000000000000000000000000000000
--- a/source/_patterns/03-layouts/navigation/navigation.yml
+++ /dev/null
@@ -1,160 +0,0 @@
-items:
- - text: 'Home'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'This is a long menu link'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- submenu:
- - text: 'Link #1-1'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'This is an even longer menu link'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- submenu:
- - text: 'Link #1-2-1'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #1-2-2'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #1-2-3'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #1-3'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #2'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #3'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #4'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: true
- submenu:
- - text: 'Link #4-1'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: true
- - text: 'Link #4-2'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #5'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #6'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- submenu:
- - text: 'Link #6-1'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #6-2'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- submenu:
- - text: 'Link #6-2-1'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #6-2-2'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #6-2-3'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #6-3'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
- - text: 'Link #7'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
\ No newline at end of file
diff --git a/source/_patterns/04-components/color-bar/_color-bar.scss b/source/_patterns/04-components/color-bar/_color-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..102a7e7279f7fa556633e9e2c3286e142e18774a
--- /dev/null
+++ b/source/_patterns/04-components/color-bar/_color-bar.scss
@@ -0,0 +1,53 @@
+$defaults: 'uw-gold';
+$faculties: 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
+$lvls: 'lvl1', 'lvl2', 'lvl3', 'lvl4';
+
+@each $default in $defaults {
+ @each $lvl in $lvls {
+ .uw-colour-bar__cbar {
+ &org-default__#{$default}--#{$lvl} {
+ background-color: gesso-brand('org-default', $default, $lvl);
+ }
+ }
+ }
+}
+
+@each $faculty in $faculties {
+ @each $lvl in $lvls {
+ .uw-colour-bar__cbar {
+ &#{$faculty}--#{$lvl} {
+ background-color: gesso-brand($faculty, $lvl);
+ }
+ }
+ }
+}
+
+.uw-colour-bar__cbars {
+ display: flex;
+ flex-direction: row wrap;
+ justify-content: flex-start;
+ width: 100%;
+}
+
+.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 {
+ height: 0.875rem;
+ }
+
+ @include large {
+ height: 1rem;
+ }
+
+ @include xl {
+ height: 1.125rem;
+ }
+}
diff --git a/source/_patterns/04-components/color-bar/color-bar.md b/source/_patterns/04-components/color-bar/color-bar.md
new file mode 100644
index 0000000000000000000000000000000000000000..acb9314d81e332b2e8a1197bcd8764fccef33ed3
--- /dev/null
+++ b/source/_patterns/04-components/color-bar/color-bar.md
@@ -0,0 +1,7 @@
+---
+el: .colour-bar
+title: Colour bar
+---
+
+__Variables:__
+* faculty: [string] The faculty of the colour bar (chooses the colour)
diff --git a/source/_patterns/04-components/color-bar/color-bar.twig b/source/_patterns/04-components/color-bar/color-bar.twig
new file mode 100644
index 0000000000000000000000000000000000000000..87b30b6b873c9fdc62f362e7d9234e6e8e0e70fa
--- /dev/null
+++ b/source/_patterns/04-components/color-bar/color-bar.twig
@@ -0,0 +1,14 @@
+{% set lvls = 4 %}
+<div class="uw-colour-bar">
+ <div class="uw-colour-bar__wrapper">
+ <div class="uw-colour-bar__cbars">
+ {% for lvl in range(1,lvls) %}
+ {% if faculty == 'org-default' %}
+ <div class="uw-colour-bar__cbar org-default__uw-gold--lvl{{ lvl }}"></div>
+ {% else %}
+ <div class="uw-colour-bar__cbar {{ faculty }}--lvl{{ lvl }}"></div>
+ {% endif %}
+ {% endfor %}
+ </div>
+ </div>
+</div>
diff --git a/source/_patterns/04-components/color-bar/color-bar.yml b/source/_patterns/04-components/color-bar/color-bar.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d30847aae26624b4a72b642a3a56a0c91bf90f57
--- /dev/null
+++ b/source/_patterns/04-components/color-bar/color-bar.yml
@@ -0,0 +1 @@
+faculty: 'org-ahs'
diff --git a/source/_patterns/04-components/menu/menu--main/_menu--main.scss b/source/_patterns/04-components/menu/menu--main/_menu--main.scss
index f095b4e067a72b73287be3242574e913011199a6..925d03201e0977a89cf17bc592c252ce690952dc 100644
--- a/source/_patterns/04-components/menu/menu--main/_menu--main.scss
+++ b/source/_patterns/04-components/menu/menu--main/_menu--main.scss
@@ -1,85 +1,80 @@
-@each $gkey, $group in $colors {
- @if $gkey == fac {
- @each $sgkey, $sub_group in $group {
- .#{$sgkey} {
- @each $key, $value in $sub_group {
- @if $key == lvl1 {
- .uw-main-nav {
- &__home {
- &:hover {
- svg {
- fill: #{$value};
- }
- }
- }
- &__more {
- &:hover {
- svg {
- fill: #{$value};
- }
- }
- }
- }
+$faculties: 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
+$lvl: 'lvl1';
+
+@each $faculty in $faculties {
+ .#{$faculty} {
+ .uw-main-nav {
+ &__home {
+ &:hover {
+ svg {
+ fill: gesso-brand($faculty, $lvl);
+ }
+ }
+ }
+ &__more {
+ &:hover {
+ svg {
+ fill: gesso-brand($faculty, $lvl);
+ }
+ }
+ }
+ }
- .menu--main {
- > .is-active-trail {
- border-top: 4px solid #{$value};
+ .menu--main {
+ > .is-active-trail {
+ border-top: 4px solid gesso-brand($faculty, $lvl);
- &.has-submenu {
- &::after {
- border-top: 4px solid #{$value};
- }
- }
- }
+ &.has-submenu {
+ &::after {
+ border-top: 4px solid gesso-brand($faculty, $lvl);
+ }
+ }
+ }
- .has-submenu {
- &:hover {
- &::after {
- border-top: 4px solid #{$value};
- }
- }
- }
+ .has-submenu {
+ &:hover {
+ &::after {
+ border-top: 4px solid gesso-brand($faculty, $lvl);
+ }
+ }
+ }
- .has-children {
- &:hover {
- &::after {
- border-left: 4px solid #{$value};
- }
- }
- }
+ .has-children {
+ &:hover {
+ &::after {
+ border-left: 4px solid gesso-brand($faculty, $lvl);
+ }
+ }
+ }
- li {
- &:hover > a {
- color: #{$value};
- }
-
- ul {
- border-top: 4px solid #{$value};
- }
-
- ul {
- .is-active-trail {
- color: #{$value};
- }
-
- li {
- ul {
- border-left: 4px solid #{$value};
-
- &::before {
- border-right: 5px solid #{$value};
- }
- }
- }
- }
-
- .is-active-trail {
- color: #{$value};
- }
+ li {
+ &:hover > a {
+ color: gesso-brand($faculty, $lvl);
+ }
+
+ ul {
+ border-top: 4px solid gesso-brand($faculty, $lvl);
+ }
+
+ ul {
+ .is-active-trail {
+ color: gesso-brand($faculty, $lvl);
+ }
+
+ li {
+ ul {
+ border-left: 4px solid gesso-brand($faculty, $lvl);
+
+ &::before {
+ border-right: 5px solid gesso-brand($faculty, $lvl);
}
}
}
}
+
+ .is-active-trail {
+ color: gesso-brand($faculty, $lvl);
+ }
}
}
}
diff --git a/source/_patterns/04-components/menu/menu--main/menu--main.twig b/source/_patterns/04-components/menu/menu--main/menu--main.twig
index d9dffcfc26565d42156b4813b77bca8c63a9fb76..d6cbe0726add10702d633c9967c233a4745c0974 100644
--- a/source/_patterns/04-components/menu/menu--main/menu--main.twig
+++ b/source/_patterns/04-components/menu/menu--main/menu--main.twig
@@ -1,4 +1,5 @@
<nav class="uw-main-nav">
+ MAIN NAV
<div class="uw-main-nav__wrapper">
<div class="uw-main-nav__home">
<a href="/home" class="uw-site-home__link">
diff --git a/source/_patterns/04-components/menu/menu--main/menu--main.yml b/source/_patterns/04-components/menu/menu--main/menu--main.yml
index 77b2e5873e65265f099c01055a6015746514315f..b3f58062f2a3aacec061c1dfe2f17ae248644aad 100644
--- a/source/_patterns/04-components/menu/menu--main/menu--main.yml
+++ b/source/_patterns/04-components/menu/menu--main/menu--main.yml
@@ -34,4 +34,4 @@ items:
options:
attributes:
class: ''
- in_active_trail: false
\ No newline at end of file
+ in_active_trail: false