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 • 3.93 kB
CSS
.buttonIcon-xdn0Wv{cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:transform .2s ease-in-out,outline .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out;display:flex;transform:scale(1);&:focus-visible{outline:2px solid var(--color-background-screen,#fdfdf9)}}.buttonIcon-xdn0Wv:disabled{pointer-events:none;opacity:.38}.filled-bNljYh{color:var(--color-interactive-control,#fff);background-color:var(--color-interactive-accent,#202020);position:relative;overflow:hidden}.filled-bNljYh .noise-xiZTif{z-index:-1;pointer-events:none;width:100%;min-width:70px;transition:opacity .2s ease-in-out;position:absolute;top:0;left:0}.filled-bNljYh:hover{background-color:var(--color-interactive-accent-hover,#000)}.filled-bNljYh:hover .noise-xiZTif,.filled-bNljYh:active .noise-xiZTif{opacity:.9}.filled-bNljYh:active{background-color:var(--color-interactive-accent-active,#202020)}.filled-bNljYh:focus-visible{box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}.outlined-jT9Zvh{color:var(--color-interactive-primary,#646464);outline:1px solid color-mix(in srgb,var(--color-interactive-secondary,#0000002b)17%,transparent);outline-offset:-1px;background:0 0;&:hover{background:color-mix(in srgb,var(--color-background-screen-hover,#0000000a)4%,transparent)}&:active{background:color-mix(in srgb,var(--color-background-screen-active,#0000000a)4%,transparent)}&:focus-visible{outline:2px solid var(--color-background-screen,#fdfdf9);outline-offset:0;background:var(--color-background-screen,#fdfdf9);box-shadow:0 0 0 4px var(--color-content-primary,#202020)}}.text-xbDZpF{color:var(--color-interactive-primary,#646464);background:0 0;&:hover,&:active{background:color-mix(in srgb,var(--color-background-screen-hover,#0000000a)4%,transparent)}&: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)}}.toned-VQq8bx{color:var(--color-interactive-primary,#646464);background:color-mix(in srgb,var(--color-background-neutral,#0000000a)4%,transparent);&:hover,&:active{background:color-mix(in srgb,var(--color-background-neutral-hover,#00000014)8%,transparent)}&:focus-visible{background:color-mix(in srgb,var(--color-background-neutral,#0000000a)4%,transparent);box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}}.lightOnContent-ytpXja{color:var(--color-fixed-content-on-light,#202020);background:color-mix(in srgb,var(--color-fixed-elevated-light,#ffffffe0)88%,transparent);backdrop-filter:blur(8px);&:hover{background:color-mix(in srgb,var(--color-fixed-elevated-light-hover,#fffffff5)96%,transparent)}&:active{background:color-mix(in srgb,var(--color-fixed-elevated-light-active,#ffffffe0)88%,transparent)}&:focus-visible{background:color-mix(in srgb,var(--color-fixed-elevated-light,#ffffffe0)88%,transparent);box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}}.darkOnContent-bmxX5b{color:var(--color-fixed-content-on-dark,#fff);background:color-mix(in srgb,var(--color-fixed-elevated-dark,#0000009e)62%,transparent);backdrop-filter:blur(8px);&:hover{background:color-mix(in srgb,var(--color-fixed-elevated-dark-hover,#000000bd)74%,transparent)}&:active{background:color-mix(in srgb,var(--color-fixed-elevated-dark-active,#0000009e)62%,transparent)}&:focus-visible{background:color-mix(in srgb,var(--color-fixed-elevated-dark,#0000009e)62%,transparent);box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}}.xSmall-HXQfX3{width:1.5rem;height:1.5rem;&:active{transform:scale(.92)}}.small-eQ8bwj{width:2rem;height:2rem;&:active{transform:scale(.92)}}.medium-YGml55{width:2.5rem;height:2.5rem;&:active{transform:scale(.96)}}