sate-lib
Version:
A lightweight and modular React component library designed for modern web interfaces. **SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.
1 lines • 2.22 kB
CSS
.root-bZAHVz{flex-wrap:wrap;gap:.5rem;display:flex}.item-FnWvLi{all:unset;cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-size-8,.5rem);border-radius:var(--radius-radii-full,62.5rem);border:1px solid color-mix(in srgb,var(--color-interactive-secondary)17%,transparent);color:var(--color-content-primary,#202020);outline-offset:-2px;padding-inline-end:var(--spacing-size-16,1rem);transition:outline .2s,border .2s,box-shadow .2s,background .2s;display:flex}.item-FnWvLi:hover{border:1px solid color-mix(in srgb,var(--color-interactive-secondary-hover)45%,transparent)}.item-FnWvLi:active{border:1px solid color-mix(in srgb,var(--color-interactive-secondary-active)88%,transparent)}.item-FnWvLi:focus-visible{background:var(--color-background-screen,#fdfdf9);box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}.item-FnWvLi:disabled{opacity:.38;pointer-events:none}.medium-GXg2BV{font-family:var(--typescale-display-font-secondary,"Golos UI");font-size:var(--typescale-body-large-font-size,1rem);font-weight:400;line-height:var(--typescale-body-large-line-height,1.5rem);letter-spacing:var(--typescale-body-large-letter-spacing,-.0125rem);padding-block:var(--spacing-size-8,.5rem)}.small-qWB_1V{font-family:var(--typescale-display-font-secondary,"Golos UI");font-size:var(--typescale-body-default-font-size,.875rem);font-weight:400;line-height:var(--typescale-body-default-line-height,1.25rem);letter-spacing:var(--typescale-body-default-letter-spacing,0);padding-block:var(--spacing-size-6,.375rem)}.hasIcon-oItd56{padding-inline-start:var(--spacing-size-12,.75rem)}.noIcon-GTXpa1{padding-inline-start:var(--spacing-size-16,1rem)}.selected-d_wlZ5{outline:2px solid color-mix(in srgb,var(--color-interactive-secondary-active)88%,transparent);background:color-mix(in srgb,var(--color-background-neutral)4%,transparent)}.selected-d_wlZ5:hover{background:color-mix(in srgb,var(--color-background-neutral-hover)8%,transparent)}.selected-d_wlZ5:active{background:color-mix(in srgb,var(--color-background-neutral-active)8%,transparent)}.selected-d_wlZ5:focus-visible{background:color-mix(in srgb,var(--color-background-neutral)4%,transparent)}