ionic-framework/core/src/components/input/input.ionic.scss

@use "../../foundations/ionic.vars.scss" as tokens;
@import "./input";
@import "./input.ionic.vars";
@import "./input.ionic.outline.scss";

// Ionic Input
// --------------------------------------------------

:host {
  // TODO(ROU-5477): use design token here when it is added
  --color: #121212;
  --border-width: #{$ionic-border-size-small};
  --border-color: #{$ionic-color-neutral-300};
  --highlight-color-valid: #{$ionic-color-success-400};
  --highlight-color-invalid: #{$ionic-color-error-400};
  --placeholder-color: #{$ionic-color-neutral-500};
  --placeholder-opacity: 1;
  --text-color-invalid: #{$ionic-color-error-600};
}

// Ionic Input Sizes
// --------------------------------------------------

:host(.input-size-medium) .native-wrapper {
  min-height: 40px;
}

:host(.input-size-large) .native-wrapper {
  min-height: 48px;
}

:host(.input-size-xlarge) .native-wrapper {
  min-height: 56px;
}

// Target area
// --------------------------------------------------
:host .native-wrapper::after {
  @include position(50%, 0, null, 0);

  position: absolute;

  height: 100%;
  min-height: 48px;

  transform: translateY(-50%);

  content: "";

  // Cursor should match the native input when hovering over the target area.
  cursor: text;

  z-index: 1;
}

::slotted([slot="start"]),
::slotted([slot="end"]),
.input-clear-icon {
  /**
   * The target area has a z-index of 1, so the slotted elements
   * should be higher. Otherwise, the slotted elements will not
   * be interactable. This is especially important for the clear
   * button, which should be clickable.
   */
  z-index: 2;
}

// Input Clear Button
// ----------------------------------------------------------------

.input-clear-icon {
  width: 16px;
  height: 16px;

  color: #{$ionic-color-neutral-500};
}

.input-clear-icon:focus-visible {
  @include border-radius($ionic-border-radius-rounded-small);

  outline: #{$ionic-border-size-medium} solid #{$ionic-color-primary-100};

  opacity: 1;
}

.input-clear-icon ion-icon {
  width: 100%;
  height: 100%;
}

/**
 * The clear button should be visible if the native input
 * OR any other interactive elements in the component (the
 * clear button, slotted buttons, etc.) are focused. If we
 * only looked at the native input, tabbing to the clear
 * button would immediately hide it.
 *
 * Note that the clear button also requires the native input
 * to have any value, but this is not specific to the ionic
 * theme, so it is handled elsewhere.
 */
:host(:not(:focus-within)) .input-clear-icon {
  display: none;
}

// Input Bottom Content
// ----------------------------------------------------------------

.input-bottom {
  @include padding-horizontal(0, 0);

  // TODO(FW-6112): Update it to `$ionic-font-weight-medium` when it's available
  font-weight: var(--ionic-font-weight-medium, 500);
}

// Input Bottom Text
// ----------------------------------------------------------------

.input-bottom .helper-text,
.input-bottom .counter {
  color: tokens.$ionic-color-neutral-600;
}

:host(.has-focus.ion-valid) .helper-text {
  color: tokens.$ionic-color-success-800;
}

:host(.ion-touched.ion-invalid) .error-text {
  color: var(--text-color-invalid);
}

:host(.has-focus.ion-valid),
:host(.ion-touched.ion-invalid) {
  --border-width: #{tokens.$ionic-border-size-small};
}

// Input Hover
// ----------------------------------------------------------------

@media (any-hover: hover) {
  :host(:hover) {
    --border-color: #{tokens.$ionic-color-neutral-600};
  }
}

// Input - Disabled
// ----------------------------------------------------------------

:host(.input-disabled) {
  // color for the text within the input
  --color: #{tokens.$ionic-color-neutral-400};
  --background: #{tokens.$ionic-color-neutral-10};

  pointer-events: none;
}

:host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
:host(.input-disabled) .input-bottom .counter,
:host(.input-disabled) .label-text-wrapper {
  color: tokens.$ionic-color-neutral-400;
}

:host(.input-disabled.has-focus.ion-valid) {
  // TODO(FW-6112): Update to use the correct color token when rgb tokens are available
  --border-color: rgba(var(--ionic-color-success-400-rgb, 82, 165, 24), 0.6);
}

:host(.input-disabled.ion-touched.ion-invalid) {
  // TODO(FW-6112): Update to use the correct color token when rgb tokens are available
  --border-color: rgba(var(--ionic-color-error-400-rgb, 247, 44, 44), 0.6);
}

:host(.input-disabled.ion-color) {
  --border-color: #{current-color(base, 0.6)};
}

:host(.input-disabled.has-focus.ion-valid) .input-bottom .helper-text,
:host(.input-disabled.ion-touched.ion-invalid) .error-text,
:host(.input-disabled.ion-color) .input-bottom .helper-text,
:host(.input-disabled.ion-color) .helper-text {
  opacity: 0.6;
}

// Input - Readonly
// ----------------------------------------------------------------

:host(.input-readonly) {
  --background: #{tokens.$ionic-color-neutral-10};
}

// Input Highlight
// ----------------------------------------------------------------

.input-highlight {
  @include position(null, null, -1px, 0);

  position: absolute;

  width: 100%;
  height: tokens.$ionic-border-size-medium;

  transform: scale(0);

  transition: transform 200ms;

  background: var(--border-color);
}

// Input Focus
// ----------------------------------------------------------------

:host(.has-focus) {
  --border-color: #{tokens.$ionic-color-primary};
}

:host(.has-focus) .input-highlight {
  transform: scale(1);
}