UNPKG

igniteui-webcomponents

Version:

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

3 lines 4.77 kB
import { css } from 'lit'; export const styles = css `:host{--component-size: var(--ig-size, var(--default-size))}:host button{border:.0625rem solid var(--border-color)}:host button:focus{outline:.1875rem solid var(--focus-outline-color)}:host button[disabled]{border-color:var(--disabled-border-color)}:host([selected]) button:not([disabled]){border-color:rgba(0,0,0,0);background:var(--selected-background);color:var(--selected-text-color)}:host([selected]) button:not([disabled]):hover{background:var(--hover-selected-background)}:host([selected]) button:not([disabled]):focus{outline:.1875rem solid var(--focus-selected-outline-color)}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:hsla(var(--ig-primary-400), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:hsla(var(--ig-primary-500), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-500-contrast) 100%, transparent);outline:.1875rem solid var(--focus-selected-outline-color)}:host([variant=primary]) button[disabled]{background:hsla(var(--ig-primary-200), var(--ig-primary-a));color:color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:hsla(var(--ig-info-400), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-400-contrast) 100%, transparent)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:hsla(var(--ig-info-500), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-500-contrast) 100%, transparent);outline:.1875rem solid hsla(var(--ig-info-200), var(--ig-info-a))}:host([variant=info]) button[disabled]{background:hsla(var(--ig-info-200), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-400-contrast) 100%, transparent)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:hsla(var(--ig-success-400), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-400-contrast) 100%, transparent)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:hsla(var(--ig-success-500), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-500-contrast) 100%, transparent);outline:.1875rem solid hsla(var(--ig-success-200), var(--ig-success-a))}:host([variant=success]) button[disabled]{background:hsla(var(--ig-success-200), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-800-contrast) 100%, transparent)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:hsla(var(--ig-warn-400), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-400-contrast) 100%, transparent)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:hsla(var(--ig-warn-500), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-500-contrast) 100%, transparent);outline:.1875rem solid hsla(var(--ig-warn-200), var(--ig-warn-a))}:host([variant=warning]) button[disabled]{background:hsla(var(--ig-warn-200), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-900-contrast) 100%, transparent)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){border-color:rgba(0,0,0,0)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:hsla(var(--ig-error-400), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-400-contrast) 100%, transparent)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:hsla(var(--ig-error-500), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-500-contrast) 100%, transparent);outline:.1875rem solid hsla(var(--ig-error-200), var(--ig-error-a))}:host([variant=danger]) button[disabled]{background:hsla(var(--ig-error-200), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-400-contrast) 100%, transparent)}`; //# sourceMappingURL=chip.indigo.css.js.map