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 • 3.03 kB
JavaScript
import { css } from 'lit';
export const styles = css `:host{--ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-1));--focus-outline-color: var(--ig-chip-focus-outline-color, hsl(from var(--ig-gray-900) h s l/0.15));--focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, hsl(from var(--ig-primary-400) h s l/0.5));--background: var(--ig-chip-background, var(--ig-gray-50));--border-color: var(--ig-chip-border-color, var(--ig-gray-400));--ghost-background: var(--ig-chip-ghost-background, var(--ig-gray-200));--hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-900));--hover-background: var(--ig-chip-hover-background, var(--ig-gray-200));--hover-border-color: var(--ig-chip-hover-border-color, var(--ig-gray-500));--focus-text-color: var(--ig-chip-focus-text-color, var(--ig-gray-700));--focus-border-color: var(--ig-chip-focus-border-color, var(--ig-gray-400));--selected-text-color: var(--ig-chip-selected-text-color, var(--ig-primary-900-contrast));--selected-border-color: var(--ig-chip-selected-border-color, var(--ig-primary-500));--hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-primary-900-contrast));--hover-selected-background: var(--ig-chip-hover-selected-background, var(--ig-primary-400));--hover-selected-border-color: var(--ig-chip-hover-selected-border-color, var(--ig-primary-400));--focus-selected-border-color: var(--ig-chip-focus-selected-border-color, var(--ig-primary-500));--disabled-text-color: var(--ig-chip-disabled-text-color, hsl(from var(--ig-gray-900) h s l/0.2));--disabled-background: var(--ig-chip-disabled-background, var(--ig-gray-900-contrast));--disabled-border-color: var(--ig-chip-disabled-border-color, var(--ig-gray-300));--size: var(--ig-chip-size, max(var(--is-large, 1) * max(1.75rem, -1 * 1.75rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));--text-color: var(--ig-chip-text-color, var(--ig-gray-700));--focus-background: var(--ig-chip-focus-background, var(--ig-gray-50));--focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-primary-900-contrast));--focus-selected-background: var(--ig-chip-focus-selected-background, var(--ig-primary-500));--ig-theme: indigo}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{box-shadow:0 0 0 .1875rem var(--ig-info-100)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{box-shadow:0 0 0 .1875rem var(--ig-success-200)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{box-shadow:0 0 0 .1875rem var(--ig-warn-100)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{box-shadow:0 0 0 .1875rem var(--ig-error-100)}:host([selected]) button[disabled],:host([variant=primary]) button[disabled]{color:hsl(from var(--ig-primary-900-contrast) h s l/0.4)}`;
//# sourceMappingURL=chip.indigo.css.js.map