@scania/tegel/dist/collection/components/text-field/text-field.css

Tegel Design System

.text-field-input-lg {
  all: unset;
  border-radius: 4px 4px 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--tds-text-field-color);
  background-color: var(--tds-text-field-background);
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
}
.text-field-input-lg::placeholder {
  color: var(--tds-text-field-placeholder);
}
.text-field-input-lg:disabled {
  user-select: none;
  pointer-events: none;
  background-color: var(--tds-text-field-background-disabled);
  color: var(--tds-text-field-color-disabled);
}
.text-field-input-lg:disabled::placeholder {
  color: var(--tds-text-field-placeholder-disabled);
}
.text-field-input-lg:disabled ~ .text-field-label-inside {
  color: var(--tds-text-field-label-disabled);
}

.text-field-input-md {
  all: unset;
  border-radius: 4px 4px 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--tds-text-field-color);
  background-color: var(--tds-text-field-background);
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: var(--tds-spacing-element-16);
}
.text-field-input-md::placeholder {
  color: var(--tds-text-field-placeholder);
}
.text-field-input-md:disabled {
  user-select: none;
  pointer-events: none;
  background-color: var(--tds-text-field-background-disabled);
  color: var(--tds-text-field-color-disabled);
}
.text-field-input-md:disabled::placeholder {
  color: var(--tds-text-field-placeholder-disabled);
}
.text-field-input-md:disabled ~ .text-field-label-inside {
  color: var(--tds-text-field-label-disabled);
}

.text-field-input-sm {
  all: unset;
  border-radius: 4px 4px 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--tds-text-field-color);
  background-color: var(--tds-text-field-background);
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: var(--tds-spacing-element-16);
}
.text-field-input-sm::placeholder {
  color: var(--tds-text-field-placeholder);
}
.text-field-input-sm:disabled {
  user-select: none;
  pointer-events: none;
  background-color: var(--tds-text-field-background-disabled);
  color: var(--tds-text-field-color-disabled);
}
.text-field-input-sm:disabled::placeholder {
  color: var(--tds-text-field-placeholder-disabled);
}
.text-field-input-sm:disabled ~ .text-field-label-inside {
  color: var(--tds-text-field-label-disabled);
}

.text-field-container {
  border-radius: 4px 4px 0 0;
  display: flex;
  position: relative;
  height: 56px;
  box-sizing: border-box;
  background-color: var(--tds-text-field-background);
  border-bottom: 1px solid var(--tds-text-field-border-bottom);
  border-top: 1px solid transparent;
  transition: border-bottom-color 200ms ease;
}
.text-field-container:hover {
  border-bottom-color: var(--tds-text-field-border-bottom-hover);
}
.form-text-field-md .text-field-container {
  height: 48px;
}
.form-text-field-sm .text-field-container {
  height: 40px;
}
.text-field-container:focus-within {
  border: 2px solid var(--tds-focus-outline-color);
  margin: 0 -2px;
}

.text-field-input-container {
  position: relative;
  width: 100%;
}

.text-field-data,
.text-field-input {
  color: var(--tds-text-field-data-color);
}

.text-field-label-outside > * {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  display: block;
  margin-bottom: var(--tds-spacing-element-8);
  color: var(--tds-text-field-label-color);
}

.text-field-label-inside {
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  position: absolute;
  pointer-events: none;
  color: var(--tds-text-field-label-inside-color);
  left: 16px;
}

.form-text-field {
  display: block;
  min-width: 208px;
}
.form-text-field-nomin {
  min-width: auto;
}

