@dnb/eufemia/es/extensions/forms/Field/Number/style/dnb-number.css

DNB Eufemia Design System UI Library

/*
 * Utilities
 */
.dnb-forms-field-number {
  --number-control-button-border-color: black;
  --number-control-button-border-color--hover: darkgrey;
  --number-control-button-border-color--focus: darkgrey;
  --number-control-button-border-width--focus: 0.125rem;
  --number-control-button-background-color--hover: grey;
  --number-control-button-color--hover: black;
  --number-control-button-background-color--active: black;
  --number-control-button-color--active: lightgrey;
  --number-control-button--error: red;
  --number-control-button--error-contrast: white;
  --number-control-button-width--small: 2rem;
  --number-control-button-width--medium: 2.5rem;
  --number-control-button-width--large: 3rem;
  --forms-field-block--number-control-buttons-width--small: calc(
    var(--number-control-button-width--small) * 2
  );
  --forms-field-block--number-control-buttons-width--medium: calc(
    var(--number-control-button-width--medium) * 2
  );
  --forms-field-block--number-control-buttons-width--large: calc(
    var(--number-control-button-width--large) * 2
  );
}
.dnb-forms-field-number__contents--has-controls .dnb-input__input {
  align-items: center;
}
.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border {
  border-radius: 0;
}
.dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border, .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:hover, .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within, html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls .dnb-input .dnb-input__border:focus-within {
  box-shadow: none;
}
.dnb-forms-field-number__contents--has-controls > .dnb-input__border--root {
  --input-border-inset: ;
  --input-border-inset--hover: ;
  --input-border-inset--active: ;
  --input-border-inset--focus: ;
  --input-border-inset--disabled: ;
}
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled],
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]),
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]) {
  background-color: var(--number-control-button-background-color--hover);
  color: var(--number-control-button-color--hover);
}
.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],
.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled] {
  cursor: not-allowed;
}
.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),
.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]) {
  background-color: var(--number-control-button-background-color--active);
  color: var(--number-control-button-color--active);
}
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before,
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after {
  color: var(--number-control-button--error);
}
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover[disabled],
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:hover:not([disabled]),
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:hover:not([disabled]) {
  background-color: var(--number-control-button--error-contrast);
  color: var(--number-control-button--error);
}
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active[disabled],
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled],
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active[disabled] {
  cursor: not-allowed;
}
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before:active:not([disabled]),
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]),
html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after:active:not([disabled]) {
  background-color: var(--number-control-button--error);
  color: var(--number-control-button--error-contrast);
}
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-before[disabled],
.dnb-forms-field-number__contents--has-controls.dnb-input__status--error .dnb-button--control-after[disabled] {
  color: var(--number-control-button--error-contrast);
}
.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] {
  background-color: var(--color-black-3);
  color: var(--color-black-20);
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small {
  --field-block-content-width: calc(
    var(--forms-field-width--small) +
      var(--forms-field-block--number-control-buttons-width--small)
  );
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before,
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after {
  width: var(--number-control-button-width--small);
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium {
  --field-block-content-width: calc(
    var(--forms-field-width--medium) +
      var(--forms-field-block--number-control-buttons-width--medium)
  );
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before,
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after {
  width: var(--number-control-button-width--medium);
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large {
  --field-block-content-width: calc(
    var(--forms-field-width--large) +
      var(--forms-field-block--number-control-buttons-width--large)
  );
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before,
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after {
  width: var(--number-control-button-width--large);
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-before,
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-button--control-after {
  width: var(--number-control-button-width--large);
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch {
  /* stylelint-disable-next-line no-descending-specificity */
}
.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-stretch .dnb-input__border {
  flex-grow: 1;
}
@media screen and (max-width: 15em) {
  .dnb-forms-field-number .dnb-input__shell {
    width: 90%;
  }
}