mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 01:46:14 -04:00
chore(dropdown): Optimize selectors
This commit is contained in:
Lucas Larroche
parent
794602a9b7
commit
aaf718a1d4
13 changed files with 117 additions and 142 deletions
|
|
@ -1981,9 +1981,8 @@ details[role=list],
|
|||
li[role=list] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
details[role=list] summary + ul,
|
||||
details[role=list] > ul,
|
||||
li[role=list] summary + ul,
|
||||
li[role=list] > ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
|
|
@ -2004,8 +2003,6 @@ li[role=list] > ul {
|
|||
white-space: nowrap;
|
||||
}
|
||||
details[role=list] summary + ul li,
|
||||
details[role=list] > ul li,
|
||||
li[role=list] summary + ul li,
|
||||
li[role=list] > ul li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -2013,20 +2010,14 @@ li[role=list] > ul li {
|
|||
list-style: none;
|
||||
}
|
||||
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 {
|
||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
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 {
|
||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
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 {
|
||||
display: block;
|
||||
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;
|
||||
}
|
||||
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 {
|
||||
background-color: var(--dropdown-hover-background-color);
|
||||
}
|
||||
|
|
@ -2098,39 +2087,42 @@ details[role=list][open] summary::before {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] a {
|
||||
nav details[role=list] summary,
|
||||
nav li[role=list] a {
|
||||
display: flex;
|
||||
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: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav [role=list] summary + ul li a,
|
||||
nav [role=list] > ul li a {
|
||||
nav details[role=list] summary + ul li a,
|
||||
nav li[role=list] > ul li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] summary:not([role]) {
|
||||
nav details[role=list] summary,
|
||||
nav details[role=list] summary:not([role]) {
|
||||
height: auto;
|
||||
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);
|
||||
}
|
||||
nav [role=list] summary + ul {
|
||||
nav details[role=list] summary + ul {
|
||||
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);
|
||||
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));
|
||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
40
css/pico.css
40
css/pico.css
|
|
@ -2224,9 +2224,8 @@ details[role=list],
|
|||
li[role=list] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
details[role=list] summary + ul,
|
||||
details[role=list] > ul,
|
||||
li[role=list] summary + ul,
|
||||
li[role=list] > ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
|
|
@ -2247,8 +2246,6 @@ li[role=list] > ul {
|
|||
white-space: nowrap;
|
||||
}
|
||||
details[role=list] summary + ul li,
|
||||
details[role=list] > ul li,
|
||||
li[role=list] summary + ul li,
|
||||
li[role=list] > ul li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -2256,20 +2253,14 @@ li[role=list] > ul li {
|
|||
list-style: none;
|
||||
}
|
||||
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 {
|
||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
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 {
|
||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
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 {
|
||||
display: block;
|
||||
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;
|
||||
}
|
||||
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 {
|
||||
background-color: var(--dropdown-hover-background-color);
|
||||
}
|
||||
|
|
@ -2341,39 +2330,42 @@ details[role=list][open] summary::before {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] a {
|
||||
nav details[role=list] summary,
|
||||
nav li[role=list] a {
|
||||
display: flex;
|
||||
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: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav [role=list] summary + ul li a,
|
||||
nav [role=list] > ul li a {
|
||||
nav details[role=list] summary + ul li a,
|
||||
nav li[role=list] > ul li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] summary:not([role]) {
|
||||
nav details[role=list] summary,
|
||||
nav details[role=list] summary:not([role]) {
|
||||
height: auto;
|
||||
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);
|
||||
}
|
||||
nav [role=list] summary + ul {
|
||||
nav details[role=list] summary + ul {
|
||||
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);
|
||||
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));
|
||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1951,9 +1951,8 @@ details[role=list],
|
|||
li[role=list] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
details[role=list] summary + ul,
|
||||
details[role=list] > ul,
|
||||
li[role=list] summary + ul,
|
||||
li[role=list] > ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
|
|
@ -1974,8 +1973,6 @@ li[role=list] > ul {
|
|||
white-space: nowrap;
|
||||
}
|
||||
details[role=list] summary + ul li,
|
||||
details[role=list] > ul li,
|
||||
li[role=list] summary + ul li,
|
||||
li[role=list] > ul li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -1983,20 +1980,14 @@ li[role=list] > ul li {
|
|||
list-style: none;
|
||||
}
|
||||
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 {
|
||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
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 {
|
||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
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 {
|
||||
display: block;
|
||||
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;
|
||||
}
|
||||
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 {
|
||||
background-color: var(--dropdown-hover-background-color);
|
||||
}
|
||||
|
|
@ -2068,39 +2057,42 @@ details[role=list][open] summary::before {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] a {
|
||||
nav details[role=list] summary,
|
||||
nav li[role=list] a {
|
||||
display: flex;
|
||||
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: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav [role=list] summary + ul li a,
|
||||
nav [role=list] > ul li a {
|
||||
nav details[role=list] summary + ul li a,
|
||||
nav li[role=list] > ul li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] summary:not([role]) {
|
||||
nav details[role=list] summary,
|
||||
nav details[role=list] summary:not([role]) {
|
||||
height: auto;
|
||||
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);
|
||||
}
|
||||
nav [role=list] summary + ul {
|
||||
nav details[role=list] summary + ul {
|
||||
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);
|
||||
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));
|
||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
@ -171,6 +169,7 @@ nav [role="list"] {
|
|||
|
||||
summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
summary[role="link"] {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue