mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
Merge branch 'dev' into ll/refactor/nav
This commit is contained in:
Lucas Larroche
commit
a039b2fd4b
51 changed files with 730 additions and 82 deletions
116
css/pico.css
116
css/pico.css
|
|
@ -285,6 +285,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -380,6 +382,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -474,6 +478,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -1961,16 +1967,18 @@ canvas {
|
|||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing));
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
}
|
||||
details summary {
|
||||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
details summary:not([role=button]) {
|
||||
color: var(--accordion-close-summary-color);
|
||||
}
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1995,24 +2003,34 @@ details summary::after {
|
|||
}
|
||||
details summary:focus {
|
||||
outline: none;
|
||||
}
|
||||
details summary:focus:not([role=button]) {
|
||||
color: var(--accordion-active-summary-color);
|
||||
}
|
||||
details summary ~ * {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
details summary[role=button] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
details summary ~ * ~ * {
|
||||
margin-top: 0;
|
||||
details summary[role=button]::after {
|
||||
height: calc(1rem * var(--line-height));
|
||||
background-image: var(--icon-chevron-button);
|
||||
}
|
||||
details summary[role=button]:not(.outline).contrast::after {
|
||||
background-image: var(--icon-chevron-button-inverse);
|
||||
}
|
||||
details[open] > summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing));
|
||||
}
|
||||
details[open] > summary:not(:focus) {
|
||||
details[open] > summary:not([role=button]):not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
details[open] > summary::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
[dir=rtl] details summary {
|
||||
text-align: right;
|
||||
}
|
||||
[dir=rtl] details summary::after {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -2023,7 +2041,6 @@ details[open] > summary::after {
|
|||
article {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
|
@ -2330,6 +2347,87 @@ progress::-moz-progress-bar {
|
|||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
details[role=list] {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
details[role=list] summary {
|
||||
margin-bottom: 0;
|
||||
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);
|
||||
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
details[role=list] summary::after {
|
||||
transform: rotate(0deg);
|
||||
height: 100%;
|
||||
}
|
||||
details[role=list] summary + ul {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: var(--border-width) solid var(--form-element-border-color);
|
||||
border-top: none;
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
background-color: var(--background-color);
|
||||
list-style: none;
|
||||
}
|
||||
details[role=list] summary + ul li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
details[role=list] summary + ul li::marker {
|
||||
content: "";
|
||||
}
|
||||
details[role=list] summary + ul li label {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
}
|
||||
details[role=list] summary + ul li label:hover {
|
||||
background-color: var(--secondary-focus);
|
||||
}
|
||||
details[role=list] summary + ul li label input[type=radio],
|
||||
details[role=list] summary + ul li label input[type=checkbox] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
details[role=list][disabled] summary, details[role=list].disabled summary {
|
||||
color: var(--muted-color);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
details[role=list][open] summary {
|
||||
margin-bottom: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
details[role=list][open] summary::before {
|
||||
display: block;
|
||||
z-index: 80;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
content: " ";
|
||||
cursor: default;
|
||||
}
|
||||
details[role=list][open] summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue