@dnb/eufemia/components/input-masked/style/dnb-input-masked.css

DNB Eufemia Design System UI Library

/*
* InputMasked component
*
*/
/*
 * Utilities
 */
.dnb-input-masked--guide {
  font-family: var(--font-family-monospace);
}
.dnb-input-masked input::placeholder {
  color: inherit;
}
.dnb-input-masked--hide-controls[type=number]::-webkit-outer-spin-button, .dnb-input-masked--hide-controls[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}
.dnb-input-masked--hide-controls[type=number] {
  -webkit-appearance: textfield;
          appearance: textfield;
}

.dnb-multi-input-mask__fieldset:not([class*=space__top]) {
  margin-top: 0;
}
.dnb-multi-input-mask__fieldset:not([class*=space__bottom]) {
  margin-bottom: 0;
}
.dnb-multi-input-mask__fieldset:not([class*=space__left]) {
  margin-left: 0;
}
.dnb-multi-input-mask__fieldset:not([class*=space__right]) {
  margin-right: 0;
}
.dnb-multi-input-mask__fieldset {
  padding: 0;
  border: none;
}
.dnb-multi-input-mask__fieldset--horizontal {
  display: inline-flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 1rem;
}

.dnb-multi-input-mask__input.dnb-input__input {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0 0.125rem;
  transform: translateY(0);
  outline: none;
  font-family: var(--font-family-monospace);
  text-align: center;
  border: none;
  background: transparent;
  overflow: visible;
  white-space: nowrap;
}
.dnb-multi-input-mask__input.dnb-input__input:first-of-type {
  padding-left: 0.5rem;
}
.dnb-multi-input-mask__input.dnb-input__input:last-of-type {
  padding-right: 0.5rem;
}
.dnb-input--medium .dnb-multi-input-mask__input.dnb-input__input, .dnb-input--large .dnb-multi-input-mask__input.dnb-input__input {
  padding: 0 0.25rem;
}

.dnb-multi-input-mask {
  width: -webkit-fit-content;
  width: fit-content;
}
.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
  color: var(--color-black-55);
}
.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
  color: var(--color-black);
}