@telekom/scale-components/dist/collection/components/input/input.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/.
 */

.input {
  position: relative;
}
.input .input__helper-text,
.input .input__counter {
  font-weight: var(--telekom-typography-font-weight-bold);
}
.input .input__input,
.input .input__select {
  width: 100%;
  height: var(--telekom-spacing-composition-space-14);
  margin: 0;
  display: flex;
  outline: none;
  padding: var(--telekom-spacing-composition-space-05)
    var(--telekom-spacing-composition-space-05);
  z-index: 1;
  box-sizing: border-box;
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  font-family: inherit;
  font-size: var(--telekom-typography-font-size-body);
  border-radius: var(--telekom-radius-standard);
  border: var(--telekom-line-weight-standard) solid
    var(--telekom-color-ui-border-standard);
}
.input .input__textarea {
  width: 100%;
  margin: 0;
  resize: vertical;
  display: flex;
  outline: none;
  padding: var(--telekom-spacing-composition-space-05)
    var(--telekom-spacing-composition-space-05);
  z-index: 1;
  box-sizing: border-box;
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  font-family: inherit;
  font-size: var(--telekom-typography-font-size-body);
  border-radius: var(--telekom-radius-standard);
  border: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-ui-border-standard);
}
.input .input__select {
  appearance: none;
  -webkit-appearance: none;
}
.input .input__select-wrapper {
  position: relative;
}
.input .input__counter {
  display: flex;
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  margin-left: auto;
  padding-right: var(--telekom-spacing-composition-space-05);
  justify-content: flex-end;
  font-size: var(--telekom-typography-font-size-small);
  line-height: var(--telekom-typography-line-spacing-standard);
  color: var(--telekom-color-text-and-icon-standard);
}
.input .input__helper-text {
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  padding-left: var(--telekom-spacing-composition-space-05);
  font-size: var(--telekom-typography-font-size-small);
  line-height: var(--telekom-typography-line-spacing-standard);
  color: var(--telekom-color-text-and-icon-functional-informational);
}
.input .input__meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--telekom-spacing-composition-space-03);
}
.input:not(.input--disabled):hover .input__select-wrapper {
  --icon-color: var(--telekom-color-text-and-icon-primary-hovered, #f90984);
}
.input:not(.input--disabled):active .input__select-wrapper {
  --icon-color: var(--telekom-color-text-and-icon-primary-pressed, #cb0068);
}
.input:not(.input--disabled) .input__input:hover,
.input:not(.input--disabled) .input__input:focus,
.input:not(.input--disabled) .input__select:hover,
.input:not(.input--disabled) .input__select:focus,
.input:not(.input--disabled) .input__textarea:hover,
.input:not(.input--disabled) .input__textarea:focus {
  border-color: var(--telekom-color-ui-border-hovered);
}
.input:not(.input--disabled) .input__input:focus,
.input:not(.input--disabled) .input__select:focus,
.input:not(.input--disabled) .input__textarea:focus {
  box-shadow: 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--telekom-color-functional-focus-standard);
}
.input:not(.input--disabled) .input__input:focus::placeholder,
.input:not(.input--disabled) .input__select:focus::placeholder,
.input:not(.input--disabled) .input__textarea:focus::placeholder {
  color: var(--telekom-color-text-and-icon-additional);
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
}
.input .input__select-wrapper scale-icon {
  top: 50%;
  right: var(--telekom-spacing-composition-space-05);
  position: absolute;
  transform: translateY(-50%);
  pointer-events: none;
}
.input .input__input::placeholder,
.input .input__select::placeholder,
.input .input__textarea::placeholder,
.input ::placeholder {
  color: transparent;
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
}
.input--variant-static .input__label {
  color: var(--telekom-color-text-and-icon-additional);
  display: flex;
  font-weight: var(--telekom-typography-font-weight-medium);
}
.input--variant-animated .input__input,
.input--variant-animated .input__select {
  padding: var(--telekom-spacing-composition-space-05)
    var(--telekom-spacing-composition-space-05) 0
    calc(var(--telekom-spacing-composition-space-05) - 1px);
}
.input--variant-animated .input__textarea {
  padding-top: var(--telekom-spacing-composition-space-08);
}
.input--variant-animated .input__label {
  top: 0;
  left: 0;
  color: var(--telekom-color-text-and-icon-additional);
  display: flex;
  z-index: var(--scl-z-index-10);
  position: absolute;
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  pointer-events: none;
  font-size: var(--telekom-typography-font-size-body);
  /* previously: transform: translate(13px, calc((48px - 1rem) / 2)); */
  transform: translate(
    var(--telekom-spacing-composition-space-05),
    calc(
      (
          var(--telekom-spacing-composition-space-14) -
            var(--telekom-typography-font-size-body)
        ) / 2
    )
  );
  font-weight: var(--telekom-typography-font-weight-medium);
}
.input--variant-animated.input--has-focus .input__label,
.input--variant-animated.animated .input__label {
  color: var(--telekom-color-text-and-icon-additional);
  transform: translate(
    var(--telekom-spacing-composition-space-05),
    var(--telekom-spacing-composition-space-04)
  );
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  font-size: var(--telekom-typography-font-size-badge);
  font-weight: var(--telekom-typography-font-weight-bold);
}
.input--status-error .input__input,
.input--status-error .input__textarea,
.input--status-error .input__select {
  border: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-danger-standard);
}
.input--status-error .input__helper-text {
  color: var(--telekom-color-text-and-icon-functional-danger);
}
.input--status-error .input__counter {
  color: var(--telekom-color-text-and-icon-functional-danger);
}
.input--size-small .input__input {
  height: var(--telekom-spacing-composition-space-12);
}
.input--size-small .input__select {
  height: var(--telekom-spacing-composition-space-12);
}
.input--size-small .input__label {
  top: 0;
  left: 0;
  color: var(--telekom-color-text-and-icon-additional);
  display: flex;
  z-index: var(--scl-z-index-10);
  position: absolute;
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  pointer-events: none;
  font-size: var(--telekom-typography-font-size-body);
  /* previously: transform: translate(
    13px,
    calc((var(--input-small-height, 40px) - 1rem) / 2)
  ); */
  transform: translate(
    var(--telekom-spacing-composition-space-05),
    calc(
      (
          var(--telekom-spacing-composition-space-12) -
            var(--telekom-typography-font-size-body)
        ) / 2
    )
  );
  font-weight: var(--telekom-typography-font-weight-medium);
}
.input--size-small.input--has-focus .input__label,
.input--size-small.animated .input__label {
  color: var(--telekom-color-text-and-icon-additional);
  transform: translate(
    var(--telekom-spacing-composition-space-05),
    var(--telekom-spacing-composition-space-03)
  );
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  font-size: var(--telekom-typography-font-size-badge);
  font-weight: var(--telekom-typography-font-weight-medium);
}
.input--transparent .input__input,
.input--transparent .input__textarea,
.input--transparent.input--type-radio .input__radio,
.input--transparent .input__select {
  background-color: transparent;
}
.input--type-checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.input--type-checkbox input {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}
.input--type-checkbox .input__meta {
  width: 100%;
}
.input--type-checkbox .input__helper-text {
  padding-left: var(--telekom-spacing-composition-space-10);
}
.input--type-checkbox label {
  color: var(--telekom-color-text-and-icon-standard);
  font-weight: var(--telekom-typography-font-weight-medium);
}
.input--type-checkbox .input__checkbox-container {
  width: var(--telekom-spacing-composition-space-06);
  height: var(--telekom-spacing-composition-space-06);
  display: flex;
  position: relative;
  align-items: center;
  margin-right: var(--telekom-spacing-composition-space-04);
}
.input--type-checkbox input:disabled ~ label {
  color: var(--telekom-color-ui-disabled);
}
.input--type-checkbox input:checked:disabled ~ label {
  color: var(--telekom-color-ui-disabled);
}
.input--type-checkbox
  input:checked:disabled
  ~ .input__checkbox-container
  .input__checkbox-placeholder {
  background: var(--telekom-color-ui-disabled);
}
/* TODO this could removed once scale-icon is removed */
.input--type-checkbox
  input:checked:disabled
  ~ .input__checkbox-container
  scale-icon {
  --icon-color: var(--telekom-color-text-and-icon-disabled);
}
.input--type-checkbox
  input:checked:not([disabled]):hover
  ~ .input__checkbox-container
  .input__checkbox-placeholder,
.input--type-checkbox
  input:checked:not([disabled])
  ~ .input__checkbox-container:hover
  .input__checkbox-placeholder {
  box-shadow: none;
  border-color: var(--telekom-color-primary-hovered, #f90984);
  background: var(--telekom-color-primary-hovered, #f90984);
}
.input--type-checkbox
  input:checked:not([disabled]):active
  ~ .input__checkbox-container
  .input__checkbox-placeholder,
.input--type-checkbox
  input:checked:not([disabled])
  ~ .input__checkbox-container:active
  .input__checkbox-placeholder {
  border-color: var(--telekom-color-primary-pressed, #cb0068);
  background: var(--telekom-color-primary-pressed, #cb0068);
}
/* TODO this could removed once scale-icon is removed */
.input--type-checkbox
  input:checked:not([disabled]):active
  ~ .input__checkbox-container
  scale-icon,
.input--type-checkbox
  input:checked:not([disabled])
  ~ .input__checkbox-container:active
  scale-icon {
  --icon-color: var(--telekom-color-text-and-icon-standard);
}
.input--type-checkbox
  input:checked:not([disabled])
  ~ .input__checkbox-container
  .input__checkbox-placeholder {
  border: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-primary-standard, #e20074);
  background: var(--telekom-color-primary-standard, #e20074);
}
.input--type-checkbox
  input:disabled
  ~ .input__checkbox-container
  .input__checkbox-placeholder {
  border-color: var(--telekom-color-ui-disabled);
}
.input--type-checkbox
  input:focus
  ~ .input__checkbox-container
  .input__checkbox-placeholder {
  box-shadow: 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--telekom-color-functional-focus-standard);
}
.input--type-checkbox
  input:not([disabled]):hover
  ~ .input__checkbox-container
  .input__checkbox-placeholder,
.input--type-checkbox
  input:not([disabled])
  ~ .input__checkbox-container:hover
  .input__checkbox-placeholder {
  box-shadow: none;
  border-color: var(--telekom-color-primary-hovered, #f90984);
}
.input--type-checkbox
  input:not([disabled]):hover
  ~ .input__checkbox-container
  ~ label,
.input--type-checkbox
  input:not([disabled])
  ~ .input__checkbox-container:hover
  ~ label {
  color: var(--telekom-color-text-and-icon-primary-hovered, #f90984);
}
.input--type-checkbox
  input:not([disabled]):active
  ~ .input__checkbox-container
  .input__checkbox-placeholder,
.input--type-checkbox
  input:not([disabled])
  ~ .input__checkbox-container:active
  .input__checkbox-placeholder {
  border-color: var(--telekom-color-primary-pressed, #cb0068);
  background: var(--telekom-color-primary-pressed, #cb0068);
}
/* TODO this could removed once scale-icon is removed */
.input--type-checkbox
  input:not([disabled]):active
  ~ .input__checkbox-container
  scale-icon,
.input--type-checkbox
  input:not([disabled])
  ~ .input__checkbox-container:active
  scale-icon {
  --icon-color: var(--telekom-color-text-and-icon-primary-pressed, #cb0068);
}
.input--type-checkbox
  input:not([disabled]):active
  ~ .input__checkbox-container
  ~ label,
.input--type-checkbox
  input:not([disabled])
  ~ .input__checkbox-container:active
  ~ label {
  color: var(--telekom-color-text-and-icon-primary-pressed, #cb0068);
}
.input--type-checkbox .input__checkbox-container .input__checkbox-placeholder {
  width: var(--telekom-spacing-composition-space-06);
  height: var(--telekom-spacing-composition-space-06);
  margin: 0;
  box-sizing: border-box;
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  border-radius: var(--telekom-radius-standard);
  border: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-text-and-icon-standard);
  background: var(--telekom-color-background-surface);
}
.input--type-checkbox .input__checkbox-container scale-icon {
  top: calc(0.5 * var(--telekom-spacing-composition-space-05));
  left: calc(0.5 * var(--telekom-spacing-composition-space-05));
  width: var(--telekom-spacing-composition-space-05);
  height: var(--telekom-spacing-composition-space-05);
  position: absolute;
  user-select: none;
  /* TODO this could removed once scale-icon is removed */
  --icon-color: var(--telekom-color-text-and-icon-inverted-standard);
}
.input--type-checkbox .input__checkbox-container ~ label {
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
}
.input--type-checkbox.input--status-error
  .input__checkbox-container
  .input__checkbox-placeholder {
  border: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-danger-standard);
}
.input--type-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.input--type-radio .input__meta {
  width: 100%;
}
.input--type-radio .input__helper-text {
  margin-top: var(--telekom-spacing-composition-space-03);
  padding-left: var(--telekom-spacing-composition-space-08);
}
.input--type-radio label {
  color: var(--telekom-color-text-and-icon-standard);
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  font-weight: var(--telekom-typography-font-weight-medium);
}
.input--type-radio input {
  width: var(--telekom-spacing-composition-space-06);
  height: var(--telekom-spacing-composition-space-06);
  transition: all var(--telekom-motion-duration-transition)
    cubic-bezier(var(--telekom-motion-easing-standard));
  border-radius: var(--telekom-radius-circle);
  -webkit-appearance: none;
  background-color: #fff;
  border: var(--telekom-line-weight-standard) solid
    var(--telekom-color-ui-border-standard);
  margin: 0 var(--telekom-spacing-composition-space-04) 0 0;
}
.input--type-radio input:focus {
  outline: none;
  box-shadow: 0 0 0 var(--telekom-line-weight-highlight)
    var(--telekom-color-functional-focus-standard);
}
.input--type-radio:hover input:not(:checked):not([disabled]) {
  box-shadow: none;
  border-color: var(--telekom-color-text-and-icon-primary-hovered);
}
.input--type-radio:hover input:not(:checked):not([disabled]) ~ label {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}
.input--type-radio input:active {
  border: var(--telekom-spacing-composition-space-04) solid
    var(--telekom-color-primary-pressed);
}
.input--type-radio input:not(:checked):not([disabled]):active ~ label {
  color: var(--telekom-color-text-and-icon-primary-pressed);
}
.input--type-radio input:disabled {
  border: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-ui-border-disabled);
}
.input--type-radio input:disabled ~ label {
  color: var(--telekom-color-text-and-icon-disabled);
}
.input--type-radio.input--status-error input {
  border: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-danger-standard);
}
.input--type-radio input:checked {
  border: calc(0.5 * var(--telekom-spacing-composition-space-05)) solid
    var(--telekom-color-primary-standard);
}
.input--type-radio input:checked:active {
  border: calc(0.5 * var(--telekom-spacing-composition-space-05)) solid
    var(--telekom-color-primary-pressed, #cb0068);
}
.input--type-radio input:checked:disabled {
  background: var(--telekom-color-ui-disabled);
  border: calc(0.5 * var(--telekom-spacing-composition-space-05)) solid
    var(--telekom-color-ui-border-disabled);
}
.input--type-radio input:checked:disabled ~ label {
  color: var(--telekom-color-text-and-icon-disabled);
}
.input__textarea-label-safety-background {
  top: var(--telekom-spacing-composition-space-02);
  left: var(--telekom-spacing-composition-space-02);
  right: var(--telekom-spacing-composition-space-02);
  position: absolute;
  pointer-events: none;
  border-radius: var(--telekom-radius-standard);
  height: var(--telekom-spacing-composition-space-08);
  background-color: var(--telekom-color-background-surface, #ffffff);
}
.input--disabled .input__textarea-label-safety-background {
  background-color: transparent;
}
.input--disabled label,
.input--disabled .input__label,
.input--disabled input,
.input--disabled .input__input,
.input--disabled .input__checkbox-container,
.input--disabled .input__radio,
.input--disabled .input__select,
.input--disabled .input__textarea,
.input--disabled .input__helper-text {
  cursor: not-allowed;
  border-color: var(--telekom-color-ui-disabled);
  color: var(--telekom-color-text-and-icon-disabled);
  background: var(--telekom-color-ui-disabled);
}
/* TODO this could removed once scale-icon is removed */
.input--disabled .input__select-wrapper {
  --icon-color: var(--telekom-color-text-and-icon-disabled);
}
.input--disabled.animated label.input__label {
  color: var(--telekom-color-text-and-icon-disabled);
}