xtablo-source/backend/internal/web/ui/icon-button.css
Arthur Belleville c80ebcb9b1
feat(13-04): port icon-button/space components; wire UIIcon into button.templ; update tailwind.input.css (GREEN)
- icon-button.css + icon_button.templ: UIIcon switch (plus/grid3x3/list/filter/search/calendar/pencil/trash + fallback span)
- spacing.css + space.templ: SpaceX/SpaceY with SpacingStep classes
- button.templ: wire @UIIcon(props.Icon) replacing Plan 02 placeholder comment
- tailwind.input.css: add modal, empty-state, table, icon-button, form-field, spacing imports (14 total)
- All 7 new tests pass; full go test ./... green
2026-05-16 14:07:07 +02:00

50 lines
1 KiB
CSS

.ui-icon-button {
align-items: center;
appearance: none;
background: transparent;
border: 0;
border-radius: 0.5rem;
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: 44px;
min-width: 44px;
padding: 0.5rem;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.ui-icon-button:focus-visible,
.borderless-icon-button:focus-visible {
box-shadow: 0 0 0 3px var(--color-focus-ring);
outline: none;
}
.ui-icon-button-solid.ui-icon-button-neutral {
color: var(--color-text-muted);
}
.ui-icon-button-solid.ui-icon-button-neutral:hover {
background: var(--color-surface-neutral-hover);
color: var(--color-text-primary);
}
.borderless-icon-button {
appearance: none;
background: transparent;
border: 0;
box-shadow: none;
cursor: pointer;
outline: none;
}
.ui-icon-button-ghost.ui-icon-button-neutral,
.ui-icon-button-ghost.ui-icon-button-danger {
color: var(--color-text-faint);
}
.borderless-icon-button svg {
height: 1rem;
width: 1rem;
}