@lunalytics/ui
Version:
React based component library created to be used in Lunalytics
2 lines (1 loc) • 2.92 kB
CSS
body{font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);line-height:1.5;color:var(--lunaui-text-color);isolation:isolate}.lunaui-context-trigger{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:15rem;height:12rem;border:1px solid var(--lunaui-accent-800);color:var(--lunaui-text-color);border-radius:.375rem;-webkit-user-select:none;user-select:none}.lunaui-content-positioner{outline:0;z-index:1}.lunaui-content-popup,.lunaui-content-submenu-popup{box-sizing:border-box;padding-block:.25rem;border-radius:.375rem;background-color:canvas;color:var(--lunaui-text-color);transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;background-color:var(--lunaui-accent-900)}.lunaui-content-popup[data-ending-style],.lunaui-content-submenu-popup[data-ending-style]{opacity:0}@media (prefers-color-scheme: light){.lunaui-content-popup,.lunaui-content-submenu-popup{outline:1px solid var(--lunaui-accent-800);box-shadow:0 10px 15px -3px var(--lunaui-accent-800),0 4px 6px -4px var(--lunaui-accent-800)}}@media (prefers-color-scheme: dark){.lunaui-content-popup,.lunaui-content-submenu-popup{outline:1px solid var(--lunaui-accent-800);outline-offset:-1px}}.lunaui-content-submenu-popup[data-starting-style],.lunaui-content-submenu-popup[data-ending-style]{transform:scale(.9);opacity:0}.Arrow{display:flex}.Arrow[data-side=top]{bottom:-8px;rotate:180deg}.Arrow[data-side=bottom]{top:-8px;rotate:0deg}.Arrow[data-side=left]{right:-13px;rotate:90deg}.Arrow[data-side=right]{left:-13px;rotate:-90deg}.ArrowFill{fill:canvas}@media (prefers-color-scheme: light){.ArrowOuterStroke{fill:var(--lunaui-accent-800)}}@media (prefers-color-scheme: dark){.ArrowInnerStroke{fill:var(--lunaui-accent-800)}}.lunaui-content-item,.lunaui-content-submenu-trigger{outline:0;cursor:default;-webkit-user-select:none;user-select:none;padding-block:.5rem;padding-left:1rem;padding-right:2rem;display:flex;font-size:.875rem;line-height:1rem}.lunaui-content-item[data-popup-open],.lunaui-content-submenu-trigger[data-popup-open]{z-index:0;position:relative}.lunaui-content-item[data-popup-open]:before,.lunaui-content-submenu-trigger[data-popup-open]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:.25rem;background-color:var(--lunaui-accent-800)}.lunaui-content-item[data-highlighted],.lunaui-content-submenu-trigger[data-highlighted]{z-index:0;position:relative;color:var(--lunaui-text-color)}.lunaui-content-item[data-highlighted]:before,.lunaui-content-submenu-trigger[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:.25rem;background-color:var(--lunaui-accent-800)}.lunaui-content-submenu-trigger{align-items:center;justify-content:space-between;padding-right:1rem}.lunaui-content-separator{margin:.375rem 1rem;height:1px;background-color:var(--lunaui-accent-800)}