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

feat(dropdowns): Dropdowns inside nav

Browse source
This commit is contained in:
Lucas Larroche 2022-02-27 22:43:15 +07:00
parent 37b6aaab39
commit e54d1ee4f7
20 changed files with 416 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

88
css/pico.classless.css
View file

@ -1808,7 +1808,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -1831,12 +1831,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -1871,6 +1871,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2103,45 +2104,30 @@ details[role=list] {
details[role=list] summary {
margin: 0;
}
details[role=list] summary:not([role=button]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list] summary:not([role=button])::after {
height: 100%;
}
details[role=list] summary + ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-top: none;
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 {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
@ -2163,6 +2149,7 @@ details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after {
height: calc(1rem * var(--line-height));
transform: rotate(0deg);
}
details[role=list][disabled] summary, details[role=list].disabled summary {
@ -2188,6 +2175,57 @@ details[role=list][open] summary::before {
cursor: default;
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
nav ul li details[role=list] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
}
nav ul li details[role=list] summary:not([role=button]) {
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
line-height: var(--line-height);
}
nav ul li details[role=list] summary:not([role=button]):focus {
background-color: var(--primary-focus);
}
nav ul li details[role=list] summary:not([role=button]) a {
pointer-events: none;
}
nav ul li details[role=list] summary:not([role=button]) a:focus {
background-color: transparent;
}
nav ul li details[role=list][open] summary {
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul {
margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul a {
border-radius: 0;
}
nav ul li details[role=list][open] summary[role=button] + ul {
margin-top: var(--nav-link-spacing-horizontal);
}
/**
* Loading ([aria-busy=true])
*/

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

88
css/pico.css
View file

@ -2006,7 +2006,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -2029,12 +2029,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -2072,6 +2072,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2400,45 +2401,30 @@ details[role=list] {
details[role=list] summary {
margin: 0;
}
details[role=list] summary:not([role=button]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list] summary:not([role=button])::after {
height: 100%;
}
details[role=list] summary + ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-top: none;
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 {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
@ -2460,6 +2446,7 @@ details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after {
height: calc(1rem * var(--line-height));
transform: rotate(0deg);
}
details[role=list][disabled] summary, details[role=list].disabled summary {
@ -2485,6 +2472,57 @@ details[role=list][open] summary::before {
cursor: default;
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
nav ul li details[role=list] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
}
nav ul li details[role=list] summary:not([role=button]) {
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
line-height: var(--line-height);
}
nav ul li details[role=list] summary:not([role=button]):focus {
background-color: var(--primary-focus);
}
nav ul li details[role=list] summary:not([role=button]) a {
pointer-events: none;
}
nav ul li details[role=list] summary:not([role=button]) a:focus {
background-color: transparent;
}
nav ul li details[role=list][open] summary {
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul {
margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul a {
border-radius: 0;
}
nav ul li details[role=list][open] summary[role=button] + ul {
margin-top: var(--nav-link-spacing-horizontal);
}
/**
* Loading ([aria-busy=true])
*/

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -1778,7 +1778,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -1801,12 +1801,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -1841,6 +1841,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2073,45 +2074,30 @@ details[role=list] {
details[role=list] summary {
margin: 0;
}
details[role=list] summary:not([role=button]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list] summary:not([role=button])::after {
height: 100%;
}
details[role=list] summary + ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-top: none;
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 {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
@ -2133,6 +2119,7 @@ details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after {
height: calc(1rem * var(--line-height));
transform: rotate(0deg);
}
details[role=list][disabled] summary, details[role=list].disabled summary {
@ -2158,6 +2145,57 @@ details[role=list][open] summary::before {
cursor: default;
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
nav ul li details[role=list] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
}
nav ul li details[role=list] summary:not([role=button]) {
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
line-height: var(--line-height);
}
nav ul li details[role=list] summary:not([role=button]):focus {
background-color: var(--primary-focus);
}
nav ul li details[role=list] summary:not([role=button]) a {
pointer-events: none;
}
nav ul li details[role=list] summary:not([role=button]) a:focus {
background-color: transparent;
}
nav ul li details[role=list][open] summary {
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul {
margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul a {
border-radius: 0;
}
nav ul li details[role=list][open] summary[role=button] + ul {
margin-top: var(--nav-link-spacing-horizontal);
}
/**
* Loading ([aria-busy=true])
*/

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