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

DNB Eufemia Design System UI Library

/*
 * Utilities
 */
.dnb-forms-field-number {
  --number-control-button-border-width--focus: 0.125rem;
  --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: ;
}
.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-before,
.dnb-forms-field-number__contents--has-controls.dnb-input--disabled .dnb-button--control-after {
  --button-color-bg--disabled: var(
    --token-color-background-neutral-subtle
  );
}
.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%;
  }
}