Files
MealQuest/web/src/ui/Chip.module.css
T
dev_agent 02f1dd6491
CI / ci (push) Successful in 1m31s
Feature 05 task 2: Core UI primitives (#34)
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
2026-10-03 16:34:59 -04:00

36 lines
751 B
CSS

.chip {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border-radius: var(--radius-pill);
background: var(--color-accent-2-200);
color: var(--color-accent-2-900);
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.removable {
padding-right: 0;
}
/* 44 px hit box around a small cross; negative margins keep the chip 36 px
tall and the cross close to the label. */
.remove {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
margin: -4px 0 -4px -14px;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: inherit;
cursor: pointer;
}