@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
3 lines • 3.72 kB
CSS
.dnb-input__border--tokens{--input-border-color:var(--sb-color-gray-dark-2);--input-border-color--hover:var(--sb-color-violet);--input-border-color--active:var(--sb-color-violet);--input-border-color--focus:var(--focus-ring-color);--input-border-color--disabled:var(--sb-color-gray);--input-border-color__error:var(--sb-color-red);--input-border-color__error--focus:var(--sb-color-red);--input-border-width:0.0625rem;--input-border-width--hover:0.125rem;--input-border-width--active:0.0625rem;--input-border-width--disabled:0.0625rem;--input-border-width--focus:var(--focus-ring-width);--input-border-width__error:0.0625rem;--input-border-width__error--hover:0.125rem;--input-border-width__error--active:0.0625rem;--input-border-inset:inset;--input-border-inset--hover:inset;--input-border-inset--active:inset;--input-border-inset--focus:inset;--input-border-inset--disabled:inset;--input-border-radius:0.5rem;--input-border-radius--active:1.5rem;--input-border-radius--focus:1.5rem}.dnb-input{--input-height:2.5rem;--input-color:var(--input-color--default);--input-color--default:var(--sb-color-text);--input-color--active:var(--sb-color-text);--input-button-border-color:var(--input-border-color);--input-button-border-width:var(--input-border-width);--input-button-border-radius:var(--input-border-radius)}.dnb-input__shell{background-color:var(--input-background-color);border:none;color:var(--input-color);transition:border-radius .25s ease-out}.dnb-input__submit-button__button{--button-secondary-color:var(--sb-color-violet);--button-secondary-color--active:var(--sb-color-violet)}.dnb-input__placeholder{color:var(--sb-color-gray-dark-3)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder{color:var(--sb-color-gray-dark-2)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentcolor;background-color:var(--sb-color-gray-light)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-color:var(--input-color--active);--input-button-border-color:var(--input-border-color--active);--input-button-border-radius:var(--input-border-radius--active)}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-button-border-color:var(--input-border-color--focus);--input-button-border-width:var(--input-border-width--focus)}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus].dnb-input__status--error{--input-button-border-color:var(
--input-border-color__error--focus
)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error{--input-color--default:var(--sb-color-red);--input-color--active:var(--sb-color-text);--input-button-border-color:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button{--button-secondary-background--hover:var(--sb-color-red);--button-secondary-color--hover:var(--sb-color-white);--button-secondary-color--active:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible){background-color:transparent;border-radius:0 var(--input-button-border-radius) var(--input-button-border-radius) 0;box-shadow:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}