mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
fix: dropdown inside a nav
This commit is contained in:
parent
cc481ab7b0
commit
3644e4ccb5
2 changed files with 24 additions and 10 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -361,5 +361,12 @@
|
|||
#{$✨}outline-width: 0.0625rem;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
details[role="list"] {
|
||||
summary:focus-visible {
|
||||
#{$✨}outline-width: 0.1875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue