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

chore(dropdown): Optimize selectors

Browse source
This commit is contained in:
Lucas Larroche 2022-03-06 13:28:27 +07:00
parent 794602a9b7
commit aaf718a1d4
13 changed files with 117 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

121
scss/components/_dropdown.scss
View file

@ -6,56 +6,56 @@
details[role="list"],
li[role="list"] {
position: relative;
}
summary + ul,
> ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
details[role="list"] summary + ul,
li[role="list"] > ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
li {
width: 100%;
margin-bottom: 0;
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
list-style: none;
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover {
background-color: var(--dropdown-hover-background-color);
}
&:hover {
background-color: var(--dropdown-hover-background-color);
}
}
}
@ -139,26 +139,24 @@ details[role="list"] {
}
// All Dropdowns inside <nav>
nav [role="list"] {
summary,
a {
display: flex;
direction: ltr;
}
nav details[role="list"] summary,
nav li[role="list"] a {
display: flex;
direction: ltr;
}
summary + ul,
> ul {
min-width: fit-content;
border-radius: var(--border-radius);
nav details[role="list"] summary + ul,
nav li[role="list"] > ul {
min-width: fit-content;
border-radius: var(--border-radius);
li a {
border-radius: 0;
}
li a {
border-radius: 0;
}
}
// Dropdowns inside <nav> as nested <details>
nav [role="list"] {
nav details[role="list"] {
summary,
summary:not([role]) {
height: auto;
@ -168,11 +166,12 @@ nav [role="list"] {
&[open] summary {
border-radius: var(--border-radius);
}
summary + ul {
margin-top: var(--outline-width);
margin-inline-start: 0;
}
summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);