UNPKG

@cds/core

Version:

Clarity Design System - common components, themes, and utilties

3 lines (2 loc) 3.4 kB
import{css as o}from"lit";var r=o`:host{--background-size:0% 100%;--background-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--background:linear-gradient(180deg, var(--background-color) 95%, var(--border-color) 0) no-repeat;--border-color:var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--border:0;--border-bottom:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--border-color);--border-radius:0;--outline:none;--outline-offset:0;--padding:var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) var(--cds-global-space-4, calc(6 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-global-space-4, calc(6 * 1rem / var(--cds-global-base, 20)));--font-size:var(--cds-global-typography-font-size-3, calc(13 * 1rem / var(--cds-global-base, 20)));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--line-height:var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)));--transition:background-size var(--cds-global-animation-duration-quick, 0.2s) ease;--text-align:inherit;display:block;width:100%;--icon-color:var(--color)}::slotted([slot=input]:not(select[multiple]):not(select[size])){text-transform:var(--text-transform)!important;border:var(--border)!important;padding:var(--padding);font-size:var(--font-size)!important;color:var(--color)!important;line-height:var(--line-height)!important;height:var(--line-height)!important;border-radius:var(--border-radius)!important;width:100%!important;-webkit-appearance:none!important;background:var(--cds-alias-object-opacity-0,rgba(0,0,0,0))!important;box-shadow:none!important;text-align:var(--text-align)!important}::slotted([slot=input]:not(select[multiple]):not(select[size]))::placeholder{--color:var(--cds-global-typography-color-200, var(--cds-global-color-construction-600, #4f6169))!important}::slotted([slot=input]){margin:0!important}::slotted([cds-button-action]),[cds-button-action]{--color:var(--icon-color)}::slotted([slot=input]:focus){outline:var(--outline)!important;outline-offset:var(--outline-offset)!important}.input-container{transition:var(--transition);background:var(--background);background-size:var(--background-size);border-bottom:var(--border-bottom);border-radius:var(--border-radius)!important;position:relative}.prefix,.suffix{line-height:0;position:absolute;pointer-events:none}.prefix{left:0}.suffix{right:0}.rtl .prefix{left:initial;right:0}.rtl .suffix{right:initial;left:0}.rtl ::slotted([slot=input]){text-align:right}:host([_focused]){--background-size:100% 100%;--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_readonly]){--border-bottom:0;--background-size:0% 100%;--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([status=error]),:host([status=error][_focused]){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border-color:var(--cds-alias-object-border-color-tint, var(--cds-global-color-construction-100, #e3eaed));--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export{r as default}; //# sourceMappingURL=input.element.scss.js.map