Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-08 15:05:26 +02:00
Code Issues Releases Activity

Update animation

Browse source
This commit is contained in:
Tanya Fomina 2022-09-14 14:43:04 +03:00
parent c9100156c7
commit 75cff383ce
1 changed files with 36 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/frontend/styles/components/page.pcss
View file

@ -118,9 +118,12 @@
} }
&--link-copied { &--link-copied {
.block-header__copy-link, .block-header__copy-link:hover { .block-header__copy-link,
.block-header__copy-link:hover {
background: var(--color-success); background: var(--color-success);
opacity: 1; opacity: 1;
animation: check-square-in 250ms ease-in;
pointer-events: none;
} }
.block-header__copy-link-icon--initial { .block-header__copy-link-icon--initial {
@ -129,11 +132,13 @@
.block-header__copy-link-icon--success { .block-header__copy-link-icon--success {
display: flex; display: flex;
animation: check-sign-in 350ms ease-in forwards;
} }
.block-header__copy-link-splash { .block-header__copy-link-splash {
opacity: 0.1; opacity: 0;
transform: scale(2); visibility: visible;
transform: scale(3.5);
} }
} }
@ -144,11 +149,9 @@
height: 28px; height: 28px;
background-color: var(--color-success); background-color: var(--color-success);
transform: scale(1); transform: scale(1);
opacity: 0; border-radius: 100%;
border-radius: 11px; transition: transform 400ms ease-out, opacity 400ms;
transition: transform 300ms; visibility: hidden;
z-index: 1;
will-change: transform, opacity;
} }
&__copy-link-icon--success { &__copy-link-icon--success {
@ -172,10 +175,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 8px; border-radius: 8px;
@apply --squircle;
color: var(--color-text-second); color: var(--color-text-second);
opacity: 0; opacity: 0;
margin-right: 8px; margin-right: 8px;
z-index: 2;
@media (--can-hover) { @media (--can-hover) {
&:hover { &:hover {
@ -195,6 +198,30 @@
.inline-code { .inline-code {
line-height: inherit; line-height: inherit;
} }
@keyframes check-sign-in {
from {
transform: scale(.7);
}
80% {
transform: scale(1.1);
}
to {
transform: none;
}
}
@keyframes check-square-in {
from {
transform: scale(1.05);
}
80% {
transform: scale(.96);
}
to {
transform: none;
}
}
} }
/** /**