@vaadin/vaadin-lumo-styles/src/components/input-container.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2017 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_input-container {
  :host {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    --_border-radius: var(--vaadin-input-field-border-radius, 0);
    --_input-border-width: var(--vaadin-input-field-border-width, 0px);
    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
    background: var(--_background);
    padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);
    font-weight: var(--vaadin-input-field-value-font-weight, 500);
    line-height: 1;
    position: relative;
    cursor: text;
    box-sizing: border-box;
    border-radius:
    /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#syntax */
      var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
      var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
      var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius))
      var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius));
    /* Fallback */
    --_input-container-radius: var(--vaadin-input-field-border-radius, var(--lumo-border-radius-m));
    --_input-height: var(--lumo-text-field-size, var(--lumo-size-m));
    /* Default values */
    --_background: var(--vaadin-input-field-background, var(--lumo-contrast-10pct));
    --_hover-highlight: var(--vaadin-input-field-hover-highlight, var(--lumo-contrast-50pct));
    --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
    --_icon-color: var(--vaadin-input-field-icon-color, var(--lumo-contrast-60pct));
    --_icon-size: var(--vaadin-input-field-icon-size, var(--lumo-icon-size-m));
    --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
    --_invalid-hover-highlight: var(--vaadin-input-field-invalid-hover-highlight, var(--lumo-error-color-50pct));
    --_disabled-background: var(--vaadin-input-field-disabled-background, var(--lumo-contrast-5pct));
    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
  }

  :host([dir='rtl']) {
    border-radius:
    /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
      var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
      var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
      var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius))
      var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius));
  }

  /* Used for hover and activation effects */
  :host::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: var(--_hover-highlight);
    opacity: 0;
    transition:
      transform 0.15s,
      opacity 0.2s;
    transform-origin: 100% 0;
  }

  :host([hidden]) {
    display: none !important;
  }

  /* Reset the native input styles */
  ::slotted(input) {
    appearance: none;
    flex: auto;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    min-width: 0;
    font: inherit;
    line-height: normal;
    color: inherit;
    background-color: transparent;
    /* Disable default invalid style in Firefox */
    box-shadow: none;
  }

  ::slotted(*) {
    flex: none;
  }

  ::slotted(:is(input, textarea))::placeholder {
    /* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */
    /* because ::slotted(...)::placeholder does not work in Safari. */
    font: inherit;
    color: inherit;
    /* Override default opacity in Firefox */
    opacity: 1;
  }

  ::slotted(:not([slot$='fix'])) {
    cursor: inherit;
    min-height: var(--vaadin-input-field-height, var(--_input-height));
    padding: 0 0.25em;
    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
    mask-image: var(--_lumo-text-field-overflow-mask-image);
  }

  /* Read-only */
  :host([readonly]) {
    color: var(--lumo-secondary-text-color);
    background-color: transparent;
    cursor: default;
  }

  :host([readonly])::after {
    background-color: transparent;
    opacity: 1;
    border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-30pct));
  }

  /* Disabled */
  :host([disabled]) {
    background: var(--_disabled-background);
  }

  :host([disabled]) ::slotted(:not([slot$='fix'])) {
    -webkit-text-fill-color: var(--_disabled-value-color);
    color: var(--_disabled-value-color);
  }

  /* Invalid */
  :host([invalid]) {
    background: var(--_invalid-background);
  }

  :host([invalid]:not([readonly]))::after {
    background: var(--_invalid-hover-highlight);
  }

  /* Slotted icons */
  ::slotted(vaadin-icon) {
    color: var(--_icon-color);
    width: var(--_icon-size);
    height: var(--_icon-size);
  }

  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
  ::slotted(vaadin-icon[icon^='vaadin:']) {
    padding: 0.25em;
    box-sizing: border-box !important;
  }

  /* Text align */
  :host([dir='rtl']) ::slotted(:not([slot$='fix'])) {
    --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent, #000 1.25em);
  }

  @-moz-document url-prefix() {
    :host([dir='rtl']) ::slotted(:not([slot$='fix'])) {
      mask-image: var(--_lumo-text-field-overflow-mask-image);
    }
  }

  :host([theme~='align-left']) ::slotted(:not([slot$='fix'])) {
    text-align: start;
    --_lumo-text-field-overflow-mask-image: none;
  }

  :host([theme~='align-center']) ::slotted(:not([slot$='fix'])) {
    text-align: center;
    --_lumo-text-field-overflow-mask-image: none;
  }

  :host([theme~='align-right']) ::slotted(:not([slot$='fix'])) {
    text-align: end;
    --_lumo-text-field-overflow-mask-image: none;
  }

  @-moz-document url-prefix() {
    /* Firefox is smart enough to align overflowing text to right */
    :host([theme~='align-right']) ::slotted(:not([slot$='fix'])) {
      --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
    }
  }

  @-moz-document url-prefix() {
    /* Firefox is smart enough to align overflowing text to right */
    :host([theme~='align-left']) ::slotted(:not([slot$='fix'])) {
      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
    }
  }

  /* RTL specific styles */
  :host([dir='rtl'])::after {
    transform-origin: 0% 0;
  }

  :host([theme~='align-left'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
    --_lumo-text-field-overflow-mask-image: none;
  }

  :host([theme~='align-center'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
    --_lumo-text-field-overflow-mask-image: none;
  }

  :host([theme~='align-right'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
    --_lumo-text-field-overflow-mask-image: none;
  }

  @-moz-document url-prefix() {
    /* Firefox is smart enough to align overflowing text to right */
    :host([theme~='align-right'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
      --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
    }
  }

  @-moz-document url-prefix() {
    /* Firefox is smart enough to align overflowing text to right */
    :host([theme~='align-left'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
    }
  }
}