.form-text-field.text-field-container-label-inside .text-field-input-lg {
  padding-top: var(--tds-spacing-element-24);
  padding-bottom: 15px;
}
.form-text-field.text-field-container-label-inside .text-field-input-lg ~ .text-field-label-inside {
  top: 20px;
}
.form-text-field.text-field-container-label-inside .text-field-input-lg::placeholder {
  color: transparent;
}
.form-text-field.text-field-container-label-inside .text-field-input-lg ::placeholder {
  color: transparent;
}
.form-text-field.text-field-container-label-inside .text-field-input-lg:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--tds-text-field-placeholder);
}
.form-text-field.text-field-container-label-inside .text-field-input-md {
  padding-top: var(--tds-spacing-element-20);
  padding-bottom: 11px;
}
.form-text-field.text-field-container-label-inside .text-field-input-md ~ .text-field-label-inside {
  top: 16px;
}
.form-text-field.text-field-container-label-inside .text-field-input-md::placeholder {
  color: transparent;
}
.form-text-field.text-field-container-label-inside .text-field-input-md ::placeholder {
  color: transparent;
}
.form-text-field.text-field-container-label-inside .text-field-input-md:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--tds-text-field-placeholder);
}
.form-text-field.text-field-container-label-inside .text-field-input-sm {
  padding-top: var(--tds-spacing-element-20);
  padding-bottom: 11px;
}
.form-text-field.text-field-container-label-inside .text-field-input-sm ~ .text-field-label-inside {
  top: 16px;
}
.form-text-field.text-field-container-label-inside .text-field-input-sm::placeholder {
  color: transparent;
}
.form-text-field.text-field-container-label-inside .text-field-input-sm ::placeholder {
  color: transparent;
}
.form-text-field.text-field-container-label-inside .text-field-input-sm:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--tds-text-field-placeholder);
}
.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-sm ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-sm ~ .text-field-label-inside {
  font: var(--tds-detail-07);
  letter-spacing: var(--tds-detail-07-ls);
  transition: 0.1s ease all;
  top: 8px;
}
.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-md ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-md ~ .text-field-label-inside {
  font: var(--tds-detail-07);
  letter-spacing: var(--tds-detail-07-ls);
  transition: 0.1s ease all;
  top: 8px;
}
.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-lg ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-lg ~ .text-field-label-inside {
  font: var(--tds-detail-07);
  letter-spacing: var(--tds-detail-07-ls);
  transition: 0.1s ease all;
  top: 12px;
}

.text-field-helper {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  flex-basis: 100%;
  padding-top: var(--tds-spacing-element-4);
  color: var(--tds-text-field-helper);
}
.text-field-helper .text-field-textcounter {
  margin-left: auto;
}

.form-text-field-disabled .text-field-container {
  cursor: not-allowed;
  border-bottom-color: transparent;
}
.form-text-field-disabled .text-field-slot-wrap-prefix > *,
.form-text-field-disabled .text-field-slot-wrap-suffix > * {
  color: var(--tds-text-field-ps-color-disabled);
}
.form-text-field-disabled .text-field-label-outside > * {
  color: var(--tds-text-field-label-disabled);
}
.form-text-field-disabled .text-field-helper {
  color: var(--tds-text-field-helper-disabled);
}

.text-field-icon__readonly {
  display: none;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tds-text-field-icon-read-only-label-color);
}
.text-field-icon__readonly .tds-tooltip {
  min-width: 150px;
}

.form-text-field-readonly {
  user-select: auto; /* Allow text selection */
  caret-color: transparent; /* Hide blinking cursor */
  cursor: default;
}
.form-text-field-readonly .text-field-container {
  border-bottom-color: var(--tds-text-field-border-bottom-readonly);
}
.form-text-field-readonly .text-field-icon__readonly {
  display: block;
}
.form-text-field-readonly .text-field-icon__readonly:hover ~ .text-field-icon__readonly-label {
  display: block;
}
.form-text-field-readonly .text-field-input {
  background-color: transparent;
}

.form-text-field-readonly:has(.text-field-icon__readonly) .text-field-input {
  padding-right: 54px;
}

.form-text-field-success:not(.form-text-field-readonly) .text-field-container {
  border-bottom-color: var(--tds-text-field-border-bottom-success);
}

.form-text-field-error:not(.form-text-field-readonly) .text-field-helper {
  color: var(--tds-text-field-helper-error);
}
.form-text-field-error:not(.form-text-field-readonly) .text-field-container {
  border-bottom-color: var(--tds-text-field-border-bottom-error);
}

.text-field-helper-error-state {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.text-field-textcounter-disabled {
  color: var(--tds-text-field-textcounter-disabled);
}

.text-field-textcounter {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  color: var(--tds-text-field-textcounter);
  float: right;
}
.text-field-textcounter.text-field-textcounter-disabled {
  color: var(--tds-text-field-textcounter-disabled);
}
.text-field-textcounter.text-field-textcounter-divider {
  color: var(--tds-text-field-textcounter-divider);
}
.text-field-textcounter.text-field-textcounter-divider-disabled {
  color: var(--tds-text-field-textcounter-divider-disabled);
}

.text-field-slot-wrap-prefix,
.text-field-slot-wrap-suffix {
  align-self: center;
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  margin: 0 0 0 14px;
  color: var(--tds-text-field-ps-color);
}
.text-field-slot-wrap-prefix::slotted(:not(tds-icon)),
.text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
  margin: 0 0 0 2px;
}
.text-field-slot-wrap-prefix.text-field-error,
.text-field-slot-wrap-suffix.text-field-error {
  color: var(--tds-text-field-ps-color-error);
}

.text-field-slot-wrap-suffix {
  margin: 0 14px 0 0;
}
.text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
  margin: 0 2px 0 0;
}

.text-field-input-no-arrows {
  appearance: textfield;
}
.text-field-input-no-arrows::-webkit-outer-spin-button, .text-field-input-no-arrows::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}