mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 10:46:14 -04:00
Fix details inside drop-down being rendered as dropdown
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:
parent
6dc6489e69
commit
6f3abc2cb6
1 changed files with 7 additions and 7 deletions
|
@ -14,7 +14,7 @@
|
|||
|
||||
// Marker
|
||||
// ––––––––––––––––––––
|
||||
summary,
|
||||
> summary,
|
||||
> button,
|
||||
> a {
|
||||
&::after {
|
||||
|
@ -46,7 +46,7 @@
|
|||
// Bouton as a select
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown summary:not([role]) {
|
||||
#{$parent-selector} details.dropdown > summary:not([role]) {
|
||||
height: calc(
|
||||
1rem *
|
||||
var(#{$css-var-prefix}line-height) +
|
||||
|
@ -126,7 +126,7 @@
|
|||
display: inline;
|
||||
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
|
||||
|
||||
summary {
|
||||
> summary {
|
||||
&::after {
|
||||
transform: rotate(0deg) translateX(0rem);
|
||||
}
|
||||
|
@ -156,7 +156,7 @@
|
|||
|
||||
// Submenu
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown summary + ul {
|
||||
#{$parent-selector} details.dropdown > summary + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
|
@ -236,14 +236,14 @@
|
|||
// Button opened
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown[open] summary {
|
||||
#{$parent-selector} details.dropdown[open] > summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Menu opened
|
||||
// ––––––––––––––––––––
|
||||
// 1. Inside container type accordion
|
||||
#{$parent-selector} details.dropdown[open] summary {
|
||||
#{$parent-selector} details.dropdown[open] > summary {
|
||||
+ ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
|
@ -259,7 +259,7 @@
|
|||
// Close for dropdown
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown[open] summary {
|
||||
#{$parent-selector} details.dropdown[open] > summary {
|
||||
&::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue