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

copy button

Browse Source
This commit is contained in:
Cory LaViska
2023-09-05 14:53:49 -04:00
parent b86a6a54ab
commit 631df0293c
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/pages/components/copy-button.md
View File

@@ -193,19 +193,19 @@ You can customize the button to your liking with CSS.
.custom-styles::part(button) {
background-color: #ff1493;
border: solid 4px #ff7ac1;
border: solid 2px #ff7ac1;
border-right-color: #ad005c;
border-bottom-color: #ad005c;
border-radius: 0;
transition: 100ms scale ease-in-out, 100ms translate ease-in-out;
border-radius: 6px;
transition: var(--wa-transition-normal) all;
}
.custom-styles::part(button):hover {
scale: 1.1;
transform: scale(1.05);
}
.custom-styles::part(button):active {
translate: 0 2px;
transform: translateY(1px);
}
.custom-styles::part(button):focus-visible {

14
src/components/copy-button/copy-button.styles.ts
View File

@@ -5,8 +5,8 @@ export default css`
${componentStyles}
:host {
--error-color: var(--sl-color-danger-600);
--success-color: var(--sl-color-success-600);
--error-color: var(--wa-color-danger-container-fill-vivid);
--success-color: var(--wa-color-success-container-fill-vivid);
display: inline-block;
}
@@ -17,12 +17,12 @@ export default css`
align-items: center;
background: none;
border: none;
border-radius: var(--sl-border-radius-medium);
border-radius: var(--wa-corners-1x);
font-size: inherit;
color: inherit;
padding: var(--sl-spacing-x-small);
padding: var(--wa-space-xs);
cursor: pointer;
transition: var(--sl-transition-x-fast) color;
transition: var(--wa-transition-faster) color;
}
.copy-button--success .copy-button__button {
@@ -34,8 +34,8 @@ export default css`
}
.copy-button__button:focus-visible {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.copy-button__button[disabled] {