-
Notifications
You must be signed in to change notification settings - Fork 6
/
knopf.min.css
1 lines (1 loc) · 8.55 KB
/
knopf.min.css
1
html{--knopf-hue:218;--knopf-saturation:77%;--knopf-luminosity:37%;--knopf-font-size-base:1rem;--knopf-font-size-small:calc(var(--knopf-font-size-base) - 0.25rem);--knopf-font-size-large:calc(var(--knopf-font-size-base) + 0.2rem);--knopf-font-size-huge:calc(var(--knopf-font-size-base) + 0.5rem);--knopf-padding-base:.375rem;--knopf-padding-small:calc(var(--knopf-padding-base) - 0.125rem);--knopf-padding-large:calc(var(--knopf-padding-base) + 0.125rem);--knopf-padding-huge:calc(var(--knopf-padding-base) + 0.375rem);--knopf-icon-size-base:1.125rem;--knopf-icon-size-small:calc(var(--knopf-icon-size-base) - 0.25rem);--knopf-icon-size-large:calc(var(--knopf-icon-size-base) + 0.375rem);--knopf-icon-size-huge:calc(var(--knopf-icon-size-base) + 0.625rem);--knopf-font-size:var(--knopf-font-size-base);--knopf-padding:var(--knopf-padding-base);--knopf-icon-size:var(--knopf-icon-size-base);--knopf-border-radius:.33em;--knopf-border-style:solid;--knopf-border-width:1px;--knopf-border-alpha:0;--knopf-font-family:inherit;--knopf-font-weight:500;--knopf-line-height:1.5;--knopf-align-items:center;--knopf-justify-content:center;--knopf-text-decoration-line:none;--knopf-text-decoration-color:currentColor;--knopf-text-transform:none;--knopf-display:inline-flex;--knopf-flex-direction:row;--knopf-group-direction:row;--knopf-background-image:none;--knopf-box-shadow:none;--knopf-foreground-color:0 0 100%;--knopf--position:relative;--knopf-transition:all 150ms ease-in-out}.knopf{--knopf-color:var(--knopf-hue) var(--knopf-saturation) var(--knopf-luminosity);--knopf-color-light:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 10%);--knopf-color-lighter:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 15%);--knopf-color-dark:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 10%);--knopf-color-darker:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 15%);--knopf-padding-block:var(--knopf-padding);--knopf-padding-inline:calc(var(--knopf-padding) * 2);--knopf-background-alpha:100%;--knopf-background-color:var(--knopf-color);--knopf-border-color:var(--knopf-color);--knopf-gradient-from:var(--knopf-color-light);--knopf-gradient-to:var(--knopf-color-dark);--knopf-text-color:var(--knopf-foreground-color);--knopf-text-alpha:100%;--knopf-hover-background-alpha:100%;--knopf-hover-background-color:var(--knopf-color-dark);--knopf-hover-border-color:var(--knopf-color-dark);--knopf-hover-gradient-from:var(--knopf-color-lighter);--knopf-hover-gradient-to:var(--knopf-color);--knopf-hover-text-color:var(--knopf-foreground-color);--knopf-hover-text-alpha:100%;--knopf-active-background-alpha:100%;--knopf-active-background-color:var(--knopf-color-darker);--knopf-active-border-color:var(--knopf-color-darker);--knopf-active-gradient-from:var(--knopf-color-dark);--knopf-active-gradient-to:var(--knopf-color);--knopf-active-text-color:var(--knopf-foreground-color);--knopf-active-text-alpha:100%;accent-color:hsl(var(--knopf-color));align-items:var(--knopf-align-items);background-color:var(--knopf-named-background-color,hsl(var(--knopf-background-color) / var(--knopf-background-alpha)));background-image:var(--knopf-background-image);background-origin:border-box;border-color:hsl(var(--knopf-border-color) / var(--knopf-border-alpha));border-radius:var(--knopf-border-radius);border-style:var(--knopf-border-style);border-width:var(--knopf-border-width);box-shadow:var(--knopf-box-shadow);box-sizing:border-box;color:hsl(var(--knopf-text-color) / var(--knopf-text-alpha));cursor:pointer;display:var(--knopf-display);flex-direction:var(--knopf-flex-direction);font-family:var(--knopf-font-family);font-size:var(--knopf-font-size,inherit);font-weight:var(--knopf-font-weight);line-height:var(--knopf-line-height);justify-content:var(--knopf-justify-content);padding-block:var(--knopf-padding-block);padding-inline:var(--knopf-padding-inline);position:var(--knopf--position);text-decoration-color:var(--knopf-text-decoration-color);text-decoration-line:var(--knopf-text-decoration-line);text-transform:var(--knopf-text-transform);transition:var(--knopf-transition)}.knopf.inverse{--knopf-background-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:100%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-foreground-color);--knopf-active-background-alpha:100%;--knopf-active-background-color:var(--knopf-color-dark);--knopf-active-text-color:var(--knopf-foreground-color)}.knopf.flat{--knopf-background-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:15%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:25%;--knopf-active-background-color:var(--knopf-color);--knopf-active-text-color:var(--knopf-color-darker)}.knopf.pale{--knopf-background-alpha:10%;--knopf-background-color:var(--knopf-color);--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:20%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:30%;--knopf-active-background-color:var(--knopf-color);--knopf-active-text-color:var(--knopf-color-darker)}.knopf:hover{--knopf-background-alpha:var(--knopf-hover-background-alpha);--knopf-background-color:var(--knopf-hover-background-color);--knopf-border-color:var(--knopf-hover-border-color);--knopf-gradient-from:var(--knopf-hover-gradient-from);--knopf-gradient-to:var(--knopf-hover-gradient-to);--knopf-text-color:var(--knopf-hover-text-color);--knopf-text-decoration-color:var(--knopf-hover-text-decoration-color)}.knopf.active{--knopf-background-alpha:var(--knopf-active-background-alpha);--knopf-background-color:var(--knopf-active-background-color);--knopf-border-color:var(--knopf-active-border-color);--knopf-gradient-from:var(--knopf-active-gradient-from);--knopf-gradient-to:var(--knopf-active-gradient-to);--knopf-text-color:var(--knopf-active-text-color);--knopf-text-decoration-color:var(--knopf-active-text-decoration-color)}.knopf.small{--knopf-font-size:var(--knopf-font-size-small);--knopf-padding:var(--knopf-padding-small);--knopf-icon-size:var(--knopf-icon-size-small)}.knopf.large{--knopf-font-size:var(--knopf-font-size-large);--knopf-padding:var(--knopf-padding-large);--knopf-icon-size:var(--knopf-icon-size-large)}.knopf.huge{--knopf-font-size:var(--knopf-font-size-huge);--knopf-padding:var(--knopf-padding-huge);--knopf-icon-size:var(--knopf-icon-size-huge)}.knopf:where(.traced,.outlined){--knopf-border-color:var(--knopf-color)}.knopf.traced{--knopf-border-alpha:33%}.knopf.outlined{--knopf-border-alpha:100%}.knopf.block{--knopf-display:flex;width:100%}.knopf.start{--knopf-justify-content:flex-start}.knopf.center{--knopf-justify-content:center}.knopf.end{--knopf-justify-content:flex-end}.knopf.even{--knopf-padding-inline:var(--knopf-padding)}.knopf.wide{--knopf-padding-inline:calc(var(--knopf-padding) * 3)}.knopf.pill{--knopf-border-radius:9999px}.knopf.sharp{--knopf-border-radius:0}.knopf.gradient{--knopf-named-background-color:transparent;--knopf-background-image:linear-gradient(hsl(var(--knopf-gradient-from) / var(--knopf-background-alpha)),hsl(var(--knopf-gradient-to) / var(--knopf-background-alpha)))}.knopf.link{--knopf-border-width:0;--knopf-border-radius:0;--knopf-padding:0;--knopf-font-size:null;--knopf-text-decoration-line:underline;--knopf-text-decoration-color:hsl(var(--knopf-color) / 40%);--knopf-hover-text-decoration-color:hsl(var(--knopf-color-dark));--knopf-active-text-decoration-color:hsl(var(--knopf-color-darker));--knopf-background-alpha:0;--knopf-border-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:0;--knopf-hover-border-alpha:0;--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:0;--knopf-active-border-alpha:0;--knopf-active-text-color:var(--knopf-color-darker)}.knopf>.icon{align-items:center;color:inherit;display:inline-flex;fill:currentColor;flex-shrink:0;font-size:var(--knopf-icon-size);height:var(--knopf-icon-size);justify-content:center;width:var(--knopf-icon-size)}.knopf>.icon.small{--knopf-icon-size:var(--knopf-icon-size-small)}.knopf>.icon.base{--knopf-icon-size:var(--knopf-icon-size-base)}.knopf>.icon.large{--knopf-icon-size:var(--knopf-icon-size-large)}.knopf>.icon.huge{--knopf-icon-size:var(--knopf-icon-size-huge)}.knopf>.icon:first-child:not(:only-child){margin-inline-start:calc(var(--knopf-padding-inline) * -0.25);margin-inline-end:calc(var(--knopf-padding-inline) * 0.5)}.knopf>.icon:last-child:not(:only-child){margin-inline-start:calc(var(--knopf-padding-inline) * 0.5);margin-inline-end:calc(var(--knopf-padding-inline) * -0.25)}