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);--input-border-size: 0.0625rem}:host [part=prefix],:host [part=suffix]{font-size:.875rem;cursor:default;z-index:0}: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);--ig-subtitle-2-line-height: 1rem;margin-block:0 .3125rem;color:var(--idle-secondary-color)}:host [part^=container]{height:var(--size);background:var(--border-background);border:var(--input-border-size) solid rgba(0,0,0,0);border-radius:var(--border-border-radius);transition:none;cursor:text;grid-template-columns:auto 1fr auto}:host [part^=container]::before{content:"";position:absolute;inset:calc(var(--input-border-size)*-1);width:calc(100% + var(--input-border-size)*2);height:calc(100% + var(--input-border-size)*2);color:var(--border-color);box-shadow:inset 0 0 0 var(--input-border-size);border-radius:var(--border-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;z-index:1}:host [part~=input]{color:var(--idle-text-color);background:initial;font-size:.875rem;padding-inline:.5rem;max-height:100%;border:none;grid-area:1/2}:host(:not([readonly],:focus-within):hover) [part^=container]::before{color:var(--hover-border-color);box-shadow:inset 0 0 0 var(--input-border-size)}:host([aria-expanded][readonly]:not(:focus-within):hover) [part^=container]::before{color:var(--hover-border-color);box-shadow:inset 0 0 0 var(--input-border-size)}:host([aria-haspopup]:not([readonly],:focus-within):hover) [part^=container]::before{color:var(--hover-border-color);box-shadow:inset 0 0 0 var(--input-border-size)}:host(:not([aria-haspopup],[aria-expanded])[readonly]) [part=prefix],:host(:not([aria-haspopup],[aria-expanded])[readonly]) [part=suffix]{background:rgba(0,0,0,0)}:host(:focus-within) [part^=container]::before{color:var(--focused-border-color);box-shadow:inset 0 0 0 calc(var(--input-border-size) + 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]) [part=prefix]{background:var(--ig-input-group-input-prefix-background, transparent);color:var(--ig-input-group-input-prefix-color, var(--ig-primary-500))}:host([type=search]) [part=suffix]{background:var(--ig-input-group-input-suffix-background, transparent);color:var(--ig-input-group-input-suffix-color, var(--ig-primary-500))}:host([type=search]:focus-within) [part=prefix]{display:none}:host([type=search]:focus-within) [part=suffix]{color:var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900))}:host([readonly][type=search]:focus-within) [part=suffix]{color:var(--disabled-text-color)}:host([required]) [part=label]::after{color:var(--error-secondary-color)}:host(:not([disabled],[readonly]):state(ig-invalid)) [part~=container]::before,:host(:not([disabled],[readonly]):state(ig-invalid):hover) [part~=container]::before,:host(:not([disabled])[role=combobox]:state(ig-invalid)) [part~=container]::before,:host(:not([disabled])[role=combobox]:state(ig-invalid):hover) [part~=container]::before{box-shadow:inset 0 0 0 var(--input-border-size) var(--error-secondary-color)}:host(:not([disabled],[readonly]):state(ig-invalid):focus-within) [part~=container]::before,:host(:not([disabled])[role=combobox]:state(ig-invalid):focus-within) [part~=container]::before{box-shadow:inset 0 0 0 calc(var(--input-border-size) + 0.0625rem) var(--error-secondary-color)}:host(:disabled) [part~=container]::before,:host([disabled]) [part~=container]::before{box-shadow:inset 0 0 0 var(--input-border-size) 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