mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
refactor: tooltip animations
This commit is contained in:
Lucas Larroche
parent
0b081e3657
commit
329793e828
10 changed files with 144 additions and 410 deletions
|
|
@ -2393,123 +2393,61 @@ progress::-moz-progress-bar {
|
|||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
[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-name: tooltip-slide-top;
|
||||
animation-fill-mode: forwards;
|
||||
animation-name: tooltip-slide;
|
||||
opacity: 0;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
--pico-tooltip-slide-to: translate(-50%, 0.25rem);
|
||||
transform: translate(-50%, -0.75rem);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-left;
|
||||
--pico-tooltip-slide-to: translate(-0.25rem, -50%);
|
||||
transform: translate(0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-right;
|
||||
--pico-tooltip-slide-to: translate(0.25rem, -50%);
|
||||
transform: translate(-0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
}
|
||||
}
|
||||
@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% {
|
||||
--pico-tooltip-caret-slide-to: translate(-0.3rem, -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;
|
||||
}
|
||||
to {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
transform: var(--pico-tooltip-caret-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
134
css/pico.css
134
css/pico.css
|
|
@ -2563,123 +2563,61 @@ progress::-moz-progress-bar {
|
|||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
[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-name: tooltip-slide-top;
|
||||
animation-fill-mode: forwards;
|
||||
animation-name: tooltip-slide;
|
||||
opacity: 0;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
--pico-tooltip-slide-to: translate(-50%, 0.25rem);
|
||||
transform: translate(-50%, -0.75rem);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-left;
|
||||
--pico-tooltip-slide-to: translate(-0.25rem, -50%);
|
||||
transform: translate(0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-right;
|
||||
--pico-tooltip-slide-to: translate(0.25rem, -50%);
|
||||
transform: translate(-0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
}
|
||||
}
|
||||
@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% {
|
||||
--pico-tooltip-caret-slide-to: translate(-0.3rem, -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;
|
||||
}
|
||||
to {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
transform: var(--pico-tooltip-caret-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2356,123 +2356,61 @@ progress::-moz-progress-bar {
|
|||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
[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-name: tooltip-slide-top;
|
||||
animation-fill-mode: forwards;
|
||||
animation-name: tooltip-slide;
|
||||
opacity: 0;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
--pico-tooltip-slide-to: translate(-50%, 0.25rem);
|
||||
transform: translate(-50%, -0.75rem);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-left;
|
||||
--pico-tooltip-slide-to: translate(-0.25rem, -50%);
|
||||
transform: translate(0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[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 {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-right;
|
||||
--pico-tooltip-slide-to: translate(0.25rem, -50%);
|
||||
transform: translate(-0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
}
|
||||
}
|
||||
@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% {
|
||||
--pico-tooltip-caret-slide-to: translate(-0.3rem, -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;
|
||||
}
|
||||
to {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
transform: var(--pico-tooltip-caret-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -121,12 +121,18 @@
|
|||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$✨}tooltip-slide-to: translate(-50%, -0.25rem);
|
||||
transform: translate(-50%, 0.75rem);
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-top;
|
||||
animation-fill-mode: forwards;
|
||||
animation-name: tooltip-slide;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::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 {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
#{$✨}tooltip-slide-to: translate(-50%, 0.25rem);
|
||||
transform: translate(-50%, -0.75rem);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::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 {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-left;
|
||||
#{$✨}tooltip-slide-to: translate(-0.25rem, -50%);
|
||||
transform: translate(0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::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 {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-right;
|
||||
#{$✨}tooltip-slide-to: translate(0.25rem, -50%);
|
||||
transform: translate(-0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
#{$✨}tooltip-caret-slide-to: translate(-0.3rem, -50%);
|
||||
transform: translate(-0.05rem, -50%);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-top {
|
||||
from {
|
||||
transform: translate(-50%, 0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide {
|
||||
to {
|
||||
transform: translate(-50%, -0.25rem);
|
||||
transform: var(#{$✨}tooltip-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-top {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide {
|
||||
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%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
transform: var(#{$✨}tooltip-caret-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue