igniteui-webcomponents/components/input/themes/shared/input.fluent.css.js

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.

import { css } from 'lit';
export const styles = css `:host{--component-size: var(--ig-size, var(--default-size));--input-size: var(--component-size);--helper-text-top-spacer: rem(5px)}:host [part=prefix],:host [part=suffix]{font-size:.875rem;cursor:default}:host [part=prefix] ::slotted(*),:host [part=suffix] ::slotted(*){color:inherit}:host ::part(helper-text){font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);color:var(--helper-text-color);margin-block-start:.3125rem;grid-auto-rows:minmax(1.125rem, auto)}:host [name=prefix]::slotted(*),:host [name=suffix]::slotted(*){display:inline-flex;align-items:center;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-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);color:var(--idle-secondary-color);margin-block-end:.3125rem}:host [part^=container]{height:var(--size);border-radius:var(--border-border-radius);border:0.0625rem solid var(--border-color);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(:hover) [part^=container]{border-color:var(--hover-border-color)}:host(:focus-within) [part=label]{color:var(--ig-gray-800)}: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]{margin-inline-start:-0.0625rem}:host(:focus-within) [part=suffix]{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~=input],:host(:disabled) ::part(helper-text),:host([disabled]) [part=prefix],:host([disabled]) [part=suffix],:host([disabled]) [part=label],:host([disabled]) [part=label]::after,:host([disabled]) [part~=input],:host([disabled]) ::part(helper-text){color:var(--disabled-text-color)}`;
//# sourceMappingURL=input.fluent.css.js.map