Skip to content
Snippets Groups Projects
Commit b79726ef authored by Eric Bremner's avatar Eric Bremner
Browse files

Merge branch 'feature/ISTWCMS-4652-m26lebla-top-level-menu-indicator' into '8.x-3.x' 

feature ISTWCMS 4652 m26lebla top level menu indicator

See merge request !25
parents 7d2b00c5 fba56cf6
No related branches found
No related tags found
1 merge request!25feature ISTWCMS 4652 m26lebla top level menu indicator
Hide whitespace changes
Inline Side-by-side
Showing
with 210 additions and 235 deletions
css/styles.css
+ 126
− 155
View file @ b79726ef
......@@ -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;
......
source/_patterns/03-layouts/site-container/_site-container.scss
+ 16
− 1
View file @ b79726ef
......@@ -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);
}
}
......
source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+ 51
− 55
View file @ b79726ef
......@@ -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);
}
......
source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
+ 13
− 20
View file @ b79726ef
{% 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>
source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
+ 0
− 3
View file @ b79726ef
......@@ -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);
......
source/_patterns/04-components/menu/menu--secondary/menu--secondary.twig
+ 4
− 1
View file @ b79726ef
{% 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment