@dnb/eufemia/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.css

DNB Eufemia Design System UI Library

/*
 * Utilities
 */
.dnb-forms-field-number {
  --number-control-button-border-color: var(--sb-color-purple-alternative);
  --number-control-button-border-color--hover: var(
    --sb-color-purple-alternative
  );
  --number-control-separator-color: var(--sb-color-violet-light-3);
  --number-control-button-border-color--focus: var(--focus-ring-color);
  --number-control-button-border-width--focus: var(--focus-ring-width);
  --number-control-button-background-color--hover: var(
    --sb-color-violet-light-3
  );
  --number-control-button-color--hover: var(--sb-color-purple-alternative);
  --number-control-button-background-color--active: var(--sb-color-purple);
  --number-control-button-color--active: var(--sb-color-violet-light-3);
  --number-control-button--error: var(--sb-color-red);
  --number-control-button--error-contrast: var(--sb-color-magenta-light-2);
}
.dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small {
  --button-height--small: 2.5rem;
  --button-width--small: 2.5rem;
}
.dnb-forms-field-number__contents--has-controls .dnb-input {
  position: relative;
}
.dnb-forms-field-number__contents--has-controls .dnb-input::before, .dnb-forms-field-number__contents--has-controls .dnb-input::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  border-left: 1px solid var(--number-control-separator-color);
  z-index: 1;
}
.dnb-forms-field-number__contents--has-controls .dnb-input::before {
  left: -1px;
}
.dnb-forms-field-number__contents--has-controls .dnb-input::after {
  right: -1px;
}
.dnb-forms-field-number__contents--has-controls .dnb-input__border--root {
  --input-border-color: var(--number-control-button-border-color);
  --input-border-color--hover: var(
    --number-control-button-border-color--hover
  );
  --input-border-color--active: var(
    --number-control-button-border-color--active
  );
  --input-border-radius: var(--input-border-radius--active);
}
.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:not(:disabled):active ~ .dnb-input::before {
  z-index: -1;
}
.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:not(:disabled):active {
  z-index: 1;
}
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error {
  --number-control-separator-color: var(
    --number-control-button--error-contrast
  );
}
.dnb-forms-field-number__contents--has-controls.dnb-input--disabled {
  --number-control-separator-color: var(--sb-color-gray-dark);
}
.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before[disabled],
.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after[disabled] {
  color: var(--sb-color-gray-dark);
  background-color: var(--sb-color-gray-light);
}