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

refactor: tooltip animations

Browse source
This commit is contained in:
Lucas Larroche 2023-03-28 21:28:51 +07:00
parent 0b081e3657
commit 329793e828
10 changed files with 144 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

134
css/pico.classless.css
View file

@ -2393,123 +2393,61 @@ progress::-moz-progress-bar {
} }
@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]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
--pico-tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s; animation-duration: 0.2s;
animation-name: tooltip-slide-top; animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: tooltip-caret-slide-top; --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(-50%, 0.25rem);
animation-name: tooltip-slide-bottom; transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
animation-name: tooltip-caret-slide-bottom; --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(-0.25rem, -50%);
animation-name: tooltip-slide-left; transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after { [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
animation-name: tooltip-caret-slide-left; --pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(0.25rem, -50%);
animation-name: tooltip-slide-right; transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after { [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
animation-name: tooltip-caret-slide-right; --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
}
}
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, 0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
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;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -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;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%); transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
@keyframes tooltip-slide {
to {
transform: var(--pico-tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-0.3rem, -50%); transform: var(--pico-tooltip-caret-slide-to);
opacity: 1; opacity: 1;
} }
} }

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

134
css/pico.css
View file

@ -2563,123 +2563,61 @@ progress::-moz-progress-bar {
} }
@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]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
--pico-tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s; animation-duration: 0.2s;
animation-name: tooltip-slide-top; animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: tooltip-caret-slide-top; --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(-50%, 0.25rem);
animation-name: tooltip-slide-bottom; transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
animation-name: tooltip-caret-slide-bottom; --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(-0.25rem, -50%);
animation-name: tooltip-slide-left; transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after { [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
animation-name: tooltip-caret-slide-left; --pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(0.25rem, -50%);
animation-name: tooltip-slide-right; transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after { [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
animation-name: tooltip-caret-slide-right; --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
}
}
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, 0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
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;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -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;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%); transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
@keyframes tooltip-slide {
to {
transform: var(--pico-tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-0.3rem, -50%); transform: var(--pico-tooltip-caret-slide-to);
opacity: 1; opacity: 1;
} }
} }

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -2356,123 +2356,61 @@ progress::-moz-progress-bar {
} }
@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]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
--pico-tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s; animation-duration: 0.2s;
animation-name: tooltip-slide-top; animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip]:focus::after, [data-tooltip]:hover::after {
animation-name: tooltip-caret-slide-top; --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(-50%, 0.25rem);
animation-name: tooltip-slide-bottom; transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
animation-name: tooltip-caret-slide-bottom; --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(-0.25rem, -50%);
animation-name: tooltip-slide-left; transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after { [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
animation-name: tooltip-caret-slide-left; --pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
} }
[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 { [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 {
animation-duration: 0.2s; --pico-tooltip-slide-to: translate(0.25rem, -50%);
animation-name: tooltip-slide-right; transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
} }
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after { [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
animation-name: tooltip-caret-slide-right; --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
}
}
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, 0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
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;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -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;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%); transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
@keyframes tooltip-slide {
to {
transform: var(--pico-tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-0.3rem, -50%); transform: var(--pico-tooltip-caret-slide-to);
opacity: 1; opacity: 1;
} }
} }

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.min.css vendored
View file

File diff suppressed because one or more lines are too long

160
scss/components/_tooltip.scss
View file

@ -121,12 +121,18 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
#{$✨}tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s; animation-duration: 0.2s;
animation-name: tooltip-slide-top; animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
} }
&::after { &::after {
animation-name: tooltip-caret-slide-top; #{$✨}tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
} }
} }
@ -136,12 +142,15 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: 0.2s; #{$✨}tooltip-slide-to: translate(-50%, 0.25rem);
animation-name: tooltip-slide-bottom; transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
} }
&::after { &::after {
animation-name: tooltip-caret-slide-bottom; #{$✨}tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
} }
} }
} }
@ -152,12 +161,15 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: 0.2s; #{$✨}tooltip-slide-to: translate(-0.25rem, -50%);
animation-name: tooltip-slide-left; transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
} }
&::after { &::after {
animation-name: tooltip-caret-slide-left; #{$✨}tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
} }
} }
} }
@ -168,125 +180,33 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: 0.2s; #{$✨}tooltip-slide-to: translate(0.25rem, -50%);
animation-name: tooltip-slide-right; transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
} }
&::after { &::after {
animation-name: tooltip-caret-slide-right; #{$✨}tooltip-caret-slide-to: translate(-0.3rem, -50%);
}
}
}
}
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, 0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
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;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -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;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%); transform: translate(-0.05rem, -50%);
opacity: 0; animation-name: tooltip-caret-slide;
}
}
}
} }
@keyframes tooltip-slide {
to { to {
transform: translate(-0.3rem, -50%); transform: var(#{$✨}tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0;
}
to {
transform: var(#{$✨}tooltip-caret-slide-to);
opacity: 1; opacity: 1;
} }
} }