From 0e1d80bed90153fcc2cf5b5bf1397802080edf74 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 14 Jul 2022 09:38:36 -0400
Subject: [PATCH] ISTWCMS-5631: adjusting height of menu items for when in
phone viewport
---
.../menu--horizontal/_menu--horizontal.scss | 27 +++++++++++++++++++
1 file changed, 27 insertions(+)
diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index 93a80b54..153085e5 100644
--- a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -335,6 +335,10 @@ $menu-horizontal-drop-bg: #f7f7f7;
}
.no-scroll & {
> a {
+ height: 2.25rem;
+ @media(min-width: $screen-md) {
+ height:inherit;
+ }
&::after {
transform: rotate(270deg);
@media(min-width: $screen-md) {
@@ -347,6 +351,9 @@ $menu-horizontal-drop-bg: #f7f7f7;
border-left: var(--size-xs) solid var(--gray-3);
display: inline-block;
height: 2.25rem;
+ @media(min-width: $screen-md) {
+ height:inherit;
+ }
overflow: hidden;
position: absolute;
right: 0;
@@ -378,6 +385,10 @@ $menu-horizontal-drop-bg: #f7f7f7;
&[aria-expanded="true"]{
> a{
+ height: 2.25rem;
+ @media(min-width: $screen-md) {
+ height:inherit;
+ }
&::after {
transform: rotate(-90deg);
@media(min-width: $screen-md) {
@@ -463,23 +474,39 @@ $menu-horizontal-drop-bg: #f7f7f7;
padding: 0;
a{
border-bottom: var(--size-xs) solid transparent;
+ height: 2.25rem;
+ @media(min-width: $screen-md) {
+ height:inherit;
+ }
}
}
.menu__item {
a {
font-family: $menu-horizontal-sub-font;
font-weight: 200;
+ height: 2.25rem;
+ @media(min-width: $screen-md) {
+ height:inherit;
+ }
padding-left: var(--size-2);
}
.menu__item {
a {
font-family: $menu-horizontal-sub-font;
font-weight: 200;
+ height: 2.25rem;
+ @media(min-width: $screen-md) {
+ height:inherit;
+ }
}
.menu__item {
a {
font-family: $menu-horizontal-sub-font;
font-weight: 200;
+ height: 2.25rem;
+ @media(min-width: $screen-md) {
+ height:inherit;
+ }
}
}
}
--
GitLab