js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

better copy button styles

Browse Source
This commit is contained in:
Cory LaViska
2021-08-10 09:01:53 -04:00
parent a7d81993d5
commit 35d960c09f
2 changed files with 56 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/assets/plugins/code-block/code-block.css
View File

@@ -78,36 +78,6 @@
display: none;
}
.code-block .docsify-copy-code-button {
top: var(--sl-spacing-x-small);
right: var(--sl-spacing-x-small);
background-color: rgb(var(--sl-color-neutral-500));
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-x-small);
font-weight: var(--sl-font-weight-semibold);
border-radius: var(--sl-border-radius-small);
padding: 5px 8px;
opacity: 1;
cursor: copy;
}
.code-block .docsify-copy-code-button .label {
transition: none;
}
.code-block .docsify-copy-code-button .error,
.code-block .docsify-copy-code-button .success {
display: none;
}
.code-block .docsify-copy-code-button:focus {
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-neutral) / var(--sl-focus-ring-alpha));
}
.code-block .docsify-copy-code-button:active {
background-color: rgb(var(--sl-color-neutral-600));
}
.code-block--expanded .code-block__source {
display: block;
}
@@ -192,3 +162,49 @@
.code-block--expanded .code-block__toggle svg {
transform: rotate(180deg);
}
/* Copy button styles */
.markdown-section .docsify-copy-code-button {
top: 4px;
right: 4px;
background-color: rgb(var(--sl-color-neutral-500));
border-radius: var(--sl-border-radius-medium);
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
user-select: none;
}
.markdown-section .docsify-copy-code-button.copied {
animation: pulse 1.5s;
--pulse-color: rgb(var(--sl-color-neutral-500));
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--pulse-color);
}
70% {
box-shadow: 0 0 0 0.5rem transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
.markdown-section .docsify-copy-code-button .label {
transition: none;
}
.markdown-section .docsify-copy-code-button .success,
.markdown-section .docsify-copy-code-button .error {
display: none;
}
.markdown-section .docsify-copy-code-button:focus {
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-neutral) / var(--sl-focus-ring-alpha));
}
.markdown-section .docsify-copy-code-button:active {
background-color: rgb(var(--sl-color-neutral-600));
}