mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: remove support for submenu as nested list

Browse source
This commit is contained in:
Lucas Larroche 2023-03-19 10:19:09 +07:00
parent 4eff8b48fa
commit aea9dd48a9
10 changed files with 51 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

51
scss/components/_dropdown.scss
View file

@ -8,12 +8,8 @@
// Container
// ––––––––––––––––––––
// 1. Container type accordion
details[role="list"],
// 2. Container type nested list
nav li:has(button, a):has(li) {
details[role="list"] {
position: relative;
// margin-bottom: var(#{$✨}spacing);
border-bottom: none;
// Marker
@ -138,10 +134,7 @@
// Submenu
// ––––––––––––––––––––
// 1. Inside container type accordion
details[role="list"] summary + ul,
// 2. Inside container type nested list
nav li button + ul,
nav li a + ul {
details[role="list"] summary + ul {
display: flex;
z-index: 99;
position: absolute;
@ -208,27 +201,13 @@
width: 100%;
}
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
&:has(label):hover {
background-color: var(#{$✨}dropdown-hover-background-color);
}
}
}
// Submenu inside container
// type nested list
// ––––––––––––––––––––
nav li button + ul,
nav li a + ul {
transform: scaleY(0%);
transform-origin: top;
&:first-of-type,
&:last-of-type {
margin-right: var(#{$✨}nav-link-spacing-horizontal);
margin-left: var(#{$✨}nav-link-spacing-horizontal);
}
}
// Button opened
// inside container type accordion
// ––––––––––––––––––––
@ -239,10 +218,7 @@
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
details[role="list"][open] summary,
// 2. Inside container type nested list
nav li:has(:focus, :focus-within) button,
nav li:has(:focus, :focus-within) a {
details[role="list"][open] summary {
+ ul {
transform: scaleY(1);
opacity: 1;
@ -253,25 +229,6 @@
}
}
// Menu opened inside container
// type nested list on a touch device
// ––––––––––––––––––––
@media (any-hover: none) {
nav li button,
nav li a {
&:hover {
+ ul {
transform: scaleY(1);
opacity: 1;
@if $enable-transitions {
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
}
}
}
}
}
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––