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

Make suggested swatches smaller

Browse Source
This commit is contained in:
lindsaym-fa
2025-03-17 10:34:13 -04:00
parent ff45ca2232
commit 672fc3a5ad
2 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/docs/palettes/app/custom.css
View File

@@ -152,12 +152,10 @@ wa-icon-button.delete-button {
}
.suggestions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6ch, 1fr));
gap: var(--wa-space-s);
wa-button {
/* --background-color-hover: var(--background-color); */
height: var(--wa-form-control-height);
width: var(--wa-form-control-height);
wa-icon {
transition: var(--wa-transition-normal);

4
docs/docs/palettes/custom.njk
View File

@@ -8,7 +8,7 @@ status: experimental
---
<link href="{{ page.url }}../app/custom.css" rel="stylesheet">
<h2 v-if="step > 0" v-cloak>My colors</h2>
<h2 v-if="step > 0" v-cloak>My Colors</h2>
<p v-if="step > 0" v-cloak>
Just add your colors, in any order. We’ll sort them out for you, generate tints, and suggest additional colors.
@@ -37,7 +37,7 @@ status: experimental
See a color you like? Grab it before it’s gone!
</p>
</header>
<div class="suggestions">
<div class="suggestions wa-cluster wa-align-items-start wa-gap-s">
<template v-for="color, hue in suggestedColors">
<info-tip>
<wa-button :style="{'--background-color': color}" @click="addColor({hue})">