@dnb/eufemia/components/form-status/style/dnb-form-status.css

DNB Eufemia Design System UI Library

/*
 * FormStatus component
 *
 */
/*
 * Utilities
 */
.dnb-form-status {
  --form-status-radius: 0.25rem;
  display: flex;
  opacity: 1;
}
.dnb-form-status__shell {
  --form-status-color-text: var(--token-color-text-neutral);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: inherit;
  border-radius: var(--form-status-radius);
  background-color: var(--form-status-color-background);
  color: var(--form-status-color-text);
}
.dnb-form-status__variant--outlined .dnb-form-status__shell {
  --border-color: var(--form-status-color-outline);
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-form-status--error .dnb-form-status__shell {
  --form-status-color-background: var(
    --token-color-background-error-subtle
  );
  --form-status-color-icon: var(--token-color-icon-error);
}
.dnb-form-status--information .dnb-form-status__shell {
  --form-status-color-background: var(
    --token-color-background-info-subtle
  );
  --form-status-color-icon: var(--token-color-icon-info);
}
.dnb-form-status--marketing .dnb-form-status__shell {
  --form-status-color-background: var(
    --token-color-background-marketing-subtle
  );
  --form-status-color-icon: var(--token-color-icon-marketing);
}
.dnb-form-status--warning .dnb-form-status__shell {
  --form-status-color-background: var(
    --token-color-background-warning-subtle
  );
  --form-status-color-icon: var(--token-color-icon-warning);
}
.dnb-form-status__variant--outlined.dnb-form-status--error .dnb-form-status__shell {
  --form-status-color-outline: var(--token-color-stroke-error);
}
.dnb-form-status__variant--outlined.dnb-form-status--warning .dnb-form-status__shell {
  --form-status-color-outline: var(--token-color-stroke-warning);
}
.dnb-form-status__variant--outlined.dnb-form-status--information .dnb-form-status__shell {
  --form-status-color-outline: var(--token-color-stroke-info);
}
.dnb-form-status__variant--outlined.dnb-form-status--marketing .dnb-form-status__shell {
  --form-status-color-outline: var(--token-color-stroke-marketing);
}
.dnb-form-status__text {
  max-width: var(--prose-max-width);
  padding: 0.625rem 1rem;
  cursor: text;
}
button .dnb-form-status__text {
  cursor: inherit;
}
.dnb-form-status__text {
  color: inherit;
  line-height: var(--line-height-small);
  font-size: var(--font-size-small);
}
.dnb-form-status__text .dnb-ul,
.dnb-form-status__text .dnb-anchor {
  font-size: inherit;
}
.dnb-form-status__text .dnb-ul:not([class*=dnb-space__left]) {
  padding-left: 1rem;
}
.dnb-spacing .dnb-form-status__text .dnb-ul:not([class*=dnb-space__bottom]) .dnb-li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.dnb-spacing .dnb-form-status__text .dnb-ul:not([class*=dnb-space__bottom]) {
  margin-bottom: 0.5rem;
}
.dnb-form-status__text {
  white-space: normal;
}
.dnb-icon + .dnb-form-status__text {
  padding-left: 0.5rem;
}
.dnb-form-status__shell > .dnb-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em;
  color: var(--form-status-color-icon);
  border: none;
}
.dnb-form-status__size--large .dnb-form-status__text {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}
.dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon {
  margin-top: 0.6666666em;
  margin-bottom: 0.6666666em;
}
.dnb-form-status--stretch {
  flex-grow: 1;
}
.dnb-form-status--stretch .dnb-form-status__shell {
  width: 100%;
}
.dnb-form-status[hidden] {
  display: none;
}
.dnb-form-status--error.dnb-form-status--attention-focus .dnb-form-status__shell, .dnb-form-status--error.dnb-form-status:focus .dnb-form-status__shell {
  animation: attention-focus 2s ease-in-out 1 200ms;
}
.dnb-form-status--error.dnb-form-status--attention-focus .dnb-form-status__shell > .dnb-icon, .dnb-form-status--error.dnb-form-status:focus .dnb-form-status__shell > .dnb-icon {
  animation: attention-focus 2s ease-in-out 1 200ms;
}

@keyframes attention-focus {
  0%, 100% {
    color: var(--token-color-text-destructive);
    background-color: var(--token-color-background-error-subtle);
    border-color: var(--token-color-stroke-error);
  }
  35% {
    color: var(--token-color-text-neutral-inverse);
    background-color: var(--token-color-background-error);
    border-color: var(--token-color-stroke-error);
  }
}