@dnb/eufemia/components/input/style/dnb-input.min.css

DNB Eufemia Design System UI Library

.dnb-input{--input-font-size:var(--font-size-basis);--input-font-size--small:var(--font-size-basis);--input-font-size--medium:var(--font-size-basis);--input-font-size--large:var(--font-size-medium);--input-padding:1rem;--input-padding--small:1rem;--input-padding--medium:1rem;--input-padding--large:1rem;--input-height:2rem;--input-height--small:1.5rem;--input-height--medium:2.5rem;--input-height--large:3rem;--input-background-color:var(--color-white);align-items:center;display:inline-flex;font-size:var(--input-font-small);line-height:var(--input-height);text-align:left}.dnb-input__inner{display:inline-flex;flex-direction:column;width:auto}.dnb-input__shell{align-items:center;border:var(--input-border-width) solid var(--color-sea-green);display:flex;position:relative}.dnb-input__row{align-items:center;display:inline-flex}.dnb-input__input{border:none;outline:none;position:relative;word-break:normal;z-index:2}.dnb-input__input[disabled]{opacity:1;-webkit-user-select:none;user-select:none}.dnb-input__input,.dnb-input__shell{border-radius:var(--input-border-radius);height:var(--input-height)}.dnb-input__input,.dnb-input__placeholder{padding-left:var(--input-padding);padding-right:var(--input-padding);width:100%}.dnb-input input.dnb-input__input,.dnb-input__input,.dnb-input__placeholder{background-color:transparent;color:inherit;font-size:var(--input-font-size);line-height:inherit;padding-bottom:0;padding-top:0}.dnb-input__placeholder{left:0;overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;z-index:1}.dnb-input__border{--border-color:var(--b-color,var(--input-border-color));--border-width:var(--b-width,var(--input-border-width));border-color:transparent;border-radius:var(--b-radius,var(--input-border-radius));box-shadow:var(--b-inset,var(--input-border-inset,inset)) 0 0 0 var(--border-width) var(--border-color);display:flex}.dnb-input--disabled .dnb-input__border{--border-color:var(--input-border-color--disabled);--border-width:var(--input-border-width--disabled);border-color:transparent;box-shadow:var(--input-border-inset--disabled,inset) 0 0 0 var(--border-width) var(--border-color)}.dnb-input__border:focus-within{--b-color:var(--input-border-color--active);--b-width:var(--input-border-width--active);--b-inset:var(--input-border-inset--active);--b-radius:var(--input-border-radius--active)}.dnb-input__border.hover,.dnb-input__border:hover{--b-color:var(--input-border-color--hover);--b-width:var(--input-border-width--hover);--b-inset:var(--input-border-inset--hover)}.dnb-input__border:has(.dnb-input__input:-webkit-autofill){--b-color:var(--input-border-color);--b-inset:var(--input-border-inset--active)}.dnb-input__border:has(.dnb-input__input:autofill){--b-color:var(--input-border-color);--b-inset:var(--input-border-inset--active)}.dnb-input__status--error .dnb-input__border:has(.dnb-input__input:-webkit-autofill){--b-color:var(--input-border-color__error)}.dnb-input__status--error .dnb-input__border:has(.dnb-input__input:autofill){--b-color:var(--input-border-color__error)}.dnb-input__status--error .dnb-input__border{--b-color:var(--input-border-color__error);--b-width:var(--input-border-width__error)}.dnb-input__status--error .dnb-input__border:focus-within{--b-color:var(--input-border-color__error);--b-width:var(--input-border-width__error--active);--b-inset:var(--input-border-inset--active);--b-radius:var(--input-border-radius--active)}.dnb-input__status--error .dnb-input__border:hover:has(.dnb-input__input:-webkit-autofill){--b-color:var(--input-border-color__error);--b-width:var(--input-border-width__error--hover);--b-inset:var(--input-border-inset--hover)}.dnb-input__status--error .dnb-input__border.hover,.dnb-input__status--error .dnb-input__border:hover,.dnb-input__status--error .dnb-input__border:hover:has(.dnb-input__input:autofill){--b-color:var(--input-border-color__error);--b-width:var(--input-border-width__error--hover);--b-inset:var(--input-border-inset--hover)}html[data-whatinput=keyboard] .dnb-input__border:focus-within{--b-color:var(--input-border-color--focus);--b-width:var(--input-border-width--focus);--b-inset:var(--input-border-inset--focus);--b-radius:var(--input-border-radius--focus)}html[data-whatinput=keyboard] .dnb-input__status--error .dnb-input__border:focus-within{--b-color:var(--input-border-color__error--focus);--b-width:var(--input-border-width--focus);--b-inset:var(--input-border-inset--focus);--b-radius:var(--input-border-radius--focus)}.dnb-input input.dnb-input__input[type=file]{line-height:calc(var(--input-height) - 2px)}.dnb-input__input::-webkit-search-cancel-button{display:none}.dnb-input__input::-ms-clear{display:none}.dnb-input ::-webkit-file-upload-button{color:var(--color-sea-green);cursor:pointer;outline:none}.dnb-input ::-webkit-file-upload-button:active,.dnb-input ::-webkit-file-upload-button:hover{color:var(--color-emerald-green)}.dnb-input--has-clear-button .dnb-input__input,.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--has-submit-element .dnb-input__input,.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding)*2.5)}.dnb-input--password .dnb-input__input,.dnb-input--password .dnb-input__placeholder{margin-right:2.5rem;padding-right:0}.dnb-input--password .dnb-input__input::-ms-clear,.dnb-input--password .dnb-input__input::-ms-reveal,.dnb-input--password .dnb-input__placeholder::-ms-clear,.dnb-input--password .dnb-input__placeholder::-ms-reveal{display:none}.dnb-input--password .dnb-input__placeholder{padding-right:4rem}.dnb-input--password .dnb-input__input{font-family:var(--font-family-monospace)}.dnb-input__suffix{color:inherit}.dnb-input__submit-element{line-height:var(--line-height-basis);margin-left:calc(var(--input-height)*-1);z-index:3}.dnb-input__submit-element .dnb-button--input-button{height:var(--input-height);line-height:var(--input-height);width:var(--input-height)}.dnb-input__submit-button{align-self:center;position:relative}.dnb-input__submit-button__button{border-radius:0 var(--input-border-radius) var(--input-border-radius) 0}.dnb-input>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-input{flex-wrap:wrap}.dnb-input>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-input:not(.dnb-input--vertical)[class*=__status]{align-items:flex-start}.dnb-input:not(.dnb-input--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-input--small{line-height:var(--input-height--small)}.dnb-input--small .dnb-input__input,.dnb-input--small .dnb-input__shell{height:var(--input-height--small)}.dnb-input--small .dnb-input__input,.dnb-input--small .dnb-input__placeholder{font-size:var(--input-font-size--small);padding-left:var(--input-padding--small);padding-right:var(--input-padding--small)}.dnb-input--small .dnb-input__submit-element{margin-left:calc(var(--input-height--small)*-1)}.dnb-input--small .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--small);line-height:var(--input-height--small);width:var(--input-height--small)}.dnb-input--small.dnb-input--has-clear-button .dnb-input__input,.dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--small.dnb-input--has-submit-element .dnb-input__input,.dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--small)*2)}.dnb-input--medium{line-height:var(--input-height--medium)}.dnb-input--medium .dnb-input__input,.dnb-input--medium .dnb-input__shell{height:var(--input-height--medium)}.dnb-input--medium .dnb-input__input,.dnb-input--medium .dnb-input__placeholder{font-size:var(--input-font-size--medium);padding-left:var(--input-padding--medium);padding-right:var(--input-padding--medium)}.dnb-input--medium .dnb-input__submit-element{margin-left:calc(var(--input-height--medium)*-1)}.dnb-input--medium .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--medium);line-height:var(--input-height--medium);width:var(--input-height--medium)}.dnb-input--medium.dnb-input--has-clear-button .dnb-input__input,.dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--medium.dnb-input--has-submit-element .dnb-input__input,.dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--medium)*3)}.dnb-input--large{line-height:var(--input-height--large)}.dnb-input--large .dnb-input__input,.dnb-input--large .dnb-input__shell{height:var(--input-height--large)}.dnb-input--large .dnb-input__input,.dnb-input--large .dnb-input__placeholder{font-size:var(--input-font-size--large);padding-left:var(--input-padding--large);padding-right:var(--input-padding--large)}.dnb-input--large .dnb-input__submit-element{margin-left:calc(var(--input-height--large)*-1)}.dnb-input--large .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--large);line-height:var(--input-height--large);width:var(--input-height--large)}.dnb-input--large.dnb-input--has-clear-button .dnb-input__input,.dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--large.dnb-input--has-submit-element .dnb-input__input,.dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--large)*3.5)}.dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element{margin-left:calc(var(--input-height--large) - .5rem)}.dnb-input__align--center .dnb-input__input,.dnb-input__align--center .dnb-input__placeholder{text-align:center}.dnb-input__align--right .dnb-input__input,.dnb-input__align--right .dnb-input__placeholder{text-align:right}.dnb-input--clear.dnb-input__submit-element{opacity:0;transition:opacity .2s ease-in-out}.dnb-input--clear.dnb-input__submit-element .dnb-button{border-radius:var(--button-border-radius);height:var(--input-height--small);width:var(--input-height--small)}.dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon{margin:auto}html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled]{cursor:default}.dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button{height:1rem;width:1rem}.dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button,.dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button{height:var(--input-height--small);width:var(--input-height--small)}.dnb-input[data-has-content=true] .dnb-input--clear{opacity:1}.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:2.5rem}.dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:2rem}.dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:3rem}.dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:3.5rem}.dnb-input__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-input--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-input--stretch{display:flex;flex-grow:1}.dnb-input--stretch .dnb-input__inner{flex-grow:1}.dnb-input--stretch .dnb-input__inner,.dnb-input--stretch .dnb-input__shell{width:100%}.dnb-input--stretch .dnb-form-label+.dnb-input__inner{width:auto}.dnb-form-row--horizontal .dnb-input--stretch,.dnb-input--vertical.dnb-input--stretch .dnb-input__inner{width:100%}.dnb-input__icon{bottom:0;left:1rem;margin:auto;order:0;position:absolute;right:auto;top:0;z-index:2}.dnb-input--icon-position-right .dnb-input__icon{left:auto;order:1;right:1rem}.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder{padding-left:2.5rem}.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder{padding-right:2.5rem}.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder{padding-left:3rem}.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder{padding-right:3rem}html[data-visual-test] .dnb-input__input{caret-color:var(--color-white)}.dnb-input[data-input-state=focus] .dnb-input__placeholder{display:none}.dnb-input--keep-placeholder[data-input-state=focus] .dnb-input__placeholder{color:var(--color-black-20);display:block}@media screen and (max-width:40em){.dnb-responsive-component .dnb-input{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-input__row{align-items:flex-start}.dnb-responsive-component .dnb-input>.dnb-form-label{margin-bottom:.5rem}}