input.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-input-prefix-size: Specifies the component's prefix width, when present.
 * @prop --calcite-input-suffix-size: Specifies the component's suffix width, when present.
 *
 * @prop --calcite-input-background-color: Specifies the component's background color.
 * @prop --calcite-input-border-color: Specifies the component's border color.
 * @prop --calcite-input-corner-radius: Specifies the component's corner radius.
 * @prop --calcite-input-shadow: Specifies the shadow around the component.

 * @prop --calcite-input-icon-color: Specifies the component's icon color.
 * @prop --calcite-input-text-color: Specifies the component's text color.
 * @prop --calcite-input-placeholder-text-color: Specifies the component's placeholder text color.

 * @prop --calcite-input-actions-background-color: Specifies the background color of the component's `clearable` and `number-button-type` elements.
 * @prop --calcite-input-actions-background-color-hover: Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
 * @prop --calcite-input-actions-background-color-press: Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
 * @prop --calcite-input-actions-icon-color: Specifies the icon color of the component's `clearable` and `number-button-type` elements.
 * @prop --calcite-input-actions-icon-color-hover: Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
 * @prop --calcite-input-actions-icon-color-press: Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.

 * @prop --calcite-input-loading-background-color: Specifies the background color of the `loading` element, when present.
 * @prop --calcite-input-loading-fill-color: Specifies the fill color of the `loading` element, when present.

 * @prop --calcite-input-prefix-background-color:  Specifies the component's prefix background color, when present.
 * @prop --calcite-input-prefix-text-color:  Specifies the component's prefix text color, when present.

 * @prop --calcite-input-suffix-background-color:  Specifies the component's suffix background color, when present.
 * @prop --calcite-input-suffix-text-color:  Specifies the component's suffix text color, when present.
 *
 */

@mixin input-placeholder-styles {
  @apply font-normal;
  color: var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3));
}

:host {
  @apply block;
}

// scales
:host([scale="s"]) {
  & input,
  & .prefix,
  & .suffix {
    @apply text-n2h h-6 px-2;
  }
  & input[type="file"],
  & textarea {
    min-block-size: theme("spacing.6");
  }
  & .number-button-wrapper,
  & .action-wrapper calcite-button,
  & .action-wrapper calcite-button button {
    @apply h-6;
  }
  & .clear-button {
    min-block-size: theme("spacing.6");
    min-inline-size: theme("spacing.6");
  }
  & textarea {
    @apply text-n2h
    h-auto
    py-1
    px-2;
  }
}

:host([scale="m"]) {
  & input,
  & .prefix,
  & .suffix {
    @apply text-n1h h-8 px-3;
  }
  & textarea,
  & input[type="file"] {
    min-block-size: theme("spacing.8");
  }
  & .number-button-wrapper,
  & .action-wrapper calcite-button,
  & .action-wrapper calcite-button button {
    @apply h-8;
  }
  & .clear-button {
    min-block-size: theme("spacing.8");
    min-inline-size: theme("spacing.8");
  }
  & textarea {
    @apply text-n1h
      h-auto
      py-2
      px-3;
  }
}

:host([scale="l"]) {
  & input,
  & .prefix,
  & .suffix {
    @apply text-0h h-11 px-4;
  }
  & textarea,
  & input[type="file"] {
    min-block-size: theme("spacing.11");
  }
  & .number-button-wrapper,
  & .action-wrapper calcite-button,
  & .action-wrapper calcite-button button {
    @apply h-11;
  }
  & .clear-button {
    min-block-size: theme("spacing.11");
    min-inline-size: theme("spacing.11");
  }
  & textarea {
    @apply text-0h
      h-auto
      py-3
      px-4;
  }
}

@include disabled() {
  & textarea {
    resize: none;
  }
}

textarea,
input {
  @apply font-inherit
    relative
    m-0
    box-border
    flex
    max-h-full
    w-full
    max-w-full
    flex-1
    font-normal
    border
    border-solid
    text-ellipsis;
  border-color: var(--calcite-input-border-color, var(--calcite-color-border-input));
  background-color: var(--calcite-input-background-color, var(--calcite-color-foreground-1));
  color: var(--calcite-input-text-color, var(--calcite-color-text-1));
  transition:
    var(--calcite-animation-timing),
    block-size 0,
    outline-offset 0s;
  -webkit-appearance: none;

  &:placeholder-shown {
    @apply text-ellipsis;
  }
}

// Placeholder styles
// Do not combine these style rules. The browser interprets the rule as one. When combined, properties like -ms can not be found in non-Microsoft browsers and thus the whole selector is invalidated and is ignored.
:-ms-input-placeholder {
  @include input-placeholder-styles;
}

::-ms-input-placeholder {
  @include input-placeholder-styles;
}

::placeholder {
  @include input-placeholder-styles;
}
// End Placeholder styles

textarea {
  border-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
}

input {
  border-start-start-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
  border-start-end-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
  border-end-start-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
  border-end-end-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
}

