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 • 2.28 kB
JavaScript
import { css } from 'lit';
export const styles = css `:host{--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size)}:host button{border-radius:var(--border-radius);background:var(--background);color:var(--text-color);border-color:var(--border-color);outline:none;height:var(--size)}:host button:focus{background:var(--focus-background);color:var(--focus-text-color);border-color:var(--focus-border-color)}:host button:hover{background:var(--hover-background);color:var(--hover-text-color);border-color:var(--hover-border-color)}:host button[disabled]{background:var(--disabled-background);color:var(--disabled-text-color);border-color:var(--disabled-border-color)}:host button ::slotted([slot=remove]){color:var(--remove-icon-color)}:host button ::slotted([slot=remove]):focus-within{color:var(--remove-icon-color-focus)}:host button slot[name=remove] igc-icon,:host button slot[name=remove] ::slotted(igc-icon){color:var(--remove-icon-color)}:host button slot[name=remove]:focus-within igc-icon,:host button slot[name=remove]:focus-within ::slotted(igc-icon){color:var(--remove-icon-color-focus)}:host button igc-icon,:host button ::slotted(igc-icon){--component-size: var(--chip-size)}:host button ::slotted(*){--default-size: var(--chip-size);display:inline-flex;place-items:center}:host button ::slotted(igc-avatar){--size: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem))}:host button ::slotted(igc-circular-progress){--diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem))}:host([selected]) button:not([disabled]){background:var(--selected-background);color:var(--selected-text-color);border-color:var(--selected-border-color)}:host([selected]) button:not([disabled]):focus{background:var(--focus-selected-background);color:var(--focus-selected-text-color);border-color:var(--focus-selected-border-color)}:host([selected]) button:not([disabled]):hover{background:var(--hover-selected-background);color:var(--hover-selected-text-color);border-color:var(--hover-selected-border-color)}`;
//# sourceMappingURL=chip.common.css.js.map