From fba56cf6ac342285947f6f74810f96bb69e4a81e Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Thu, 25 Feb 2021 16:45:32 -0500
Subject: [PATCH] Presentation changes for menu parent identifier - also adjst
the z-index of menu tray with full z-index map of site container.
---
css/styles.css | 281 ++++++++----------
.../site-container/_site-container.scss | 17 +-
.../menu--horizontal/_menu--horizontal.scss | 106 ++++---
.../menu--horizontal/menu--horizontal.twig | 33 +-
.../menu--secondary/_menu--secondary.scss | 3 -
.../menu/menu--secondary/menu--secondary.twig | 5 +-
6 files changed, 210 insertions(+), 235 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index cd284b38..3c23aef4 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2114,18 +2114,25 @@ svg:not(:root) {
.uw-site-container {
display: grid;
- grid-template-columns: 100%; }
+ grid-template-columns: 100%;
+ position: relative;
+ z-index: 2; }
.uw-site-container .uw-header {
grid-column: 1 / 2;
- grid-row: 1 / 2; }
+ grid-row: 1 / 2;
+ position: relative;
+ z-index: 4; }
.uw-site-container .uw-highlighted {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
+ display: none;
grid-column: 1 / 2;
grid-row: 2 / 3;
- width: 100%; }
+ position: relative;
+ width: 100%;
+ z-index: 3; }
@media (min-width: 75rem) {
.uw-site-container .uw-highlighted {
padding-left: 0;
@@ -2137,10 +2144,14 @@ svg:not(:root) {
grid-column: 1 / 2;
grid-row: 3 / 4;
min-height: 60vh;
- width: 100%; }
+ position: relative;
+ width: 100%;
+ z-index: 3; }
.uw-site-container .uw-footer {
grid-column: 1 / 2;
- grid-row: 4 / 5; }
+ grid-row: 4 / 5;
+ position: relative;
+ z-index: 4; }
.mobile-menu,
.mobile-menu-button {
@@ -4521,6 +4532,8 @@ fieldset,
.org-default .uw-horizontal-nav .menu--horizontal > .is-active-trail {
background-color: #ccc;
color: #000; }
+ .org-default .uw-horizontal-nav .menu--horizontal > .is-active-trail > .menu--link.active ~ .menu .menu--item__parent a {
+ border-bottom: 1px solid #000; }
.org-default .uw-horizontal-nav .menu--horizontal li > a {
color: #000; }
@@ -4573,10 +4586,16 @@ fieldset,
.org-ahs .uw-horizontal-nav .menu--horizontal > .is-active-trail {
background-color: #ccc;
color: #000; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal > .is-active-trail > .menu--link.active ~ .menu .menu--item__parent a {
+ border-bottom: 1px solid #005963;
+ color: #005963; }
.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 {
+ .org-ahs .uw-horizontal-nav .menu--horizontal li > a:focus {
+ background-color: #ccc;
+ color: #000; }
+ .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 {
@@ -4587,36 +4606,24 @@ fieldset,
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; }
+ border-bottom: 1px solid #005963;
+ color: #005963; }
+ .org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active::after {
+ display: none; }
.org-ahs .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 1px solid #ccc;
color: #000; }
+ .org-ahs .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 .uw-site-home__link {
background-color: #d93f00; }
@@ -4634,10 +4641,16 @@ fieldset,
.org-art .uw-horizontal-nav .menu--horizontal > .is-active-trail {
background-color: #ccc;
color: #000; }
+ .org-art .uw-horizontal-nav .menu--horizontal > .is-active-trail > .menu--link.active ~ .menu .menu--item__parent a {
+ border-bottom: 1px solid #d93f00;
+ color: #d93f00; }
.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 {
+ .org-art .uw-horizontal-nav .menu--horizontal li > a:focus {
+ background-color: #ccc;
+ color: #000; }
+ .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 {
@@ -4648,36 +4661,24 @@ fieldset,
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; }
+ border-bottom: 1px solid #d93f00;
+ color: #d93f00; }
+ .org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active::after {
+ display: none; }
.org-art .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 1px solid #ccc;
color: #000; }
+ .org-art .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 .uw-site-home__link {
background-color: #57058b; }
@@ -4695,10 +4696,16 @@ fieldset,
.org-eng .uw-horizontal-nav .menu--horizontal > .is-active-trail {
background-color: #ccc;
color: #000; }
+ .org-eng .uw-horizontal-nav .menu--horizontal > .is-active-trail > .menu--link.active ~ .menu .menu--item__parent a {
+ border-bottom: 1px solid #57058b;
+ color: #57058b; }
.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 {
+ .org-eng .uw-horizontal-nav .menu--horizontal li > a:focus {
+ background-color: #ccc;
+ color: #000; }
+ .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 {
@@ -4709,36 +4716,24 @@ fieldset,
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; }
+ border-bottom: 1px solid #57058b;
+ color: #57058b; }
+ .org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active::after {
+ display: none; }
.org-eng .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 1px solid #ccc;
color: #000; }
+ .org-eng .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 .uw-site-home__link {
background-color: #607000; }
@@ -4756,10 +4751,16 @@ fieldset,
.org-env .uw-horizontal-nav .menu--horizontal > .is-active-trail {
background-color: #ccc;
color: #000; }
+ .org-env .uw-horizontal-nav .menu--horizontal > .is-active-trail > .menu--link.active ~ .menu .menu--item__parent a {
+ border-bottom: 1px solid #607000;
+ color: #607000; }
.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 {
+ .org-env .uw-horizontal-nav .menu--horizontal li > a:focus {
+ background-color: #ccc;
+ color: #000; }
+ .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 {
@@ -4770,36 +4771,24 @@ fieldset,
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; }
+ border-bottom: 1px solid #607000;
+ color: #607000; }
+ .org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active::after {
+ display: none; }
.org-env .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 1px solid #ccc;
color: #000; }
+ .org-env .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 .uw-site-home__link {
background-color: #c60078; }
@@ -4817,10 +4806,16 @@ fieldset,
.org-mat .uw-horizontal-nav .menu--horizontal > .is-active-trail {
background-color: #ccc;
color: #000; }
+ .org-mat .uw-horizontal-nav .menu--horizontal > .is-active-trail > .menu--link.active ~ .menu .menu--item__parent a {
+ border-bottom: 1px solid #c60078;
+ color: #c60078; }
.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 {
+ .org-mat .uw-horizontal-nav .menu--horizontal li > a:focus {
+ background-color: #ccc;
+ color: #000; }
+ .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 {
@@ -4831,36 +4826,24 @@ fieldset,
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; }
+ border-bottom: 1px solid #c60078;
+ color: #c60078; }
+ .org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active::after {
+ display: none; }
.org-mat .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 1px solid #ccc;
color: #000; }
+ .org-mat .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 .uw-site-home__link {
background-color: #0033be; }
@@ -4878,10 +4861,16 @@ fieldset,
.org-sci .uw-horizontal-nav .menu--horizontal > .is-active-trail {
background-color: #ccc;
color: #000; }
+ .org-sci .uw-horizontal-nav .menu--horizontal > .is-active-trail > .menu--link.active ~ .menu .menu--item__parent a {
+ border-bottom: 1px solid #0033be;
+ color: #0033be; }
.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 {
+ .org-sci .uw-horizontal-nav .menu--horizontal li > a:focus {
+ background-color: #ccc;
+ color: #000; }
+ .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 {
@@ -4892,36 +4881,24 @@ fieldset,
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; }
+ border-bottom: 1px solid #0033be;
+ color: #0033be; }
+ .org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active::after {
+ display: none; }
.org-sci .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 1px solid #ccc;
color: #000; }
+ .org-sci .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 .uw-site-home__link {
background-color: #80001f; }
@@ -4939,10 +4916,16 @@ fieldset,
.org-school .uw-horizontal-nav .menu--horizontal > .is-active-trail {
background-color: #ccc;
color: #000; }
+ .org-school .uw-horizontal-nav .menu--horizontal > .is-active-trail > .menu--link.active ~ .menu .menu--item__parent a {
+ border-bottom: 1px solid #80001f;
+ color: #80001f; }
.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 {
+ .org-school .uw-horizontal-nav .menu--horizontal li > a:focus {
+ background-color: #ccc;
+ color: #000; }
+ .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 {
@@ -4953,36 +4936,24 @@ fieldset,
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; }
+ border-bottom: 1px solid #80001f;
+ color: #80001f; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active::after {
+ display: none; }
.org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a.active:hover {
background-color: inherit;
border-bottom: 1px solid #ccc;
color: #000; }
+ .org-school .uw-horizontal-nav .menu--horizontal li .menu--subnav a:hover {
+ background-color: inherit;
+ border-bottom: 1px solid #ccc;
+ color: #000; }
.uw-horizontal-nav {
max-width: 100%;
@@ -5089,7 +5060,7 @@ fieldset,
right: 0;
top: 0;
width: 2rem;
- z-index: 1000; }
+ z-index: 7; }
.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 {
@@ -5119,7 +5090,7 @@ fieldset,
height: calc(100vh - 7rem);
position: absolute;
top: 0;
- z-index: 10; }
+ z-index: 7; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav ~ .menu--subnav {
position: absolute;
top: inherit; }
@@ -5142,7 +5113,7 @@ fieldset,
padding: 2.5rem 0.5rem 1rem;
top: 100%;
width: calc(100% - 6rem);
- z-index: 10; } }
+ z-index: 7; } }
@media (min-width: 48.06rem) and (min-width: 75rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
padding-left: 0;
diff --git a/source/_patterns/03-layouts/site-container/_site-container.scss b/source/_patterns/03-layouts/site-container/_site-container.scss
index 503fd2f9..a774b410 100644
--- a/source/_patterns/03-layouts/site-container/_site-container.scss
+++ b/source/_patterns/03-layouts/site-container/_site-container.scss
@@ -2,17 +2,26 @@
display: grid;
grid-template-columns: 100%;
-
+ position:relative;
+ // Puts the site container at z-index 2
+ z-index: gesso-z-index(wrapper);
.uw-header {
grid-column: 1 / 2;
grid-row: 1 / 2;
+ position:relative;
+ // Puts the header at z-index 4
+ z-index: gesso-z-index(header);
}
.uw-highlighted {
@include uw-contained-width;
+ display:none;
grid-column: 1 / 2;
grid-row: 2 / 3;
+ position:relative;
width: 100%;
+ // Puts the content at z-index 3
+ z-index: gesso-z-index(content);
@include xl {
padding: 0;
}
@@ -22,12 +31,18 @@
grid-column: 1 / 2;
grid-row: 3 / 4;
min-height: 60vh;
+ position:relative;
width: 100%;
+ // Puts the content at z-index 3
+ z-index: gesso-z-index(content);
}
.uw-footer {
grid-column: 1 / 2;
grid-row: 4 / 5;
+ position:relative;
+ // Puts the footer at z-index 4
+ z-index: gesso-z-index(footer);
}
}
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 7e81de49..0507f32f 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -36,14 +36,23 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.menu--horizontal {
> .is-active-trail {
- background-color: gesso-grayscale(gray-3);
- color: gesso-brand(org-default,uw-black,lvl4);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default, uw-black, lvl4);
+ > .menu--link.active{
+ ~ .menu{
+ .menu--item{
+ &__parent{
+ a{
+ border-bottom: 1px solid gesso-brand(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);
@@ -57,14 +66,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
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;
@@ -124,16 +126,28 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.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);
+ background-color: gesso-grayscale(gray-3);
+ color: gesso-brand(org-default, uw-black, lvl4);
+ > .menu--link.active{
+ ~ .menu{
+ .menu--item{
+ &__parent{
+ a{
+ border-bottom: 1px solid gesso-brand($faculty, lvl4);
+ color: gesso-brand($faculty, lvl4);
+ }
+ }
+ }
+ }
+ }
}
li {
> a{
-
color: gesso-brand(org-default,uw-black,lvl4);
-
- &:focus,
+ &: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);
@@ -144,48 +158,21 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
}
.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);
- }
- }
+ background-color:transparent;
+ border-bottom:1px solid transparent;
+ text-decoration:none;
&: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);
+ border-bottom:1px solid gesso-brand($faculty, 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);
- &:focus{
- background-color:inherit;
- border-bottom:1px solid gesso-grayscale(gray-3);
- color: gesso-brand(org-default,uw-black,lvl4);
+ border-bottom:1px solid gesso-brand($faculty, lvl4);
+ color: gesso-brand($faculty, lvl4);
+ &::after{
+ display:none;
}
&:hover{
background-color:inherit;
@@ -193,6 +180,12 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
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);
+ }
+
}
}
}
@@ -317,7 +310,8 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
right:0;
top:0;
width:2rem;
- z-index:1000;
+ // Puts the content at z-index 7
+ z-index: gesso-z-index(dropdown);
span{
display:none;
}
@@ -374,7 +368,8 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
height:calc(100vh - 7rem);
position: absolute;
top:0;
- z-index:10;
+ // Puts the dropdown at z-index 7
+ z-index: gesso-z-index(dropdown);
~ .menu--subnav{
position: absolute;
top:inherit;
@@ -394,7 +389,8 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
padding:2.5rem 0.5rem 1rem;
top: 100%;
width:calc(100% - 6rem);
- z-index: 10;
+ // Puts the dropdown at z-index 7
+ z-index: gesso-z-index(dropdown);
}
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 8879d71d..c7228bbd 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
@@ -1,22 +1,15 @@
-{% 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_link }}" 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>
+<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_link }}" 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>
- </nav>
-{% if is_demo %}
</div>
-{% endif %}
\ No newline at end of file
+</nav>
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 d8b9e0fa..466cbbf2 100644
--- a/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
+++ b/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
@@ -48,7 +48,6 @@ $menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
// Top Level <ul> flex top items
&--horizontal {
@include uw-full-width;
- //background: $test-color-3;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -66,9 +65,7 @@ $menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
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);
diff --git a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
index 0b127e7d..05e747c7 100644
--- a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
+++ b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
@@ -1,6 +1,9 @@
+{% if items %}
{% 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
+}%}
+
+{% endif %}
\ No newline at end of file
--
GitLab