@dnb/eufemia/cjs/components/input/style/themes/dnb-input-theme-ui.css

DNB Eufemia Design System UI Library

/*
* Input theme
*
*/
/*
 * Utilities
 */
.dnb-input__border--tokens {
  --input-border-color: var(--color-sea-green);
  --input-border-color--hover: var(--color-emerald-green);
  --input-border-color--active: var(--color-emerald-green);
  --input-border-color--focus: var(--color-emerald-green);
  --input-border-color--disabled: var(--color-black-55);
  --input-border-color__error: var(--color-fire-red);
  --input-border-color__error--focus: var(--color-fire-red);
  --input-border-width: 0.0625rem;
  --input-border-width--hover: 0.125rem;
  --input-border-width--active: 0.125rem;
  --input-border-width--focus: 0.125rem;
  --input-border-width--disabled: 0.0625rem;
  --input-border-width__error: 0.0625rem;
  --input-border-width__error--hover: 0.125rem;
  --input-border-width__error--active: 0.125rem;
  --input-border-inset: inset;
  --input-border-inset--hover: ;
  --input-border-inset--active: ;
  --input-border-inset--focus: ;
  --input-border-inset--disabled: inset;
  --input-border-radius: 0.25rem;
  --input-border-radius--active: 0.25rem;
  --input-border-radius--focus: 0.25rem;
}

.dnb-input {
  color: var(--color-black);
}
.dnb-input__inner {
  color: inherit;
}
.dnb-input__shell {
  color: inherit;
  background-color: var(--input-background-color);
  border: none;
}
.dnb-input__status--error.dnb-input .dnb-input__shell:not(:focus-within) {
  color: var(--color-fire-red);
}
.dnb-input[data-input-state=disabled] .dnb-input__shell,
.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon {
  color: var(--color-black-55);
}
.dnb-input[data-input-state=disabled] .dnb-input__shell {
  -webkit-text-fill-color: currentcolor;
  background-color: var(--color-black-3);
}
html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text,
[disabled]):hover, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text,
[disabled]):hover::after, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text,
[disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text,
[disabled]):focus-visible::after {
  background-color: var(--color-fire-red);
}
html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text,
[disabled]):hover:active, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text,
[disabled]):focus-visible:active {
  color: var(--color-white);
}
.dnb-input__icon {
  color: var(--color-sea-green);
}
.dnb-input__status--error .dnb-input__icon {
  color: var(--color-fire-red);
}
.dnb-input__input::selection {
  background-color: var(--color-mint-green);
  color: var(--color-black);
  text-shadow: none;
}
.dnb-input__placeholder {
  color: var(--color-black-55);
}