diff --git a/css/styles.css b/css/styles.css
index 105e8d0a9e3977ff66278584db36b2aa37340f46..d2f844cf3082d38515b9c769623c60fceabfab06 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4,6 +4,17 @@
* @see https://github.com/Team-Sass/breakpoint/wiki
*
*/
+@-webkit-keyframes fadeIn {
+ 0% {
+ opacity: 0; }
+ 100% {
+ opacity: 1; } }
+@keyframes fadeIn {
+ 0% {
+ opacity: 0; }
+ 100% {
+ opacity: 1; } }
+
.org-default__uw-white--lvl1 {
background: #fff; }
@@ -362,7 +373,7 @@
color: #fff; }
.breakpoint::before {
content: "large"; } }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.breakpoint {
background-color: rgba(95, 158, 160, 0.7);
color: #fff; }
@@ -1494,6 +1505,112 @@ svg:not(:root) {
padding-left: 0;
padding-right: 0; }
+.cuba-bod-person {
+ display: block;
+ width: 100%; }
+ .cuba-bod-person__wrapper {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: 50% 50%; }
+ .cuba-bod-person__picture {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2; }
+ .cuba-bod-person__picture img {
+ float: right; }
+ .cuba-bod-person__titles {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2; }
+ .cuba-bod-person__bio {
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ padding: 0 2rem; }
+
+.cuba-bod-view {
+ display: block;
+ width: 100%; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view {
+ display: flex;
+ flex-wrap: wrap; } }
+ .cuba-bod-view__profile {
+ padding: 1rem 0; }
+ .cuba-bod-view__profile .button {
+ border-radius: 0;
+ width: 75%; }
+ .cuba-bod-view__row {
+ display: block;
+ flex: 1 1 100%;
+ margin-bottom: 1.5rem; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__row {
+ display: flex;
+ flex: 1 1 51%;
+ flex-wrap: wrap; } }
+ @media screen and (min-width: 64em) {
+ .cuba-bod-view__row {
+ flex: 1 1 50%;
+ max-width: 50%; } }
+ .cuba-bod-view__row:first-child {
+ flex: 1 1 100%;
+ margin: 4.5rem auto; }
+ .cuba-bod-view__row:first-child .cuba-bod-view__card {
+ margin-left: auto;
+ margin-right: auto; }
+ @media screen and (min-width: 64em) {
+ .cuba-bod-view__row:first-child {
+ max-width: inherit; }
+ .cuba-bod-view__row:first-child .cuba-bod-view__card {
+ max-width: 40rem; } }
+ .cuba-bod-view__row:last-of-type {
+ margin-left: auto;
+ margin-right: auto; }
+ .cuba-bod-view__card {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+ display: grid;
+ grid-template-columns: 100%;
+ margin: 0 1rem;
+ width: calc(100% - 2rem); }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__card {
+ grid-gap: 2rem;
+ grid-template-columns: 30% 70%; } }
+ .cuba-bod-view__picture {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ margin-left: auto;
+ margin-right: auto; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__picture {
+ margin-left: initial;
+ margin-right: initial; } }
+ .cuba-bod-view__picture img {
+ margin: 0;
+ padding: 0; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__picture img {
+ float: right; } }
+ .cuba-bod-view__titles {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ padding: 0 1rem;
+ text-align: center; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__titles {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ text-align: left; } }
+ .cuba-bod-view__titles a {
+ text-decoration: none; }
+
+.cuba-bod-page-title h1 {
+ font-size: 2rem;
+ margin: 0;
+ padding: 0;
+ text-align: center; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-page-title h1 {
+ font-size: 3rem; } }
+
.uw-footer {
background-color: #000;
margin-top: 0;
@@ -1502,12 +1619,12 @@ svg:not(:root) {
.uw-footer__wrapper {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
display: grid;
grid-template-columns: 100%;
padding: 16px; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-footer__wrapper {
padding-left: 0;
padding-right: 0; } }
@@ -1820,77 +1937,91 @@ svg:not(:root) {
width: 100%; } } }
.uw-header {
- background-color: #000;
- width: 100%; }
+ max-width: 100%;
+ padding: 0;
+ width: 100%;
+ background-color: #000; }
.uw-header__wrapper {
display: grid;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- grid-template-columns: 100%;
- margin-left: auto;
- margin-right: auto;
- padding: 1rem 0 0;
+ grid-template-columns: auto 6rem;
+ padding: 8px;
position: relative; }
- @media (min-width: 63.1875rem) {
+ @media (min-width: 48.06rem) {
.uw-header__wrapper {
- grid-template-columns: auto 12.5rem 50.5rem auto; } }
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75rem;
+ padding: 0 16px;
+ padding: 16px; } }
+ @media (min-width: 48.06rem) and (min-width: 75rem) {
+ .uw-header__wrapper {
+ padding-left: 0;
+ padding-right: 0; } }
.uw-header__wrapper .uw-site-logo {
- grid-column: 1 / 5;
+ grid-column: 1 / 2;
grid-row: 1 / 2; }
- @media (min-width: 63.1875rem) {
- .uw-header__wrapper .uw-site-logo {
- grid-column: 2 / 3;
- grid-row: 1 / 2; } }
.uw-header__wrapper .uw-header-menu {
- grid-column: 1 / 5;
- grid-row: 2 / 3;
- padding: 1rem 0; }
- @media (min-width: 63.1875rem) {
- .uw-header__wrapper .uw-header-menu {
- grid-column: 3 / 4;
- grid-row: 1 / 2; } }
- .uw-header__wrapper .uw-colour-bar {
- grid-column: 1 / 5;
- grid-row: 3 / 4;
- padding-top: 1rem; }
- @media (min-width: 63.1875rem) {
- .uw-header__wrapper .uw-colour-bar {
- grid-column: 1 / 5;
- grid-row: 2 / 3; } }
- .uw-header__wrapper .uw-main-nav {
- grid-column: 1 / 5;
- grid-row: 4 / 5; }
- @media (min-width: 63.1875rem) {
- .uw-header__wrapper .uw-main-nav {
- grid-column: 1 / 5;
- grid-row: 3 / 4; } }
- .uw-header__wrapper .messages-list {
- background-color: #fff;
- grid-column: 1 / 5;
- grid-row: 4 / 5;
- margin-bottom: 0;
- margin-top: 0;
- padding: 0 1rem; }
+ grid-column: 2 / 3;
+ grid-row: 1 / 2; }
+ .uw-header .uw-header__nav {
+ max-width: 100%;
+ padding: 0;
+ width: 100%;
+ background-color: #eee; }
+ .uw-header .uw-header__center {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75rem;
+ padding: 0 16px;
+ border-bottom: 1px solid #ccc;
+ display: grid;
+ grid-template-columns: auto 4rem;
+ padding: 0; }
+ @media (min-width: 75rem) {
+ .uw-header .uw-header__center {
+ padding-left: 0;
+ padding-right: 0; } }
+ @media (min-width: 48.06rem) {
+ .uw-header .uw-header__center {
+ border-bottom: inherit; } }
+ .uw-header .uw-header__site-name {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2; }
+ .uw-header .uw-navigation-button {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2; }
+ .uw-header .uw-header__navigation {
+ grid-column: 1 / 3;
+ grid-row: 2 / 3; }
+ .uw-header .messages-list {
+ background-color: #fff;
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0 1rem; }
.layout {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.layout {
padding-left: 0;
padding-right: 0; } }
.layout.uw-contained-width {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
padding: 1rem; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.layout.uw-contained-width {
padding-left: 0;
padding-right: 0; } }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.layout.uw-contained-width {
padding: 1rem 0; } }
.layout.uw-contained-width--narrow {
@@ -2009,41 +2140,45 @@ svg:not(:root) {
.uw-site-container .uw-highlighted {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
grid-column: 1 / 2;
grid-row: 2 / 3;
padding: 1rem;
width: 100%; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-site-container .uw-highlighted {
padding-left: 0;
padding-right: 0; } }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-site-container .uw-highlighted {
padding: 0; } }
.uw-site-container .uw-main {
- background-color: #fff;
grid-column: 1 / 2;
grid-row: 3 / 4;
- min-height: 60vh; }
+ min-height: 60vh;
+ width: 100%; }
.uw-site-container .uw-footer {
grid-column: 1 / 2;
grid-row: 4 / 5; }
+.mobile-menu,
+.mobile-menu-button {
+ display: none !important; }
+
.uw-site-footer {
background-color: #787878; }
.uw-site-footer__wrapper {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto auto auto;
padding-bottom: 16px;
padding-top: 16px; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-site-footer__wrapper {
padding-left: 0;
padding-right: 0; } }
@@ -2053,7 +2188,7 @@ svg:not(:root) {
@media (min-width: 63.1875rem) {
.uw-site-footer__wrapper {
grid-template-columns: 70% 30%; } }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-site-footer__wrapper {
padding: 16px 0; } }
.uw-site-footer__logo {
@@ -2087,7 +2222,7 @@ svg:not(:root) {
grid-column: 1 / 3;
grid-row: 2 / 3;
text-align: left; } }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-site-footer__content {
padding-left: 0;
padding-right: 0; } }
@@ -2102,13 +2237,14 @@ svg:not(:root) {
.messages,
.message,
.contextual-region.profile,
+.uw-content-moderation,
form {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
padding: 1rem; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
@@ -2118,25 +2254,22 @@ form {
.messages,
.message,
.contextual-region.profile,
+ .uw-content-moderation,
form {
padding-left: 0;
padding-right: 0; } }
- @media (min-width: 80rem) {
- .uw-highlighted,
- .block-page-title-block,
- .block-local-tasks-block,
- .node-form,
- .admin-list,
- .js-media-library-view,
- .messages,
- .message,
- .contextual-region.profile,
- form {
- padding: 1rem 0; } }
.entity-meta__header {
background-color: #fffbda; }
+.uw-content-moderation__wrapper {
+ background-color: #fff1d2;
+ border: 1px solid #fad980;
+ font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 14.22224px;
+ max-width: inherit;
+ padding: 16px; }
+
.ui-dialog .ui-dialog-title {
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 1.602rem;
@@ -2169,10 +2302,10 @@ form {
.ui-dialog form {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
padding: 0 !important; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.ui-dialog form {
padding-left: 0;
padding-right: 0; } }
@@ -2777,10 +2910,10 @@ button {
.uw-cta.uw-contained-width {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
padding: 0; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-cta.uw-contained-width {
padding-left: 0;
padding-right: 0; } }
@@ -3109,7 +3242,7 @@ button {
@media (min-width: 63.1875rem) {
.uw-colour-bar__cbar {
height: 1rem; } }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-colour-bar__cbar {
height: 1.125rem; } }
@@ -3125,10 +3258,10 @@ button {
.uw-copy-text__wrapper.uw-contained-width {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
padding: 1rem 0; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-copy-text__wrapper.uw-contained-width {
padding-left: 0;
padding-right: 0; } }
@@ -4025,9 +4158,9 @@ fieldset,
.uw-image__wrapper.uw-contained-width {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.uw-image__wrapper.uw-contained-width {
padding-left: 0;
padding-right: 0; } }
@@ -4158,7 +4291,7 @@ fieldset,
.menu {
display: none; } }
-.menu__item {
+.menu--item {
margin-bottom: 0; }
.menu--account {
@@ -4219,7 +4352,7 @@ fieldset,
font-size: 0.79rem;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto; } }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.menu--uw-footer {
font-size: 16px; } }
.menu--uw-footer li {
@@ -4257,401 +4390,888 @@ fieldset,
grid-column: 3;
grid-row: 1; } }
-.uw-header-menu {
- background-color: #000; }
- .uw-header-menu ul {
+.uw-horizontal-nav.uw-horizontal-nav--header {
+ background: #000;
+ max-width: inherit;
+ width: inherit; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--wrapper {
+ background: #000;
display: block;
- text-align: center; }
- .uw-header-menu li {
- display: inline-block;
- padding: 0 0.5rem; }
- .uw-header-menu a {
- color: #fff;
- font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- font-size: 0.88889rem;
- letter-spacing: .045rem;
- text-decoration: none;
- text-transform: uppercase; }
- .uw-header-menu a:hover {
- text-decoration: underline; }
-
-.org-ahs .uw-main-nav__home:hover svg {
- fill: #97dfef; }
-
-.org-ahs .uw-main-nav__more:hover svg {
- fill: #97dfef; }
-
-.org-ahs .menu--main > .is-active-trail {
- border-top: 4px solid #97dfef; }
- .org-ahs .menu--main > .is-active-trail.has-submenu::after {
- border-top: 4px solid #97dfef; }
-
-.org-ahs .menu--main .has-submenu:hover::after {
- border-top: 4px solid #97dfef; }
-
-.org-ahs .menu--main .has-children:hover::after {
- border-left: 4px solid #97dfef; }
-
-.org-ahs .menu--main li:hover > a {
- color: #97dfef; }
-
-.org-ahs .menu--main li ul {
- border-top: 4px solid #97dfef; }
-
-.org-ahs .menu--main li ul .is-active-trail {
- color: #97dfef; }
-
-.org-ahs .menu--main li ul li ul {
- border-left: 4px solid #97dfef; }
- .org-ahs .menu--main li ul li ul::before {
- border-right: 5px solid #97dfef; }
-
-.org-ahs .menu--main li .is-active-trail {
- color: #97dfef; }
-
-.org-art .uw-main-nav__home:hover svg {
- fill: #ffd5a5; }
-
-.org-art .uw-main-nav__more:hover svg {
- fill: #ffd5a5; }
-
-.org-art .menu--main > .is-active-trail {
- border-top: 4px solid #ffd5a5; }
- .org-art .menu--main > .is-active-trail.has-submenu::after {
- border-top: 4px solid #ffd5a5; }
-
-.org-art .menu--main .has-submenu:hover::after {
- border-top: 4px solid #ffd5a5; }
-
-.org-art .menu--main .has-children:hover::after {
- border-left: 4px solid #ffd5a5; }
-
-.org-art .menu--main li:hover > a {
- color: #ffd5a5; }
-
-.org-art .menu--main li ul {
- border-top: 4px solid #ffd5a5; }
-
-.org-art .menu--main li ul .is-active-trail {
- color: #ffd5a5; }
-
-.org-art .menu--main li ul li ul {
- border-left: 4px solid #ffd5a5; }
- .org-art .menu--main li ul li ul::before {
- border-right: 5px solid #ffd5a5; }
-
-.org-art .menu--main li .is-active-trail {
- color: #ffd5a5; }
-
-.org-eng .uw-main-nav__home:hover svg {
- fill: #d0b4ef; }
-
-.org-eng .uw-main-nav__more:hover svg {
- fill: #d0b4ef; }
-
-.org-eng .menu--main > .is-active-trail {
- border-top: 4px solid #d0b4ef; }
- .org-eng .menu--main > .is-active-trail.has-submenu::after {
- border-top: 4px solid #d0b4ef; }
-
-.org-eng .menu--main .has-submenu:hover::after {
- border-top: 4px solid #d0b4ef; }
-
-.org-eng .menu--main .has-children:hover::after {
- border-left: 4px solid #d0b4ef; }
-
-.org-eng .menu--main li:hover > a {
- color: #d0b4ef; }
-
-.org-eng .menu--main li ul {
- border-top: 4px solid #d0b4ef; }
-
-.org-eng .menu--main li ul .is-active-trail {
- color: #d0b4ef; }
-
-.org-eng .menu--main li ul li ul {
- border-left: 4px solid #d0b4ef; }
- .org-eng .menu--main li ul li ul::before {
- border-right: 5px solid #d0b4ef; }
-
-.org-eng .menu--main li .is-active-trail {
- color: #d0b4ef; }
-
-.org-env .uw-main-nav__home:hover svg {
- fill: #daf582; }
-
-.org-env .uw-main-nav__more:hover svg {
- fill: #daf582; }
-
-.org-env .menu--main > .is-active-trail {
- border-top: 4px solid #daf582; }
- .org-env .menu--main > .is-active-trail.has-submenu::after {
- border-top: 4px solid #daf582; }
-
-.org-env .menu--main .has-submenu:hover::after {
- border-top: 4px solid #daf582; }
-
-.org-env .menu--main .has-children:hover::after {
- border-left: 4px solid #daf582; }
-
-.org-env .menu--main li:hover > a {
- color: #daf582; }
-
-.org-env .menu--main li ul {
- border-top: 4px solid #daf582; }
-
-.org-env .menu--main li ul .is-active-trail {
- color: #daf582; }
-
-.org-env .menu--main li ul li ul {
- border-left: 4px solid #daf582; }
- .org-env .menu--main li ul li ul::before {
- border-right: 5px solid #daf582; }
-
-.org-env .menu--main li .is-active-trail {
- color: #daf582; }
-
-.org-mat .uw-main-nav__home:hover svg {
- fill: #ffbeef; }
-
-.org-mat .uw-main-nav__more:hover svg {
- fill: #ffbeef; }
-
-.org-mat .menu--main > .is-active-trail {
- border-top: 4px solid #ffbeef; }
- .org-mat .menu--main > .is-active-trail.has-submenu::after {
- border-top: 4px solid #ffbeef; }
-
-.org-mat .menu--main .has-submenu:hover::after {
- border-top: 4px solid #ffbeef; }
-
-.org-mat .menu--main .has-children:hover::after {
- border-left: 4px solid #ffbeef; }
-
-.org-mat .menu--main li:hover > a {
- color: #ffbeef; }
+ max-width: inherit;
+ padding: 0;
+ position: relative; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--home {
+ display: none;
+ grid-column: none;
+ padding: 0; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu {
+ width: inherit; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu {
+ border: 1px solid #fff;
+ height: auto;
+ position: relative;
+ width: 6rem; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu a {
+ color: #fff;
+ outline: none;
+ outline-offset: unset;
+ width: 100%; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu a:hover {
+ color: #000; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu.menu--subnav a {
+ color: #000;
+ outline: none;
+ outline-offset: unset;
+ width: 100%; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+ background: #000;
+ border-bottom: 0 solid transparent;
+ width: 100%; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a {
+ padding-right: 24px;
+ position: relative; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
+ content: '\e906';
+ display: block;
+ font-family: fdsu-rwd;
+ position: absolute;
+ right: 0.5rem;
+ text-align: center;
+ top: 0.5rem;
+ transform: scale(0.75, 0.75) rotate(90deg); }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu--subnav {
+ display: none; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+ background: #f7f7f7;
+ border-width: 0;
+ display: inherit;
+ height: auto;
+ left: inherit;
+ min-height: auto;
+ min-width: 13rem;
+ padding: 1rem 0;
+ right: 0;
+ top: inherit;
+ width: auto; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
+ max-width: inherit; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav li .menu--link-parent {
+ display: none !important; }
+ .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--subnav {
+ border: 0 solid #fff; }
+
+.org-default .uw-horizontal-nav .uw-site-home__link {
+ background-color: #000; }
+ .org-default .uw-horizontal-nav .uw-site-home__link svg {
+ fill: #fdd54f; }
+ .org-default .uw-horizontal-nav .uw-site-home__link:focus {
+ background-color: #fff; }
+ .org-default .uw-horizontal-nav .uw-site-home__link:focus svg {
+ fill: #fdd54f; }
+ .org-default .uw-horizontal-nav .uw-site-home__link:hover {
+ background-color: #fdd54f; }
+ .org-default .uw-horizontal-nav .uw-site-home__link:hover svg {
+ fill: #000; }
-.org-mat .menu--main li ul {
- border-top: 4px solid #ffbeef; }
+.org-default .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ background-color: #ccc;
+ color: #000; }
-.org-mat .menu--main li ul .is-active-trail {
- color: #ffbeef; }
+.org-default .uw-horizontal-nav .menu--horizontal li > a {
+ color: #000; }
+ .org-default .uw-horizontal-nav .menu--horizontal li > a:focus {
+ background-color: #ccc;
+ color: #000; }
+ .org-default .uw-horizontal-nav .menu--horizontal li > a.active {
+ background-color: #ccc;
+ color: #000; }
+ .org-default .uw-horizontal-nav .menu--horizontal li > a:hover {
+ background-color: #fff;
+ color: #000; }
-.org-mat .menu--main li ul li ul {
- border-left: 4px solid #ffbeef; }
- .org-mat .menu--main li ul li ul::before {
- border-right: 5px solid #ffbeef; }
+.org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none; }
+ .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active::after {
+ display: none; }
+ .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
-.org-mat .menu--main li .is-active-trail {
- color: #ffbeef; }
+.org-ahs .uw-horizontal-nav .uw-site-home__link {
+ background-color: #005963; }
+ .org-ahs .uw-horizontal-nav .uw-site-home__link svg {
+ fill: #fff; }
+ .org-ahs .uw-horizontal-nav .uw-site-home__link:focus {
+ background-color: #fff; }
+ .org-ahs .uw-horizontal-nav .uw-site-home__link:focus svg {
+ fill: #005963; }
+ .org-ahs .uw-horizontal-nav .uw-site-home__link:hover {
+ background-color: #fff; }
+ .org-ahs .uw-horizontal-nav .uw-site-home__link:hover svg {
+ fill: #005963; }
+
+.org-ahs .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ background-color: #ccc;
+ color: #000; }
-.org-sci .uw-main-nav__home:hover svg {
- fill: #b4d5ff; }
+.org-ahs .uw-horizontal-nav .menu--horizontal li > a {
+ color: #000; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li > a:focus, .org-ahs .uw-horizontal-nav .menu--horizontal li > a.active {
+ background-color: #ccc;
+ color: #000; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li > a:hover {
+ background-color: #fff;
+ color: #000; }
-.org-sci .uw-main-nav__more:hover svg {
- fill: #b4d5ff; }
+.org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent {
+ color: #005963; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:focus, .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent.active {
+ background-color: inherit;
+ border-bottom: 1px solid #005963;
+ color: #005963; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #005963;
+ color: #005963; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #005963;
+ color: #005963; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
-.org-sci .menu--main > .is-active-trail {
- border-top: 4px solid #b4d5ff; }
- .org-sci .menu--main > .is-active-trail.has-submenu::after {
- border-top: 4px solid #b4d5ff; }
+.org-art .uw-horizontal-nav .uw-site-home__link {
+ background-color: #d93f00; }
+ .org-art .uw-horizontal-nav .uw-site-home__link svg {
+ fill: #fff; }
+ .org-art .uw-horizontal-nav .uw-site-home__link:focus {
+ background-color: #fff; }
+ .org-art .uw-horizontal-nav .uw-site-home__link:focus svg {
+ fill: #d93f00; }
+ .org-art .uw-horizontal-nav .uw-site-home__link:hover {
+ background-color: #fff; }
+ .org-art .uw-horizontal-nav .uw-site-home__link:hover svg {
+ fill: #d93f00; }
+
+.org-art .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ background-color: #ccc;
+ color: #000; }
-.org-sci .menu--main .has-submenu:hover::after {
- border-top: 4px solid #b4d5ff; }
+.org-art .uw-horizontal-nav .menu--horizontal li > a {
+ color: #000; }
+ .org-art .uw-horizontal-nav .menu--horizontal li > a:focus, .org-art .uw-horizontal-nav .menu--horizontal li > a.active {
+ background-color: #ccc;
+ color: #000; }
+ .org-art .uw-horizontal-nav .menu--horizontal li > a:hover {
+ background-color: #fff;
+ color: #000; }
-.org-sci .menu--main .has-children:hover::after {
- border-left: 4px solid #b4d5ff; }
+.org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent {
+ color: #d93f00; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:focus, .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent.active {
+ background-color: inherit;
+ border-bottom: 1px solid #d93f00;
+ color: #d93f00; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #d93f00;
+ color: #d93f00; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #d93f00;
+ color: #d93f00; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
-.org-sci .menu--main li:hover > a {
- color: #b4d5ff; }
+.org-eng .uw-horizontal-nav .uw-site-home__link {
+ background-color: #57058b; }
+ .org-eng .uw-horizontal-nav .uw-site-home__link svg {
+ fill: #fff; }
+ .org-eng .uw-horizontal-nav .uw-site-home__link:focus {
+ background-color: #fff; }
+ .org-eng .uw-horizontal-nav .uw-site-home__link:focus svg {
+ fill: #57058b; }
+ .org-eng .uw-horizontal-nav .uw-site-home__link:hover {
+ background-color: #fff; }
+ .org-eng .uw-horizontal-nav .uw-site-home__link:hover svg {
+ fill: #57058b; }
+
+.org-eng .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ background-color: #ccc;
+ color: #000; }
-.org-sci .menu--main li ul {
- border-top: 4px solid #b4d5ff; }
+.org-eng .uw-horizontal-nav .menu--horizontal li > a {
+ color: #000; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li > a:focus, .org-eng .uw-horizontal-nav .menu--horizontal li > a.active {
+ background-color: #ccc;
+ color: #000; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li > a:hover {
+ background-color: #fff;
+ color: #000; }
-.org-sci .menu--main li ul .is-active-trail {
- color: #b4d5ff; }
+.org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent {
+ color: #57058b; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:focus, .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent.active {
+ background-color: inherit;
+ border-bottom: 1px solid #57058b;
+ color: #57058b; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #57058b;
+ color: #57058b; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #57058b;
+ color: #57058b; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
-.org-sci .menu--main li ul li ul {
- border-left: 4px solid #b4d5ff; }
- .org-sci .menu--main li ul li ul::before {
- border-right: 5px solid #b4d5ff; }
+.org-env .uw-horizontal-nav .uw-site-home__link {
+ background-color: #607000; }
+ .org-env .uw-horizontal-nav .uw-site-home__link svg {
+ fill: #fff; }
+ .org-env .uw-horizontal-nav .uw-site-home__link:focus {
+ background-color: #fff; }
+ .org-env .uw-horizontal-nav .uw-site-home__link:focus svg {
+ fill: #607000; }
+ .org-env .uw-horizontal-nav .uw-site-home__link:hover {
+ background-color: #fff; }
+ .org-env .uw-horizontal-nav .uw-site-home__link:hover svg {
+ fill: #607000; }
+
+.org-env .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ background-color: #ccc;
+ color: #000; }
-.org-sci .menu--main li .is-active-trail {
- color: #b4d5ff; }
+.org-env .uw-horizontal-nav .menu--horizontal li > a {
+ color: #000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li > a:focus, .org-env .uw-horizontal-nav .menu--horizontal li > a.active {
+ background-color: #ccc;
+ color: #000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li > a:hover {
+ background-color: #fff;
+ color: #000; }
-.org-school .uw-main-nav__home:hover svg {
- fill: #ffa5aa; }
+.org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent {
+ color: #607000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:focus, .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent.active {
+ background-color: inherit;
+ border-bottom: 1px solid #607000;
+ color: #607000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #607000;
+ color: #607000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #607000;
+ color: #607000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
-.org-school .uw-main-nav__more:hover svg {
- fill: #ffa5aa; }
+.org-mat .uw-horizontal-nav .uw-site-home__link {
+ background-color: #c60078; }
+ .org-mat .uw-horizontal-nav .uw-site-home__link svg {
+ fill: #fff; }
+ .org-mat .uw-horizontal-nav .uw-site-home__link:focus {
+ background-color: #fff; }
+ .org-mat .uw-horizontal-nav .uw-site-home__link:focus svg {
+ fill: #c60078; }
+ .org-mat .uw-horizontal-nav .uw-site-home__link:hover {
+ background-color: #fff; }
+ .org-mat .uw-horizontal-nav .uw-site-home__link:hover svg {
+ fill: #c60078; }
+
+.org-mat .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ background-color: #ccc;
+ color: #000; }
-.org-school .menu--main > .is-active-trail {
- border-top: 4px solid #ffa5aa; }
- .org-school .menu--main > .is-active-trail.has-submenu::after {
- border-top: 4px solid #ffa5aa; }
+.org-mat .uw-horizontal-nav .menu--horizontal li > a {
+ color: #000; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li > a:focus, .org-mat .uw-horizontal-nav .menu--horizontal li > a.active {
+ background-color: #ccc;
+ color: #000; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li > a:hover {
+ background-color: #fff;
+ color: #000; }
-.org-school .menu--main .has-submenu:hover::after {
- border-top: 4px solid #ffa5aa; }
+.org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent {
+ color: #c60078; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:focus, .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent.active {
+ background-color: inherit;
+ border-bottom: 1px solid #c60078;
+ color: #c60078; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #c60078;
+ color: #c60078; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #c60078;
+ color: #c60078; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
-.org-school .menu--main .has-children:hover::after {
- border-left: 4px solid #ffa5aa; }
+.org-sci .uw-horizontal-nav .uw-site-home__link {
+ background-color: #0033be; }
+ .org-sci .uw-horizontal-nav .uw-site-home__link svg {
+ fill: #fff; }
+ .org-sci .uw-horizontal-nav .uw-site-home__link:focus {
+ background-color: #fff; }
+ .org-sci .uw-horizontal-nav .uw-site-home__link:focus svg {
+ fill: #0033be; }
+ .org-sci .uw-horizontal-nav .uw-site-home__link:hover {
+ background-color: #fff; }
+ .org-sci .uw-horizontal-nav .uw-site-home__link:hover svg {
+ fill: #0033be; }
+
+.org-sci .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ background-color: #ccc;
+ color: #000; }
-.org-school .menu--main li:hover > a {
- color: #ffa5aa; }
+.org-sci .uw-horizontal-nav .menu--horizontal li > a {
+ color: #000; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li > a:focus, .org-sci .uw-horizontal-nav .menu--horizontal li > a.active {
+ background-color: #ccc;
+ color: #000; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li > a:hover {
+ background-color: #fff;
+ color: #000; }
-.org-school .menu--main li ul {
- border-top: 4px solid #ffa5aa; }
+.org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent {
+ color: #0033be; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:focus, .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent.active {
+ background-color: inherit;
+ border-bottom: 1px solid #0033be;
+ color: #0033be; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #0033be;
+ color: #0033be; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #0033be;
+ color: #0033be; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
-.org-school .menu--main li ul .is-active-trail {
- color: #ffa5aa; }
+.org-school .uw-horizontal-nav .uw-site-home__link {
+ background-color: #80001f; }
+ .org-school .uw-horizontal-nav .uw-site-home__link svg {
+ fill: #fff; }
+ .org-school .uw-horizontal-nav .uw-site-home__link:focus {
+ background-color: #fff; }
+ .org-school .uw-horizontal-nav .uw-site-home__link:focus svg {
+ fill: #80001f; }
+ .org-school .uw-horizontal-nav .uw-site-home__link:hover {
+ background-color: #fff; }
+ .org-school .uw-horizontal-nav .uw-site-home__link:hover svg {
+ fill: #80001f; }
+
+.org-school .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ background-color: #ccc;
+ color: #000; }
-.org-school .menu--main li ul li ul {
- border-left: 4px solid #ffa5aa; }
- .org-school .menu--main li ul li ul::before {
- border-right: 5px solid #ffa5aa; }
+.org-school .uw-horizontal-nav .menu--horizontal li > a {
+ color: #000; }
+ .org-school .uw-horizontal-nav .menu--horizontal li > a:focus, .org-school .uw-horizontal-nav .menu--horizontal li > a.active {
+ background-color: #ccc;
+ color: #000; }
+ .org-school .uw-horizontal-nav .menu--horizontal li > a:hover {
+ background-color: #fff;
+ color: #000; }
-.org-school .menu--main li .is-active-trail {
- color: #ffa5aa; }
+.org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ background-color: transparent;
+ border-bottom: 1px solid transparent;
+ text-decoration: none; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent {
+ color: #80001f; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:focus, .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent.active {
+ background-color: inherit;
+ border-bottom: 1px solid #80001f;
+ color: #80001f; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.menu--link-parent:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #80001f;
+ color: #80001f; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #80001f;
+ color: #80001f; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active {
+ background-color: inherit;
+ border-bottom: 1px solid #000;
+ color: #000; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:focus {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
-.uw-main-nav {
- background-color: #000;
- display: block;
- width: 100%; }
- .uw-main-nav__wrapper {
- display: grid;
- grid-template-columns: 25px auto 40px;
+.uw-horizontal-nav {
+ max-width: 100%;
+ padding: 0;
+ width: 100%;
+ background: #eee; }
+ .uw-horizontal-nav--wrapper {
margin-left: auto;
margin-right: auto;
- max-width: 63rem; }
- .uw-main-nav__home {
- background-color: #000;
- grid-column: 1 / 2; }
- .uw-main-nav__home:hover {
- background-color: #000; }
- .uw-main-nav__home:hover svg {
- fill: #fdd54f; }
- .uw-main-nav__home a {
- display: flex;
- height: 100%; }
- .uw-main-nav__home a svg {
- fill: #fff;
- margin: auto; }
- .uw-main-nav__navigation {
- grid-column: 2 / 3; }
- .uw-main-nav__more {
- grid-column: 3 / 4; }
- .uw-main-nav__more:hover ul {
- display: block; }
- .uw-main-nav__more:hover svg {
- fill: #fdd54f; }
- .uw-main-nav__more--icon {
- height: 100%;
- position: relative; }
- .uw-main-nav__more--icon svg {
- fill: #fff;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- position: absolute;
- top: 25%; }
- .uw-main-nav__more ul {
- display: none; }
-
-.menu--main {
- background: #000;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- display: flex;
- list-style: none;
- margin: 0;
- padding: 0; }
- .menu--main > .is-active-trail {
- border: 0;
- border-top: 4px solid #fdd54f;
+ max-width: 75rem;
+ padding: 0 16px;
+ display: grid;
+ padding: 0;
position: relative; }
- .menu--main > .is-active-trail.has-submenu::after {
- border-top: 4px solid #fdd54f; }
- .menu--main .has-submenu::after {
- border: 0;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid #fff;
- content: '';
- display: initial;
- height: 0;
- position: absolute;
- right: 2px;
- top: 45%;
- width: 0; }
- .menu--main .has-submenu:hover::after {
- border-top: 4px solid #fdd54f; }
- .menu--main .has-children::after {
- border-bottom: 4px solid transparent;
- border-left: 4px solid #fff;
- border-top: 4px solid transparent;
- content: '';
- display: initial;
- height: 0;
- position: absolute;
- right: 2px;
- top: 40%;
- width: 0; }
- .menu--main .has-children:hover::after {
- border-left: 4px solid #fdd54f; }
- .menu--main li {
- flex: 1 auto;
- float: left;
- max-width: 200px;
+ @media (min-width: 75rem) {
+ .uw-horizontal-nav--wrapper {
+ padding-left: 0;
+ padding-right: 0; } }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--wrapper {
+ grid-template-columns: 3rem auto;
+ padding: 0 8px; } }
+ .uw-horizontal-nav--home {
+ display: none; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--home {
+ display: block;
+ grid-column: 1/2;
+ padding: 4px; }
+ .uw-horizontal-nav--home .uw-site-home__link {
+ border: 1px solid #eee;
+ border-radius: 50%;
+ display: block;
+ height: 2rem;
+ outline: none;
+ width: 2rem; }
+ .uw-horizontal-nav--home .uw-site-home__link svg {
+ height: 2rem;
+ padding-left: 4px;
+ padding-top: 4px;
+ width: 2rem; } }
+ .uw-horizontal-nav--menu {
+ max-width: 100%;
+ padding: 0;
+ width: 100%; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu {
+ grid-column: 2/3; } }
+ .uw-horizontal-nav--menu .menu {
+ margin-left: inherit; }
+ .uw-horizontal-nav--menu .menu--link {
+ position: relative; }
+ .uw-horizontal-nav--menu .menu .menu--item a {
+ cursor: pointer;
+ outline: none;
+ outline-offset: unset; }
+ .uw-horizontal-nav--menu .menu--horizontal {
+ max-width: 100%;
+ padding: 0;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 0.79rem;
+ justify-content: flex-start;
+ width: 100%; }
+ .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+ border-bottom: 1px solid #ccc;
+ width: 100%; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+ border-bottom: inherit; } }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+ width: auto; } }
+ .uw-horizontal-nav--menu .menu--horizontal > .menu--item a {
+ display: inline-block;
+ line-height: 1.25rem;
+ padding: 8px;
+ text-decoration: none;
+ width: 100%; }
+ .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a {
+ padding-right: 24px;
+ position: relative; }
+ .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
+ content: '\e906';
+ display: block;
+ font-family: fdsu-rwd;
+ position: absolute;
+ right: 8px;
+ text-align: center;
+ top: 8px;
+ transform: scale(0.75, 0.75); }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
+ transform: scale(0.75, 0.75) rotate(90deg); } }
+ .no-scroll .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a {
+ border-left: 1px solid #ccc;
+ display: inline-block;
+ height: 2.25rem;
+ overflow: hidden;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 2rem;
+ z-index: 1000; }
+ .no-scroll .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a span {
+ display: none; }
+ .no-scroll .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a::after {
+ transform: scale(0.75, 0.75) rotate(180deg); }
+ .uw-horizontal-nav--menu .menu--subnav {
+ display: none;
+ font-size: 0.79rem;
+ text-transform: none;
+ width: 100%; }
+ .uw-horizontal-nav--menu .menu--subnav li {
+ -webkit-animation: fadeIn ease 0.2s;
+ animation: fadeIn ease 0.2s; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active.has-submenu--small .menu--subnav {
+ min-height: 10rem; } }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active.has-submenu--medium .menu--subnav {
+ min-height: 25rem; } }
+ .uw-horizontal-nav--menu .menu .submenu-active.has-submenu--large .menu--subnav {
+ min-height: 50rem; }
+ @media (min-width: 63.1875rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active.has-submenu--large .menu--subnav {
+ min-height: 35rem; } }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+ background: #f7f7f7;
+ display: block;
+ height: calc(100vh - 7rem);
+ position: absolute;
+ top: 0;
+ z-index: 10; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav ~ .menu--subnav {
+ position: absolute;
+ top: inherit; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75rem;
+ padding: 0 16px;
+ align-items: flex-start;
+ background: #f7f7f7;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.13);
+ display: flex;
+ flex-flow: wrap;
+ flex-direction: column;
+ flex-wrap: wrap;
+ height: 100%;
+ left: 3rem;
+ overflow-y: inherit;
+ padding: 2.5rem 0.5rem 1rem;
+ top: 100%;
+ width: calc(100% - 6rem);
+ z-index: 10; } }
+ @media (min-width: 48.06rem) and (min-width: 75rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+ padding-left: 0;
+ padding-right: 0; } }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--subnav {
+ align-items: inherit;
+ background: inherit;
+ box-shadow: none;
+ -moz-column-count: inherit;
+ 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; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
+ display: block; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--subnav {
+ padding: 0; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item a {
+ font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 400;
+ padding: 8px;
+ padding-right: 24px; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item a {
+ border-bottom: 1px solid #e6e6e6; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item a {
+ padding: 8px; } }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent {
+ border-bottom: 1px solid #e6e6e6;
+ padding: 0; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent a {
+ border-bottom: 1px solid transparent; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200;
+ padding-left: 16px; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200;
+ padding-left: 40px; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200;
+ padding-left: 56px; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
+ flex: 0 1;
+ height: auto;
+ max-width: 50%;
+ padding-left: 8px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200;
+ margin-top: inherit;
+ max-width: inherit;
+ padding-left: 16px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ padding: 4px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item {
+ margin-top: inherit;
+ padding-left: 16px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item {
+ margin-top: inherit;
+ padding-left: 16px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200; } }
+ @media (min-width: 63.1875rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
+ max-width: 33%;
+ padding-left: 16px; } }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent {
+ padding: 4px 0 4px 8px;
+ top: 0;
+ width: 100%; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent .menu--link-parent {
+ display: inline-block;
+ position: relative;
+ width: auto; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent .menu--link-parent::after {
+ content: '\e3b5';
+ display: block;
+ font-family: fdsu-rwd;
+ font-size: 1rem;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ top: 8px; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent {
+ flex: 1 0 100%;
+ max-width: inherit;
+ padding: 8px 0 8px 16px;
+ position: absolute; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent .menu--link-parent {
+ font-size: 0.88889rem;
+ margin: 0 0 4px 0; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent .menu--link-parent::after {
+ right: -1rem; } }
+
+.uw-horizontal-nav--secondary {
+ max-width: 100%;
+ padding: 0;
+ width: 100%;
+ background: #eee; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--secondary {
+ background: #fff;
+ border-bottom: 3px solid #eee; } }
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--wrapper {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75rem;
+ padding: 0 16px;
+ display: grid;
+ padding: 0;
position: relative; }
- .menu--main li:hover > a {
- color: #fdd54f; }
- .menu--main li:hover > ul,
- .menu--main li li ul li:hover > ul {
- display: block;
- opacity: 1;
- visibility: visible; }
- .menu--main li ul,
- .menu--main li ul li ul {
- background: #000;
- border-top: 4px solid #fdd54f;
- height: auto;
- margin: 0;
- min-width: 200px;
- opacity: 0;
+ @media (min-width: 75rem) {
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--wrapper {
+ padding-left: 0;
+ padding-right: 0; } }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--wrapper {
+ grid-template-columns: 3rem auto;
+ padding: 0 8px; } }
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--home {
+ display: none;
+ grid-column: none;
+ padding: 0; }
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--menu {
+ max-width: 100%;
+ padding: 0;
+ width: 100%; }
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu .menu--item a {
+ outline: none;
+ outline-offset: unset; }
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal {
+ max-width: 100%;
padding: 0;
- position: absolute;
- visibility: hidden;
- z-index: 1000; }
- .menu--main li ul li ul {
- border: 0;
- border-top: 0; }
- .menu--main li ul li {
- float: none; }
- .menu--main li ul li:hover > ul {
- left: 200px;
- top: 0; }
- .menu--main li ul li a {
- border: 0;
- padding: 10px; }
- .menu--main li ul li ul {
- border: 0;
- border-left: 4px solid #fdd54f;
- left: 230px;
- top: 0; }
- .menu--main li ul .is-active-trail {
- color: #fdd54f; }
- .menu--main li a {
- color: #fff;
+ width: 100%;
display: flex;
- height: 100%;
- padding: 0.5rem 1rem;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase; }
- .menu--main li a .link-text {
- margin: auto; }
- .menu--main li .is-active-trail {
- color: #fdd54f; }
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 0.79rem;
+ justify-content: flex-start;
+ text-transform: inherit;
+ width: 100%; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item {
+ width: auto; } }
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item a {
+ display: inline-block;
+ font-weight: inherit;
+ line-height: 1.25rem;
+ text-decoration: none; }
+ .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item a:hover {
+ background-color: #eee;
+ color: #000; }
.social-media-list {
align-items: start;
@@ -4804,141 +5424,115 @@ fieldset,
.messages--warning::before {
background-image: url("../source/images/icons/messages-warning.svg"); }
-.mobile-menu-button {
+.uw-navigation-button {
outline: 2px solid transparent;
outline-offset: 2px;
background-color: transparent;
- border: 0;
- border-radius: 0;
- box-shadow: none;
- display: inline-block;
- font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-size: 1.125rem;
- font-weight: 600;
- height: 55px;
- line-height: 55px;
- margin: 0;
- padding: 0 16px;
- text-decoration: none; }
- .mobile-menu-button:focus {
+ border-radius: inherit;
+ color: #4e4e4e;
+ cursor: pointer;
+ display: block;
+ font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 9.984px;
+ font-weight: 400;
+ letter-spacing: 0;
+ margin: inherit;
+ margin-bottom: 0;
+ max-width: inherit;
+ padding: 0;
+ padding-top: 16px;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ vertical-align: inherit;
+ white-space: nowrap;
+ width: 100%; }
+ .uw-navigation-button:focus {
outline-color: #4773aa; }
-
-.mobile-menu-button__icon {
- height: 22px;
- overflow: hidden;
- width: 22px;
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-size: 22px 22px;
- display: inline-block;
- margin-top: 16px; }
- .mobile-menu-button__icon::before {
- content: '';
+ @media (min-width: 48.06rem) {
+ .uw-navigation-button {
+ display: none; } }
+ .uw-navigation-button:hover, .uw-navigation-button:focus {
+ border: 0;
+ outline: none !important; }
+ .uw-navigation-button:active {
+ outline: none !important; }
+ .uw-navigation-button[disabled] {
+ cursor: default;
+ pointer-events: none; }
+ .uw-navigation-button[aria-expanded='true'] > .uw-navigation-button__lines {
+ background-color: transparent;
+ transition: background-color, opacity 0s;
+ width: 1.5rem; }
+ .uw-navigation-button > .uw-navigation-button__lines {
+ background-color: #757575;
display: block;
- height: 150%;
- width: 0; }
-
-.mobile-menu-button--close .mobile-menu-button__icon {
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%23555559%22%20d%3D%22M21.9%202.2l-2.2-2.2-8.8%208.8-8.8-8.8-2.2%202.2%208.8%208.8-8.8%208.8%202.2%202.2%208.8-8.8%208.8%208.8%202.2-2.2-8.8-8.8%208.8-8.8z%22%2F%3E%0A%3C%2Fsvg%3E'); }
-
-.mobile-menu-button--menu .mobile-menu-button__icon {
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2233%22%20height%3D%2222%22%20viewBox%3D%220%200%2033%2022%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%23555559%22%20d%3D%22M0%2022h33.1v-3.7h-33.1v3.7zM0%2012.8h33.1v-3.7h-33.1v3.7zM0%200v3.7h33.1v-3.7h-33.1z%22%2F%3E%0A%3C%2Fsvg%3E');
- background-size: 33px 22px;
- width: 33px; }
-
-.mobile-menu {
- background-color: #eee;
- background-color: rgba(238, 238, 238, 0.98);
+ font-size: 0;
+ height: 0.125rem;
+ left: 50%;
+ margin-left: -0.75rem;
+ position: absolute;
+ top: 28%;
+ transition: background-color 0.3s;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ width: 1.5rem; }
+ .uw-navigation-button > .uw-navigation-button__lines::before, .uw-navigation-button > .uw-navigation-button__lines::after {
+ background: #757575;
+ content: '';
+ height: 100%;
+ left: 0;
+ position: absolute;
+ transition: transform 0.3s;
+ width: 100%; }
+ .uw-navigation-button > .uw-navigation-button__lines::before {
+ transform: translateY(-250%); }
+ .uw-navigation-button > .uw-navigation-button__lines::after {
+ transform: translateY(250%); }
+ .uw-navigation-button[aria-expanded='true'] > .uw-navigation-button__lines::before {
+ transform: translateY(0) rotate(45deg); }
+ .uw-navigation-button[aria-expanded='true'] > .uw-navigation-button__lines::after {
+ transform: translateY(0) rotate(-45deg); }
+
+.no-scroll {
+ bottom: 0;
left: 0;
- overflow-y: auto;
+ overflow: auto;
position: fixed;
- top: 0;
- width: 100%;
- z-index: 999999; }
-
-.mobile-menu__menu {
- list-style-type: none;
- margin: 0;
- padding: 0;
- margin: 0.75em 0 0; }
- .mobile-menu__menu li {
- padding-left: 0; }
- .mobile-menu__menu li::before {
- display: none; }
+ right: 0;
+ top: 0; }
-.mobile-menu__item {
- margin: 0;
- padding: 0;
- position: relative; }
+.uw-header__navigation {
+ display: none; }
+ .uw-header__navigation.close {
+ display: none; }
+ .uw-header__navigation.open {
+ background: #eee;
+ display: block;
+ height: calc(100vh - 7rem); }
+ .no-scroll .uw-header__navigation.open {
+ background: #f7f7f7; }
+ @media (min-width: 48.06rem) {
+ .uw-header__navigation {
+ display: block !important; }
+ .uw-header__navigation.open {
+ display: block !important;
+ height: auto; } }
-.mobile-menu__link {
- background-color: transparent;
- border: 0;
- color: #757575;
+.no-scroll .uw-header__navigation.open {
display: block;
- font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-size: 1.266rem;
- font-weight: 600;
- line-height: 1.45;
- margin: 0;
- padding: 0.76965rem 1rem;
- text-align: left;
- text-decoration: none;
- white-space: normal;
- width: auto;
- z-index: 3; }
- .mobile-menu__link:hover, .mobile-menu__link:focus, .mobile-menu__link:active, .mobile-menu__link.is-active {
- color: #000; }
- .mobile-menu__link.has-subnav {
- margin-right: 44px; }
-
-.mobile-menu__subnav-arrow {
- outline: 2px solid transparent;
- outline-offset: 2px;
- height: 54px;
- overflow: hidden;
- width: 44px;
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2219%22%20height%3D%2212%22%20viewBox%3D%220%200%2019%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M2.3%200l7.5%207.5%207.5-7.5%202.3%202.3-9.7%209.7-9.7-9.7%202.3-2.3z%22%2F%3E%0A%3C%2Fsvg%3E');
- 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; }
- .mobile-menu__subnav-arrow:focus {
- outline-color: #4773aa; }
- .mobile-menu__subnav-arrow::before {
- content: '';
- display: block;
- height: 150%;
- width: 0; }
- [dir='rtl'] .mobile-menu__subnav-arrow {
- left: 0;
- right: auto; }
- .mobile-menu__subnav-arrow[aria-expanded="true"] {
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2219%22%20height%3D%2212%22%20viewBox%3D%220%200%2019%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M2.3%2012l7.5-7.5%207.5%207.5%202.3-2.3-9.7-9.7-9.7%209.7%202.3%202.3z%22%2F%3E%0A%3C%2Fsvg%3E'); }
+ overflow: auto; }
-.mobile-menu__subnav {
- background-color: #fafafa;
- background-color: rgba(250, 250, 250, 0.98);
- display: none;
- list-style: none;
- margin: 0;
- padding: 0; }
- .mobile-menu__subnav .mobile-menu__link {
- color: #757575;
- padding-left: 24px; }
- .mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
- color: #000; }
+@media (min-width: 48.06rem) {
+ .no-scroll .uw-header__navigation.open {
+ display: block !important; } }
.page-title {
padding-top: 1rem; }
@@ -5114,17 +5708,50 @@ picture {
width: 100%; }
.uw-site-logo {
- background: url("../source/images/logos/uwaterloo-logo.svg") 0 50% no-repeat;
- background-color: #000;
- background-size: contain;
- color: #000;
- display: block;
- height: 2.688rem;
- text-indent: -999rem;
- width: 100%; }
+ width: 8rem; }
+ @media (min-width: 30rem) {
+ .uw-site-logo {
+ width: 12.5rem; } }
+ .uw-site-logo .uw-site-logo__link {
+ background: url("../source/images/logos/uwaterloo-logo.svg") 0 50% no-repeat;
+ background-color: #000;
+ background-size: contain;
+ color: #000;
+ display: block;
+ height: 100%;
+ text-align: center;
+ text-indent: -999rem;
+ width: 100%; }
+ @media (min-width: 30rem) {
+ .uw-site-logo .uw-site-logo__link {
+ height: 2.5rem; } }
-.site-name {
- padding: 1rem; }
+.uw-site-name a:hover {
+ text-decoration: underline; }
+
+.uw-site-name__wrapper {
+ padding: 0 8px; }
+ @media (min-width: 48.06rem) {
+ .uw-site-name__wrapper {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75rem;
+ padding: 0 16px; } }
+ @media (min-width: 48.06rem) and (min-width: 75rem) {
+ .uw-site-name__wrapper {
+ padding-left: 0;
+ padding-right: 0; } }
+
+.uw-site-name__link {
+ display: inline-block;
+ letter-spacing: inherit;
+ text-decoration: none;
+ text-transform: uppercase; }
+
+.uw-site-name__text {
+ font-size: 28.832px;
+ margin: 0;
+ padding: 0.5rem 0; }
.skiplinks {
display: flex;
@@ -5465,14 +6092,14 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
.views-element-container {
margin-left: auto;
margin-right: auto;
- max-width: 63.1875rem;
+ max-width: 75rem;
padding: 0 16px;
padding: 1rem; }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.views-element-container {
padding-left: 0;
padding-right: 0; } }
- @media (min-width: 80rem) {
+ @media (min-width: 75rem) {
.views-element-container {
padding: 1rem 0; } }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index a9e05b5661eb13101580b860f08a5d4438747fa3..389c64d102fd6afda25536f942657632a22c2542 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -233,3 +233,181 @@
+
+(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 than 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");
+ }
+
+ }
+ }
+
+ 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();
+ }
+ });
+ }
+
+ document.addEventListener("click", closeSubmenu, false);
+ // Add event listeners on the menu toggle button.
+ 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 = 200;
+ 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() {
+ // 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('open');
+ }
+ } 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/source/_data/design-tokens.artifact.yml b/source/_data/design-tokens.artifact.yml
index e466a437041fea86ee8571eaa53028e7b71f0f47..011637607b12a031d718243208cebdc074509e33 100644
--- a/source/_data/design-tokens.artifact.yml
+++ b/source/_data/design-tokens.artifact.yml
@@ -131,7 +131,7 @@ gesso:
sm: 641px
md: 769px
lg: 1011px
- xl: 1280px
+ xl: 1200px
xxl: 1640px
onek: 1920px
twok: 2559px
diff --git a/source/_patterns/00-config/01-mixins/_mixins.animations.scss b/source/_patterns/00-config/01-mixins/_mixins.animations.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eae4083b4af75d84df5b1376b993129f594d1747
--- /dev/null
+++ b/source/_patterns/00-config/01-mixins/_mixins.animations.scss
@@ -0,0 +1,10 @@
+// @file
+// Animation mixins
+@keyframes fadeIn{
+ 0% {
+ opacity:0;
+ }
+ 100% {
+ opacity:1;
+ }
+}
diff --git a/source/_patterns/00-config/_breakpoints.scss b/source/_patterns/00-config/_breakpoints.scss
index 72e5ff423a4f6ccc4fc492094ffd0b9822815202..b03bdf4b4508eb87e7d49aa2ead665ba484cd126 100644
--- a/source/_patterns/00-config/_breakpoints.scss
+++ b/source/_patterns/00-config/_breakpoints.scss
@@ -15,11 +15,11 @@ $xs: 30rem;
$small: 40.06rem;
$medium: 48.06rem;
$large: 63.1875rem;
-$xl: 80rem;
+$xl: 75rem;
$xxl: 102.5rem;
$onek: 120rem;
$twok: 159.93rem;
-$max-width: $large;
+$max-width: $xl;
/// Mixin - xs Breakpoint
/// Allows easier @include xs {} syntax
diff --git a/source/_patterns/00-config/_design-tokens.artifact.scss b/source/_patterns/00-config/_design-tokens.artifact.scss
index 49fc5e96c24d182fa82de17bb8444ac6c3d63d03..544f6584b2c6faa67b27e75c6b464e6aec4e0c6d 100644
--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -158,7 +158,7 @@ $gesso: (
sm: 641px,
md: 769px,
lg: 1011px,
- xl: 1280px,
+ xl: 1200px,
xxl: 1640px,
onek: 1920px,
twok: 2559px,
diff --git a/source/_patterns/00-config/config.design-tokens.yml b/source/_patterns/00-config/config.design-tokens.yml
index 586527a04b8d803f5b82e6ea193830d8b57773c7..146c9bc433fb2eb391b970bdafe23abf36da36d8 100644
--- a/source/_patterns/00-config/config.design-tokens.yml
+++ b/source/_patterns/00-config/config.design-tokens.yml
@@ -131,7 +131,7 @@ gesso:
sm: 641px
md: 769px
lg: 1011px
- xl: 1280px
+ xl: 1200px
xxl: 1640px
onek: 1920px
twok: 2559px
diff --git a/source/_patterns/03-layouts/content/_content.scss b/source/_patterns/03-layouts/content/_content.scss
index 16ec3a2aceba264be6a34e0b04d74c32ae7f8fd2..5d2f9a2229076ee917953c6979eb9789b795dc2b 100644
--- a/source/_patterns/03-layouts/content/_content.scss
+++ b/source/_patterns/03-layouts/content/_content.scss
@@ -2,3 +2,160 @@
// Styles for Content Layout.
// .l-content {}
+.cuba-bod-person {
+ display: block;
+ width: 100%;
+
+ &__wrapper {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: 50% 50%;
+
+ }
+
+ &__picture {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+
+ img {
+ float: right;
+ }
+ }
+
+ &__titles {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+
+ &__bio {
+
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ padding: 0 2rem;
+ }
+}
+
+.cuba-bod-view {
+ display: block;
+ width: 100%;
+
+ @media screen and (min-width: 48em) {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ &__profile {
+ padding: 1rem 0;
+
+ .button {
+ border-radius: 0;
+ width: 75%;
+ }
+ }
+
+ &__row {
+ display: block;
+ flex: 1 1 100%;
+ margin-bottom: 1.5rem;
+
+ @media screen and (min-width: 48em) {
+ display: flex;
+ flex: 1 1 51%;
+ flex-wrap: wrap;
+
+ }
+ @media screen and (min-width: 64em) {
+ flex: 1 1 50%;
+ max-width:50%;
+ }
+ }
+
+ &__row:first-child {
+ flex: 1 1 100%;
+ margin:4.5rem auto;
+ .cuba-bod-view__card {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ @media screen and (min-width: 64em) {
+ max-width:inherit;
+ .cuba-bod-view__card {
+ max-width:40rem;
+ }
+ }
+
+ }
+ &__row:last-of-type {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ &__card {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+ display: grid;
+ grid-template-columns: 100%;
+ margin: 0 1rem;
+ width:calc(100% - 2rem);
+ @media screen and (min-width: 48em) {
+ grid-gap: 2rem;
+ grid-template-columns: 30% 70%;
+ }
+ }
+
+ &__picture {
+
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media screen and (min-width: 48em) {
+
+ margin-left: initial;
+ margin-right: initial;
+ }
+
+ img {
+
+ margin: 0;
+ padding: 0;
+
+ @media screen and (min-width: 48em) {
+ float: right;
+ }
+ }
+ }
+
+ &__titles {
+
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ padding: 0 1rem;
+ text-align: center;
+
+ @media screen and (min-width: 48em) {
+
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ text-align: left;
+ }
+
+ a {
+ text-decoration: none;
+ }
+ }
+}
+
+.cuba-bod-page-title {
+ h1 {
+
+ font-size: 2rem;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+
+
+ @media screen and (min-width: 48em) {
+ font-size: 3rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/content/content.twig b/source/_patterns/03-layouts/content/content.twig
index c98be1bdfb455f61f9ebb48b2e66c5b485d04d80..cef496553885d455b645917c302d28c874c3c4fd 100644
--- a/source/_patterns/03-layouts/content/content.twig
+++ b/source/_patterns/03-layouts/content/content.twig
@@ -1,5 +1,237 @@
<main id="main" class="uw-main" role="main" tabindex="-1">
{% block content %}
- Content Region Content
+ {#<div class="view view-cuba-view-bod view-id-cuba_view_bod view-display-id-page_1 js-view-dom-id-68027caf5b0907a4a3377d5f79a06e13ef238b89dbd208e7fdecfc9531a492c5">#}
+
+
+
+ {#<div class="view-content">#}
+ {#<div class="cuba-bod-page-title">#}
+ {#<h1>Board of Directors</h1>#}
+ {#</div>#}
+ {#<div class="cuba-bod-description">#}
+ {#The board of directors is elected annually by the association’s members. Members of the CUBA Board of Directors are shown below. Click on their names or photos to read more about each of them.#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view">#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/12">#}
+ {#<img src="https://dev.cuba-accau.ca/profiles/cuba_base_profile/themes/cuba_theme/images/default_board_member.jpg" alt="Member does not have picture">#}
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/12">Vacant(President)</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/12">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/11">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/jcrawford-%281%29.jpg?itok=Fb99iQPP" width="256" height="300" alt="as" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/11">Joy Crawford(Vice Chair)</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#Vice-Chair of the Board of Governors#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Saskatchewan#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/11">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/10">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Mike-Grivicic-2.jpg?itok=4Wsjqrs7" width="240" height="300" alt="MG" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/10">Mike Grivicic(Secretary)</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#Associate University Secretary#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Waterloo#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/10">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/13">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Carrie-Andersen_0.jpg?itok=wDVpBECR" width="214" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/13">Carrie Anderson</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University Secretary#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Victoria#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/13">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/14">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Lynn_castonguy.jpg?itok=m2ILIAfr" width="259" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/14">Lynne Castonguay</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#Secretary-General#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Moncton#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/14">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/14">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Lynn_castonguy.jpg?itok=m2ILIAfr" width="259" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/14">Lynne Castonguay</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#Secretary-General#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Moncton#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/14">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/19">#}
+ {#<img src="https://dev.cuba-accau.ca/profiles/cuba_base_profile/themes/cuba_theme/images/default_board_member.jpg" alt="Member does not have picture">#}
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/19">Vacant(New position)</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/19">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+ {#</div>#}
{% endblock %}
</main>
diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss
index 2cf4b77f1228a17dca21daa4c623f7edfcc9b381..5f8956e86c9a31369f1371b9fc20edac2a932e9d 100644
--- a/source/_patterns/03-layouts/header/_header.scss
+++ b/source/_patterns/03-layouts/header/_header.scss
@@ -1,71 +1,69 @@
// @file
// Styles for Header Layout.
+$site-name-bg: gesso-grayscale(gray-2);
.uw-header {
+ @include uw-full-width;
background-color: #000;
- width: 100%;
&__wrapper {
+
display: grid;
font-family:gesso-font-family(condensedbook);
- grid-template-columns: 100%;
- margin-left: auto;
- margin-right: auto;
- padding: 1rem 0 0;
+ grid-template-columns: auto 6rem;
+ padding: gesso-spacing(xs);
position: relative;
-
- @include large {
- grid-template-columns: auto 12.5rem 50.5rem auto;
+ @include medium{
+ @include uw-contained-width;
+ padding: gesso-spacing(sm);
}
.uw-site-logo {
- grid-column: 1 / 5;
+ grid-column: 1 / 2;
grid-row: 1 / 2;
- @include large {
- grid-column: 2 / 3;
- grid-row: 1 / 2;
- }
}
.uw-header-menu {
- grid-column: 1 / 5;
- grid-row: 2 / 3;
- padding: 1rem 0;
-
- @include large {
- grid-column: 3 / 4;
- grid-row: 1 / 2;
- }
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
}
- .uw-colour-bar {
- grid-column: 1 / 5;
- grid-row: 3 / 4;
- padding-top: 1rem;
-
- @include large {
- grid-column: 1 / 5;
- grid-row: 2 / 3;
- }
- }
+ }
- .uw-main-nav {
- grid-column: 1 / 5;
- grid-row: 4 / 5;
+ .uw-header__nav{
+ @include uw-full-width;
+ background-color: $site-name-bg;
- @include large {
- grid-column: 1 / 5;
- grid-row: 3 / 4;
- }
+ }
+ .uw-header__center{
+ @include uw-contained-width;
+ border-bottom:1px solid gesso-grayscale(gray-3);
+ @include medium{
+ border-bottom:inherit;
}
+ display: grid;
+ grid-template-columns: auto 4rem;
+ padding:0;
+ }
+ .uw-header__site-name{
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ .uw-navigation-button{
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ .uw-header__navigation{
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ }
- .messages-list {
- background-color: $uw-white;
- grid-column: 1 / 5;
- grid-row: 4 / 5;
- margin-bottom: 0;
- margin-top: 0;
- padding: 0 1rem;
- }
+ .messages-list {
+ background-color: $uw-white;
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ 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 4e84c78e573e1fd9e8125627029e63913f2635ed..27522a83c0a94f0dfba5fa885a2adfa191e0b3fb 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -1,20 +1,46 @@
-{% set faculty = faculty ? faculty : 'org-default' %}
+{% if is_demo %}
+ {% set faculty = faculty ? faculty : 'org-art' %}
+{% endif %}
+<header class="uw-header {{ faculty }}" role="banner">
-<header class="uw-header" role="banner">
<div class="uw-header__wrapper">
- {% include '@components/site-logo/site-logo.twig' %}
- {% block content %}
+ {% include '@components/site-logo/site-logo.twig' %}
+
{% 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
+ 'modifier_classes': 'header',
} %}
- {% endblock %}
+
+ </div>
+
{% include '@components/color-bar/color-bar.twig' with {
'faculty': faculty
}%}
- </div>
+
+ <nav class="uw-header__nav">
+ <div class="uw-header__center">
+ <div class="uw-header__site-name">
+ {% include '@components/site-name/site-name.twig' with {
+ 'site_name': site_name
+ } %}
+ </div>
+ <button class="uw-navigation-button" aria-controls="uw-header__navigation" aria-expanded="false">
+ <span class="uw-navigation-button__text">Menu</span>
+ <span class="uw-navigation-button__lines"></span>
+ </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
+ }%}
+
+ {% include "@components/menu/menu--secondary/menu--secondary.twig" with {
+ 'modifier_classes': 'secondary',
+ 'items': secondary_items
+ }%}
+
+ </div>
+ </nav>
</header>
+
diff --git a/source/_patterns/03-layouts/header/header.yml b/source/_patterns/03-layouts/header/header.yml
index 106ab25d6302b600aa8aee3a5f86e46e890d2db7..aedbcda0a0d05dce958bfa0d192ab5bcc962b659 100644
--- a/source/_patterns/03-layouts/header/header.yml
+++ b/source/_patterns/03-layouts/header/header.yml
@@ -1,198 +1,823 @@
---
-menu_name: 'header'
-items:
- - title: 'Admissions'
- url: 'https://uwaterloo.ca/admissions/'
+is_demo: true
+header_modifier_classes: 'header'
+menu_name: 'horizontal'
+header_items:
+ - title: 'Jump To'
+ url: '#'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- - title: 'About Waterloo'
- url: 'https://uwaterloo.ca/about/'
+ 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
+main_modifier_classes: 'main'
+nav_items:
+ - text: 'About Psychology'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
- - title: 'Faculties & Academics'
- url: 'https://uwaterloo.ca/faculties-academics/'
+ active_trail: false
+ menu_items_count: '2'
+ submenu:
+ - text: 'Our mission & vision'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Our People'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
- - title: 'Offices & Services'
- url: 'https://uwaterloo.ca/offices-services/'
+ active_trail: false
+ - text: 'Research'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
- - title: 'Support Waterloo'
- url: 'https://uwaterloo.ca/support/'
+ active_trail: true
+ menu_items_count: '10'
+ submenu:
+ - text: 'Research areas'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Chair and Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ submenu:
+ - text: 'Clinical'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive Neuroscience'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Developmental'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Industrial-Organizational'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: true
+ submenu:
+ - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ active: true
+ - text: 'Social Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: false
+ - text: 'Teaching excellence'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
-nav_items:
- - text: 'Home'
- url: '/front'
+ active_trail: false
+ menu_items_count: '2'
+ submenu:
+ - text: 'Experiential learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Events'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Centre for Mental Health Research and Treatment'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Early Childhood Education Centre'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: '8'
+ submenu:
+ - text: 'Programs offered | Fees'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Enrollment Process | Registration'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research and academic programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Volunteer program'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Contact us'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Resources and links'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Celebrating the Class of 2020'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
- - text: 'This is a long menu link'
- url: 'https://uwaterloo.ca/'
+ menu_items_count: '3'
+ submenu:
+ - text: 'Convocation Award Winners 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student Memories 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Community Partners'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
+ - text: 'Department Profiles Sherman Kwok'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+secondary_modifier_classes: 'secondary'
+secondary_items:
+ - text: 'Undergraduate students '
+ url: '#Parent'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ menu_items_count: 39
submenu:
- - text: 'Link #1-1'
- url: '/front'
+ - text: 'Degree Options and Specializations'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
- - text: 'This is an even longer menu link'
- url: '/front'
+ - text: 'How to become a Psychology Student'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
submenu:
- - text: 'Link #1-2-1'
- url: 'https://uwaterloo.ca/'
+ - text: 'Prospective student'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
- - text: 'Link #1-2-2'
- url: 'https://uwaterloo.ca/'
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ 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: true
+ 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: true
+ active: true
+ - 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: 'Link #1-2-3'
- url: 'https://uwaterloo.ca/'
+ - 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: 'Link #1-3'
- url: '/front'
+ - text: 'Policies'
+ url: '#'
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/'
+ 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
- - text: 'Link #4'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: true
+ menu_items_count: 10
submenu:
- - text: 'Link #4-1'
- url: '/front'
+ - text: 'Meet your lecturers'
+ url: '#'
original_link:
options:
attributes:
class: ''
- active_trail: true
- - text: 'Link #4-2'
- url: '/front'
+ active_trail: false
+ - text: 'Minor & Diploma'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
- - text: 'Link #5'
- url: 'https://uwaterloo.ca/'
+ - 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
- - text: 'Link #6'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- active_trail: false
+ menu_items_count: 19
submenu:
- - text: 'Link #6-1'
- url: 'https://uwaterloo.ca/'
+ - 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: 'Link #6-2'
- url: 'https://uwaterloo.ca/'
+ - 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: 'Link #6-2-1'
- url: 'https://uwaterloo.ca/'
+ - 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: 'Link #6-2-2'
- url: 'https://uwaterloo.ca/'
+ - text: 'Guideline for PhD Thesis Defense'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
- - text: 'Link #6-2-3'
- url: 'https://uwaterloo.ca/'
+ - text: 'Submission of the PhD thesis following the defense'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
- - text: 'Link #6-3'
- url: 'https://uwaterloo.ca/'
+ - text: 'Forms'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Funding & Awards'
+ url: '#'
original_link:
options:
attributes:
class: ''
active_trail: false
- - text: 'Link #7'
- url: 'https://uwaterloo.ca/'
+ - 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: ''
+ 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
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/node/node.twig b/source/_patterns/03-layouts/node/node.twig
index 90ffffc696dff9c990f4655e3149a979562c90d2..08a493397b203f194c83442ad99fa38d3dbc1c4a 100644
--- a/source/_patterns/03-layouts/node/node.twig
+++ b/source/_patterns/03-layouts/node/node.twig
@@ -1,3 +1,9 @@
+{% if classes %}
+ {% set classes = classes %}
+{% else %}
+ {% set classes = [] %}
+{% endif %}
+
{% if has_sidebar == 'Yes' %}
{% set classes = classes | merge(['uw-node__node--with-sidebar']) %}
{% else %}
diff --git a/source/_patterns/03-layouts/site-container/_site-container.scss b/source/_patterns/03-layouts/site-container/_site-container.scss
index 7689368be97c1551e029363a4b66fc40116ab06c..c857b65027ae42f9603c35c34f455d5d4c126923 100644
--- a/source/_patterns/03-layouts/site-container/_site-container.scss
+++ b/source/_patterns/03-layouts/site-container/_site-container.scss
@@ -20,10 +20,10 @@
}
.uw-main {
- background-color: $uw-white;
grid-column: 1 / 2;
grid-row: 3 / 4;
min-height: 60vh;
+ width: 100%;
}
.uw-footer {
@@ -31,3 +31,8 @@
grid-row: 4 / 5;
}
}
+
+.mobile-menu,
+.mobile-menu-button{
+ display:none !important;
+}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 34f0d3c097940cefefcb851ed3642fa53e5cd340..0200a1cb3bb033f0da3e019bd06e7a2139da1ff9 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -1,15 +1,18 @@
-<div class="uw-site-container">
+{% if is_demo %}
+ {% set faculty = faculty ? faculty : 'org-art' %}
+{% endif %}
+
+<div class="uw-site-container" {% if is_demo %}{{ faculty }}{% endif %}>
{% block header %}
- {% include "@layouts/header/header.twig" with {
- 'menu_name': header_menu_name,
- 'items': header_items
- } %}
+ {% include "@layouts/header/header.twig"%}
{% endblock %}
{% block highlighted %}
+ {#{% include '@global/06-break-hints/break-hints.twig' %}#}
{% endblock %}
{% block main %}
+ {% include '@layouts/content/content.twig' %}
{% endblock %}
{% block footer %}
diff --git a/source/_patterns/03-layouts/site-container/site-container.yml b/source/_patterns/03-layouts/site-container/site-container.yml
index c2435311364bc995a5f6cf864cb216125627a1f3..67d3c01ea3b66ef889a53549abf09b55962ed71e 100644
--- a/source/_patterns/03-layouts/site-container/site-container.yml
+++ b/source/_patterns/03-layouts/site-container/site-container.yml
@@ -1,40 +1,52 @@
-header_menu_name: 'header'
+---
+site_name: 'Psychology'
+is_demo: true
+header_modifier_classes: 'header'
+menu_name: 'horizontal'
header_items:
- - 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/'
+ - title: 'Jump To'
+ url: 'Parent'
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
classes:
- 'uw-header'
- 'default'
@@ -116,3 +128,782 @@ social_media:
- text: "LinkedIn"
url: "https://www.linkedin.com/edu/school?id=10875"
social_media_placement: "global-site-footer"
+nav_items:
+ - text: 'About Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 2
+ submenu:
+ - text: 'Our mission & vision'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Our People'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Research'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 10
+ submenu:
+ - text: 'Research areas'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Chair and Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Clinical'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive Neuroscience'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Developmental'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Industrial-Organizational'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: false
+ submenu:
+ - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Social Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: false
+ - text: 'Teaching excellence'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 2
+ submenu:
+ - text: 'Experiential learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Events'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Centre for Mental Health Research and Treatment'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Early Childhood Education Centre'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 8
+ submenu:
+ - text: 'Programs offered | Fees'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Enrollment Process | Registration'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research and academic programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Volunteer program'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Contact us'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Resources and links'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Celebrating the Class of 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 3
+ submenu:
+ - text: 'Convocation Award Winners 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student Memories 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Community Partners'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Department Profiles Sherman Kwok'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+secondary_modifier_classes: 'secondary'
+secondary_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: false
+ 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: true
+ 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: true
+ active: true
+ - 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/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index f4b88b7379af3e556165f72a37e38106106fccb2..d0db5db26b69a9180d289f2dd9260fdfef987e17 100644
--- a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -12,20 +12,24 @@
.messages,
.message,
.contextual-region.profile,
+.uw-content-moderation,
form {
@include uw-contained-width;
padding: rem(gesso-spacing(sm));
- @include xl {
- padding:rem(gesso-spacing(sm)) 0;
- }
}
// righ column on edit
.entity-meta__header{
background-color:#fffbda;
}
-
-
+.uw-content-moderation__wrapper{
+ background-color: gesso-color(ui, warning, background);
+ border: 1px solid gesso-color(ui, warning, border);
+ font-family:gesso-font-family(systemmedium);
+ font-size: gesso-font-size(-1);
+ max-width:inherit;
+ padding: gesso-spacing(sm);
+}
// overlay popuup
.ui-dialog .ui-dialog-title{
diff --git a/source/_patterns/04-components/menu/_menu.scss b/source/_patterns/04-components/menu/_menu.scss
index e46507243dd9e4e1893bd03b8da61bb369c16f6c..4b2be0fc1408fbf594ae2601536667a7aa665aa1 100644
--- a/source/_patterns/04-components/menu/_menu.scss
+++ b/source/_patterns/04-components/menu/_menu.scss
@@ -9,6 +9,6 @@
}
}
-.menu__item {
+.menu--item {
margin-bottom: 0;
}
diff --git a/source/_patterns/04-components/menu/menu--header/_menu--header.scss b/source/_patterns/04-components/menu/menu--header/_menu--header.scss
index f4cc3e0a43afb406b1c7ba1dc51956dd6e3b8080..75c5d62e307f0bfe00798ca9c36c2f4e8061762f 100644
--- a/source/_patterns/04-components/menu/menu--header/_menu--header.scss
+++ b/source/_patterns/04-components/menu/menu--header/_menu--header.scss
@@ -1,26 +1,111 @@
-.uw-header-menu {
- background-color: #000;
+$menu-horizontal-bg: gesso-brand(org-default,uw-black,lvl4);
+$menu-horizontal-drop-bg: #f7f7f7;
+
+.uw-horizontal-nav.uw-horizontal-nav--header {
+ background:$menu-horizontal-bg;
+ max-width:inherit;
+ width:inherit;
+
+ .uw-horizontal-nav--wrapper{
+ background: $menu-horizontal-bg;
+ display:block;
+ max-width:inherit;
+ padding:0;
+ position:relative;
+
- ul {
- display: block;
- text-align: center;
}
+ .uw-horizontal-nav--home{
+ display:none;
+ grid-column: none;
+ padding:0;
- li {
- display: inline-block;
- padding: 0 0.5rem;
}
+ .uw-horizontal-nav--menu {
+ width:inherit;
+ .menu {
+ border:1px solid #fff;
+ height:auto;
+ position:relative;
+ width:6rem;
+ a{
+ color: gesso-brand(org-default,uw-white,lvl1);
+ outline:none;
+ outline-offset: unset;
+ width:100%;
+ &:hover{
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+ }
+ &.menu--subnav{
+ a{
+ color: gesso-brand(org-default,uw-black,lvl4);
+ outline:none;
+ outline-offset: unset;
+ width:100%;
+ }
+ }
+ &--horizontal {
+
+ > .menu--item{
+ background: $menu-horizontal-bg;
+ border-bottom:0 solid transparent;
+ width:100%;
+
+ &.has-submenu {
- a {
- color: #fff;
- font-family: gesso-font-family(condensedbook);
- font-size: rem(gesso-font-size(-1));
- letter-spacing: .045rem;
- text-decoration: none;
- text-transform: uppercase;
+ > a{
+
+ padding-right:gesso-spacing(md);
+ position:relative;
+
+ &::after {
+ content:'\e906';
+ display:block;
+ font-family: gesso-font-family(iconfont);
+ position:absolute;
+ right:0.5rem;
+ text-align: center;
+ top:0.5rem;
+ transform: scale(0.75, 0.75) rotate(90deg);
+ }
+ }
+ }
+ }
+ }
+ &--subnav {
+ display: none;
+ }
+ .submenu-active .menu--subnav{
+ background: $menu-horizontal-drop-bg;
+ border-width:0;
+ display:inherit;
+ height:auto;
+ left:inherit;
+ min-height:auto;
+ min-width:13rem;
+ padding:1rem 0;
+ right:0;
+ top:inherit;
+ width:auto;
+
+ .menu--item{
+ max-width:inherit;
+ }
+ li{
+
+ .menu--link-parent{
+ display:none !important;
+ }
+ }
+ .menu--subnav{
+ border:0 solid #fff;
+ }
+ > li{
+ }
+ }
- &:hover {
- text-decoration: underline;
}
}
-}
\ No newline at end of file
+
+}
diff --git a/source/_patterns/04-components/menu/menu--header/menu--header.twig b/source/_patterns/04-components/menu/menu--header/menu--header.twig
index 56940e896546c9f1d71ef5ac25ff528d0bf7959b..410c5806f89a7977e06858ab33d994a868fd18b5 100644
--- a/source/_patterns/04-components/menu/menu--header/menu--header.twig
+++ b/source/_patterns/04-components/menu/menu--header/menu--header.twig
@@ -1,6 +1,48 @@
-<nav class="uw-header-menu" aria-label="University">
- {% include '@components/menu/menu.twig' with {
- 'menu_name': menu_name,
- 'items': items
- } %}
-</nav>
+{% 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
+ }
+]) %}
+
+{% set items = [] %}
+{% set items = items|merge([
+ {
+ 'title': 'Jump to',
+ 'url': '#',
+ 'in_active_trail': 'false',
+ 'submenu': submenu
+ }
+]) %}
+
+<div class="uw-header-menu" aria-label="">
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'items': items,
+ 'modifier_classes': 'header',
+ 'menu_name': 'horizontal'
+ }%}
+</div>
+
diff --git a/source/_patterns/04-components/menu/menu--header/menu--header.yml b/source/_patterns/04-components/menu/menu--header/menu--header.yml
index ba27ee3a850b9420663e1dd744158a4c11772536..9e4059bc0def84eac863f6b09bb8c33f7375f545 100644
--- a/source/_patterns/04-components/menu/menu--header/menu--header.yml
+++ b/source/_patterns/04-components/menu/menu--header/menu--header.yml
@@ -1,38 +1,50 @@
---
-menu_name: 'header'
+modifier_classes: 'header'
+menu_name: 'horizontal'
items:
- - title: 'Admissions'
- url: 'https://uwaterloo.ca/admissions/'
+ - title: 'Jump To'
+ url: '#'
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
\ No newline at end of file
+ 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
+
+
+
diff --git a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..87e7fc4fee9a6c91c753450d830fe495dbed6efa
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -0,0 +1,561 @@
+$menu-horizontal-bg: gesso-grayscale(gray-2);
+$menu-horizontal-bar-font: gesso-font-family(book);
+$menu-horizontal-sub-font: gesso-font-family(system);
+$menu-horizontal-sub-font-bold: gesso-font-family(systembold);
+$menu-horizontal-bar-font-size: rem(gesso-font-size(-2));
+$menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
+$menu-horizontal-drop-bg: #f7f7f7;
+$test-color-1: #00ff37;
+$test-color-2: #ff2235;
+$test-color-3: #fff620;
+$test-color-4: #3d51ff;
+// Colors
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
+@each $faculty in $faculties {
+ @if $faculty == org-default{
+ .#{$faculty} {
+ .uw-horizontal-nav {
+ .uw-site-home__link{
+ background-color:gesso-brand(org-default,uw-black, lvl4);
+ svg{
+ fill:gesso-brand(org-default,uw-gold,primary);
+ }
+ &:focus{
+ background-color: gesso-brand(org-default,uw-white,lvl1);
+ svg{
+ fill:gesso-brand(org-default,uw-gold,primary);
+ }
+ }
+ &:hover{
+ background-color:gesso-brand(org-default,uw-gold,primary);
+ svg{
+ fill:gesso-brand(org-default,uw-black, lvl4);
+ }
+ }
+ }
+
+ .menu--horizontal {
+ > .is-active-trail {
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+ 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{
+ .is-active-trail {
+ > a{
+ //border-bottom: 2px solid gesso-brand(org-default,uw-black,lvl4);
+ }
+
+ }
+ a{
+ background-color:transparent;
+ border-bottom:1px solid transparent;
+ text-decoration:none;
+ &:focus {
+ background-color: inherit;
+ border-bottom: 1px solid gesso-brand(org-default,uw-black,lvl4);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+ &.active{
+ background-color:inherit;
+ border-bottom:1px solid gesso-brand(org-default,uw-black,lvl4);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ &::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-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ @else {
+ .#{$faculty} {
+ .uw-horizontal-nav {
+ .uw-site-home__link{
+ background-color:gesso-brand($faculty, lvl4);
+ svg{
+ fill:gesso-brand(org-default,uw-white,lvl1);
+ }
+ &:focus{
+ background-color: gesso-brand(org-default,uw-white,lvl1);
+ svg{
+ fill:gesso-brand($faculty, lvl4);
+ }
+ }
+ &:hover{
+ background-color:gesso-brand(org-default,uw-white,lvl1);
+ svg{
+ fill:gesso-brand($faculty, lvl4);
+ }
+ }
+ }
+
+ .menu--horizontal {
+ > .is-active-trail {
+ //border-bottom: 2px solid gesso-brand($faculty, lvl4);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+ li {
+ > a{
+
+ color: gesso-brand(org-default,uw-black,lvl4);
+
+ &:focus,
+ &.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{
+
+ .is-active-trail {
+ > a{
+ //border-bottom: 2px solid gesso-brand($faculty, lvl4);
+ }
+ }
+ a{
+ background-color:transparent;
+ border-bottom:1px solid transparent;
+ text-decoration:none;
+ &.menu--link-parent{
+ color: gesso-brand($faculty, lvl4);
+ &:focus,
+ &.active{
+ background-color:inherit;
+ border-bottom:1px solid gesso-brand($faculty, lvl4);
+ color: gesso-brand($faculty, lvl4);
+ }
+ &:hover{
+ background-color:inherit;
+ border-bottom:1px solid gesso-brand($faculty, lvl4);
+ color: gesso-brand($faculty, lvl4);
+ }
+ }
+ &:focus {
+ background-color: inherit;
+ border-bottom: 1px solid gesso-brand($faculty, lvl4);
+ color: gesso-brand($faculty, lvl4);
+ }
+ &:hover{
+ background-color:inherit;
+ border-bottom:1px solid gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+ &.active{
+ background-color:inherit;
+ border-bottom:1px solid gesso-brand(org-default,uw-black,lvl4);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ &:focus{
+ 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-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.uw-horizontal-nav{
+ @include uw-full-width;
+ background:$menu-horizontal-bg;
+ &--wrapper{
+ @include uw-contained-width;
+ display:grid;
+ padding:0;
+ position:relative;
+ @include medium{
+ grid-template-columns: 3rem auto;
+ padding:0 gesso-spacing(xs);
+ }
+
+ }
+ &--home{
+ display:none;
+ @include medium{
+ display:block;
+ grid-column: 1/2;
+ padding:gesso-spacing(xxs);
+ .uw-site-home__link{
+ border:1px solid $menu-horizontal-bg;
+ border-radius:50%;
+ display:block;
+ height:2rem;
+ outline:none;
+ width:2rem;
+ svg{
+ height:2rem;
+ padding-left:gesso-spacing(xxs);
+ padding-top:gesso-spacing(xxs);
+ width:2rem;
+ }
+ }
+ }
+ }
+ &--menu {
+ @include uw-full-width;
+ @include medium{
+ grid-column: 2/3;
+ }
+
+ .menu {
+ margin-left:inherit;
+ &--link{
+ position:relative;
+ }
+ .menu--item{
+ a{
+ cursor:pointer;
+ 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: $menu-horizontal-bar-font;
+ font-size: $menu-horizontal-bar-font-size;
+ justify-content: flex-start;
+ width: 100%;
+ > .menu--item{
+ border-bottom:1px solid gesso-grayscale(gray-3);
+ @include medium{
+ border-bottom:inherit;
+ }
+ width:100%;
+
+ @include medium{
+ width:auto;
+ }
+ a{
+ display:inline-block;
+ line-height:1.25rem;
+ padding:gesso-spacing(xs);
+ text-decoration:none;
+ width: 100%;
+
+ }
+ &.has-submenu {
+ > a{
+ padding-right:gesso-spacing(md);
+ position:relative;
+
+ &::after {
+ content:'\e906';
+ display:block;
+ font-family: gesso-font-family(iconfont);
+ position:absolute;
+ right:gesso-spacing(xs);
+ text-align: center;
+ top:gesso-spacing(xs);
+ transform: scale(0.75, 0.75);
+ @include medium{
+ transform: scale(0.75, 0.75) rotate(90deg);
+ }
+ }
+ }
+ }
+ .no-scroll & {
+ &[aria-expanded="true"]{
+
+ > a{
+ border-left:1px solid gesso-grayscale(gray-3);
+ display:inline-block;
+ height:2.25rem;
+ overflow:hidden;
+ position:absolute;
+ right:0;
+ top:0;
+ width:2rem;
+ z-index:1000;
+ span{
+ display:none;
+ }
+ &::after {
+ transform: scale(0.75, 0.75) rotate(180deg);
+ }
+ }
+ }
+ }
+ }
+ }
+
+
+ // hide all menus that are classed subnav
+ &--subnav {
+ display: none;
+ font-size: $menu-horizontal-sub-font-size;
+ text-transform: none;
+ width:100%;
+ li{
+ animation: fadeIn ease 0.2s;
+ }
+
+ }
+
+
+ .submenu-active {
+ // Change the height of the tray based on the class assigned by the count of items.
+ &.has-submenu--small .menu--subnav{
+ //background: #ffd700 !important;
+
+ @include medium {
+ min-height: 10rem;
+ }
+ }
+ &.has-submenu--medium .menu--subnav{
+ //background: #00f !important;
+ @include medium {
+ min-height: 25rem;
+ }
+ }
+ &.has-submenu--large .menu--subnav{
+ //background: #800080 !important;
+ min-height:50rem;
+ @include large {
+ min-height: 35rem;
+ }
+
+ }
+ .menu--subnav{
+ background: $menu-horizontal-drop-bg;
+ display:block;
+ // Figure out better way than 100 vh? double check phones
+ height:calc(100vh - 7rem);
+ position: absolute;
+ top:0;
+ z-index:10;
+ ~ .menu--subnav{
+ position: absolute;
+ top:inherit;
+ }
+ @include medium {
+ @include uw-contained-width;
+ align-items: flex-start;
+ background: $menu-horizontal-drop-bg;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 6px 6px rgba(0, 0, 0, 0.13);
+ display: flex;
+ flex-flow: wrap;
+ flex-direction: column;
+ flex-wrap: wrap;
+ height: 100%;
+ left: 3rem;
+ overflow-y:inherit;
+ padding:2.5rem 0.5rem 1rem;
+ top: 100%;
+ width:calc(100% - 6rem);
+ z-index: 10;
+
+ }
+
+ .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;
+ }
+
+ .menu--item{
+ .menu--subnav{
+ padding:0;
+ }
+ display:block;
+ a{
+ font-family:$menu-horizontal-sub-font-bold;
+ font-weight:400;
+ padding:gesso-spacing(xs);
+ padding-right: 24px;
+ .no-scroll &{
+ border-bottom:1px solid #e6e6e6;
+ }
+ @include medium{
+ padding:gesso-spacing(xs);
+
+ }
+ }
+ .no-scroll & {
+ &__parent{
+ border-bottom:1px solid #e6e6e6;
+ padding:0;
+ a{
+
+ border-bottom: 1px solid transparent;
+
+ }
+ }
+ .menu--item {
+ a {
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ padding-left: gesso-spacing(sm);
+ }
+
+ .menu--item {
+ a {
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ padding-left: gesso-spacing(lg);
+ }
+ .menu--item {
+ a {
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ padding-left: gesso-spacing(xl);
+ }
+ }
+ }
+ }
+ }
+
+ @include medium {
+ flex:0 1;
+ height:auto;
+ max-width: 50%;
+ padding-left: gesso-spacing(xs);
+ .menu--item{
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ margin-top:inherit;
+ max-width:inherit;
+ padding-left: gesso-spacing(sm);
+ a{
+ font-family:$menu-horizontal-sub-font;
+ padding:gesso-spacing(xxs);
+ }
+ .menu--item{
+
+ margin-top:inherit;
+ padding-left: gesso-spacing(sm);
+ a{
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ }
+ .menu--item{
+
+ margin-top:inherit;
+ padding-left: gesso-spacing(sm);
+ a{
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ }
+ }
+ }
+ }
+
+ }
+ @include large {
+ max-width: 33%;
+ padding-left: gesso-spacing(sm);
+ }
+ &__parent{
+ padding:gesso-spacing(xxs) 0 gesso-spacing(xxs) gesso-spacing(xs);
+
+ .menu--link-parent {
+ display:inline-block;
+ position:relative;
+ width:auto;
+ &::after {
+ content:'\e3b5';
+ display:block;
+ font-family: gesso-font-family(iconfont);
+ font-size:rem(gesso-font-size(0));
+ position:absolute;
+ right:0;
+ text-align: center;
+ top:gesso-spacing(xs);
+
+
+ }
+ }
+ @include medium {
+ flex: 1 0 100%;
+ max-width:inherit;
+ padding:gesso-spacing(xs) 0 gesso-spacing(xs) gesso-spacing(sm);
+ position: absolute;
+ .menu--link-parent {
+
+ font-size:rem(gesso-font-size(-1));
+ margin:0 0 gesso-spacing(xxs) 0;
+ &::after {
+ right:-1rem;
+ }
+
+ }
+ }
+ top:0;
+ width:100%;
+
+ }
+
+ }
+ }
+ }
+ }
+ }
+
+
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
new file mode 100644
index 0000000000000000000000000000000000000000..3ea218a3d80bf6dab23bf2cd132c1c7cab35d5df
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -0,0 +1,177 @@
+(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 than 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");
+ }
+
+ }
+ }
+
+ 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();
+ }
+ });
+ }
+
+ document.addEventListener("click", closeSubmenu, false);
+ // Add event listeners on the menu toggle button.
+ 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 = 200;
+ 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() {
+ // 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('open');
+ }
+ } 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/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.md b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.md
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
new file mode 100644
index 0000000000000000000000000000000000000000..423565848a38ef2e84f4dce57a0f5ae5f2e08673
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
@@ -0,0 +1,22 @@
+{% if is_demo %}
+{% set faculty = faculty ? faculty : 'org-default' %}
+<div class="{{ faculty }}">
+{% endif %}
+ <nav class="uw-horizontal-nav {% if modifier_classes %} uw-horizontal-nav--{{ modifier_classes }}{% endif %}">
+ <div class="uw-horizontal-nav--wrapper">
+ <div class="uw-horizontal-nav--home">
+ <a href="/home" class="uw-site-home__link">
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><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-horizontal-nav--menu">
+ {% include '@components/menu/menu.twig' with {
+ 'items': items
+ } %}
+ </div>
+ </div>
+ </nav>
+{% if is_demo %}
+ </div>
+{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0f6dd0995f9ed4e5d949e36683a4368d1f5bbd56
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
@@ -0,0 +1,74 @@
+---
+modifier_classes: ''
+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/source/_patterns/04-components/menu/menu--main/_menu--main.scss b/source/_patterns/04-components/menu/menu--main/_menu--main.scss
index 925d03201e0977a89cf17bc592c252ce690952dc..f577a87a1090ede497484f7ca1aee2b3cc9eb103 100644
--- a/source/_patterns/04-components/menu/menu--main/_menu--main.scss
+++ b/source/_patterns/04-components/menu/menu--main/_menu--main.scss
@@ -1,302 +1,302 @@
-$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 gesso-brand($faculty, $lvl);
-
- &.has-submenu {
- &::after {
- border-top: 4px solid gesso-brand($faculty, $lvl);
- }
- }
- }
-
- .has-submenu {
- &:hover {
- &::after {
- border-top: 4px solid gesso-brand($faculty, $lvl);
- }
- }
- }
-
- .has-children {
- &:hover {
- &::after {
- border-left: 4px solid gesso-brand($faculty, $lvl);
- }
- }
- }
-
- 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);
- }
- }
- }
- }
-}
-
-.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;
- }
- }
-}
+//$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 gesso-brand($faculty, $lvl);
+//
+// &.has-submenu {
+// &::after {
+// border-top: 4px solid gesso-brand($faculty, $lvl);
+// }
+// }
+// }
+//
+// .has-submenu {
+// &:hover {
+// &::after {
+// border-top: 4px solid gesso-brand($faculty, $lvl);
+// }
+// }
+// }
+//
+// .has-children {
+// &:hover {
+// &::after {
+// border-left: 4px solid gesso-brand($faculty, $lvl);
+// }
+// }
+// }
+//
+// 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);
+// }
+// }
+// }
+// }
+//}
+//
+//.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;
+// }
+// }
+//}
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..b9e3865b0e5e0e5ddf12a5789785b203c2214e9d 100644
--- a/source/_patterns/04-components/menu/menu--main/menu--main.twig
+++ b/source/_patterns/04-components/menu/menu--main/menu--main.twig
@@ -1,37 +1,42 @@
-<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>
+{#<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>#}
+
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'items': items,
+ 'is_demo': true
+ }%}
\ No newline at end of file
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 b3f58062f2a3aacec061c1dfe2f17ae248644aad..2b366ee2d9368d31b52222a2b08713a8cbdbf895 100644
--- a/source/_patterns/04-components/menu/menu--main/menu--main.yml
+++ b/source/_patterns/04-components/menu/menu--main/menu--main.yml
@@ -1,37 +1,240 @@
+is_demo: true
+modifier_classes: 'main'
+menu_name: 'horizontal'
items:
- - text: 'Home'
- url: '/front'
+ - text: 'About Psychology'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
- - text: 'Link #1'
- url: 'https://uwaterloo.ca/'
+ active_trail: false
+ menu_items_count: 2
+ submenu:
+ - text: 'Our mission & vision'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Our People'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Research'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ menu_items_count: 10
+ submenu:
+ - text: 'Research areas'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Chair and Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ submenu:
+ - text: 'Clinical'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive Neuroscience'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Developmental'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Industrial-Organizational'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: true
+ submenu:
+ - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ active: true
+ - text: 'Social Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: false
+ - text: 'Teaching excellence'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 2
+ submenu:
+ - text: 'Experiential learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Events'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Centre for Mental Health Research and Treatment'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Early Childhood Education Centre'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 8
+ submenu:
+ - text: 'Programs offered | Fees'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Enrollment Process | Registration'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research and academic programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Volunteer program'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Contact us'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Resources and links'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Celebrating the Class of 2020'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
+ menu_items_count: 3
submenu:
- - text: 'Link #1-1'
- url: '/front'
+ - text: 'Convocation Award Winners 2020'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
- - text: 'Link #1-2'
- url: '/front'
+ active_trail: false
+ - text: 'Student Memories 2020'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
- - text: 'Link #2'
- url: 'https://uwaterloo.ca/'
+ active_trail: false
+ - text: 'Community Partners'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Department Profiles Sherman Kwok'
+ url: '#'
original_link:
options:
attributes:
class: ''
- in_active_trail: false
+ active_trail: false
+ menu_items_count: 0
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss b/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
new file mode 100644
index 0000000000000000000000000000000000000000..34444817afe337da4f5a2529f0b33c53d0c8b8b8
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
@@ -0,0 +1,81 @@
+$menu-horizontal-bg-sm: gesso-grayscale(gray-2);
+$menu-horizontal-bg: gesso-brand(org-default,uw-white,lvl1);
+$menu-horizontal-bar-font: gesso-font-family(systembold);
+$menu-horizontal-sub-font: gesso-font-family(system);
+$menu-horizontal-bar-font-size: rem(gesso-font-size(-2));
+$menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
+
+
+.uw-horizontal-nav--secondary{
+ @include uw-full-width;
+ background:$menu-horizontal-bg-sm;
+
+ @include medium{
+ background: $menu-horizontal-bg;
+ border-bottom:3px solid gesso-grayscale(gray-2);
+ }
+ .uw-horizontal-nav--wrapper{
+ @include uw-contained-width;
+ display:grid;
+ padding:0;
+ position:relative;
+ @include medium{
+ grid-template-columns: 3rem auto;
+ padding:0 gesso-spacing(xs);
+ }
+
+ }
+ .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;
+ //background: $test-color-3;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: $menu-horizontal-bar-font;
+ font-size: $menu-horizontal-bar-font-size;
+ justify-content: flex-start;
+ text-transform:inherit;
+ width: 100%;
+ > .menu--item{
+
+ @include medium{
+ width:auto;
+ }
+ a{
+ display:inline-block;
+ font-weight:inherit;
+ line-height:1.25rem;
+ //padding:gesso-spacing(xs);
+ text-decoration:none;
+ //width:100%;
+ &:hover{
+ background-color: gesso-grayscale(gray-2);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0b127e7db99d102f415f04b8bfcf8a536d987b88
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
@@ -0,0 +1,6 @@
+{% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'modifier_classes': 'secondary',
+ 'menu_name': 'horizontal',
+ 'items': items,
+ 'is_demo': true
+}%}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8d0ab16a0cc89260a10151964642c84a92650fd0
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml
@@ -0,0 +1,547 @@
+---
+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/source/_patterns/04-components/menu/menu.twig b/source/_patterns/04-components/menu/menu.twig
index d7e729f6de1f94140ef8ec023d1d8dba73a3a0b0..ac165efbea659d0ec0f219649c9f0655cd7be38e 100644
--- a/source/_patterns/04-components/menu/menu.twig
+++ b/source/_patterns/04-components/menu/menu.twig
@@ -1,100 +1,187 @@
-{% import _self as menus %}
-
-{{ menus.menu_links(items, attributes, 0, menu_name, menu_class, item_class, link_class) }}
-
-{% macro menu_links(items, attributes, menu_level, menu_name, menu_class, item_class, link_class) %}
- {% import _self as menus %}
- {% if items %}
- {% if menu_level == 0 %}
- {# double quotes around class using menu_name needed for interpolation #}
- {% set additional_classes = [
- 'menu',
- "menu--#{menu_name}"
- ] %}
- {% if menu_class %}
- {% set additional_classes = additional_classes|merge(menu_class) %}
- {% endif %}
- {% set additional_attributes = {
- 'class': additional_classes
- } %}
- <ul {{ add_attributes(additional_attributes) }}>
-
- {% else %}
- <ul class="menu menu__subnav">
- {% endif %}
-
- {% for item in items %}
-
- {% set item_classes = ['menu__item'] %}
- {% set link_classes = ['menu__link'] %}
-
- {% if item.below %}
- {% set item_classes = item_classes|merge(['has-subnav']) %}
- {% set link_classes = link_classes|merge(['has-subnav']) %}
- {% endif %}
- {% if item.active_trail %}
- {% set item_classes = item_classes|merge(['is-active-trail']) %}
- {% set link_classes = link_classes|merge(['is-active-trail']) %}
- {% endif %}
- {% if item.is_collapsed %}
- {% set item_classes = item_classes|merge(['is-collapsed']) %}
- {% set link_classes = link_classes|merge(['is-collapsed']) %}
- {% endif %}
- {% if item.is_expanded %}
- {% set item_classes = item_classes|merge(['is-expanded']) %}
- {% set link_classes = link_classes|merge(['is-expanded']) %}
- {% endif %}
- {% if item['original_link'].options.attributes.class %}
- {% set link_classes = link_classes|merge([item['original_link'].options.attributes.class]) %}
- {% endif %}
- {% if item_class %}
- {% set item_classes = item_classes|merge(item_class) %}
- {% endif %}
- {% if link_class %}
- {% set link_classes = link_classes|merge(link_class) %}
- {% endif %}
-
- {% if item.below %}
- {% if menu_level == 0 %}
- {% set item_classes = item_classes|merge(['has-submenu']) %}
- {% elseif menu_level <= 2 %}
- {% set item_classes = item_classes|merge(['has-children']) %}
- {% endif %}
- {% elseif item.submenu %}
- {% if menu_level == 0 %}
- {% set item_classes = item_classes|merge(['has-submenu']) %}
- {% elseif menu_level <= 2 %}
- {% set item_classes = item_classes|merge(['has-children']) %}
- {% endif %}
- {% endif %}
-
- {% set additional_item_attributes = {
- 'class': item_classes
- } %}
-
- {% set link_attributes = {
- 'class': link_classes
- } %}
-
- <li {{ add_attributes(additional_item_attributes) }}>
- <a href="{{ item.url }}" {{ add_attributes(link_attributes) }}>
- <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 %}
- {{ menus.menu_links(item.submenu, attributes, menu_level + 1) }}
- {% endif %}
- </li>
- {% endfor %}
-
- </ul>
-
- {% endif %}
-{% endmacro %}
+{% import _self as menus %}
+
+{% 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, menu_class, item_class, link_class, parent) %}
+
+ {% import _self as menus %}
+
+ {% if items %}
+
+ {% if menu_level == 0 %}
+
+ {# double quotes around class using menu_name needed for interpolation #}
+ {% set additional_classes = [
+ 'menu',
+ "menu--#{menu_name}"
+ ] %}
+
+ {% if menu_class %}
+ {% set additional_classes = additional_classes|merge(menu_class) %}
+ {% endif %}
+
+ {% set additional_attributes = {
+ 'class': additional_classes
+ } %}
+ <ul {{ add_attributes(additional_attributes) }}>
+
+ {% else %}
+ <ul class="menu menu--subnav">
+ {% endif %}
+
+ {% for item in items %}
+
+ {% set item_classes = ['menu--item'] %}
+ {% set link_classes = ['menu--link'] %}
+
+ {% if item.active_trail %}
+ {% set item_classes = item_classes|merge(['is-active-trail']) %}
+ {% endif %}
+
+ {% if item.active %}
+ {% set link_classes = link_classes|merge(['active']) %}
+ {% endif %}
+
+ {% if item_class %}
+ {% set item_classes = item_classes|merge(item_class) %}
+ {% endif %}
+
+ {% if link_class %}
+ {% set link_classes = link_classes|merge(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 %}
+
+ {# Look to see if the menu_items_count is set so and use for menu dropdown class #}
+ {% if item.menu_items_count %}
+
+ {% if item.menu_items_count >= 30 %}
+
+ {# PRINT OUT MENU LEVEL FOR TESTING #}
+ {#{{ item.menu_items_count }}#}
+
+ {% set item_classes = item_classes|merge(['has-submenu--large']) %}
+
+ {% elseif item.menu_items_count >= 10 %}
+
+ {# PRINT OUT MENU LEVEL FOR TESTING #}
+ {#{{ item.menu_items_count }}#}
+
+ {% set item_classes = item_classes|merge(['has-submenu--medium']) %}
+
+ {% elseif item.menu_items_count > 0 %}
+
+ {# PRINT OUT MENU LEVEL FOR TESTING #}
+ {#{{ item.menu_items_count }}#}
+
+ {% set item_classes = item_classes|merge(['has-submenu--small']) %}
+
+ {% endif %}
+
+ {# Add the link class #}
+ {% set link_classes = ['menu--link__sub'] %}
+
+ {% endif %}
+
+
+ {#
+ ERIC IN HERE
+
+ Hide the Parent menu item from printing more than once
+ this is the recursive check we spoke of, my thought was to go 2 deep
+
+ #}
+
+ {% endif %}
+
+ {% endif %}
+
+ {# Set the additional_item_attributes #}
+ {% set additional_item_attributes = {
+ 'class': item_classes
+ } %}
+
+ {# Set the additional_link_classes #}
+ {% set link_attributes = {
+ 'class': link_classes
+ } %}
+
+ {#
+ ERIC IN HERE
+ Check menu level 1 and parent and not have the hide parent flag
+ #}
+ {% if menu_level == 1 and parent and not menu_parent_hide %}
+
+ {% set menu_parent_hide = true %}
+
+ <li class="menu--item menu--item__parent" {{ add_attributes(additional_item_attributes) }}>
+
+ <a href="{{ parent.url }}" class="menu--link-parent" {{ add_attributes(link_attributes) }}>
+
+ <span class="link-text">
+ {% if parent.title %}
+ {{ parent.title }}
+ {% elseif parent.text %}
+ {{ parent.text }}
+ {% endif %}
+ </span>
+
+ </a>
+
+ </li>
+ {% endif %}
+
+ <li {{ add_attributes(additional_item_attributes) }}>
+
+ <a
+
+ {% 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 %}
+ {{ add_attributes(link_attributes) }}
+
+ >
+
+ <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>
+
+ {% endfor %}
+
+ </ul>
+
+ {% endif %}
+{% endmacro %}
diff --git a/source/_patterns/04-components/mobile-menu-button/_mobile-menu-button.scss b/source/_patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
index 3debcb7e2f1c2dc39ea6ff4ca4812bbf4bf16474..98d0e797f6225224eef177180f2f7b1807a6666c 100644
--- a/source/_patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
+++ b/source/_patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
@@ -1,42 +1,103 @@
// @file
// Styles for the mobile menu buttons.
-.mobile-menu-button {
+.uw-navigation-button{
@include focus();
background-color: transparent;
- border: 0;
- border-radius: 0;
- box-shadow: none;
- display: inline-block;
- font-family: gesso-font-family(system);
- font-size: rem(gesso-font-size(1));
- font-weight: gesso-font-weight(bold);
- height: 55px;
- line-height: 55px;
- margin: 0;
- padding: 0 gesso-spacing(sm);
+ border-radius: inherit;
+ color: gesso-grayscale('gray-6');
+ cursor: pointer;
+ display:block;
+ @include medium{
+ display:none;
+ }
+ font-family: gesso-font-family(book);
+ font-size: gesso-font-size(-4);
+ font-weight: 400;
+ letter-spacing:0;
+ margin: inherit;
+ margin-bottom: 0;
+ max-width: inherit;
+ padding:0;
+ padding-top: gesso-spacing(sm);
+ position: relative;
+ text-align: center;
text-decoration: none;
-}
+ text-transform: uppercase;
+ user-select: none;
+ vertical-align: inherit;
+ white-space: nowrap;
+ width: 100%;
+
+ &:visited {
+ //color: $color-text;
+ }
+
+ &:hover,
+ &:focus {
+ //background-color: $color-background-hover;
+ //background-image:$button-background-image;
+ border: 0;
+ outline: none !important;
-.mobile-menu-button__icon {
- @include image-replace(22px, 22px);
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-size: 22px 22px;
- display: inline-block;
- margin-top: gesso-spacing(sm);
-}
-.mobile-menu-button--close {
- .mobile-menu-button__icon {
- @include svg-background-inline(mobile-close);
}
-}
-.mobile-menu-button--menu {
- .mobile-menu-button__icon {
- @include svg-background-inline(mobile-menu);
- background-size: 33px 22px;
- width: 33px;
+ &:active {
+ //background-color: $color-background-active;
+ //background-image:$button-background-image;
+ //color: $color-text-active;
+ outline: none !important;
+ }
+
+ &[disabled] {
+ //background-color: $color-background-disabled;
+ //background-image:$button-background-image;
+ //color: $color-text-disabled;
+ cursor: default;
+ pointer-events: none;
+ }
+ &[aria-expanded='true'] >.uw-navigation-button__lines{
+ background-color: transparent;
+ transition: background-color, opacity 0s;
+ width: 1.5rem;
+ }
+ > .uw-navigation-button__lines {
+ background-color: gesso-grayscale(gray-5);
+ display: block;
+ font-size: 0;
+ height: 0.125rem;
+ left: 50%;
+ margin-left: -0.75rem;
+ position: absolute;
+ top:28%;
+ transition: background-color 0.3s;
+ user-select: none;
+ width: 1.5rem;
+ &::before,
+ &::after{
+ background: gesso-grayscale(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/source/_patterns/04-components/mobile-menu/_mobile-menu.scss b/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
index 81b8be5d03e38741dbf97e1208d0365fad34b599..e63d259e3f13de930cf6a33f53dafc398dc5bfad 100644
--- a/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
+++ b/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
@@ -1,118 +1,172 @@
-// @file
-// Styles for the mobile menu.
+//// @file
+//// Styles for the mobile menu.
+//
+//$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;
+// }
+// }
+//}
-$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;
+.no-scroll {
+ bottom: 0;
left: 0;
- overflow-y: auto;
+ overflow: auto;
position: fixed;
+ right: 0;
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;
+.uw-header__navigation{
+ display:none;
+ &.close{
+ display:none;
}
-
- &.has-subnav {
- margin-right: $mobile-menu-button-width;
+ &.open{
+ background: #eee;
+ display:block;
+ // Minus height of header
+ height:calc(100vh - 7rem);
+ .no-scroll &{
+ background: #f7f7f7;
+ }
}
-}
+ @include medium{
+ display:block !important;
-.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;
+ &.open{
+ display:block !important;
+ height: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;
+.no-scroll{
+ .uw-header__navigation{
+ &.open{
+ display:block;
+ overflow:auto;
+ }
+ @include medium{
- .mobile-menu__link {
- color: $mobile-menu-submenu-link-color;
- padding-left: gesso-spacing(md);
+ &.open{
+ display:block !important;
+ }
- &:hover,
- &:focus,
- &:active {
- color: $mobile-menu-submenu-link-hover-color;
}
}
-}
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/site-logo/_site-logo.scss b/source/_patterns/04-components/site-logo/_site-logo.scss
index c573df31c9dd03a2c2ddd3ea27f1823a0a9c9ba6..8b67cb797503acb1bdd0b4c96013e81d62b10ec5 100644
--- a/source/_patterns/04-components/site-logo/_site-logo.scss
+++ b/source/_patterns/04-components/site-logo/_site-logo.scss
@@ -2,12 +2,23 @@
// Styles for Site logo.
.uw-site-logo {
- background: url('../source/images/logos/uwaterloo-logo.svg') 0 50% no-repeat;
- background-color: #000;
- background-size: contain;
- color: #000;
- display: block;
- height: 2.688rem;
- text-indent: -999rem;
- width: 100%;
+ width:8rem;
+ @include xs {
+ width:12.5rem;
+ }
+ .uw-site-logo__link{
+ background: url('../source/images/logos/uwaterloo-logo.svg') 0 50% no-repeat;
+ background-color: gesso-brand(org-default,uw-black,lvl4);
+ background-size: contain;
+ color: gesso-brand(org-default,uw-black,lvl4);
+ display: block;
+ height: 100%;
+
+ @include xs {
+ height: 2.5rem;
+ }
+ text-align:center;
+ text-indent: -999rem;
+ width: 100%;
+ }
}
diff --git a/source/_patterns/04-components/site-name/_site-name.scss b/source/_patterns/04-components/site-name/_site-name.scss
index 8323335c794855bf841d14e7cdd4ed4b5b83d7df..8ee4cc17c318ae1bc36543d2929099da9e5a4251 100644
--- a/source/_patterns/04-components/site-name/_site-name.scss
+++ b/source/_patterns/04-components/site-name/_site-name.scss
@@ -1,6 +1,34 @@
// @file
// Styles for Site name.
- .site-name {
- padding:1rem;
- }
+$site-name-font-family: gesso-grayscale(gray-2);
+$site-name-font-size: gesso-font-size(5);
+
+.uw-site-name {
+ a{
+ &:hover{ text-decoration:underline;}
+ }
+ &__wrapper{
+
+ padding:0 gesso-spacing(xs);
+ @include medium{
+ @include uw-contained-width();
+ }
+
+ }
+ &__link{
+ display:inline-block;
+ letter-spacing: inherit;
+ text-decoration:none;
+ text-transform:uppercase;
+ &:hover{
+
+ }
+ }
+ &__text{
+ font-size:$site-name-font-size;
+ margin:0;
+ padding:0.5rem 0;
+
+ }
+}
diff --git a/source/_patterns/04-components/site-name/site-name.twig b/source/_patterns/04-components/site-name/site-name.twig
index 154cfd94beabaea775dd9b44234a0d006de61616..08e87dee0af53dc3b1414b961dc9672d289e1881 100644
--- a/source/_patterns/04-components/site-name/site-name.twig
+++ b/source/_patterns/04-components/site-name/site-name.twig
@@ -1,3 +1,9 @@
-<a class="site-name" href="{{ url }}" title="{{ 'Home'|t }}" rel="home">
- <h1 class="site-name__text">{{ site_name }}</h1>
-</a>
+<div class="uw-site-name">
+ <div class="uw-site-name__wrapper">
+ <a class="uw-site-name__link" href="{{ url }}" title="{{ 'Home'|t }}" rel="home">
+ <h1 class="uw-site-name__text">{{ site_name }}</h1>
+ </a>
+ </div>
+
+</div>
+