@logo-elements/logo-elements-styles/mixins/input-field-shared.js

Logo Elements Design System is a design system library for modern web applications which gives your web apps Logo Applications look and feel, used by Logo Elements

/**
 * @license
 * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
 * Any reproduction of this material must contain this notice.
 */
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '../color.js';
import '../font-icons.js';
import '../sizing.js';
import '../spacing.js';
import '../style.js';
import '../typography.js';
import { fieldButton } from './field-button.js';
import { helper } from './helper.js';
import { requiredField } from './required-field.js';

const inputField = css`
  :host {
    --leds-text-field-size: var(--leds-size-m);
    color: var(--leds-body-text-color);
    font-size: var(--leds-font-size-m);
    font-family: var(--leds-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    padding: var(--leds-space-xs) 0;
  }

  :host::before {
    height: var(--leds-text-field-size);
    box-sizing: border-box;
    display: inline-block;
    align-items: center;
  }
  
  :host [part='label'] {
    font-weight: 600;
  }

  :host([focused]:not([readonly])) [part='label'] {
    color: var(--leds-primary-text-color);
  }

  :host([focused]) [part='input-field'] ::slotted(:is(input, textarea)) {
    -webkit-mask-image: none;
    mask-image: none;
  }

  ::slotted(:is(input, textarea):placeholder-shown) {
    color: var(--leds-contrast-50pct);
  }

  /* Hover */
  :host(:hover:not([readonly]):not([focused])) [part='label'] {
    color: var(--leds-body-text-color);
  }

  :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
    opacity: 0.1;
  }

  /* Touch device adjustment */
  @media (pointer: coarse) {
    :host(:hover:not([readonly]):not([focused])) [part='label'] {
      color: var(--leds-secondary-text-color);
    }

    :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
      opacity: 0;
    }

    :host(:active:not([readonly]):not([focused])) [part='input-field']::after {
      opacity: 0.2;
    }
  }

  /* Trigger when not focusing using the keyboard */
  :host([focused]:not([focus-ring]):not([readonly])) [part='input-field']::after {
    transform: scaleX(0);
    transition-duration: 0.15s, 1s;
  }

  /* Focus-ring */
  :host([focus-ring]) [part='input-field'] {
    box-shadow: 0 0 0 2px var(--leds-primary-color-50pct);
  }

  /* Read-only and disabled */
  :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
    opacity: 0;
  }

  /* Disabled style */
  :host([disabled]) {
    pointer-events: none;
  }

  :host([disabled]) [part='label'],
  :host([disabled]) [part='input-field'] ::slotted(*) {
    color: var(--leds-disabled-text-color);
    -webkit-text-fill-color: var(--leds-disabled-text-color);
  }

  /* Invalid style */
  :host([invalid][focus-ring]) [part='input-field'] {
    box-shadow: 0 0 0 2px var(--leds-error-color-50pct);
  }

  :host([input-prevented]) [part='input-field'] {
    animation: shake 0.15s infinite;
  }

  @keyframes shake {
    25% {
      transform: translateX(4px);
    }
    75% {
      transform: translateX(-4px);
    }
  }

  /* Small theme */
  :host([theme~='small']) {
    font-size: var(--leds-font-size-s);
    --leds-text-field-size: var(--leds-size-s);
  }

  :host([theme~='small'][has-label]) [part='label'] {
    font-size: var(--leds-font-size-xs);
  }

  :host([theme~='small'][has-label]) [part='error-message'] {
    font-size: var(--leds-font-size-xxs);
  }

  /* Slotted content */
  [part='input-field'] ::slotted(:not(iron-icon):not(vaadin-icon):not(input):not(textarea)) {
    color: var(--leds-secondary-text-color);
    font-weight: 400;
  }

  [part='clear-button']::before {
    content: var(--leds-icons-cross);
  }
`;

const inputFieldShared = [requiredField, fieldButton, helper, inputField];

registerStyles('', inputFieldShared, {
  moduleId: 'leds-input-field-shared-styles'
});

export { inputField, inputFieldShared };