feat: add icon support to button, alert, badge, and form input
Button: - :icon-left, :icon-right props for buttons with leading/trailing icons - :icon prop for icon-only buttons (square padding via .btn-icon class) - Icon size scales with button size (sm→sm, md/lg→sm/md) Alert: - Auto-assigns variant-specific icons (circle-check, alert-triangle, alert-circle, info) per variant - :icon-name prop to override default, false to suppress - Layout restructured with .alert-icon + .alert-content wrapper Badge: - :icon-name prop adds a leading icon before text - .badge-icon CSS scales icon to match badge font size Form input: - :icon-left and :icon-right props on form-input - Wraps input in .form-input-wrap with absolutely-positioned icon spans - Padding adjusts automatically via .form-input--icon-left/right All three dev targets (hiccup, replicant, squint) updated with demos.
This commit is contained in:
@@ -2,8 +2,7 @@
|
||||
container-type: inline-size;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: var(--size-3);
|
||||
padding: var(--size-4) var(--size-6);
|
||||
background: var(--bg-1);
|
||||
@@ -12,6 +11,18 @@
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding-top: var(--size-1);
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user