_fluid-number-input.scss

// Fluid NumberInput (v11 port). v10 fluid styles cover text input only.
// https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss

@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/typography";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
@import "./fluid-shared";

/// Fluid number input (Carbon React FluidNumberInput)
/// @access private
/// @group components
@mixin fluid-number-input {
  .#{$prefix}--number-input--fluid {
    position: relative;
    background: $field;
  }

  .#{$prefix}--number-input--fluid .#{$prefix}--number {
    block-size: 100%;
  }

  .#{$prefix}--number-input--fluid .#{$prefix}--label {
    @include fluid-label;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--label.#{$prefix}--label--slotted {
    @include fluid-label-slotted;
  }

  // The base wrapper is `display: flex`, which would lay the embedded error
  // message and divider out as row items. Switch to block so they flow below
  // the field, and make it static so the absolutely positioned divider, status
  // icon, and steppers anchor to the fluid container instead.
  .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper {
    display: block;
    position: static;
  }

  .#{$prefix}--number-input--fluid input[type="number"],
  .#{$prefix}--number-input--fluid input[type="text"] {
    padding-block: to-rem(32px) to-rem(13px);
    padding-inline: $carbon--spacing-05 to-rem(80px);
    background: transparent;
    min-block-size: to-rem(64px);
    outline: none;
  }

  // v10 applies invalid/focus outlines directly on the input element. In the
  // fluid variant the ring belongs on the field wrapper only, matching Carbon
  // React and the fluid text input pattern.
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number
    input[type="number"]:focus,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number
    input[type="text"]:focus,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"][data-invalid],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"][data-invalid] {
    outline: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--nosteppers
    input[type="number"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--nosteppers
    input[type="text"] {
    padding-inline-end: $carbon--spacing-05;
  }

  .#{$prefix}--number-input--fluid .#{$prefix}--number__controls {
    block-size: to-rem(40px);
    inset-block-start: to-rem(23px);
    transform: translate(0);
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__controls
    .#{$prefix}--number__rule-divider:first-of-type {
    display: none;
  }

  // When the input is focused, extend the focus ring onto the steppers via a
  // bottom border. The v10 base styles add a full outline on stepper hover.
  .#{$prefix}--number-input--fluid
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn {
    border-block-end-color: $focus;
    box-shadow: inset 0 -1px $focus;
  }

  .#{$prefix}--number-input--fluid
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type,
  .#{$prefix}--number-input--fluid
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type {
    box-shadow:
      inset 0 -1px $focus,
      inset -2px 0 $focus;

    // The last stepper ends the field, on the left in RTL.
    [dir="rtl"] & {
      box-shadow: ccs-dir(
        (inset 0 -1px $focus, inset -2px 0 $focus),
        (inset 0 -1px $focus, inset 2px 0 $focus)
      );
    }
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn {
    border-block-end-color: transparent;
    box-shadow: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type {
    box-shadow: inset -2px 0 $focus;

    [dir="rtl"] & {
      box-shadow: ccs-dir(inset -2px 0 $focus, inset 2px 0 $focus);
    }
  }

  // Hover only where a pointer can hover, so a tap does not leave it stuck.
  @media (any-hover: hover) {
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number[data-invalid]
      input[type="number"]:not(:focus)
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:last-of-type:hover,
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number[data-invalid]
      input[type="text"]:not(:focus)
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:last-of-type:hover {
      box-shadow: inset -2px 0 $support-error;

      [dir="rtl"] & {
        box-shadow: ccs-dir(
          inset -2px 0 $support-error,
          inset 2px 0 $support-error
        );
      }
    }

    .#{$prefix}--number-input--fluid
      .#{$prefix}--number[data-invalid]
      input[type="number"]:not(:focus)
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover,
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number[data-invalid]
      input[type="text"]:not(:focus)
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover {
      box-shadow: none;
      outline: none;
    }
  }

  // Steppers show only a bottom border on hover while the input is focused.
  // `--neutral` is set by the component only when neither invalid nor warn
  // is showing, so it already encodes the same condition a `:not()` chain
  // would spell out. Nothing else conflicts for a neutral element: the
  // invalid/warning variants of this rule are mutually exclusive by class,
  // and the unconditional base rules for this subject sit well below this
  // selector's natural specificity.
  @media (any-hover: hover) {
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number.#{$prefix}--number--neutral
      .#{$prefix}--number__input-wrapper
      input[type="number"]:focus
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover,
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number.#{$prefix}--number--neutral
      .#{$prefix}--number__input-wrapper
      input[type="text"]:focus
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover {
      border-block-end: 1px solid $focus;
      outline: none;
    }
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn {
    border-block-end: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number
    input[type="number"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number
    input[type="text"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn {
    border: initial;
    border-block-end-width: to-rem(1px);
  }

  @media (any-hover: hover) {
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number[data-invalid]
      input[type="number"]
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover:not(:focus),
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number__input-wrapper--warning
      input[type="number"]
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover:not(:focus),
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number[data-invalid]
      input[type="text"]
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover:not(:focus),
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number__input-wrapper--warning
      input[type="text"]
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover:not(:focus) {
      outline: none;
    }
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"][data-invalid]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:focus,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"][data-invalid]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:focus:hover,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"][data-invalid]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:focus,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"][data-invalid]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:focus:hover {
    @include focus-outline("outline");
  }

  // The status icon is pinned to the first line of the message, below the
  // taller field, mirroring the fluid text input and select.
  .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid {
    @include fluid-status-icon(to-rem(73px));
  }

  // Divider: always in DOM for fluid, shown only in invalid/warn states.
  .#{$prefix}--number-input--fluid .#{$prefix}--number-input__divider {
    display: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    .#{$prefix}--number-input__divider,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    .#{$prefix}--number-input__divider {
    position: absolute;
    display: block;
    border: none;
    margin: 0 to-rem(16px);
    block-size: to-rem(1px);
    border-block-end: 1px solid $border-subtle;
    inline-size: calc(100% - to-rem(32px));
    inset-block-start: to-rem(63px);
  }

  // Invalid/warn: hide field bottom border; divider draws the line, outline the color.
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"] {
    border-block-end: 1px solid transparent;
  }

  // The error/warn message is rendered inside the input wrapper in the fluid
  // variant. The base v10 styles only reveal a message that is a sibling of
  // the wrapper, so force it visible here.
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper
    .#{$prefix}--form-requirement {
    @include fluid-requirement;
    @include fluid-requirement-padding;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]:not(:focus-within) {
    @include focus-outline("invalid");
  }

  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
    .#{$prefix}--number {
    @include focus-outline("outline");
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    input[type="number"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    input[type="text"] {
    color: $text-secondary;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    .#{$prefix}--number__control-btn {
    color: $disabled;
    pointer-events: none;
    cursor: not-allowed;

    @media (any-hover: hover) {
      &:hover {
        background-color: transparent;
        outline: none;
      }
    }
  }

  @media (any-hover: hover) {
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number--readonly
      input[type="number"]:focus
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover,
    .#{$prefix}--number-input--fluid
      .#{$prefix}--number--readonly
      input[type="text"]:focus
      ~ .#{$prefix}--number__controls
      .#{$prefix}--number__control-btn:hover {
      outline: none;
    }
  }
}

@include exports("fluid-number-input") {
  @include fluid-number-input;
}