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 • 1.91 kB
CSS
.root-llIzu3{cursor:pointer;border-radius:var(--radius-radii-14,.875rem);padding:var(--spacing-size-4,.25rem);background-color:color-mix(in srgb,var(--color-background-neutral)4%,transparent);align-items:center;display:inline-flex;position:relative;box-shadow:inset 0 0 5px #0000001a}.root-llIzu3:after{content:"";top:var(--spacing-size-4,.25rem);transform:translateX(var(--slider-x,0));width:var(--slider-width,100px);height:var(--slider-height,100%);border-radius:var(--radius-radii-10,.625rem);background:var(--color-background-screen,#fdfdf9);box-shadow:var(--box-shadow-2);z-index:0;transition:transform .3s,width .3s;animation:.4s forwards fadeIn-db56ok;position:absolute;left:0}.item-W5vzJQ{all:unset;z-index:1;border-radius:var(--radius-radii-10,.625rem);color:var(--color-interactive-primary,#646464);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);align-items:center;gap:.25rem;padding-block:.375rem;padding-inline:1rem;transition:outline .2s,font-weight .1s,color .2s,background .2s,box-shadow .2s;display:flex;position:relative}.item-W5vzJQ[data-state=checked]{color:var(--color-interactive-accent,#202020);font-weight:500}.item-W5vzJQ:hover{color:var(--color-interactive-primary-hover,#202020)}.item-W5vzJQ:disabled{opacity:.38;pointer-events:none}.item-W5vzJQ:focus-visible{outline:2px solid var(--color-content-primary,#202020);outline-offset:2px}.item-W5vzJQ.withIcon-ybAqTD{padding-left:.5rem}.separator-qT1lQl{border-radius:var(--radius-radii-full,62.5rem);background-color:color-mix(in srgb,var(--color-border-overlay)11%,transparent);width:.0625rem;height:1rem;transition:opacity .3s}.separator-qT1lQl.hide-zQg0nw{opacity:0}@keyframes fadeIn-db56ok{0%{opacity:0}to{opacity:1}}