mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 09:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: dropdown inside a nav

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

27
scss/components/_dropdown.scss
View file

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

7
scss/themes/default/_styles.scss
View file

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