@telekom/scale-components/dist/collection/components/textarea/textarea.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-textarea {
  --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
  --radius: var(--telekom-radius-standard);
  --border: var(--telekom-line-weight-standard) solid
    var(--telekom-color-ui-border-standard);
  --border-error: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-danger-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);
  --spacing-x-control: var(--telekom-spacing-composition-space-05);
  --spacing-bottom-control: var(--telekom-spacing-composition-space-05);
  --spacing-top-control: calc(
    1.125rem - var(--telekom-spacing-composition-space-01)
  );
  --color-disabled: var(--telekom-color-text-and-icon-disabled);
  --background-disabled: transparent;
  --border-color-readonly: transparent;
  --background-readonly: var(--telekom-color-ui-disabled);

  /*meta*/
  --font-weight-meta: var(--telekom-typography-font-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: 0 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);

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

  /*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);
}

.textarea {
  position: relative;
  display: flex;
  flex-direction: column;
}
.textarea__wrapper {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: var(--border);
}

.textarea__wrapper .textarea__control {
  margin: 0;
  width: 100%;
  resize: vertical;
  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: none;
  background-color: transparent;
  color: var(--color-meta);
  margin-top: var(--spacing-top-control);
}

.textarea .textarea__counter {
  display: flex;
  flex-shrink: 0;
  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);
}
.textarea .textarea__meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-y-meta);
  color: var(--color-meta);
}

.textarea:not(.textarea--disabled):not(.textarea--readonly)
  .textarea__wrapper:hover {
  border-color: var(--border-color-hover);
  background-color: var(--background-color-hover);
}

.textarea:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus
  .textarea__wrapper {
  border-color: var(--border-color-focus);
  outline: var(--focus-outline);
  outline-offset: 1px;
}

.textarea:not(.textarea--disabled) .textarea__control:focus::placeholder {
  color: var(--color-placeholder);
}

.textarea .textarea__control::placeholder,
.textarea ::placeholder {
  color: transparent;
  transition: var(--transition-placeholder);
}

.textarea__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-control), 0.875rem);
}
.textarea--has-focus .textarea__label,
.animated .textarea__label {
  font: var(--telekom-text-style-small-bold);
  transform: translate(
    var(--spacing-x-control),
    calc(0.25rem + var(--telekom-spacing-composition-space-01))
  );
}
.textarea--status-error .textarea__wrapper {
  border: var(--border-error);
}

.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly)
  .textarea__wrapper:hover,
.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus
  .textarea__wrapper {
  border-color: var(--telekom-color-functional-danger-hovered);
}

.textarea--status-error .textarea__counter {
  color: var(--color-counter-error);
}

.textarea--transparent .textarea__control {
  background-color: transparent;
}

.textarea--readonly .textarea__wrapper {
  border-color: var(--border-color-readonly);
  background: var(--background-readonly);
}

.textarea--readonly.textarea--has-focus .textarea__wrapper {
  outline: var(--focus-outline);
  outline-offset: 1px;
}

.textarea--readonly textarea,
.textarea--readonly .textarea__wrapper .textarea__control {
  color: var(--color-label-readonly);
}

.textarea--disabled label,
.textarea--disabled .textarea__label,
.textarea--disabled textarea,
.textarea--disabled .textarea__wrapper,
.textarea--disabled .textarea__control,
.textarea--disabled .textarea__meta {
  cursor: not-allowed;
  color: var(--color-disabled);
}

.textarea--disabled .textarea__wrapper {
  border-color: var(--border-color-disabled);
  background-color: var(--background-color-disabled);
}