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.57 kB
JavaScript
import { css } from 'lit';
export const styles = css `:host{--component-size: var(--ig-size, var(--default-size));--input-size: var(--component-size)}:host [part=prefix],:host [part=suffix]{font-size:.875rem;cursor:default}:host [part=prefix] ::slotted(*),:host [part=suffix] ::slotted(*){color:inherit}:host [name=prefix]::slotted(*),:host [name=suffix]::slotted(*){display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:100%;padding-inline:max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(12px, -1 * 12px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}:host [part=prefix]{grid-area:1/1}:host [part=suffix]{grid-area:1/3}:host [part=label]{font-size:.875rem;font-weight:600;color:var(--idle-secondary-color)}:host [part^=container]{height:var(--size);border-radius:var(--border-border-radius);border:0.0625rem solid var(--border-color);-webkit-transition:none;transition:none;cursor:text;grid-template-columns:auto 1fr auto;overflow:hidden}:host [part~=input]{color:var(--idle-text-color);height:calc(var(--size) - 0.125rem);background:initial;font-size:.875rem;padding-inline:.5rem;max-height:100%;border:none;grid-area:1/2}:host [part=helper-text]{padding:0;margin-top:.3125rem}:host(:hover) [part^=container]{border-color:var(--hover-border-color)}:host(:focus-within) [part=label]{color:hsla(var(--ig-gray-800), var(--ig-gray-a))}:host(:focus-within) [part^=container]{border-color:var(--focused-border-color);border-width:0.125rem}:host(:focus-within) [part~=input]{height:calc(var(--size) - 0.25rem)}:host(:focus-within) [part=prefix]{-webkit-margin-start:-0.0625rem;margin-inline-start:-0.0625rem}:host(:focus-within) [part=suffix]{-webkit-margin-end:-0.0625rem;margin-inline-end:-0.0625rem}:host(:focus-within) [name=prefix]::slotted(*),:host(:focus-within) [name=suffix]::slotted(*){padding-block:max(var(--is-large, 1)*max(10px, -1 * 10px)*var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)),var(--is-medium, 1)*max(8px, -1 * 8px)*var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)),var(--is-small, 1)*max(6px, -1 * 6px)*var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)))}:host([type=search]:focus-within) [part=prefix]{display:none}:host([required]) [part=label]::after{color:var(--error-secondary-color)}:host([invalid]) [part^=container]{border-color:var(--error-secondary-color)}:host(:disabled) [part^=container],:host([disabled]) [part^=container]{border-color:var(--disabled-border-color)}:host(:disabled) [part^=container],:host(:disabled) [part=prefix],:host(:disabled) [part=suffix],:host([disabled]) [part^=container],:host([disabled]) [part=prefix],:host([disabled]) [part=suffix]{background:var(--border-disabled-background)}:host(:disabled) [part=prefix],:host(:disabled) [part=suffix],:host(:disabled) [part=label],:host(:disabled) [part=label]::after,:host(:disabled) [part=helper-text],:host(:disabled) [part~=input],:host([disabled]) [part=prefix],:host([disabled]) [part=suffix],:host([disabled]) [part=label],:host([disabled]) [part=label]::after,:host([disabled]) [part=helper-text],:host([disabled]) [part~=input]{color:var(--disabled-text-color)}`;
//# sourceMappingURL=input.fluent.css.js.map