fix: dropdown inside a nav

This commit is contained in:
Lucas Larroche 2023-04-01 10:09:45 +07:00
parent cc481ab7b0
commit 3644e4ccb5
2 changed files with 24 additions and 10 deletions

View file

@ -98,20 +98,26 @@
}
}
// Bouton as a select
// inside container type accordion
// AND inside a nav
// Dropdown inside a nav
//
nav details[role="list"] summary:not([role]) {
// Override height
height: auto;
padding: calc(var(#{$}nav-link-spacing-vertical) - (var(#{$}border-width) * 2))
var(#{$}nav-link-spacing-horizontal);
nav details[role="list"] {
display: inline;
margin: calc(var(#{$}nav-element-spacing-vertical) * -1) 0;
summary:not([role]) {
// Override height
height: calc((1rem * var(#{$}line-height)) + (var(#{$}nav-link-spacing-vertical) * 2));
padding: calc(var(#{$}nav-link-spacing-vertical) - (var(#{$}border-width) * 2))
var(#{$}nav-link-spacing-horizontal);
&:focus-visible {
box-shadow: 0 0 0 var(#{$}outline-width) var(#{$}primary-focus);
}
}
}
// Submenu
//
// 1. Inside container type accordion
details[role="list"] summary + ul {
display: flex;
z-index: 99;
@ -170,7 +176,8 @@
&:hover,
&:focus,
&:active,
&:focus-visible {
&:focus-visible,
&[aria-current]:not([aria-current="false"]) {
background-color: var(#{$}dropdown-hover-background-color);
}
}

View file

@ -361,5 +361,12 @@
#{$✨}outline-width: 0.0625rem;
}
}
nav {
details[role="list"] {
summary:focus-visible {
#{$✨}outline-width: 0.1875rem;
}
}
}
}
}