Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-25 08:09:41 +02:00
Code Issues Releases Activity

Add ability to copy header link (#256)

Browse source 
* Add ability to copy header link

* Update copy button styles

* Update splash border radius

* Remove cursor pointer from header

* Fix for different header sizes

* Update animation

* Update src/frontend/styles/components/page.pcss

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
This commit is contained in:
Tanya 2022-09-14 15:31:16 +03:00 • committed by GitHub
parent 51fb6655e2
commit 3e5b6a8ba0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 196 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -99,6 +99,10 @@
.block-header {
@apply --text-header;
display: flex;
align-items: center;
transform: translateX(-36px);
cursor: text;
&--2 {
@apply --text-header-2;
}
@ -111,42 +115,114 @@
text-decoration: none !important;
border: 0;
color: inherit !important;
pointer-events: none;
}
&--anchor {
cursor: pointer;
&--link-copied {
.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;
}
&::before {
position: absolute;
content: '';
margin-left: -30px;
width: 14px;
height: 19px;
margin-top: 0.35em;
background-image: url("data:image/svg+xml,%3Csvg width='14' height='19' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237B7E89' fill-rule='nonzero'%3E%3Cpath d='M8.58 11.997L2.283 5.701a1.762 1.762 0 0 1 0-2.49l.933-.935a1.762 1.762 0 0 1 2.49 0l6.298 6.297a3.508 3.508 0 0 0-.901-3.39L6.952 1.031a3.522 3.522 0 0 0-4.982 0l-.933.933a3.522 3.522 0 0 0 0 4.982l4.151 4.151c.92.92 2.218 1.208 3.392.9z'/%3E%3Cpath d='M12.958 11.628l-4.151-4.15a3.507 3.507 0 0 0-3.391-.899l6.296 6.296a1.76 1.76 0 0 1 0 2.49l-.933.936a1.764 1.764 0 0 1-2.49 0l-6.296-6.298a3.507 3.507 0 0 0 .899 3.39l4.151 4.15a3.522 3.522 0 0 0 4.982 0l.933-.935a3.52 3.52 0 0 0 0-4.98z'/%3E%3C/g%3E%3C/svg%3E");
.block-header__copy-link-icon--initial {
display: none;
}
.block-header__copy-link-icon--success {
display: flex;
animation: check-sign-in 350ms ease-in forwards;
}
.block-header__copy-link-splash {
opacity: 0;
transform: translateX(5px);
will-change: opacity, transform;
transition: all 100ms ease;
visibility: visible;
transform: scale(3.5);
}
}
@media (--mobile){
display: none !important;
&__copy-link-splash {
position: absolute;
left: 0;
width: 28px;
height: 28px;
background-color: var(--color-success);
transform: scale(1);
border-radius: 100%;
transition: transform 400ms ease-out, opacity 400ms;
visibility: hidden;
}
&__copy-link-icon--success {
width: 24px;
height: 24px;
display: none;
color: white;
}
&__copy-link-icon--initial {
display: flex;
justify-content: center;
align-items: center;
}
&__copy-link {
width: 28px;
height: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
@apply --squircle;
color: var(--color-text-second);
opacity: 0;
margin-right: 8px;
@media (--can-hover) {
&:hover {
background: var(--color-link-hover);
}
}
}
@media (--can-hover) {
&:hover {
color: #4c4c58;
}
&:hover::before{
opacity: 1;
transform: none;
.block-header__copy-link {
opacity: 1;
}
}
}
.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;
}
}
}
/**