github/hugo-geekdoc
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekdoc.git synced 2024-11-24 22:00:39 +00:00
Code Issues Projects Releases Wiki Activity

fix: fix hover background color for the code copy box (#698)

Browse Source
This commit is contained in:
Robert Kaussow 2023-08-31 23:27:02 +02:00 committed by GitHub
parent 6d75ee9288
commit 2f614e6553
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/app.js
View File

@ -8,12 +8,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
const trigger = e.trigger const trigger = e.trigger
if (trigger.hasAttribute("data-copy-feedback")) { if (trigger.hasAttribute("data-copy-feedback")) {
trigger.classList.add("gdoc-post__codecopy--success") trigger.classList.add("gdoc-post__codecopy--success", "gdoc-post__codecopy--out")
trigger.querySelector(".gdoc-icon.copy").classList.add("hidden") trigger.querySelector(".gdoc-icon.copy").classList.add("hidden")
trigger.querySelector(".gdoc-icon.check").classList.remove("hidden") trigger.querySelector(".gdoc-icon.check").classList.remove("hidden")
setTimeout(function () { setTimeout(function () {
trigger.classList.remove("gdoc-post__codecopy--success") trigger.classList.remove("gdoc-post__codecopy--success", "gdoc-post__codecopy--out")
trigger.querySelector(".gdoc-icon.copy").classList.remove("hidden") trigger.querySelector(".gdoc-icon.copy").classList.remove("hidden")
trigger.querySelector(".gdoc-icon.check").classList.add("hidden") trigger.querySelector(".gdoc-icon.check").classList.add("hidden")
}, 3000) }, 3000)

12
src/sass/_base.scss
View File

@ -342,7 +342,9 @@ svg.gdoc-icon {
.gdoc-language__list { .gdoc-language__list {
background: var(--body-background); background: var(--body-background);
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: 0 1px 3px 0 var(--accent-color-dark), 0 1px 2px 0 var(--accent-color); box-shadow:
0 1px 3px 0 var(--accent-color-dark),
0 1px 2px 0 var(--accent-color);
position: absolute; position: absolute;
margin: 0; margin: 0;
padding: $padding-8 $padding-4 !important; padding: $padding-8 $padding-4 !important;
@ -534,6 +536,10 @@ svg.gdoc-icon {
color: var(--code-copy-success-color); color: var(--code-copy-success-color);
} }
} }
&--out {
transition: visibility 2s ease-out;
}
} }
} }
@ -584,7 +590,9 @@ svg.gdoc-icon {
padding: $padding-8; padding: $padding-8;
padding-left: $padding-32; padding-left: $padding-32;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $border-radius; border-radius: $border-radius;

8
src/sass/_color_mode.scss
View File

@ -115,9 +115,9 @@
--code-accent-color-lite: #{darken($code-background-dark, 2)}; --code-accent-color-lite: #{darken($code-background-dark, 2)};
--code-font-color: #{$code-font-color-dark}; --code-font-color: #{$code-font-color-dark};
--code-copy-background: #{$body-background-dark}; --code-copy-background: #{$code-background-dark};
--code-copy-font-color: #{lighten($body-font-color, 24)}; --code-copy-font-color: #{$code-font-color-dark};
--code-copy-border-color: #{lighten($body-font-color, 24)}; --code-copy-border-color: #{$code-font-color-dark};
--code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)}; --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
} }
@ -130,7 +130,7 @@
--code-font-color: #{$code-font-color}; --code-font-color: #{$code-font-color};
--code-copy-background: #{$code-background}; --code-copy-background: #{$code-background};
--code-copy-font-color: #{lighten($body-font-color, 24)}; --code-copy-font-color: #{$code-font-color};
--code-copy-border-color: #{lighten($body-font-color, 48)}; --code-copy-border-color: #{lighten($body-font-color, 48)};
--code-copy-success-color: #{map.get($hint-colors, "ok")}; --code-copy-success-color: #{map.get($hint-colors, "ok")};
} }