FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add copy code button (#963)

Browse source 
* Add copy code button

* External package not needed

* Improve alignement

* Update button style + add feedback on click

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Update dependencies

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
Bernat Borràs Civil 2024-09-20 03:29:38 +02:00 • committed by GitHub
parent 9da3e3420b
commit 0d4d8a8e3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 582 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

45
assets/styles/components/buttons.scss
View file

@ -102,6 +102,40 @@
}
}
.copy-code-button {
float: right;
margin-top: 0.5em;
margin-left: -2.6em;
margin-right: 3em;
background-color: get-light-color('text-color') !important;
color: get-light-color('inverse-text-color') !important;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 0.2rem;
border: none;
&:hover,
&:focus {
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
}
&:focus {
&::before {
content: 'Copied!';
position: absolute;
padding: 0.3em;
border-radius: 0.2em;
margin-left: -5em;
margin-top: -0.2em;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
}
}
}
html[data-theme='dark'] {
.btn-dark {
background-color: get-dark-color('accent-color') !important;
@ -169,4 +203,15 @@ html[data-theme='dark'] {
background-color: get-dark-color('hover-over-accent-color') !important;
}
}
.copy-code-button {
background-color: get-dark-color('bg-primary') !important;
color: get-dark-color('muted-text-color') !important;
&:hover,
&:focus,
&::before {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
}
}
}