mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

build: build docs

Browse source
This commit is contained in:
Kevin 2022-06-21 17:26:52 +08:00
parent 9916574e33
commit 9dd4c914ac
17 changed files with 681 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

226
css/pico.classless.css
View file

@ -2253,7 +2253,7 @@ a[aria-busy=true] {
text-decoration: none; text-decoration: none;
cursor: help; 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; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2275,7 +2275,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2286,23 +2286,87 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); 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 { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @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; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; 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 { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2313,7 +2377,7 @@ a[aria-busy=true] {
} }
} }
@keyframes slide { @keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2323,7 +2387,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2336,7 +2400,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2349,6 +2413,144 @@ a[aria-busy=true] {
opacity: 1; 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 * Accessibility & User interaction
*/ */

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

226
css/pico.css
View file

@ -2451,7 +2451,7 @@ a[aria-busy=true] {
text-decoration: none; text-decoration: none;
cursor: help; 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; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2473,7 +2473,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2484,23 +2484,87 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); 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 { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @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; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; 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 { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2511,7 +2575,7 @@ a[aria-busy=true] {
} }
} }
@keyframes slide { @keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2521,7 +2585,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2534,7 +2598,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2547,6 +2611,144 @@ a[aria-busy=true] {
opacity: 1; 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 * Accessibility & User interaction
*/ */

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -2223,7 +2223,7 @@ a[aria-busy=true] {
text-decoration: none; text-decoration: none;
cursor: help; 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; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2245,7 +2245,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2256,23 +2256,87 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); 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 { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @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; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; 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 { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2283,7 +2347,7 @@ a[aria-busy=true] {
} }
} }
@keyframes slide { @keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2293,7 +2357,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2306,7 +2370,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2319,6 +2383,144 @@ a[aria-busy=true] {
opacity: 1; 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 * Accessibility & User interaction
*/ */

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

19
docs/css/pico.docs.css
View file

@ -505,4 +505,23 @@ body > nav ul:first-of-type li:nth-of-type(2) {
} }
} }
/**
* Docs: Tooltips
*/
.tooltip-placement {
display: grid;
grid-template-columns: 100px 1fr 100px;
}
.tooltip-placement .top, .tooltip-placement .bottom {
grid-column-start: 2;
grid-column-end: 3;
}
.tooltip-placement .left {
grid-column-start: 1;
grid-column-end: 2;
}
.tooltip-placement .right {
grid-column-start: 3;
}
/*# sourceMappingURL=pico.docs.css.map */ /*# sourceMappingURL=pico.docs.css.map */

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

10
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long