.has-prefix input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.has-suffix input,
.element-wrapper:has(.clear-button) input,
:host([number-button-type="vertical"][type="number"]) input,
:host([number-button-type="horizontal"]) .has-suffix .suffix,
:host([number-button-type="vertical"][type="number"]) .has-suffix .suffix,
:host([number-button-type="vertical"][type="number"]) .clear-button,
:host([number-button-type="horizontal"][type="number"]) .clear-button {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

:host([number-button-type="horizontal"]) input {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.has-prefix .prefix:first-child,
:host([number-button-type="horizontal"]) .number-button-item[data-adjustment="down"] {
  border-start-start-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
  border-end-start-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
}

.has-suffix .suffix,
:host([number-button-type="vertical"][type="number"][read-only]) .has-suffix .suffix,
:host([clearable]) .clear-button,
:host([number-button-type="horizontal"]) .number-button-item[data-adjustment="up"] {
  border-end-end-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
  border-start-end-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
}

:host([clearable]) .has-suffix .clear-button {
  border-end-end-radius: 0;
  border-start-end-radius: 0;
}

:host([number-button-type="vertical"]) .number-button-item[data-adjustment="down"] {
  @apply border-t-0;
  border-end-end-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
}

:host([number-button-type="vertical"]) .number-button-item[data-adjustment="up"] {
  border-start-end-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

// states

input:focus,
textarea:focus {
  @apply border-color-brand;
  color: var(--calcite-input-text-color, var(--calcite-color-text-1));
}
input[readonly],
textarea[readonly] {
  @apply font-medium;
  background-color: var(--calcite-input-background-color, var(--calcite-color-background));
}
input[readonly]:focus,
textarea[readonly]:focus {
  color: var(--calcite-input-text-color, var(--calcite-color-text-1));
}

//focus
textarea,
input {
  @apply focus-base;
}
textarea:focus,
input:focus {
  @apply focus-inset;
}

:host([status="invalid"]) {
  & input,
  & textarea {
    @apply border-color-danger;
  }
  & input:focus,
  & textarea:focus {
    @apply focus-inset-danger;
  }
}

// ICONS

// position icons

:host([scale="s"]) .icon {
  inset-inline-start: theme("spacing.2");
}

:host([scale="m"]) .icon {
  inset-inline-start: theme("spacing.3");
}

:host([scale="l"]) .icon {
  inset-inline-start: theme("spacing.4");
}

// position placeholder/value text in relation to icons

:host([icon][scale="s"]) input {
  padding-inline-start: theme("padding.8");
}

:host([icon][scale="m"]) input {
  padding-inline-start: theme("padding.10");
}

:host([icon][scale="l"]) input {
  padding-inline-start: theme("padding.14");
}

// positioning wrapper for icon and loader

.element-wrapper {
  @apply relative
    order-3
    inline-flex
    flex-1
    items-center;
}

.icon {
  @apply transition-default
    pointer-events-none
    absolute
    block
    z-default;
  color: var(--calcite-input-icon-color, var(--calcite-color-text-3));
}

.icon {
  @apply z-default; // needed for firefox to display the icon properly
}

// hide browser default clear

input[type="text"]::-ms-clear,
input[type="text"]::-ms-reveal {
  @apply hidden
    h-0
    w-0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button {
  @apply hidden;
}

.clear-button {
  pointer-events: initial;
  @apply focus-base
    order-4
    m-0
    box-border
    flex
    min-h-full
    cursor-pointer
    items-center
    justify-center
    self-stretch
    border
    border-solid
    transition-default;
  border-color: var(--calcite-input-border-color, var(--calcite-color-border-input));
  background-color: var(--calcite-input-actions-background-color, var(--calcite-color-foreground-1));
  border-inline-start-width: theme("borderWidth.0");

  calcite-icon {
    @apply transition-default;
    color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3));
  }

  &:hover {
    background-color: var(--calcite-input-actions-background-color-hover, var(--calcite-color-foreground-2));
    calcite-icon {
      color: var(--calcite-input-actions-icon-color-hover, var(--calcite-color-text-1));
    }
  }
  &:active {
    background-color: var(--calcite-input-actions-background-color-press, var(--calcite-color-foreground-3));
    calcite-icon {
      color: var(--calcite-input-actions-icon-color-press, var(--calcite-color-text-1));
    }
  }
  &:focus {
    @apply focus-inset;
  }
  &:disabled {
    @apply opacity-disabled;
  }
}

// loading
.loader {
  inset-block-start: 1px;
  inset-inline: 1px;
  @apply pointer-events-none
    absolute
    block;
  --calcite-progress-background-color: var(--calcite-input-loading-background-color);
  --calcite-progress-fill-color: var(--calcite-input-loading-fill-color);
}

// slotted action
.action-wrapper {
  @apply order-7 flex;
}

// prefix and suffix
.prefix,
.suffix {
  @apply box-border
    flex
    h-auto
    min-h-full
    select-none
    content-center
    items-center
    break-words
    border
    border-solid
    font-medium
    leading-none;
  border-color: var(--calcite-input-border-color, var(--calcite-color-border-input));
}

.prefix {
  @apply order-2;
  border-inline-end-width: theme("borderWidth.0");
  inline-size: var(--calcite-input-prefix-size, auto);
  background-color: var(--calcite-input-prefix-background-color, var(--calcite-color-background));
  color: var(--calcite-input-prefix-text-color, var(--calcite-color-text-2));
}

.suffix {
  @apply order-5;
  border-inline-start-width: theme("borderWidth.0");
  inline-size: var(--calcite-input-suffix-size, auto);
  background-color: var(--calcite-input-suffix-background-color, var(--calcite-color-background));
  color: var(--calcite-input-suffix-text-color, var(--calcite-color-text-2));
}

// alignment type
:host([alignment="start"]) {
  & textarea,
  & input {
    text-align: start;
  }
}

:host([alignment="end"]) {
  & textarea,
  & input {
    text-align: end;
  }
}

// number buttons
input[type="number"] {
  -moz-appearance: textfield;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    @apply m-0;
  }
}

.number-button-wrapper {
  @apply transition-default
    pointer-events-none
    order-6
    box-border
    flex
    flex-col;
}

:host([number-button-type="vertical"]) .wrapper {
  flex-direction: row;
  display: flex;
}

:host([number-button-type="vertical"]) {
  & input,
  textarea {
    @apply order-2;
  }
}

:host([number-button-type="horizontal"]) .calcite--rtl {
  & .number-button-item[data-adjustment="down"] calcite-icon {
    transform: rotate(-90deg);
  }
  & .number-button-item[data-adjustment="up"] calcite-icon {
    transform: rotate(-90deg);
  }
}

.number-button-item.number-button-item--horizontal {
  border-color: var(--calcite-input-border-color, var(--calcite-color-border-input));
  @apply order-1
      max-h-full
      min-h-full
      self-stretch
      border
      border-solid;

  &[data-adjustment="down"],
  &[data-adjustment="up"] {
    & calcite-icon {
      transform: rotate(90deg);
    }
  }
}

.number-button-item.number-button-item--horizontal[data-adjustment="down"] {
  border-inline-end-width: theme("borderWidth.0");
}

.number-button-item.number-button-item--horizontal[data-adjustment="up"] {
  border-inline-start-width: theme("borderWidth.0");
  @apply order-5;
}

.number-button-item {
  max-block-size: 50%;
  min-block-size: 50%;
  pointer-events: initial;
  @apply bg-foreground-1
    transition-default
    m-0
    box-border
    flex
    cursor-pointer
    items-center
    self-center
    border
    border-solid
    py-0
    px-2;
  border-color: var(--calcite-input-border-color, var(--calcite-color-border-input));
  background-color: var(--calcite-input-actions-background-color, var(--calcite-color-foreground-1));

  border-inline-start-width: theme("borderWidth.0");
  & calcite-icon {
    @apply transition-default pointer-events-none;
    color: var(--calcite-input-actions-icon-color, var(--calcite-color-text-3));
  }

  &:hover {
    background-color: var(--calcite-input-actions-background-color-hover, var(--calcite-color-foreground-2));
    calcite-icon {
      color: var(--calcite-input-actions-icon-color-hover, var(--calcite-color-text-1));
    }
  }
  &:active {
    background-color: var(--calcite-input-actions-background-color-press, var(--calcite-color-foreground-3));
    calcite-icon {
      color: var(--calcite-input-actions-icon-color-press, var(--calcite-color-text-1));
    }
  }
  &:disabled {
    @apply pointer-events-none;
  }
}

.wrapper {
  @apply relative
    flex
    flex-row
    items-center;
  border-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
  box-shadow: var(--calcite-input-shadow, var(--calcite-shadow-none));
}

input[type="date"]::-webkit-input-placeholder {
  visibility: hidden !important;
}

:host([type="color"]) input {
  @apply p-1;
}

// file input
:host([type="file"]) input {
  @apply bg-foreground-1
    cursor-pointer
    border
    border-dashed
    text-center;
  border-color: var(--calcite-input-border-color, var(--calcite-color-border-input));
  block-size: initial;
}

:host([type="file"][scale="s"]) input {
  @apply py-px px-2;
}

:host([type="file"][scale="m"]) input {
  @apply py-1 px-3;
}

:host([type="file"][scale="l"]) input {
  @apply py-2 px-4;
}

:host(.no-bottom-border) input {
  @apply border-b-0;
}

:host(.border-top-color-one) input {
  @apply border-t-color-1;
}

// input needed for higher specificity of these overrides
input {
  &.inline-child {
    @apply transition-default bg-transparent;
    .editing-enabled {
      background-color: inherit;
    }
  }

  &.inline-child:not(.editing-enabled) {
    @apply border-color-transparent
      flex
      cursor-pointer text-ellipsis;
    padding-inline-start: 0;
  }
}

@include form-validation-message();
@include hidden-form-input();
@include base-component();