Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-22 22:59:42 +02:00
Code Issues Releases Activity

feat: add reusable copy button component

Browse source
This commit is contained in:
Aleksey Solovyev 2022-11-29 14:07:20 +03:00
parent 91ba44a169
commit 285b94779f
4 changed files with 166 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/frontend/styles/components/copy-button.pcss Normal file
View file

@ -0,0 +1,103 @@
.copy-button {
position: relative;
width: 28px;
height: 28px;
padding: 0;
border: none;
background: none;
cursor: pointer;
transition: opacity 200ms;
@media (--can-hover) {
&:hover .copy-button__inner {
background: var(--color-link-hover);
}
}
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 100%;
background-color: var(--color-success);
visibility: hidden;
pointer-events: none;
transform: scale(1);
transition: transform 400ms ease-out, opacity 400ms;
}
&__inner {
@apply --squircle;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: white;
pointer-events: none;
}
&__icon--initial {
display: flex;
transform: translateZ(0);
}
&__icon--success {
display: none;
width: 24px;
height: 24px;
color: white;
}
&__copied {
&::before {
opacity: 0;
visibility: visible;
transform: scale(3.5);
}
.copy-button__inner,
.copy-button__inner:hover {
background: var(--color-success) !important;
animation: check-square-in 250ms ease-in;
}
.copy-button__icon--initial {
display: none;
}
.copy-button__icon--success {
display: flex;
animation: check-sign-in 350ms ease-in forwards;
}
}
@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;
}
}
}