@itwin/itwinui-css/css/input-container.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-input-grid{row-gap:var(--iui-size-2xs);grid-template-rows:auto;grid-template-columns:1fr;align-items:center;display:grid}.iui-input-grid[data-iui-label-placement=inline]{grid-template-rows:1fr auto;grid-template-columns:auto 1fr}.iui-input-grid[data-iui-label-placement=inline] .iui-input-label{margin:0 var(--iui-size-m)0 0}.iui-input-grid[data-iui-label-placement=inline] .iui-input-label.iui-required{margin-inline-end:calc(var(--iui-size-2xs)*1.5 - 1px)}.iui-input-grid[data-iui-label-placement=inline] .iui-input-group{gap:var(--iui-size-m);flex-direction:row}.iui-input-grid .iui-status-message{grid-column-end:-1}.iui-input-grid[data-iui-status=positive] :where(.iui-input,.iui-select-button),:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=positive]){border-block-end:var(--iui-size-3xs)solid var(--iui-color-border-positive);padding-block-end:calc(var(--iui-size-2xs) - 1px)}.iui-input-grid[data-iui-status=positive] :where(.iui-input,.iui-select-button)::selection,.iui-input-grid[data-iui-status=positive] :where(.iui-input,.iui-select-button) ::selection,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=positive])::selection,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-input-grid[data-iui-status=positive] :where(.iui-input,.iui-select-button)[data-iui-size=small],:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=positive])[data-iui-size=small]{padding-block-end:0}.iui-input-grid[data-iui-status=positive] :where(.iui-input,.iui-select-button)[data-iui-size=large],:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=positive])[data-iui-size=large]{padding-block-end:calc(var(--iui-size-xs) - 1px)}.iui-input-grid[data-iui-status=positive] :where(.iui-input,.iui-select-button):focus,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=positive]):focus{outline:2px solid var(--iui-color-text-positive);outline-offset:-2px}.iui-input-grid[data-iui-status=positive] :where(.iui-input,.iui-select-button):hover,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=positive]):hover{--_iui-input-border-color:var(--iui-color-border-positive);--_iui-input-with-icon-hover-border-color:var(--iui-color-border-positive)}.iui-input-grid[data-iui-status=warning] :where(.iui-input,.iui-select-button),:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=warning]){border-block-end:var(--iui-size-3xs)solid var(--iui-color-border-warning);padding-block-end:calc(var(--iui-size-2xs) - 1px)}.iui-input-grid[data-iui-status=warning] :where(.iui-input,.iui-select-button)::selection,.iui-input-grid[data-iui-status=warning] :where(.iui-input,.iui-select-button) ::selection,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=warning])::selection,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-input-grid[data-iui-status=warning] :where(.iui-input,.iui-select-button)[data-iui-size=small],:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=warning])[data-iui-size=small]{padding-block-end:0}.iui-input-grid[data-iui-status=warning] :where(.iui-input,.iui-select-button)[data-iui-size=large],:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=warning])[data-iui-size=large]{padding-block-end:calc(var(--iui-size-xs) - 1px)}.iui-input-grid[data-iui-status=warning] :where(.iui-input,.iui-select-button):focus,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=warning]):focus{outline:2px solid var(--iui-color-text-warning);outline-offset:-2px}.iui-input-grid[data-iui-status=warning] :where(.iui-input,.iui-select-button):hover,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=warning]):hover{--_iui-input-border-color:var(--iui-color-border-warning);--_iui-input-with-icon-hover-border-color:var(--iui-color-border-warning)}.iui-input-grid[data-iui-status=negative] :where(.iui-input,.iui-select-button),:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=negative]){border-block-end:var(--iui-size-3xs)solid var(--iui-color-border-negative);padding-block-end:calc(var(--iui-size-2xs) - 1px)}.iui-input-grid[data-iui-status=negative] :where(.iui-input,.iui-select-button)::selection,.iui-input-grid[data-iui-status=negative] :where(.iui-input,.iui-select-button) ::selection,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=negative])::selection,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-input-grid[data-iui-status=negative] :where(.iui-input,.iui-select-button)[data-iui-size=small],:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=negative])[data-iui-size=small]{padding-block-end:0}.iui-input-grid[data-iui-status=negative] :where(.iui-input,.iui-select-button)[data-iui-size=large],:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=negative])[data-iui-size=large]{padding-block-end:calc(var(--iui-size-xs) - 1px)}.iui-input-grid[data-iui-status=negative] :where(.iui-input,.iui-select-button):focus,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=negative]):focus{outline:2px solid var(--iui-color-text-negative);outline-offset:-2px}.iui-input-grid[data-iui-status=negative] :where(.iui-input,.iui-select-button):hover,:is(.iui-input,.iui-input-with-icon>.iui-select-button):where([data-iui-status=negative]):hover{--_iui-input-border-color:var(--iui-color-border-negative);--_iui-input-with-icon-hover-border-color:var(--iui-color-border-negative)}.iui-input-label{font-weight:var(--iui-font-weight-semibold);color:var(--_iui-input-label-color);cursor:default;display:block}.iui-input-label.iui-required:after{content:"*";color:var(--iui-color-text-negative);margin-inline-start:var(--iui-size-2xs)}.iui-input-label[data-iui-disabled=true]{--_iui-input-label-color:var(--iui-color-text-disabled)}.iui-input-label:is(label){cursor:pointer}.iui-input-label:is(label)[data-iui-disabled=true]{cursor:not-allowed}.iui-input-label.iui-inline{margin:0 var(--iui-size-m)0 0;align-items:center;display:inline-flex}.iui-input-label.iui-inline.iui-required{margin-inline-end:calc(var(--iui-size-2xs)*1.5 - 1px)}.iui-input-flex-container{--_iui-input-background-color:var(--iui-color-background);--_iui-input-border-color:var(--iui-color-border-foreground);--_iui-input-accent-border-color:var(--iui-color-border-accent);--_iui-input-text-color:var(--iui-color-text);--_iui-input-padding-block:var(--iui-size-2xs);--_iui-input-min-height:var(--iui-component-height);background-color:var(--_iui-input-background-color);border-radius:var(--iui-border-radius-1);color:var(--_iui-input-text-color);block-size:var(--_iui-input-min-height);isolation:isolate;min-block-size:var(--_iui-input-min-height);line-height:var(--iui-size-l);align-items:center;block-size:fit-content;inline-size:100%;padding-inline:1px;display:inline-flex;position:relative}.iui-input-flex-container:before{content:"";border:1px solid var(--_iui-input-border-color);border-radius:var(--iui-border-radius-1);transition:border-color var(--iui-duration-1)ease-out;position:absolute;inset:0}.iui-input-flex-container:hover{--_iui-input-border-color:var(--iui-color-border-foreground-hover)}:is(.iui-input-flex-container:has(input:focus-visible),.iui-input-flex-container:has(textarea:focus-visible)){outline:2px solid var(--_iui-input-accent-border-color);outline-offset:-2px}.iui-input-flex-container:has(input:focus-visible):before{border-color:#0000}.iui-input-flex-container:has(textarea:focus-visible):before{border-color:#0000}@supports not selector(:has(+ *)){.iui-input-flex-container:where(:focus-within){outline:2px solid var(--_iui-input-accent-border-color);outline-offset:-2px}.iui-input-flex-container:where(:focus-within):before{border-color:#0000}}.iui-input-flex-container input,.iui-input-flex-container textarea{box-sizing:border-box;font:inherit;z-index:2;min-inline-size:var(--_iui-input-min-height);min-block-size:var(--_iui-input-min-height);padding-inline:var(--iui-size-s);padding-block:var(--_iui-input-padding-block);background:0 0;border:none;flex:999}.iui-input-flex-container input:where(:not(:first-child)),.iui-input-flex-container textarea:where(:not(:first-child)){padding-inline-start:var(--iui-size-2xs)}.iui-input-flex-container input:where(:not(:last-child)),.iui-input-flex-container textarea:where(:not(:last-child)){padding-inline-end:var(--iui-size-2xs)}.iui-input-flex-container input::placeholder,.iui-input-flex-container textarea::placeholder{color:var(--iui-color-text-placeholder);font-weight:var(--iui-font-weight-light);opacity:1}.iui-input-flex-container input:focus,.iui-input-flex-container textarea:focus{outline:none}.iui-input-flex-container>:is(input,textarea):has(+.iui-input-flex-container-icon){padding-inline-end:0}.iui-input-flex-container>.iui-input-flex-container-icon+:is(input,textarea){padding-inline-start:0}.iui-input-flex-container[data-iui-disabled=true]{--_iui-input-background-color:var(--iui-color-background-disabled);--_iui-input-border-color:var(--iui-color-border-disabled);--_iui-input-with-icon-hover-border-color:var(--iui-color-border-disabled);cursor:not-allowed}.iui-input-flex-container[data-iui-size=small]{--_iui-input-padding-block:0;--_iui-input-min-height:var(--iui-component-height-small)}.iui-input-flex-container[data-iui-size=large]{--_iui-input-padding-block:var(--iui-size-xs);--_iui-input-min-height:var(--iui-component-height-large);font-size:var(--iui-font-size-2)}.iui-input-flex-container[data-iui-status=positive]{--_iui-input-accent-border-color:var(--iui-color-border-positive)}.iui-input-flex-container[data-iui-status=positive]:before{border-block-end-width:var(--iui-size-3xs);border-block-end-color:var(--_iui-input-accent-border-color)}.iui-input-flex-container[data-iui-status=positive]:hover{--_iui-input-border-color:var(--iui-color-border-positive)}.iui-input-flex-container[data-iui-status=positive] input::selection,.iui-input-flex-container[data-iui-status=positive] input ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-input-flex-container[data-iui-status=warning]{--_iui-input-accent-border-color:var(--iui-color-border-warning)}.iui-input-flex-container[data-iui-status=warning]:before{border-block-end-width:var(--iui-size-3xs);border-block-end-color:var(--_iui-input-accent-border-color)}.iui-input-flex-container[data-iui-status=warning]:hover{--_iui-input-border-color:var(--iui-color-border-warning)}.iui-input-flex-container[data-iui-status=warning] input::selection,.iui-input-flex-container[data-iui-status=warning] input ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-input-flex-container[data-iui-status=negative]{--_iui-input-accent-border-color:var(--iui-color-border-negative)}.iui-input-flex-container[data-iui-status=negative]:before{border-block-end-width:var(--iui-size-3xs);border-block-end-color:var(--_iui-input-accent-border-color)}.iui-input-flex-container[data-iui-status=negative]:hover{--_iui-input-border-color:var(--iui-color-border-negative)}.iui-input-flex-container[data-iui-status=negative] input::selection,.iui-input-flex-container[data-iui-status=negative] input ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-input-group-wrapper[data-iui-label-placement=inline]{flex-direction:row;display:flex}.iui-input-group-wrapper[data-iui-label-placement=inline] .iui-status-message{margin-inline-start:var(--iui-size-m)}.iui-input-group{flex-direction:column;display:flex}.iui-input-group .iui-toggle-switch-wrapper{padding:calc(var(--iui-size-s)*.5)0}.iui-input-group .iui-radio-wrapper,.iui-input-group .iui-checkbox-wrapper{min-block-size:var(--iui-size-l)}