mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 01:46:14 -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

40
css/pico.classless.css
View file

@ -1981,9 +1981,8 @@ details[role=list],
li[role=list] { li[role=list] {
position: relative; position: relative;
} }
details[role=list] summary + ul, details[role=list] summary + ul,
details[role=list] > ul,
li[role=list] summary + ul,
li[role=list] > ul { li[role=list] > ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
@ -2004,8 +2003,6 @@ li[role=list] > ul {
white-space: nowrap; white-space: nowrap;
} }
details[role=list] summary + ul li, details[role=list] summary + ul li,
details[role=list] > ul li,
li[role=list] summary + ul li,
li[role=list] > ul li { li[role=list] > ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
@ -2013,20 +2010,14 @@ li[role=list] > ul li {
list-style: none; list-style: none;
} }
details[role=list] summary + ul li:first-of-type, details[role=list] summary + ul li:first-of-type,
details[role=list] > ul li:first-of-type,
li[role=list] summary + ul li:first-of-type,
li[role=list] > ul li:first-of-type { li[role=list] > ul li:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5); margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
} }
details[role=list] summary + ul li:last-of-type, details[role=list] summary + ul li:last-of-type,
details[role=list] > ul li:last-of-type,
li[role=list] summary + ul li:last-of-type,
li[role=list] > ul li:last-of-type { li[role=list] > ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
} }
details[role=list] summary + ul li a, details[role=list] summary + ul li a,
details[role=list] > ul li a,
li[role=list] summary + ul li a,
li[role=list] > ul li a { li[role=list] > ul li a {
display: block; display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1); margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
@ -2037,8 +2028,6 @@ li[role=list] > ul li a {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:hover,
details[role=list] > ul li a:hover,
li[role=list] summary + ul li a:hover,
li[role=list] > ul li a:hover { li[role=list] > ul li a:hover {
background-color: var(--dropdown-hover-background-color); background-color: var(--dropdown-hover-background-color);
} }
@ -2098,39 +2087,42 @@ details[role=list][open] summary::before {
cursor: default; cursor: default;
} }
nav [role=list] summary, nav details[role=list] summary,
nav [role=list] a { nav li[role=list] a {
display: flex; display: flex;
direction: ltr; direction: ltr;
} }
nav [role=list] summary + ul,
nav [role=list] > ul { nav details[role=list] summary + ul,
nav li[role=list] > ul {
min-width: -webkit-fit-content; min-width: -webkit-fit-content;
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
nav [role=list] summary + ul li a, nav details[role=list] summary + ul li a,
nav [role=list] > ul li a { nav li[role=list] > ul li a {
border-radius: 0; border-radius: 0;
} }
nav [role=list] summary, nav details[role=list] summary,
nav [role=list] summary:not([role]) { nav details[role=list] summary:not([role]) {
height: auto; height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
} }
nav [role=list][open] summary { nav details[role=list][open] summary {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
nav [role=list] summary + ul { nav details[role=list] summary + ul {
margin-top: var(--outline-width); margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0;
} }
nav [role=list] summary[role=link] { nav details[role=list] summary[role=link] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height); line-height: var(--line-height);
} }
nav [role=list] summary[role=link] + ul { nav details[role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

40
css/pico.css
View file

@ -2224,9 +2224,8 @@ details[role=list],
li[role=list] { li[role=list] {
position: relative; position: relative;
} }
details[role=list] summary + ul, details[role=list] summary + ul,
details[role=list] > ul,
li[role=list] summary + ul,
li[role=list] > ul { li[role=list] > ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
@ -2247,8 +2246,6 @@ li[role=list] > ul {
white-space: nowrap; white-space: nowrap;
} }
details[role=list] summary + ul li, details[role=list] summary + ul li,
details[role=list] > ul li,
li[role=list] summary + ul li,
li[role=list] > ul li { li[role=list] > ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
@ -2256,20 +2253,14 @@ li[role=list] > ul li {
list-style: none; list-style: none;
} }
details[role=list] summary + ul li:first-of-type, details[role=list] summary + ul li:first-of-type,
details[role=list] > ul li:first-of-type,
li[role=list] summary + ul li:first-of-type,
li[role=list] > ul li:first-of-type { li[role=list] > ul li:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5); margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
} }
details[role=list] summary + ul li:last-of-type, details[role=list] summary + ul li:last-of-type,
details[role=list] > ul li:last-of-type,
li[role=list] summary + ul li:last-of-type,
li[role=list] > ul li:last-of-type { li[role=list] > ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
} }
details[role=list] summary + ul li a, details[role=list] summary + ul li a,
details[role=list] > ul li a,
li[role=list] summary + ul li a,
li[role=list] > ul li a { li[role=list] > ul li a {
display: block; display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1); margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
@ -2280,8 +2271,6 @@ li[role=list] > ul li a {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:hover,
details[role=list] > ul li a:hover,
li[role=list] summary + ul li a:hover,
li[role=list] > ul li a:hover { li[role=list] > ul li a:hover {
background-color: var(--dropdown-hover-background-color); background-color: var(--dropdown-hover-background-color);
} }
@ -2341,39 +2330,42 @@ details[role=list][open] summary::before {
cursor: default; cursor: default;
} }
nav [role=list] summary, nav details[role=list] summary,
nav [role=list] a { nav li[role=list] a {
display: flex; display: flex;
direction: ltr; direction: ltr;
} }
nav [role=list] summary + ul,
nav [role=list] > ul { nav details[role=list] summary + ul,
nav li[role=list] > ul {
min-width: -webkit-fit-content; min-width: -webkit-fit-content;
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
nav [role=list] summary + ul li a, nav details[role=list] summary + ul li a,
nav [role=list] > ul li a { nav li[role=list] > ul li a {
border-radius: 0; border-radius: 0;
} }
nav [role=list] summary, nav details[role=list] summary,
nav [role=list] summary:not([role]) { nav details[role=list] summary:not([role]) {
height: auto; height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
} }
nav [role=list][open] summary { nav details[role=list][open] summary {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
nav [role=list] summary + ul { nav details[role=list] summary + ul {
margin-top: var(--outline-width); margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0;
} }
nav [role=list] summary[role=link] { nav details[role=list] summary[role=link] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height); line-height: var(--line-height);
} }
nav [role=list] summary[role=link] + ul { nav details[role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

40
css/pico.fluid.classless.css
View file

@ -1951,9 +1951,8 @@ details[role=list],
li[role=list] { li[role=list] {
position: relative; position: relative;
} }
details[role=list] summary + ul, details[role=list] summary + ul,
details[role=list] > ul,
li[role=list] summary + ul,
li[role=list] > ul { li[role=list] > ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
@ -1974,8 +1973,6 @@ li[role=list] > ul {
white-space: nowrap; white-space: nowrap;
} }
details[role=list] summary + ul li, details[role=list] summary + ul li,
details[role=list] > ul li,
li[role=list] summary + ul li,
li[role=list] > ul li { li[role=list] > ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
@ -1983,20 +1980,14 @@ li[role=list] > ul li {
list-style: none; list-style: none;
} }
details[role=list] summary + ul li:first-of-type, details[role=list] summary + ul li:first-of-type,
details[role=list] > ul li:first-of-type,
li[role=list] summary + ul li:first-of-type,
li[role=list] > ul li:first-of-type { li[role=list] > ul li:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5); margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
} }
details[role=list] summary + ul li:last-of-type, details[role=list] summary + ul li:last-of-type,
details[role=list] > ul li:last-of-type,
li[role=list] summary + ul li:last-of-type,
li[role=list] > ul li:last-of-type { li[role=list] > ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
} }
details[role=list] summary + ul li a, details[role=list] summary + ul li a,
details[role=list] > ul li a,
li[role=list] summary + ul li a,
li[role=list] > ul li a { li[role=list] > ul li a {
display: block; display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1); margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
@ -2007,8 +1998,6 @@ li[role=list] > ul li a {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:hover,
details[role=list] > ul li a:hover,
li[role=list] summary + ul li a:hover,
li[role=list] > ul li a:hover { li[role=list] > ul li a:hover {
background-color: var(--dropdown-hover-background-color); background-color: var(--dropdown-hover-background-color);
} }
@ -2068,39 +2057,42 @@ details[role=list][open] summary::before {
cursor: default; cursor: default;
} }
nav [role=list] summary, nav details[role=list] summary,
nav [role=list] a { nav li[role=list] a {
display: flex; display: flex;
direction: ltr; direction: ltr;
} }
nav [role=list] summary + ul,
nav [role=list] > ul { nav details[role=list] summary + ul,
nav li[role=list] > ul {
min-width: -webkit-fit-content; min-width: -webkit-fit-content;
min-width: -moz-fit-content; min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
nav [role=list] summary + ul li a, nav details[role=list] summary + ul li a,
nav [role=list] > ul li a { nav li[role=list] > ul li a {
border-radius: 0; border-radius: 0;
} }
nav [role=list] summary, nav details[role=list] summary,
nav [role=list] summary:not([role]) { nav details[role=list] summary:not([role]) {
height: auto; height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
} }
nav [role=list][open] summary { nav details[role=list][open] summary {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
nav [role=list] summary + ul { nav details[role=list] summary + ul {
margin-top: var(--outline-width); margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0;
} }
nav [role=list] summary[role=link] { nav details[role=list] summary[role=link] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height); line-height: var(--line-height);
} }
nav [role=list] summary[role=link] + ul { nav details[role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

121
scss/components/_dropdown.scss
View file

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