mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 03:06:14 -04:00
Merge branch 'dev' into ll/modal/backdrop
This commit is contained in:
Lucas Larroche
commit
0b141dc266
36 changed files with 1192 additions and 288 deletions
255
css/pico.css
255
css/pico.css
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Pico.css v1.5.2 (https://picocss.com)
|
||||
* Pico.css v1.5.3 (https://picocss.com)
|
||||
* Copyright 2019-2022 - Licensed under MIT
|
||||
*/
|
||||
/**
|
||||
|
|
@ -203,7 +203,6 @@ kbd {
|
|||
|
||||
[data-theme=light],
|
||||
:root:not([data-theme=dark]) {
|
||||
color-scheme: light;
|
||||
--background-color: #fff;
|
||||
--color: hsl(205deg, 20%, 32%);
|
||||
--h1-color: hsl(205deg, 30%, 15%);
|
||||
|
|
@ -306,11 +305,11 @@ kbd {
|
|||
--icon-search: 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%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: 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%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-valid: 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(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme=light]) {
|
||||
color-scheme: dark;
|
||||
--background-color: #11191f;
|
||||
--color: hsl(205deg, 16%, 77%);
|
||||
--h1-color: hsl(205deg, 20%, 94%);
|
||||
|
|
@ -414,10 +413,10 @@ kbd {
|
|||
--icon-search: 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%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: 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%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-valid: 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(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
[data-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--background-color: #11191f;
|
||||
--color: hsl(205deg, 16%, 77%);
|
||||
--h1-color: hsl(205deg, 20%, 94%);
|
||||
|
|
@ -521,6 +520,7 @@ kbd {
|
|||
--icon-search: 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%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: 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%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-valid: 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(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1163,7 +1163,6 @@ textarea {
|
|||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
@ -2122,6 +2121,23 @@ nav :where(a, [role=link]) {
|
|||
nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
|
||||
text-decoration: none;
|
||||
}
|
||||
nav[aria-label=breadcrumb] {
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
nav[aria-label=breadcrumb] ul li {
|
||||
-webkit-padding-start: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after {
|
||||
-webkit-padding-start: 0.5rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
content: "/";
|
||||
color: var(--muted-color);
|
||||
}
|
||||
nav[aria-label=breadcrumb] a[aria-current=page] {
|
||||
color: inherit;
|
||||
}
|
||||
nav [role=button] {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
|
|
@ -2447,7 +2463,7 @@ a[aria-busy=true] {
|
|||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
[data-tooltip]::before, [data-tooltip]::after {
|
||||
[data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
|
||||
display: block;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
|
|
@ -2469,7 +2485,7 @@ a[aria-busy=true] {
|
|||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
[data-tooltip]::after {
|
||||
[data-tooltip][data-placement=top]::after, [data-tooltip]::after {
|
||||
padding: 0;
|
||||
transform: translate(-50%, 0rem);
|
||||
border-top: 0.3rem solid;
|
||||
|
|
@ -2480,23 +2496,86 @@ a[aria-busy=true] {
|
|||
content: "";
|
||||
color: var(--tooltip-background-color);
|
||||
}
|
||||
[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
transform: translate(-50%, 0.25rem);
|
||||
}
|
||||
[data-tooltip][data-placement=bottom]:after {
|
||||
transform: translate(-50%, -0.3rem);
|
||||
border: 0.3rem solid transparent;
|
||||
border-bottom: 0.3rem solid;
|
||||
}
|
||||
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate(-0.25rem, -50%);
|
||||
}
|
||||
[data-tooltip][data-placement=left]:after {
|
||||
transform: translate(0.3rem, -50%);
|
||||
border: 0.3rem solid transparent;
|
||||
border-left: 0.3rem solid;
|
||||
}
|
||||
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 100%;
|
||||
transform: translate(0.25rem, -50%);
|
||||
}
|
||||
[data-tooltip][data-placement=right]:after {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
border: 0.3rem solid transparent;
|
||||
border-right: 0.3rem solid;
|
||||
}
|
||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
-webkit-animation-duration: 0.2s;
|
||||
animation-duration: 0.2s;
|
||||
-webkit-animation-name: slide;
|
||||
animation-name: slide;
|
||||
-webkit-animation-name: tooltip-slide-top;
|
||||
animation-name: tooltip-slide-top;
|
||||
}
|
||||
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||
-webkit-animation-name: slideCaret;
|
||||
animation-name: slideCaret;
|
||||
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||
-webkit-animation-name: tooltip-caret-slide-top;
|
||||
animation-name: tooltip-caret-slide-top;
|
||||
}
|
||||
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
|
||||
-webkit-animation-duration: 0.2s;
|
||||
animation-duration: 0.2s;
|
||||
-webkit-animation-name: tooltip-slide-bottom;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
}
|
||||
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
|
||||
-webkit-animation-name: tooltip-caret-slide-bottom;
|
||||
animation-name: tooltip-caret-slide-bottom;
|
||||
}
|
||||
[data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
|
||||
-webkit-animation-duration: 0.2s;
|
||||
animation-duration: 0.2s;
|
||||
-webkit-animation-name: tooltip-slide-left;
|
||||
animation-name: tooltip-slide-left;
|
||||
}
|
||||
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
|
||||
-webkit-animation-name: tooltip-caret-slide-left;
|
||||
animation-name: tooltip-caret-slide-left;
|
||||
}
|
||||
[data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
|
||||
-webkit-animation-duration: 0.2s;
|
||||
animation-duration: 0.2s;
|
||||
-webkit-animation-name: tooltip-slide-right;
|
||||
animation-name: tooltip-slide-right;
|
||||
}
|
||||
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
|
||||
-webkit-animation-name: tooltip-caret-slide-right;
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide {
|
||||
@-webkit-keyframes tooltip-slide-top {
|
||||
from {
|
||||
transform: translate(-50%, 0.75rem);
|
||||
opacity: 0;
|
||||
|
|
@ -2506,8 +2585,7 @@ a[aria-busy=true] {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
@keyframes tooltip-slide-top {
|
||||
from {
|
||||
transform: translate(-50%, 0.75rem);
|
||||
opacity: 0;
|
||||
|
|
@ -2517,7 +2595,7 @@ a[aria-busy=true] {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideCaret {
|
||||
@-webkit-keyframes tooltip-caret-slide-top {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -2530,7 +2608,7 @@ a[aria-busy=true] {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slideCaret {
|
||||
@keyframes tooltip-caret-slide-top {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -2543,6 +2621,145 @@ a[aria-busy=true] {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes tooltip-slide-bottom {
|
||||
from {
|
||||
transform: translate(-50%, -0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, 0.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes tooltip-slide-bottom {
|
||||
from {
|
||||
transform: translate(-50%, -0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, 0.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes tooltip-caret-slide-bottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -0.5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -0.3rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes tooltip-caret-slide-bottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -0.5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -0.3rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes tooltip-slide-left {
|
||||
from {
|
||||
transform: translate(0.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-0.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes tooltip-slide-left {
|
||||
from {
|
||||
transform: translate(0.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-0.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes tooltip-caret-slide-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(0.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(0.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes tooltip-caret-slide-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(0.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(0.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes tooltip-slide-right {
|
||||
from {
|
||||
transform: translate(-0.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(0.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes tooltip-slide-right {
|
||||
from {
|
||||
transform: translate(-0.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(0.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes tooltip-caret-slide-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-0.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes tooltip-caret-slide-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-0.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility & User interaction
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue