@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
1 lines • 4.51 kB
CSS
@layer core, utilities, components, overrides;@layer core{@layer core{html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background-color:var(--global-background);box-sizing:border-box;font-size:100%;line-height:1.5rem}*,:after,:before{-webkit-tap-highlight-color:hsl(0 100% 44%/20%);box-sizing:inherit;margin:0;outline-offset:5px;transition:outline-offset .2s ease-out}:focus-visible{outline:5px auto Highlight;outline:5px auto -webkit-focus-ring-color;outline-offset:2px}body{font-feature-settings:"calt" off;color:var(--global-foreground);font-family:system-ui,sans-serif;font-size:1rem;margin:0;scroll-padding:5rem}::selection{background-color:var(--dimmed-7);color:var(--dimmed-0);text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}fieldset{border:0;padding:0}}}@layer core{[data-elevation]{--shadow-color:0deg 0% 0%}[data-elevation-hover="0"]:hover,[data-elevation="0"]{box-shadow:none;transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{box-shadow:0 3px 13px hsl(var(--shadow-color)/6%),0 2.5px 4.59px hsl(var(--shadow-color)/4.06%),0 1.34px 2.45px hsl(var(--shadow-color)/2.35%),0 .75px 1.37px hsl(var(--shadow-color)/4%),0 .39px .73px hsl(var(--shadow-color)/1.65%),0 .16px .3px hsl(var(--shadow-color)/.94%);transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}[data-elevation-hover="2"]:hover,[data-elevation="2"]{box-shadow:0 9px 25px hsl(var(--shadow-color)/8%),0 3.75px 10.44px hsl(var(--shadow-color)/6.35%),0 2.01px 5.58px hsl(var(--shadow-color)/4.75%),0 1.12px 3.13px hsl(var(--shadow-color)/4.5%),0 .6px 1.66px hsl(var(--shadow-color)/4.25%),0 .25px .69px hsl(var(--shadow-color)/3.65%);transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}[data-elevation-hover="3"]:hover,[data-elevation="3"]{box-shadow:0 18px 40px hsl(var(--shadow-color)/9%),0 7.51px 16.71px hsl(var(--shadow-color)/5.63%),0 4.02px 8.93px hsl(var(--shadow-color)/4.15%),0 2.25px 5px hsl(var(--shadow-color)/4%),0 1.19px 2.66px hsl(var(--shadow-color)/3.85%),0 .49px 1.1px hsl(var(--shadow-color)/3.37%);transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}[data-elevation-hover="4"]:hover,[data-elevation="4"]{box-shadow:0 33px 78px hsl(var(--shadow-color)/11%),0 12.04px 28.47px hsl(var(--shadow-color)/7.59%),0 5.84px 13.82px hsl(var(--shadow-color)/6.12%),0 2.86px 6.77px hsl(var(--shadow-color)/4.88%),0 1.13px 2.67px hsl(var(--shadow-color)/5.41%);transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}}@layer core{@layer core{p{font-size:1rem;line-height:1.5rem;min-block-size:.01vh}small{font-size:.75rem}b,strong{font-weight:600}a:any-link{color:var(--global-interactive-text);font-weight:400;text-decoration:none;word-break:break-word}a:any-link:not([class]){background-image:linear-gradient(currentcolor,currentcolor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;transition:background-size .2s cubic-bezier(0,0,.34,1)}a:any-link:not([class]):focus,a:any-link:not([class]):hover{background-size:100% 1px}del{background-color:var(--highlight-red-background);box-shadow:0 0 0 2px var(--highlight-red-background);color:var(--highlight-red-foreground)}del,ins{border-radius:.25rem;padding:2px 4px}ins{background-color:var(--highlight-green-background);box-shadow:0 0 0 2px var(--highlight-green-background);color:var(--highlight-green-foreground);text-decoration:none}address{font-style:normal;line-height:inherit}dt{font-weight:600}dd{margin:0;padding:0}ol,ul{padding-left:1rem}ul li::marker{font-size:inherit;font-weight:600;min-inline-size:2rem;text-align:right}ol li::marker{font-feature-settings:"tnum";font-size:inherit;font-variant-numeric:tabular-nums;font-weight:600;min-inline-size:2rem;white-space:nowrap}kbd{border:1px solid var(--dimmed-1);border-radius:.25rem;box-shadow:0 2px 0 var(--dimmed-1);font-weight:600;padding:2px 4px}mark{background:var(--highlight-yellow-background);color:var(--highlight-yellow-foreground);padding:0 2px}abbr{-webkit-text-decoration:underline dashed var(--cta-default);text-decoration:underline dashed var(--cta-default)}label,legend{font-size:inherit}code:not([class*=language-]){color:var(--highlight-magenta-foreground);display:inline-block;font-family:monospace;font-size:.875rem;padding:0 4px 3px;position:relative}code:not([class*=language-]):before{background-color:var(--highlight-magenta-background);border-radius:.25rem;content:"";display:block;inset:0 0 2px 0;opacity:.3;position:absolute;z-index:-1}}}