mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix details inside drop-down being rendered as dropdown

Browse source 
Given a dropdown that contains an accordion within it, the accordion renders as a dropdown because the summary selector also selects the children of a dropdown element. This fixes that so it renders as expected.

```
<details class="dropdown">
   <summary> Select a phase of matter... </summary>
   <ul>
      <li>
         <details>
            <summary> This is a dropdown option </summary>
            <ul>
               <li><label><input type="radio" name="phase" value="gas"> Gas </label></li>
               <li><label><input type="radio" name="phase" value="plasma"> Plasma </label></li>
            </ul>
         </details>
      </li>
   </ul>
</details>
```
This commit is contained in:
Michał 2024-09-28 11:52:54 +02:00 • committed by GitHub
parent 6dc6489e69
commit 6f3abc2cb6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

14
scss/components/_dropdown.scss
View file

@ -14,7 +14,7 @@
// Marker // Marker
// –––––––––––––––––––– // ––––––––––––––––––––
summary, > summary,
> button, > button,
> a { > a {
&::after { &::after {
@ -46,7 +46,7 @@
// Bouton as a select // Bouton as a select
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown summary:not([role]) { #{$parent-selector} details.dropdown > summary:not([role]) {
height: calc( height: calc(
1rem * 1rem *
var(#{$css-var-prefix}line-height) + var(#{$css-var-prefix}line-height) +
@ -126,7 +126,7 @@
display: inline; display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0; margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
summary { > summary {
&::after { &::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
@ -156,7 +156,7 @@
// Submenu // Submenu
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown summary + ul { #{$parent-selector} details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -236,14 +236,14 @@
// Button opened // Button opened
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary { #{$parent-selector} details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
// Menu opened // Menu opened
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Inside container type accordion // 1. Inside container type accordion
#{$parent-selector} details.dropdown[open] summary { #{$parent-selector} details.dropdown[open] > summary {
+ ul { + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
@ -259,7 +259,7 @@
// Close for dropdown // Close for dropdown
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary { #{$parent-selector} details.dropdown[open] > summary {
&::before { &::before {
display: block; display: block;
z-index: 1; z-index: 1;