diff --git a/src/patterns/04-components/menu/menu--header/_menu--header.scss b/src/patterns/04-components/menu/menu--header/_menu--header.scss index 61f678bf82dea7cf7df8f4b4c3969d1b1a135428..9a62454c8031f859e92251601468cce57f79ad40 100644 --- a/src/patterns/04-components/menu/menu--header/_menu--header.scss +++ b/src/patterns/04-components/menu/menu--header/_menu--header.scss @@ -77,60 +77,70 @@ } } } + .no-scroll & { - &[aria-expanded="true"]{ - > a{ - border-left: inherit; - display: inline-block; - height: inherit; - overflow: inherit; - width: inherit; - z-index: var(--layer-overlay); - span{ - display: block; - } - &::after { - //transform: scale(0.75, 0.75) rotate(270deg); + > a { + &::after { + transform: rotate(0deg); + @media(min-width: $screen-md) { + transform: rotate(180deg); } } } } - } - } - &__subnav { - display: none; - } - .submenu-active .menu__subnav{ - background: #f7f7f7; - border-width: 0; - column-count: 1; - display: inherit; - height: auto; - left: inherit; - min-height: auto; - min-width: 13rem; - padding: var(--size-2) var(--size-1); - right: 0; - top: inherit; - width: auto; - .menu__item{ - max-width: inherit; - &-parent{ - display: none; - } - a{ - .no-scroll &{ - border-color: transparent; - &:hover{ - border-color: #e6e6e6; + &[aria-expanded="true"]{ + > a{ + border-left: inherit; + display: inline-block; + height: inherit; + overflow: inherit; + width: inherit; + z-index: var(--layer-overlay); + span{ + display: block; + } + &::after { + transform: rotate(180deg); } } } } - .menu__subnav{ - border: 0 solid var(--uw-white); + } + } + &__subnav { + display: none; + } + .submenu-active .menu__subnav{ + background: #f7f7f7; + border-width: 0; + column-count: 1; + display: inherit; + height: auto; + left: inherit; + min-height: auto; + min-width: 13rem; + padding: var(--size-2) var(--size-1); + right: 0; + top: inherit; + width: auto; + + .menu__item{ + max-width: inherit; + &-parent{ + display: none; } + a{ + .no-scroll &{ + border-color: transparent; + &:hover{ + border-color: #e6e6e6; + } + } + } + } + .menu__subnav{ + border: 0 solid var(--uw-white); } } } 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 c718575d6919ca29a1ce7c0878e4dee1af5872ec..93a80b54610b19ee78a6c832820dbba569556c4d 100644 --- a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss +++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss @@ -334,6 +334,14 @@ $menu-horizontal-drop-bg: #f7f7f7; } } .no-scroll & { + > a { + &::after { + transform: rotate(270deg); + @media(min-width: $screen-md) { + transform: rotate(180deg); + } + } + } &[aria-expanded="true"]{ > a{ border-left: var(--size-xs) solid var(--gray-3); @@ -349,7 +357,10 @@ $menu-horizontal-drop-bg: #f7f7f7; display: none; } &::after { - transform: rotate(180deg); + transform: rotate(90deg); + @media(min-width: $screen-md) { + transform: rotate(180deg); + } } } } @@ -368,7 +379,10 @@ $menu-horizontal-drop-bg: #f7f7f7; &[aria-expanded="true"]{ > a{ &::after { - transform: rotate(180deg); + transform: rotate(-90deg); + @media(min-width: $screen-md) { + transform: rotate(180deg); + } } } }