@telekom/scale-components/dist/collection/components/text-field/text-field.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

scale-text-field {
  --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
  --radius: var(--telekom-radius-standard);
  --border: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-ui-border-standard);
  --border-error: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-danger-standard);
  --border-success: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-success-standard);
  --border-warning: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-warning-standard);
  --border-color-hover: var(--telekom-color-ui-border-hovered);
  --border-color-focus: var(--telekom-color-ui-border-hovered);
  --border-color-disabled: var(--telekom-color-ui-border-disabled);
  --background-color-hover: var(--telekom-color-ui-state-fill-hovered);
  --background-color-disabled: none;
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  --height: 44px;
  --spacing-x: var(--telekom-spacing-composition-space-05);
  --color-disabled: var(--telekom-color-text-and-icon-disabled);
  --background-disabled: none;
  --border-color-readonly: var(--telekom-color-ui-border-disabled);
  --background-readonly: var(--telekom-color-ui-disabled);

  /* meta */
  --font-weight-meta: var(--telekom-line-weight-bold);
  --font-size-meta: var(--telekom-typography-font-size-small);
  --line-height-meta: var(--telekom-typography-line-spacing-standard);
  --spacing-y-meta: var(--telekom-spacing-composition-space-03);
  --color-meta: var(--telekom-color-text-and-icon-standard);
  --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);

  /* control */
  /*
    18px 32px 4px 12px
    (subtracting 1px from border)
  */
  --spacing-control: 1.125rem
    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem
    calc(0.75rem - var(--telekom-spacing-composition-space-01));
  --transition-control: var(--transition);
  --background-control: var(--telekom-color-ui-state-fill-standard);
  --margin-bottom-control: var(--telekom-spacing-composition-space-03);

  /* counter */
  --transition-counter: var(--transition);
  --color-counter-error: var(--color-meta-error);

  /* helper-text */
  --font-size-helper-text: var(--telekom-typography-font-size-small);
  --line-height-helper-text: 1.35;
  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);
  --color-helper-text: var(
    --telekom-color-text-and-icon-functional-informational
  );
  --color-helper-text-error: var(--color-meta-error);
  --color-helper-text-success: var(
    --telekom-color-text-and-icon-functional-success
  );
  --color-helper-text-warning: var(
    --telekom-color-text-and-icon-functional-warning
  );
  --color-helper-text-neutral: var(--telekom-color-text-and-icon-additional);
  --helper-text-icon-size: 11px;

  /* placeholder */
  --transition-placeholder: var(--transition);
  --color-placeholder: var(--telekom-color-text-and-icon-additional);

  /* label */
  --color-label: var(--telekom-color-text-and-icon-additional);
  --color-label-readonly: var(--telekom-color-text-and-icon-standard);
  --z-index-label: var(--scl-z-index-10);
  --transition-label: var(--transition);
}

.text-field {
  position: relative;
}

.text-field .text-field__control {
  width: 100%;
  height: var(--height);
  margin: 0;
  display: flex;
  outline: none;
  padding: var(--spacing-control);
  z-index: 1;
  box-sizing: border-box;
  transition: var(--transition-control);
  font: var(--telekom-text-style-body);
  border-radius: var(--radius);
  border: var(--border);
  background-color: var(--background-control);
  color: var(--color-meta);
}

.text-field--hide-label .text-field__control {
  padding: 5px var(--telekom-spacing-composition-space-12) 5px
    calc(var(--spacing-x) - 1px);
}

.text-field--hide-label .text-field__label {
  visibility: hidden;
}

.text-field.text-field--helper-text .text-field__control {
  margin-bottom: var(--margin-bottom-control);
}
.text-field .text-field__counter {
  display: flex;
  transition: var(--transition-counter);
  margin-left: auto;
  justify-content: flex-end;
  font: var(--telekom-text-style-small);
  color: var(--telekom-color-text-and-icon-standard);
}
.text-field scale-helper-text {
  --color-informational: var(--color-helper-text);
  --color-warning: var(--color-helper-text-warning);
  --color-danger: var(--color-helper-text-error);
  --color-success: var(--color-helper-text-success);
  --color-neutral: var(--color-helper-text-neutral);
  --font-size: var(--font-size-helper-text);
  --font-weight: var(--font-weight-helper-text);
  --line-height: var(--line-height-helper-text);
  --icon-size-helper-text: var(--helper-text-icon-size);
  font-weight: var(--telekom-typography-font-weight-bold);
  display: flex;
}

.text-field .text-field__meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-y-meta);
  color: var(--color-meta);
}

.text-field:not(.text-field--disabled):not(.text-field--readonly)
  .text-field__control:hover {
  border-color: var(--border-color-hover);
  background-color: var(--background-color-hover);
}

.text-field:not(.text-field--disabled):not(.text-field--readonly)
  .text-field__control:focus {
  border-color: var(--border-color-focus);
  outline: var(--focus-outline);
  outline-offset: 1px;
}

.text-field:not(.text-field--disabled) .text-field__control:focus::placeholder {
  color: var(--color-placeholder);
}

.text-field .text-field__control::placeholder,
.text-field ::placeholder {
  color: transparent;
  transition: var(--transition-placeholder);
}

.text-field__label {
  top: 0;
  left: 0;
  color: var(--color-label);
  display: flex;
  z-index: var(--z-index-label);
  position: absolute;
  transition: var(--transition-label);
  pointer-events: none;
  font: var(--telekom-text-style-ui);
  transform: translate(var(--spacing-x), 0.875rem);
}
.text-field--has-focus:not(.text-field--readonly) .text-field__label,
.animated .text-field__label {
  font: var(--telekom-text-style-small-bold);
  transform: translate(
    var(--spacing-x),
    calc(0.25rem + var(--telekom-spacing-composition-space-01))
  );
}
.text-field--variant-danger .text-field__control {
  border: var(--border-error);
}
.text-field--variant-success .text-field__control {
  border: var(--border-success);
}
.text-field--variant-warning .text-field__control {
  border: var(--border-warning);
}

.text-field--variant-danger:not(.text-field--disabled):not(.text-field--readonly)
  .text-field__control:hover,
.text-field--variant-danger:not(.text-field--disabled):not(.text-field--readonly)
  .text-field__control:focus {
  border-color: var(--telekom-color-functional-danger-hovered);
}

.text-field--variant-success:not(.text-field--disabled):not(.text-field--readonly)
  .text-field__control:hover,
.text-field--variant-success:not(.text-field--disabled):not(.text-field--readonly)
  .text-field__control:focus {
  border-color: var(--telekom-color-functional-success-hovered);
}

.text-field--variant-warning:not(.text-field--disabled):not(.text-field--readonly)
  .text-field__control:hover,
.text-field--variant-warning:not(.text-field--disabled):not(.text-field--readonly)
  .text-field__control:focus {
  border-color: var(--telekom-color-functional-warning-hovered);
}

.text-field--variant-danger .text-field__helper-text {
  color: var(--color-helper-text-error);
}
.text-field--variant-danger .text-field__counter {
  color: var(--color-counter-error);
}

.text-field--variant-success .text-field__helper-text {
  color: var(--color-helper-text-success);
}
.text-field--variant-success .text-field__counter {
  color: var(--telekom-color-text-and-icon-functional-success);
}

.text-field--variant-warning .text-field__helper-text {
  color: var(--color-helper-text-warning);
}
.text-field--variant-warning .text-field__counter {
  color: var(--telekom-color-text-and-icon-functional-warning);
}
.text-field--transparent .text-field__control {
  background-color: transparent;
}
.text-field--readonly input,
.text-field--readonly .text-field__control {
  color: var(--color-label-readonly);
  border: none;
  background: var(--background-readonly);
}

.text-field--readonly .text-field__control:focus {
  outline: var(--focus-outline);
  outline-offset: 1px;
}

.text-field--disabled label,
.text-field--disabled .text-field__label,
.text-field--disabled input,
.text-field--disabled .text-field__control,
.text-field--disabled .text-field__meta,
.text-field--disabled .text-field__counter,
.text-field--disabled .text-field__helper-text {
  cursor: not-allowed;
  border-color: var(--border-color-disabled);
  background-color: var(--background-color-disabled);
  color: var(--color-disabled);
  background: transparent;
}
.text-field--disabled.animated label.text-field__label {
  color: var(--color-disabled);
}

/*Hide Arrows From Input Number*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

/* Chrome, Edge */
input[type='datetime-local']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator,
input[type='date']::-webkit-calendar-picker-indicator,
input[type='week']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 12px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  color-scheme: dark;
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .text-field--readonly input,
  .text-field--readonly .text-field__control {
    border: 1px solid;
  }
}