Skip to content
Snippets Groups Projects
Commit 9731f9ed authored by Martin Leblanc's avatar Martin Leblanc Committed by Eric Bremner
Browse files

ISTWCMS-5631: css for menu chevrons in menu-header, menu-horizontal

parent a2be298a
No related branches found
No related tags found
1 merge request!16ISTWCMS-5631: presentation layer css for menu
Hide whitespace changes
Inline Side-by-side
src/patterns/04-components/menu/menu--header/_menu--header.scss
+ 53
− 43
View file @ 9731f9ed
...@@ -77,60 +77,70 @@ ...@@ -77,60 +77,70 @@
} }
} }
} }
.no-scroll & { .no-scroll & {
&[aria-expanded="true"]{ > a {
> a{ &::after {
border-left: inherit; transform: rotate(0deg);
display: inline-block; @media(min-width: $screen-md) {
height: inherit; transform: rotate(180deg);
overflow: inherit;
width: inherit;
z-index: var(--layer-overlay);
span{
display: block;
}
&::after {
//transform: scale(0.75, 0.75) rotate(270deg);
} }
} }
} }
} }
}
}
&__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{ &[aria-expanded="true"]{
max-width: inherit; > a{
&-parent{ border-left: inherit;
display: none; display: inline-block;
} height: inherit;
a{ overflow: inherit;
.no-scroll &{ width: inherit;
border-color: transparent; z-index: var(--layer-overlay);
&:hover{ span{
border-color: #e6e6e6; 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);
} }
} }
} }
......
src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+ 16
− 2
View file @ 9731f9ed
...@@ -334,6 +334,14 @@ $menu-horizontal-drop-bg: #f7f7f7; ...@@ -334,6 +334,14 @@ $menu-horizontal-drop-bg: #f7f7f7;
} }
} }
.no-scroll & { .no-scroll & {
> a {
&::after {
transform: rotate(270deg);
@media(min-width: $screen-md) {
transform: rotate(180deg);
}
}
}
&[aria-expanded="true"]{ &[aria-expanded="true"]{
> a{ > a{
border-left: var(--size-xs) solid var(--gray-3); border-left: var(--size-xs) solid var(--gray-3);
...@@ -349,7 +357,10 @@ $menu-horizontal-drop-bg: #f7f7f7; ...@@ -349,7 +357,10 @@ $menu-horizontal-drop-bg: #f7f7f7;
display: none; display: none;
} }
&::after { &::after {
transform: rotate(180deg); transform: rotate(90deg);
@media(min-width: $screen-md) {
transform: rotate(180deg);
}
} }
} }
} }
...@@ -368,7 +379,10 @@ $menu-horizontal-drop-bg: #f7f7f7; ...@@ -368,7 +379,10 @@ $menu-horizontal-drop-bg: #f7f7f7;
&[aria-expanded="true"]{ &[aria-expanded="true"]{
> a{ > a{
&::after { &::after {
transform: rotate(180deg); transform: rotate(-90deg);
@media(min-width: $screen-md) {
transform: rotate(180deg);
}
} }
} }
} }
......
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