Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-07 22:45:23 +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 {
.block-header__copy-link, .block-header__copy-link:hover {
.block-header__copy-link,
.block-header__copy-link:hover {
background: var(--color-success);
opacity: 1;
animation: check-square-in 250ms ease-in;
pointer-events: none;
}
.block-header__copy-link-icon--initial {
@ -129,11 +132,13 @@
.block-header__copy-link-icon--success {
display: flex;
animation: check-sign-in 350ms ease-in forwards;
}
.block-header__copy-link-splash {
opacity: 0.1;
transform: scale(2);
opacity: 0;
visibility: visible;
transform: scale(3.5);
}
}
@ -144,11 +149,9 @@
height: 28px;
background-color: var(--color-success);
transform: scale(1);
opacity: 0;
border-radius: 11px;
transition: transform 300ms;
z-index: 1;
will-change: transform, opacity;
border-radius: 100%;
transition: transform 400ms ease-out, opacity 400ms;
visibility: hidden;
}
&__copy-link-icon--success {
@ -172,10 +175,10 @@
align-items: center;
justify-content: center;
border-radius: 8px;
@apply --squircle;
color: var(--color-text-second);
opacity: 0;
margin-right: 8px;
z-index: 2;
@media (--can-hover) {
&:hover {
@ -195,6 +198,30 @@
.inline-code {
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;
}
}
}
/**