From 58749c9c7c990044ca248fc534151c1ab8d30ff8 Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Tue, 10 Nov 2020 16:07:24 -0500
Subject: [PATCH] Additional css for presentation layer as per pdf v5
---
css/styles.css | 606 ++++++++----------
.../_patterns/03-layouts/header/_header.scss | 1 +
.../_patterns/03-layouts/header/header.twig | 2 +-
.../site-container/_site-container.scss | 9 +-
.../site-container/site-container.twig | 2 +
.../site-container/site-container.yml | 4 +-
.../menu/menu--header/menu--header.twig | 8 +-
.../menu--horizontal/_menu--horizontal.scss | 235 +++----
.../menu--horizontal/menu--horizontal.twig | 2 +-
.../menu/menu--main/menu--main.yml | 2 +-
.../menu--secondary/_menu--secondary.scss | 237 +------
11 files changed, 390 insertions(+), 718 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 45da58b4..6514ff8d 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1860,6 +1860,7 @@ svg:not(:root) {
padding-top: 1rem;
width: 100%; }
.uw-header__wrapper .uw-main-nav {
+ display: none;
grid-column: 1 / 5;
grid-row: 4 / 5; }
@media (min-width: 48.06rem) {
@@ -2020,10 +2021,22 @@ svg:not(:root) {
.uw-site-container .uw-highlighted {
padding: 0; } }
.uw-site-container .uw-main {
- background-color: #fff;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75rem;
+ padding: 0 16px;
grid-column: 1 / 2;
grid-row: 3 / 4;
- min-height: 60vh; }
+ min-height: 60vh;
+ padding: 1.5rem;
+ width: 100%; }
+ @media (min-width: 75rem) {
+ .uw-site-container .uw-main {
+ padding-left: 0;
+ padding-right: 0; } }
+ @media (min-width: 75rem) {
+ .uw-site-container .uw-main {
+ padding: 0; } }
.uw-site-container .uw-footer {
grid-column: 1 / 2;
grid-row: 4 / 5; }
@@ -4103,20 +4116,34 @@ fieldset,
fill: #000; }
.org-default .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #000;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-default .uw-horizontal-nav .menu--horizontal li > a {
- background-color: #eee;
color: #000; }
.org-default .uw-horizontal-nav .menu--horizontal li > a:focus, .org-default .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
- background-color: #000;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-default .uw-horizontal-nav .menu--horizontal li > a:active {
- background-color: #000;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-default .uw-horizontal-nav .menu--horizontal li > a:hover {
- background-color: #fffaaa;
+ background-color: #fff;
+ color: #000; }
+
+.org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ border-bottom: 3px solid transparent;
+ text-decoration: none; }
+ .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus, .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a.is-active-trail {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
+ color: #000; }
+ .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a:active {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc; }
+ .org-default .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
color: #000; }
.org-ahs .uw-horizontal-nav .uw-site-home__link {
@@ -4132,21 +4159,41 @@ fieldset,
.org-ahs .uw-horizontal-nav .uw-site-home__link:hover svg {
fill: #005963; }
+.org-ahs .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ border-top: 4px solid #005963; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal > .is-active-trail.has-submenu::after {
+ border-top: 4px solid #005963; }
+
.org-ahs .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #005963;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-ahs .uw-horizontal-nav .menu--horizontal li > a {
- background-color: #eee;
color: #000; }
.org-ahs .uw-horizontal-nav .menu--horizontal li > a:focus, .org-ahs .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
- background-color: #005963;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-ahs .uw-horizontal-nav .menu--horizontal li > a:active {
- background-color: #005963;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-ahs .uw-horizontal-nav .menu--horizontal li > a:hover {
- background-color: #97dfef;
+ background-color: #fff;
+ color: #000; }
+
+.org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ border-bottom: 3px solid transparent;
+ text-decoration: none; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus, .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.is-active-trail {
+ background-color: inherit;
+ border-bottom: 3px solid #005963;
+ color: #005963; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a:active {
+ background-color: inherit;
+ border-bottom: 3px solid #005963;
+ color: #005963; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
color: #000; }
.org-art .uw-horizontal-nav .uw-site-home__link {
@@ -4162,21 +4209,41 @@ fieldset,
.org-art .uw-horizontal-nav .uw-site-home__link:hover svg {
fill: #d93f00; }
+.org-art .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ border-top: 4px solid #d93f00; }
+ .org-art .uw-horizontal-nav .menu--horizontal > .is-active-trail.has-submenu::after {
+ border-top: 4px solid #d93f00; }
+
.org-art .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #d93f00;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-art .uw-horizontal-nav .menu--horizontal li > a {
- background-color: #eee;
color: #000; }
.org-art .uw-horizontal-nav .menu--horizontal li > a:focus, .org-art .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
- background-color: #d93f00;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-art .uw-horizontal-nav .menu--horizontal li > a:active {
- background-color: #d93f00;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-art .uw-horizontal-nav .menu--horizontal li > a:hover {
- background-color: #ffd5a5;
+ background-color: #fff;
+ color: #000; }
+
+.org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ border-bottom: 3px solid transparent;
+ text-decoration: none; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus, .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.is-active-trail {
+ background-color: inherit;
+ border-bottom: 3px solid #d93f00;
+ color: #d93f00; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a:active {
+ background-color: inherit;
+ border-bottom: 3px solid #d93f00;
+ color: #d93f00; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
color: #000; }
.org-eng .uw-horizontal-nav .uw-site-home__link {
@@ -4192,21 +4259,41 @@ fieldset,
.org-eng .uw-horizontal-nav .uw-site-home__link:hover svg {
fill: #57058b; }
+.org-eng .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ border-top: 4px solid #57058b; }
+ .org-eng .uw-horizontal-nav .menu--horizontal > .is-active-trail.has-submenu::after {
+ border-top: 4px solid #57058b; }
+
.org-eng .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #57058b;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-eng .uw-horizontal-nav .menu--horizontal li > a {
- background-color: #eee;
color: #000; }
.org-eng .uw-horizontal-nav .menu--horizontal li > a:focus, .org-eng .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
- background-color: #57058b;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-eng .uw-horizontal-nav .menu--horizontal li > a:active {
- background-color: #57058b;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-eng .uw-horizontal-nav .menu--horizontal li > a:hover {
- background-color: #d0b4ef;
+ background-color: #fff;
+ color: #000; }
+
+.org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ border-bottom: 3px solid transparent;
+ text-decoration: none; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus, .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.is-active-trail {
+ background-color: inherit;
+ border-bottom: 3px solid #57058b;
+ color: #57058b; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a:active {
+ background-color: inherit;
+ border-bottom: 3px solid #57058b;
+ color: #57058b; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
color: #000; }
.org-env .uw-horizontal-nav .uw-site-home__link {
@@ -4222,21 +4309,41 @@ fieldset,
.org-env .uw-horizontal-nav .uw-site-home__link:hover svg {
fill: #607000; }
+.org-env .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ border-top: 4px solid #607000; }
+ .org-env .uw-horizontal-nav .menu--horizontal > .is-active-trail.has-submenu::after {
+ border-top: 4px solid #607000; }
+
.org-env .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #607000;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-env .uw-horizontal-nav .menu--horizontal li > a {
- background-color: #eee;
color: #000; }
.org-env .uw-horizontal-nav .menu--horizontal li > a:focus, .org-env .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
- background-color: #607000;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-env .uw-horizontal-nav .menu--horizontal li > a:active {
- background-color: #607000;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-env .uw-horizontal-nav .menu--horizontal li > a:hover {
- background-color: #daf582;
+ background-color: #fff;
+ color: #000; }
+
+.org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ border-bottom: 3px solid transparent;
+ text-decoration: none; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus, .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.is-active-trail {
+ background-color: inherit;
+ border-bottom: 3px solid #607000;
+ color: #607000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a:active {
+ background-color: inherit;
+ border-bottom: 3px solid #607000;
+ color: #607000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
color: #000; }
.org-mat .uw-horizontal-nav .uw-site-home__link {
@@ -4252,21 +4359,41 @@ fieldset,
.org-mat .uw-horizontal-nav .uw-site-home__link:hover svg {
fill: #c60078; }
+.org-mat .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ border-top: 4px solid #c60078; }
+ .org-mat .uw-horizontal-nav .menu--horizontal > .is-active-trail.has-submenu::after {
+ border-top: 4px solid #c60078; }
+
.org-mat .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #c60078;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-mat .uw-horizontal-nav .menu--horizontal li > a {
- background-color: #eee;
color: #000; }
.org-mat .uw-horizontal-nav .menu--horizontal li > a:focus, .org-mat .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
- background-color: #c60078;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-mat .uw-horizontal-nav .menu--horizontal li > a:active {
- background-color: #c60078;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-mat .uw-horizontal-nav .menu--horizontal li > a:hover {
- background-color: #ffbeef;
+ background-color: #fff;
+ color: #000; }
+
+.org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ border-bottom: 3px solid transparent;
+ text-decoration: none; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus, .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.is-active-trail {
+ background-color: inherit;
+ border-bottom: 3px solid #c60078;
+ color: #c60078; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a:active {
+ background-color: inherit;
+ border-bottom: 3px solid #c60078;
+ color: #c60078; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
color: #000; }
.org-sci .uw-horizontal-nav .uw-site-home__link {
@@ -4282,21 +4409,41 @@ fieldset,
.org-sci .uw-horizontal-nav .uw-site-home__link:hover svg {
fill: #0033be; }
+.org-sci .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ border-top: 4px solid #0033be; }
+ .org-sci .uw-horizontal-nav .menu--horizontal > .is-active-trail.has-submenu::after {
+ border-top: 4px solid #0033be; }
+
.org-sci .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #0033be;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-sci .uw-horizontal-nav .menu--horizontal li > a {
- background-color: #eee;
color: #000; }
.org-sci .uw-horizontal-nav .menu--horizontal li > a:focus, .org-sci .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
- background-color: #0033be;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-sci .uw-horizontal-nav .menu--horizontal li > a:active {
- background-color: #0033be;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-sci .uw-horizontal-nav .menu--horizontal li > a:hover {
- background-color: #b4d5ff;
+ background-color: #fff;
+ color: #000; }
+
+.org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ border-bottom: 3px solid transparent;
+ text-decoration: none; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus, .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.is-active-trail {
+ background-color: inherit;
+ border-bottom: 3px solid #0033be;
+ color: #0033be; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a:active {
+ background-color: inherit;
+ border-bottom: 3px solid #0033be;
+ color: #0033be; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
color: #000; }
.org-school .uw-horizontal-nav .uw-site-home__link {
@@ -4312,21 +4459,41 @@ fieldset,
.org-school .uw-horizontal-nav .uw-site-home__link:hover svg {
fill: #80001f; }
+.org-school .uw-horizontal-nav .menu--horizontal > .is-active-trail {
+ border-top: 4px solid #80001f; }
+ .org-school .uw-horizontal-nav .menu--horizontal > .is-active-trail.has-submenu::after {
+ border-top: 4px solid #80001f; }
+
.org-school .uw-horizontal-nav .menu--horizontal li.submenu-active > a {
- background-color: #80001f;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-school .uw-horizontal-nav .menu--horizontal li > a {
- background-color: #eee;
color: #000; }
.org-school .uw-horizontal-nav .menu--horizontal li > a:focus, .org-school .uw-horizontal-nav .menu--horizontal li > a.is-active-trail {
- background-color: #80001f;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-school .uw-horizontal-nav .menu--horizontal li > a:active {
- background-color: #80001f;
- color: #fff; }
+ background-color: #ccc;
+ color: #000; }
.org-school .uw-horizontal-nav .menu--horizontal li > a:hover {
- background-color: #ffa5aa;
+ background-color: #fff;
+ color: #000; }
+
+.org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a {
+ border-bottom: 3px solid transparent;
+ text-decoration: none; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a:focus, .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.is-active-trail {
+ background-color: inherit;
+ border-bottom: 3px solid #80001f;
+ color: #80001f; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a:active {
+ background-color: inherit;
+ border-bottom: 3px solid #80001f;
+ color: #80001f; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 3px solid #ccc;
color: #000; }
.uw-horizontal-nav {
@@ -4389,10 +4556,8 @@ fieldset,
font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 0.79rem;
justify-content: flex-start;
- text-transform: uppercase;
width: 100%; }
.uw-horizontal-nav--menu .menu--horizontal > .menu--item {
- white-space: nowrap;
width: 100%; }
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu--horizontal > .menu--item {
@@ -4401,8 +4566,7 @@ fieldset,
display: inline-block;
line-height: 1.25rem;
padding: 8px;
- text-decoration: none;
- width: 100%; }
+ text-decoration: none; }
.uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a {
padding-right: 24px;
position: relative; }
@@ -4418,41 +4582,48 @@ fieldset,
@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); } }
- .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a:focus::after {
- color: #fff; }
- .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a:hover::after {
- color: #000; }
.uw-horizontal-nav--menu .menu--subnav {
- background: #eee;
display: none;
font-size: 0.79rem;
- text-transform: none; }
+ text-transform: none;
+ width: 100%; }
.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;
- min-height: 30rem;
+ min-height: 80vh;
position: absolute;
top: 100%;
- width: 85%;
+ width: 100%;
z-index: 10; }
@media (min-width: 75rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
padding-left: 0;
padding-right: 0; } }
+ @media (min-width: 75rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
+ min-height: 34rem;
+ width: calc(100% - 7rem); } }
.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;
max-height: inherit;
@@ -4462,276 +4633,42 @@ fieldset,
width: inherit;
z-index: inherit; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
- border-right: 1px solid #a2a2a2;
+ display: block;
flex: 0 1;
- padding-left: 8px; }
+ height: auto;
+ padding-left: 16px; }
.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: 600; }
- .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item:last-child {
- border-right: 0; }
+ font-weight: 600;
+ padding: 4px;
+ padding-left: 0; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item {
- border-right: 0;
- flex: inherit;
+ font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200;
margin-top: inherit;
- padding-left: 24px; }
+ padding-left: 16px; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item a {
font-family: Typ1451-Medium,-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 {
- border-right: 0;
- flex: inherit;
margin-top: inherit;
- padding-left: 16px; }
+ padding-left: 24px; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-weight: 200; }
-
-.org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
- background-color: #000;
- color: #fff; }
-
-.org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
- background-color: #eee;
- color: #000; }
- .org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
- background-color: #000;
- color: #fff; }
- .org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
- background-color: #000;
- color: #fff; }
- .org-default .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
- background-color: #fffaaa;
- color: #000; }
-
-.org-default .uw-horizontal-nav--secondary .menu--horizontal li > a {
- background-color: #fff;
- color: #000; }
- .org-default .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-default .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
- background-color: #000;
- color: #fff; }
- .org-default .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
- background-color: #000;
- color: #fff; }
- .org-default .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
- background-color: #fffaaa;
- color: #000; }
-
-.org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
- background-color: #005963;
- color: #fff; }
-
-.org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
- background-color: #eee;
- color: #000; }
- .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
- background-color: #005963;
- color: #fff; }
- .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
- background-color: #005963;
- color: #fff; }
- .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
- background-color: #97dfef;
- color: #000; }
-
-.org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a {
- background-color: #fff;
- color: #000; }
- .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
- background-color: #005963;
- color: #fff; }
- .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
- background-color: #005963;
- color: #fff; }
- .org-ahs .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
- background-color: #97dfef;
- color: #000; }
-
-.org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
- background-color: #d93f00;
- color: #fff; }
-
-.org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
- background-color: #eee;
- color: #000; }
- .org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
- background-color: #d93f00;
- color: #fff; }
- .org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
- background-color: #d93f00;
- color: #fff; }
- .org-art .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
- background-color: #ffd5a5;
- color: #000; }
-
-.org-art .uw-horizontal-nav--secondary .menu--horizontal li > a {
- background-color: #fff;
- color: #000; }
- .org-art .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-art .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
- background-color: #d93f00;
- color: #fff; }
- .org-art .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
- background-color: #d93f00;
- color: #fff; }
- .org-art .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
- background-color: #ffd5a5;
- color: #000; }
-
-.org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
- background-color: #57058b;
- color: #fff; }
-
-.org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
- background-color: #eee;
- color: #000; }
- .org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
- background-color: #57058b;
- color: #fff; }
- .org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
- background-color: #57058b;
- color: #fff; }
- .org-eng .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
- background-color: #d0b4ef;
- color: #000; }
-
-.org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a {
- background-color: #fff;
- color: #000; }
- .org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
- background-color: #57058b;
- color: #fff; }
- .org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
- background-color: #57058b;
- color: #fff; }
- .org-eng .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
- background-color: #d0b4ef;
- color: #000; }
-
-.org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
- background-color: #607000;
- color: #fff; }
-
-.org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
- background-color: #eee;
- color: #000; }
- .org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
- background-color: #607000;
- color: #fff; }
- .org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
- background-color: #607000;
- color: #fff; }
- .org-env .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
- background-color: #daf582;
- color: #000; }
-
-.org-env .uw-horizontal-nav--secondary .menu--horizontal li > a {
- background-color: #fff;
- color: #000; }
- .org-env .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-env .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
- background-color: #607000;
- color: #fff; }
- .org-env .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
- background-color: #607000;
- color: #fff; }
- .org-env .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
- background-color: #daf582;
- color: #000; }
-
-.org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
- background-color: #c60078;
- color: #fff; }
-
-.org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
- background-color: #eee;
- color: #000; }
- .org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
- background-color: #c60078;
- color: #fff; }
- .org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
- background-color: #c60078;
- color: #fff; }
- .org-mat .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
- background-color: #ffbeef;
- color: #000; }
-
-.org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a {
- background-color: #fff;
- color: #000; }
- .org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
- background-color: #c60078;
- color: #fff; }
- .org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
- background-color: #c60078;
- color: #fff; }
- .org-mat .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
- background-color: #ffbeef;
- color: #000; }
-
-.org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
- background-color: #0033be;
- color: #fff; }
-
-.org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
- background-color: #eee;
- color: #000; }
- .org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
- background-color: #0033be;
- color: #fff; }
- .org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
- background-color: #0033be;
- color: #fff; }
- .org-sci .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
- background-color: #b4d5ff;
- color: #000; }
-
-.org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a {
- background-color: #fff;
- color: #000; }
- .org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
- background-color: #0033be;
- color: #fff; }
- .org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
- background-color: #0033be;
- color: #fff; }
- .org-sci .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
- background-color: #b4d5ff;
- color: #000; }
-
-.org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active > a {
- background-color: #80001f;
- color: #fff; }
-
-.org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a {
- background-color: #eee;
- color: #000; }
- .org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:focus, .org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a.is-active-trail {
- background-color: #80001f;
- color: #fff; }
- .org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:active {
- background-color: #80001f;
- color: #fff; }
- .org-school .uw-horizontal-nav--secondary .menu--horizontal li.submenu-active .menu--subnav a:hover {
- background-color: #ffa5aa;
- color: #000; }
-
-.org-school .uw-horizontal-nav--secondary .menu--horizontal li > a {
- background-color: #fff;
- color: #000; }
- .org-school .uw-horizontal-nav--secondary .menu--horizontal li > a:focus, .org-school .uw-horizontal-nav--secondary .menu--horizontal li > a.is-active-trail {
- background-color: #80001f;
- color: #fff; }
- .org-school .uw-horizontal-nav--secondary .menu--horizontal li > a:active {
- background-color: #80001f;
- color: #fff; }
- .org-school .uw-horizontal-nav--secondary .menu--horizontal li > a:hover {
- background-color: #ffa5aa;
- color: #000; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item {
+ margin-top: inherit;
+ padding-left: 24px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200; }
.uw-horizontal-nav--secondary {
max-width: 100%;
padding: 0;
width: 100%;
- background: #fff; }
+ background: #fff;
+ border-bottom: 3px solid #eee; }
.uw-horizontal-nav--secondary .uw-horizontal-nav--wrapper {
margin-left: auto;
margin-right: auto;
@@ -4776,9 +4713,7 @@ fieldset,
display: inline-block;
font-weight: inherit;
line-height: 1.25rem;
- padding: 8px;
- text-decoration: none;
- width: 100%; }
+ text-decoration: none; }
.uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a {
padding-right: 24px;
position: relative; }
@@ -4794,12 +4729,7 @@ fieldset,
@media (min-width: 48.06rem) {
.uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
transform: scale(0.75, 0.75) rotate(90deg); } }
- .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a:focus::after {
- color: #fff; }
- .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a:hover::after {
- color: #000; }
.uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--subnav {
- background: #eee;
display: none;
font-size: 0.79rem;
text-transform: none; }
diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss
index 62224b44..bd970bc6 100644
--- a/source/_patterns/03-layouts/header/_header.scss
+++ b/source/_patterns/03-layouts/header/_header.scss
@@ -42,6 +42,7 @@
}
.uw-main-nav {
+ display:none;
grid-column: 1 / 5;
grid-row: 4 / 5;
diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig
index 7b58b318..4af005ad 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -17,7 +17,7 @@
'faculty': faculty
}%}
{% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
- 'modifier_classes': 'header',
+ 'modifier_classes': 'main',
'items': nav_items
}%}
{% include "@components/menu/menu--secondary/menu--secondary.twig" with {
diff --git a/source/_patterns/03-layouts/site-container/_site-container.scss b/source/_patterns/03-layouts/site-container/_site-container.scss
index 7689368b..d91681aa 100644
--- a/source/_patterns/03-layouts/site-container/_site-container.scss
+++ b/source/_patterns/03-layouts/site-container/_site-container.scss
@@ -20,10 +20,17 @@
}
.uw-main {
- background-color: $uw-white;
+ //@include uw-contained-width;
+ @include uw-contained-width;
grid-column: 1 / 2;
grid-row: 3 / 4;
min-height: 60vh;
+ padding: rem(gesso-spacing(md));
+ width: 100%;
+ @include xl {
+ padding: 0;
+ }
+
}
.uw-footer {
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 21320f1c..5da44234 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -8,9 +8,11 @@
{% 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 b0a04706..d63845cb 100644
--- a/source/_patterns/03-layouts/site-container/site-container.yml
+++ b/source/_patterns/03-layouts/site-container/site-container.yml
@@ -163,7 +163,7 @@ nav_items:
options:
attributes:
class: ''
- active_trail: false
+ active_trail: true
submenu:
- text: 'Clinical'
url: '#'
@@ -412,7 +412,7 @@ secondary_items:
options:
attributes:
class: ''
- active_trail: false
+ active_trail: true
submenu:
- text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
url: '#'
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 b463ad31..56940e89 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,6 @@
<nav class="uw-header-menu" aria-label="University">
- {% include '@components/menu/menu.twig' with {
- 'menu_name': menu_name,
- 'items': items
- } %}
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': menu_name,
+ 'items': items
+ } %}
</nav>
diff --git a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index f3dbeefb..b62b78e0 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -1,4 +1,5 @@
$menu-horizontal-bg: gesso-grayscale(gray-2);
+$menu-horizontal-drop-bg: #f7f7f7;
$menu-horizontal-bar-font: gesso-font-family(book);
$menu-horizontal-sub-font: gesso-font-family(systemmedium);
$menu-horizontal-sub-font-bold: gesso-font-family(systembold);
@@ -31,80 +32,55 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
.menu--horizontal {
- //> .is-active-trail {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- //
- // &.has-submenu {
- // &::after {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- //
- //.has-submenu {
- // &:hover {
- // &::after {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- //
- //.has-children {
- // &:hover {
- // &::after {
- // border-left: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
li {
&.submenu-active {
> a {
- background-color:gesso-brand(org-default, uw-black, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
}
}
> a{
- background-color:$menu-horizontal-bg;
+
color: gesso-brand(org-default,uw-black,lvl4);
&:focus,
&.is-active-trail{
- background-color:gesso-brand(org-default, uw-black, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
}
&:active{
- background-color:gesso-brand(org-default, uw-black, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
}
&:hover{
- background-color: gesso-brand(org-default,uw-gold,lvl1);
+ background-color: gesso-brand(org-default,uw-white,lvl1);
color: gesso-brand(org-default,uw-black,lvl4);
}
}
- ul {
- //border-top: 4px solid gesso-brand($faculty, $link-lvl);
- }
-
- ul {
- //.is-active-trail {
- // color: gesso-brand($faculty, $link-lvl);
- //}
- li {
- ul {
- //border-left: 4px solid gesso-brand($faculty, $link-lvl);
+ .menu--subnav{
+ a{
+ border-bottom:3px solid transparent;
+ text-decoration:none;
- &::before {
- //border-right: 5px solid gesso-brand($faculty, $link-lvl);
- }
+ &:focus,
+ &.is-active-trail{
+ background-color:inherit;
+ border-bottom:3px solid gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
+ }
+ &:active{
+ background-color:inherit;
+ border-bottom:3px solid gesso-grayscale(gray-3);
+ }
+ &:hover{
+ background-color:inherit;
+ border-bottom:3px solid gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
}
}
}
-
- //.is-active-trail {
- // color: gesso-brand($faculty, $link-lvl);
- //}
}
}
}
@@ -133,80 +109,62 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
.menu--horizontal {
- //> .is-active-trail {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- //
- // &.has-submenu {
- // &::after {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- //
- //.has-submenu {
- // &:hover {
- // &::after {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- //
- //.has-children {
- // &:hover {
- // &::after {
- // border-left: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
+ > .is-active-trail {
+ border-top: 4px solid gesso-brand($faculty, lvl4);
+ &.has-submenu {
+ &::after {
+ border-top: 4px solid gesso-brand($faculty, lvl4);
+ }
+ }
+ }
li {
&.submenu-active {
> a {
- background-color: gesso-brand($faculty, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
}
}
> a{
- background-color:$menu-horizontal-bg;
color: gesso-brand(org-default,uw-black,lvl4);
&:focus,
&.is-active-trail{
- background-color: gesso-brand($faculty, lvl4);
- color: gesso-brand(org-default,uw-white,lvl1);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
}
&:active{
- background-color: gesso-brand($faculty, lvl4);
- color: gesso-brand(org-default,uw-white,lvl1);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
}
&:hover{
- background-color: gesso-brand($faculty, lvl1);
+ background-color: gesso-brand(org-default,uw-white,lvl1);
color: gesso-brand(org-default,uw-black,lvl4);
}
}
+ .menu--subnav{
+ a{
+ border-bottom:3px solid transparent;
+ text-decoration:none;
- ul {
- //border-top: 4px solid gesso-brand($faculty, $link-lvl);
- }
-
- ul {
- //.is-active-trail {
- // color: gesso-brand($faculty, $link-lvl);
- //}
- li {
- ul {
- //border-left: 4px solid gesso-brand($faculty, $link-lvl);
-
- &::before {
- //border-right: 5px solid gesso-brand($faculty, $link-lvl);
- }
+ &:focus,
+ &.is-active-trail{
+ background-color:inherit;
+ border-bottom:3px solid gesso-brand($faculty, lvl4);
+ color: gesso-brand($faculty, lvl4);
+ }
+ &:active{
+ background-color:inherit;
+ border-bottom:3px solid gesso-brand($faculty, lvl4);
+ color: gesso-brand($faculty, lvl4);
+ }
+ &:hover{
+ background-color:inherit;
+ border-bottom:3px solid gesso-grayscale(gray-3);
+ color: gesso-brand(org-default,uw-black,lvl4);
}
}
}
-
- //.is-active-trail {
- // color: gesso-brand($faculty, $link-lvl);
- //}
}
}
}
@@ -277,12 +235,8 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
font-family: $menu-horizontal-bar-font;
font-size: $menu-horizontal-bar-font-size;
justify-content: flex-start;
- text-transform:uppercase;
width: 100%;
> .menu--item{
-
- //flex: auto;
- white-space:nowrap;
width:100%;
@include medium{
width:auto;
@@ -292,7 +246,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
line-height:1.25rem;
padding:gesso-spacing(xs);
text-decoration:none;
- width:100%;
}
&.has-submenu {
> a{
@@ -312,16 +265,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
transform: scale(0.75, 0.75) rotate(90deg);
}
}
- &:focus{
- &::after {
- color: gesso-brand(org-default,uw-white,lvl1);
- }
- }
- &:hover {
- &::after {
- color: gesso-brand(org-default,uw-black,lvl4);
- }
- }
}
}
}
@@ -330,32 +273,41 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
// hide all menus that are classed subnav
&--subnav {
- background:$menu-horizontal-bg;
display: none;
font-size: $menu-horizontal-sub-font-size;
text-transform: none;
+ width:100%;
}
.submenu-active .menu--subnav{
@include uw-contained-width;
- //box-shadow: inset 0 0 8px #ccc;
+ 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;
- min-height:30rem;
+ min-height:80vh;
position:absolute;
top:100%;
- width:85%;
+ width:100%;
z-index:10;
-
+ @include xl {
+ min-height: 34rem;
+ width:calc(100% - 7rem);
+ }
.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;
max-height:inherit;
@@ -366,35 +318,46 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
z-index:inherit;
}
.menu--item{
- border-right: 1px solid gesso-brand(org-default,uw-black,lvl2);
+ display:block;
+ flex:0 1;
+ height:auto;
+ padding-left: gesso-spacing(sm);
+
+
a{
+
font-family:$menu-horizontal-sub-font-bold;
font-weight:600;
- }
- flex: 0 1;
- padding-left: gesso-spacing(xs);
-
- &:last-child{
- border-right:0;
+ padding:gesso-spacing(xxs);
+ padding-left:0;
}
.menu--item{
- border-right:0;
- flex: inherit;
+
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
margin-top:inherit;
- padding-left: gesso-spacing(md);
+ padding-left: gesso-spacing(sm);
a{
font-family:$menu-horizontal-sub-font;
font-weight:200;
}
.menu--item{
- border-right:0;
- flex: inherit;
+
margin-top:inherit;
- padding-left: gesso-spacing(sm);
+ padding-left: gesso-spacing(md);
a{
font-family:$menu-horizontal-sub-font;
font-weight:200;
}
+ .menu--item{
+
+ margin-top:inherit;
+ padding-left: gesso-spacing(md);
+ a{
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ }
+ }
}
}
}
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
index d6dd8ae8..42356584 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
@@ -1,5 +1,5 @@
{% if is_demo %}
-{% set faculty = faculty ? faculty : 'org-env' %}
+{% set faculty = faculty ? faculty : 'org-default' %}
<div class="{{ faculty }}">
{% endif %}
<nav class="uw-horizontal-nav {% if modifier_classes %} uw-horizontal-nav--{{ modifier_classes }}{% endif %}">
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 aec000a0..5ae55654 100644
--- a/source/_patterns/04-components/menu/menu--main/menu--main.yml
+++ b/source/_patterns/04-components/menu/menu--main/menu--main.yml
@@ -45,7 +45,7 @@ items:
options:
attributes:
class: ''
- active_trail: false
+ active_trail: true
submenu:
- text: 'Clinical'
url: '#'
diff --git a/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss b/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
index 4d58882e..ca45354a 100644
--- a/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
+++ b/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
@@ -1,220 +1,14 @@
$menu-horizontal-bg: gesso-brand(org-default,uw-white,lvl1);
-$menu-horizontal-drop-bg: gesso-grayscale(gray-2);
$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));
-$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--secondary {
- .menu--horizontal {
- //> .is-active-trail {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- //
- // &.has-submenu {
- // &::after {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- //
- //.has-submenu {
- // &:hover {
- // &::after {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- //
- //.has-children {
- // &:hover {
- // &::after {
- // border-left: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- li {
- &.submenu-active {
- > a {
- background-color:gesso-brand(org-default, uw-black, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
- }
- .menu--subnav{
- a{
- background-color:$menu-horizontal-drop-bg;
- color: gesso-brand(org-default,uw-black,lvl4);
- &:focus,
- &.is-active-trail{
- background-color:gesso-brand(org-default, uw-black, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
- }
- &:active{
- background-color:gesso-brand(org-default, uw-black, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
- }
- &:hover{
- background-color: gesso-brand(org-default,uw-gold,lvl1);
- color: gesso-brand(org-default,uw-black,lvl4);
- }
- }
- }
- }
- > a{
- background-color:$menu-horizontal-bg;
- color: gesso-brand(org-default,uw-black,lvl4);
-
- &:focus,
- &.is-active-trail{
- background-color:gesso-brand(org-default, uw-black, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
- }
- &:active{
- background-color:gesso-brand(org-default, uw-black, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
- }
- &:hover{
- background-color: gesso-brand(org-default,uw-gold,lvl1);
- color: gesso-brand(org-default,uw-black,lvl4);
- }
- }
-
- ul {
- //border-top: 4px solid gesso-brand($faculty, $link-lvl);
- }
-
- ul {
- //.is-active-trail {
- // color: gesso-brand($faculty, $link-lvl);
- //}
- li {
- ul {
- //border-left: 4px solid gesso-brand($faculty, $link-lvl);
-
- &::before {
- //border-right: 5px solid gesso-brand($faculty, $link-lvl);
- }
- }
- }
- }
-
- //.is-active-trail {
- // color: gesso-brand($faculty, $link-lvl);
- //}
- }
- }
- }
- }
- }
- @else {
- .#{$faculty} {
- .uw-horizontal-nav--secondary {
- .menu--horizontal {
- //> .is-active-trail {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- //
- // &.has-submenu {
- // &::after {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- //
- //.has-submenu {
- // &:hover {
- // &::after {
- // border-top: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
- //
- //.has-children {
- // &:hover {
- // &::after {
- // border-left: 4px solid gesso-brand($faculty, $link-lvl);
- // }
- // }
- //}
-
- li {
- &.submenu-active {
- > a {
- background-color: gesso-brand($faculty, lvl4);
- color: gesso-brand(org-default, uw-white, lvl1);
- }
- .menu--subnav{
- a{
- background-color:$menu-horizontal-drop-bg;
- color: gesso-brand(org-default,uw-black,lvl4);
- &:focus,
- &.is-active-trail{
- background-color: gesso-brand($faculty, lvl4);
- color: gesso-brand(org-default,uw-white,lvl1);
- }
- &:active{
- background-color: gesso-brand($faculty, lvl4);
- color: gesso-brand(org-default,uw-white,lvl1);
- }
- &:hover{
- background-color: gesso-brand($faculty, lvl1);
- color: gesso-brand(org-default,uw-black,lvl4);
- }
- }
- }
- }
- > a{
- background-color:$menu-horizontal-bg;
- color: gesso-brand(org-default,uw-black,lvl4);
-
- &:focus,
- &.is-active-trail{
- background-color: gesso-brand($faculty, lvl4);
- color: gesso-brand(org-default,uw-white,lvl1);
- }
- &:active{
- background-color: gesso-brand($faculty, lvl4);
- color: gesso-brand(org-default,uw-white,lvl1);
- }
- &:hover{
- background-color: gesso-brand($faculty, lvl1);
- color: gesso-brand(org-default,uw-black,lvl4);
- }
- }
-
- ul {
- //border-top: 4px solid gesso-brand($faculty, $link-lvl);
- }
-
- ul {
- //.is-active-trail {
- // color: gesso-brand($faculty, $link-lvl);
- //}
- li {
- ul {
- //border-left: 4px solid gesso-brand($faculty, $link-lvl);
-
- &::before {
- //border-right: 5px solid gesso-brand($faculty, $link-lvl);
- }
- }
- }
- }
-
- //.is-active-trail {
- // color: gesso-brand($faculty, $link-lvl);
- //}
- }
- }
- }
- }
- }
-}
.uw-horizontal-nav--secondary{
@include uw-full-width;
background:$menu-horizontal-bg;
+ border-bottom:3px solid gesso-grayscale(gray-2);
.uw-horizontal-nav--wrapper{
@include uw-contained-width;
padding:0;
@@ -265,9 +59,9 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
display:inline-block;
font-weight:inherit;
line-height:1.25rem;
- padding:gesso-spacing(xs);
+ //padding:gesso-spacing(xs);
text-decoration:none;
- width:100%;
+ //width:100%;
}
&.has-submenu {
> a{
@@ -287,16 +81,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
transform: scale(0.75, 0.75) rotate(90deg);
}
}
- &:focus{
- &::after {
- color: gesso-brand(org-default,uw-white,lvl1);
- }
- }
- &:hover {
- &::after {
- color: gesso-brand(org-default,uw-black,lvl4);
- }
- }
}
}
}
@@ -305,7 +89,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
// hide all menus that are classed subnav
&--subnav {
- background:$menu-horizontal-drop-bg;
display: none;
font-size: $menu-horizontal-sub-font-size;
text-transform: none;
@@ -313,23 +96,9 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
.submenu-active .menu--subnav{
@include uw-contained-width;
- //left:0;
- //min-height:10rem;
- //position:absolute;
- //top:100%;
- //width:100%;
- //z-index:10;
li{
}
.menu--subnav{
- //box-shadow:none;
- //display:inherit;
- //left:inherit;
- //min-height:inherit;
- //position:inherit;
- //top:inherit;
- //width:inherit;
- //z-index:inherit;
}
> li{
}
--
GitLab