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

Copy icon

Browse Source
This commit is contained in:
Lea Verou
2025-03-24 12:39:19 -04:00
parent 9d75b72af8
commit 88abcf4a2d
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_layouts/palette.njk
View File

@@ -148,7 +148,7 @@
<td v-for="tint in tints.toReversed()" :data-tint="tint" :style="{'--original-color': `var(--wa-color-${ hue }-${tint})`, '--color': colors[hue][tint] }">
<color-popup :title="capitalize(hue) + ' ' + tint" :token="`--wa-color-${ hue }-${ tint }`" :color="colors[hue][tint]">
<div slot="trigger" class="color swatch" :style="{ colorScheme: tint > 60 ? 'light' : 'dark' }">
<wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
<wa-icon name="copy" variant="regular" class="copy-icon"></wa-icon>
</div>
</color-popup>
</td>

12
docs/docs/palettes/app/tweak.css
View File

@@ -150,6 +150,18 @@ wa-dropdown > .color.swatch {
opacity: var(--tweak-icon-opacity, 0%);
}
.copy-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
opacity: var(--copy-icon-opacity, 0%);
&:has(wa-dropdown[open]) {
--copy-icon-opacity: 40%;
}
}
.color.swatch:hover {
--tweak-icon-opacity: 40%;
--copy-icon-opacity: 40%;