ux: add ui-btn variants

This commit is contained in:
Marco Allegretti 2026-01-29 19:56:46 +01:00
parent d9ace2d201
commit d0afeecc62
2 changed files with 21 additions and 13 deletions

View file

@ -371,17 +371,36 @@
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.625rem 1rem; padding: 0.625rem 1rem;
border: 1px solid transparent;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-weight: var(--ui-font-weight-semibold); font-weight: var(--ui-font-weight-semibold);
font-size: var(--ui-font-size-sm); font-size: var(--ui-font-size-sm);
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
text-decoration: none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard); transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard);
} }
.ui-btn-sm {
padding: 0.45rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
}
.ui-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--radius-sm);
}
.ui-btn-dashed {
border-style: dashed;
}
.ui-btn-lg { .ui-btn-lg {
padding: 0.875rem 1.75rem; padding: 0.875rem 1.75rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);

View file

@ -28,7 +28,7 @@ const { slug } = Astro.params;
<input type="text" name="option" placeholder="Option 2" required /> <input type="text" name="option" placeholder="Option 2" required />
</div> </div>
</div> </div>
<button type="button" id="add-option" class="ui-btn ui-btn-secondary create-add-btn">+ Add Option</button> <button type="button" id="add-option" class="ui-btn ui-btn-secondary ui-btn-dashed">+ Add Option</button>
</div> </div>
<div id="error" class="error"></div> <div id="error" class="error"></div>
<button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Proposal</button> <button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Proposal</button>
@ -55,7 +55,7 @@ const { slug } = Astro.params;
div.className = 'option-input'; div.className = 'option-input';
div.innerHTML = ` div.innerHTML = `
<input type="text" name="option" placeholder="Option ${optionCount}" required /> <input type="text" name="option" placeholder="Option ${optionCount}" required />
<button type="button" class="ui-btn ui-btn-danger create-remove-btn" onclick="this.parentElement.remove()">×</button> <button type="button" class="ui-btn ui-btn-danger ui-btn-icon" onclick="this.parentElement.remove()">×</button>
`; `;
optionsContainer?.appendChild(div); optionsContainer?.appendChild(div);
}); });
@ -186,17 +186,6 @@ const { slug } = Astro.params;
flex: 1; flex: 1;
} }
.create-add-btn {
border-style: dashed;
margin-top: 0.5rem;
}
.create-remove-btn {
width: 36px;
padding: 0;
font-size: 1.25rem;
}
.create-submit-btn { .create-submit-btn {
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 1rem;