From 3de5683995b581277558b4983135ea94a0690f8f Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Fri, 18 Dec 2020 16:58:37 -0500
Subject: [PATCH] Additional css to add the zebra pattern to sub menu at
smaller widths
---
css/styles.css | 108 +++++++++---------
js/component_scripts.min.js | 5 +-
.../menu--horizontal/_menu--horizontal.scss | 92 ++++++++++-----
.../menu/menu--horizontal/menu--horizontal.js | 5 +-
.../menu--secondary/_menu--secondary.scss | 40 -------
.../mobile-menu/_mobile-menu.scss | 5 +-
6 files changed, 129 insertions(+), 126 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index ecf04ed0..be656aa9 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4846,7 +4846,7 @@ fieldset,
.uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
transform: scale(0.75, 0.75) rotate(90deg); } }
.no-scroll .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a {
- border: 1px solid #ccc;
+ border-left: 1px solid #ccc;
display: inline-block;
height: 2.25rem;
overflow: hidden;
@@ -4933,41 +4933,63 @@ fieldset,
width: inherit;
z-index: inherit; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
- display: block;
- padding-left: 8px; }
+ display: block; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--subnav {
padding: 0; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item a {
font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-weight: 400;
- padding: 4px;
- padding-left: 0; }
- .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item {
+ padding: 8px;
+ padding-right: 24px; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item a {
+ border-bottom: 1px solid #e6e6e6; }
+ @media (min-width: 48.06rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item a {
+ padding: 8px; } }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent {
+ border-bottom: 1px solid #e6e6e6;
+ padding: 0; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent a {
+ border-bottom: 1px solid transparent; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item a {
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-weight: 200;
- margin-top: inherit;
- max-width: inherit;
padding-left: 16px; }
- .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item a {
- font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
- .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item {
- margin-top: inherit;
- padding-left: 16px; }
- .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
- font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-weight: 200; }
- .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item {
- margin-top: inherit;
- padding-left: 16px; }
- .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item a {
- font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-weight: 200; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200;
+ padding-left: 40px; }
+ .no-scroll .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200;
+ padding-left: 56px; }
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
flex: 0 1;
height: auto;
max-width: 50%;
- padding-left: 16px; } }
+ padding-left: 8px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200;
+ margin-top: inherit;
+ max-width: inherit;
+ padding-left: 16px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ padding: 4px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item {
+ margin-top: inherit;
+ padding-left: 16px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item {
+ margin-top: inherit;
+ padding-left: 16px; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--item .menu--item .menu--item a {
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-weight: 200; } }
@media (min-width: 63.1875rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
max-width: 33%;
@@ -4986,9 +5008,9 @@ fieldset,
font-family: fdsu-rwd;
font-size: 1rem;
position: absolute;
- right: -1rem;
+ right: 0;
text-align: center;
- top: 4px; }
+ top: 8px; }
@media (min-width: 48.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent {
flex: 1 0 100%;
@@ -4997,7 +5019,9 @@ fieldset,
position: absolute; }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent .menu--link-parent {
font-size: 0.88889rem;
- margin: 0 0 4px 0; } }
+ margin: 0 0 4px 0; }
+ .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item__parent .menu--link-parent::after {
+ right: -1rem; } }
.uw-horizontal-nav--secondary {
max-width: 100%;
@@ -5058,34 +5082,6 @@ fieldset,
.uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item a:hover {
background-color: #eee;
color: #000; }
- .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a {
- padding-right: 24px;
- position: relative; }
- .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
- content: '\e906';
- display: block;
- font-family: fdsu-rwd;
- position: absolute;
- right: 0.5rem;
- text-align: center;
- top: 0.5rem;
- transform: scale(0.75, 0.75); }
- @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); } }
- .no-scroll .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a {
- display: inline-block;
- height: 2.25rem;
- overflow: hidden;
- position: absolute;
- right: 0;
- top: 0.5rem;
- width: 1.8rem;
- z-index: 1000; }
- .no-scroll .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a span {
- display: none; }
- .no-scroll .uw-horizontal-nav--secondary .uw-horizontal-nav--menu .menu--horizontal > .menu--item[aria-expanded="true"] > a::after {
- transform: scale(0.75, 0.75) rotate(180deg); }
.social-media-list {
align-items: start;
@@ -5328,9 +5324,11 @@ fieldset,
.uw-header__navigation.close {
display: none; }
.uw-header__navigation.open {
- background: #f7f7f7;
+ background: #eee;
display: block;
height: calc(100vh - 7rem); }
+ .no-scroll .uw-header__navigation.open {
+ background: #f7f7f7; }
@media (min-width: 48.06rem) {
.uw-header__navigation {
display: block !important; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index e2514ee6..955ccc56 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -287,7 +287,7 @@
if (screenWidth <= 767 ) {
// Look at parents and reset the menus
if (parent.classList.contains('uw-horizontal-nav--secondary')) {
- $('.uw-horizontal-nav').css('display', 'block');
+ $('.uw-horizontal-nav--main').css('display', 'block');
}
}
} else if ( $('.submenu-active') ) {
@@ -301,7 +301,7 @@
if (screenWidth <= 767 ) {
// Look at parents and hide other menus if not secondary and open
if (parent.classList.contains('uw-horizontal-nav--secondary')) {
- $('.uw-horizontal-nav').css('display', 'none');
+ $('.uw-horizontal-nav--main').css('display', 'none');
$('.uw-horizontal-nav--secondary').css('display', 'block');
}
}
@@ -380,6 +380,7 @@
if (screenWidth > 767 ) {
if($('html').hasClass('no-scroll')){
toggle.click();
+ $('.uw-horizontal-nav').css('display', 'block');
}
else{
$('.uw-header__navigation').addClass('open');
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 5bcc57dd..87e7fc4f 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -249,8 +249,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
&--link{
position:relative;
}
- // ALL Menus ul>
-
.menu--item{
a{
cursor:pointer;
@@ -311,7 +309,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
&[aria-expanded="true"]{
> a{
- border:1px solid gesso-grayscale(gray-3);
+ border-left:1px solid gesso-grayscale(gray-3);
display:inline-block;
height:2.25rem;
overflow:hidden;
@@ -420,36 +418,73 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
width:inherit;
z-index:inherit;
}
+
.menu--item{
.menu--subnav{
padding:0;
}
display:block;
- padding-left: gesso-spacing(xs);
-
a{
font-family:$menu-horizontal-sub-font-bold;
font-weight:400;
- padding:gesso-spacing(xxs);
- padding-left:0;
+ padding:gesso-spacing(xs);
+ padding-right: 24px;
+ .no-scroll &{
+ border-bottom:1px solid #e6e6e6;
+ }
+ @include medium{
+ padding:gesso-spacing(xs);
+
+ }
}
- .menu--item{
- font-family:$menu-horizontal-sub-font;
- font-weight:200;
- margin-top:inherit;
- max-width:inherit;
- padding-left: gesso-spacing(sm);
- a{
- font-family:$menu-horizontal-sub-font;
+ .no-scroll & {
+ &__parent{
+ border-bottom:1px solid #e6e6e6;
+ padding:0;
+ a{
+
+ border-bottom: 1px solid transparent;
+ }
}
- .menu--item{
+ .menu--item {
+ a {
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ padding-left: gesso-spacing(sm);
+ }
+
+ .menu--item {
+ a {
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ padding-left: gesso-spacing(lg);
+ }
+ .menu--item {
+ a {
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ padding-left: gesso-spacing(xl);
+ }
+ }
+ }
+ }
+ }
+ @include medium {
+ flex:0 1;
+ height:auto;
+ max-width: 50%;
+ padding-left: gesso-spacing(xs);
+ .menu--item{
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
margin-top:inherit;
+ max-width:inherit;
padding-left: gesso-spacing(sm);
a{
font-family:$menu-horizontal-sub-font;
- font-weight:200;
+ padding:gesso-spacing(xxs);
}
.menu--item{
@@ -459,14 +494,18 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
font-family:$menu-horizontal-sub-font;
font-weight:200;
}
+ .menu--item{
+
+ margin-top:inherit;
+ padding-left: gesso-spacing(sm);
+ a{
+ font-family:$menu-horizontal-sub-font;
+ font-weight:200;
+ }
+ }
}
}
- }
- @include medium {
- flex:0 1;
- height:auto;
- max-width: 50%;
- padding-left: gesso-spacing(sm);
+
}
@include large {
max-width: 33%;
@@ -474,6 +513,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
}
&__parent{
padding:gesso-spacing(xxs) 0 gesso-spacing(xxs) gesso-spacing(xs);
+
.menu--link-parent {
display:inline-block;
position:relative;
@@ -484,9 +524,9 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
font-family: gesso-font-family(iconfont);
font-size:rem(gesso-font-size(0));
position:absolute;
- right:-1rem;
+ right:0;
text-align: center;
- top:gesso-spacing(xxs);
+ top:gesso-spacing(xs);
}
@@ -501,7 +541,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
font-size:rem(gesso-font-size(-1));
margin:0 0 gesso-spacing(xxs) 0;
&::after {
-
+ right:-1rem;
}
}
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
index 9fd838be..859aa498 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -51,7 +51,7 @@
if (screenWidth <= 767 ) {
// Look at parents and reset the menus
if (parent.classList.contains('uw-horizontal-nav--secondary')) {
- $('.uw-horizontal-nav').css('display', 'block');
+ $('.uw-horizontal-nav--main').css('display', 'block');
}
}
} else if ( $('.submenu-active') ) {
@@ -65,7 +65,7 @@
if (screenWidth <= 767 ) {
// Look at parents and hide other menus if not secondary and open
if (parent.classList.contains('uw-horizontal-nav--secondary')) {
- $('.uw-horizontal-nav').css('display', 'none');
+ $('.uw-horizontal-nav--main').css('display', 'none');
$('.uw-horizontal-nav--secondary').css('display', 'block');
}
}
@@ -144,6 +144,7 @@
if (screenWidth > 767 ) {
if($('html').hasClass('no-scroll')){
toggle.click();
+ $('.uw-horizontal-nav').css('display', 'block');
}
else{
$('.uw-header__navigation').addClass('open');
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 42657632..34444817 100644
--- a/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
+++ b/source/_patterns/04-components/menu/menu--secondary/_menu--secondary.scss
@@ -74,46 +74,6 @@ $menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
color: gesso-brand(org-default,uw-black,lvl4);
}
}
- &.has-submenu {
- > a{
- padding-right:gesso-spacing(md);
- position:relative;
-
- &::after {
- content:'\e906';
- display:block;
- font-family: gesso-font-family(iconfont);
- position:absolute;
- right:0.5rem;
- text-align: center;
- top:0.5rem;
- transform: scale(0.75, 0.75);
- @include medium{
- transform: scale(0.75, 0.75) rotate(90deg);
- }
- }
- }
- }
- .no-scroll & {
- &[aria-expanded="true"]{
- > a{
- display:inline-block;
- height:2.25rem;
- overflow:hidden;
- position:absolute;
- right:0;
- top:0.5rem;
- width:1.8rem;
- z-index:1000;
- span{
- display:none;
- }
- &::after {
- transform: scale(0.75, 0.75) rotate(180deg);
- }
- }
- }
- }
}
}
}
diff --git a/source/_patterns/04-components/mobile-menu/_mobile-menu.scss b/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
index 60085b2e..e63d259e 100644
--- a/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
+++ b/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
@@ -136,10 +136,13 @@
display:none;
}
&.open{
- background: $menu-horizontal-drop-bg;
+ background: #eee;
display:block;
// Minus height of header
height:calc(100vh - 7rem);
+ .no-scroll &{
+ background: #f7f7f7;
+ }
}
@include medium{
display:block !important;
--
GitLab