react-toolbox/components/input/theme.css

@import '../colors.css';
@import '../variables.css';
@import './config.css';

.input {
  padding: var(--input-padding) 0;
  position: relative;

  @apply --reset;

  &.withIcon {
    margin-left: calc(var(--input-icon-size) + var(--input-icon-right-space));
  }
}

.icon {
  color: var(--input-text-label-color);
  display: block;
  font-size: var(--input-icon-font-size) !important;
  height: var(--input-icon-size);
  left: calc(-1 * (var(--input-icon-size) + var(--input-icon-right-space)));
  line-height: var(--input-icon-size) !important;
  position: absolute;
  text-align: center;
  top: var(--input-icon-offset);
  transition: color var(--animation-duration) var(--animation-curve-default);
  width: var(--input-icon-size);
}

.inputElement {
  background-color: var(--input-text-background-color);
  border-bottom: 1px solid var(--input-text-bottom-border-color);
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  color: var(--color-text);
  display: block;
  font-size: var(--input-field-font-size);
  outline: none;
  padding: var(--input-field-padding) 0;
  width: 100%;

  &:focus:not([disabled]):not([readonly]) {
    & ~ .bar::before,
    & ~ .bar::after {
      width: 50%;
    }

    & ~ .label:not(.fixed) {
      color: var(--input-text-highlight-color);
    }

    & ~ .label > .required {
      color: var(--input-text-required-color);
    }

    & ~ .hint {
      display: block;
      opacity: var(--input-hint-opacity);
    }

    & ~ .icon {
      color: var(--input-text-highlight-color);
    }

    &.filled ~ .hint {
      opacity: 0;
    }
  }

  &:focus:not([disabled]):not([readonly]),
  &.filled,
  &[type='date'],
  &[type='time'] {
    & ~ .label:not(.fixed) {
      font-size: var(--input-label-font-size);
      top: var(--input-focus-label-top);
    }
  }

  &.filled ~ .label.fixed,
  &.filled ~ .hint {
    display: none;
  }
}

.label {
  color: var(--input-text-label-color);
  font-size: var(--input-field-font-size);
  left: 0;
  line-height: var(--input-field-font-size);
  pointer-events: none;
  position: absolute;
  top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));
  transition-duration: var(--animation-duration);
  transition-property: top, font-size, color;
  transition-timing-function: var(--animation-curve-default);

  &.fixed ~ .hint {
    display: none;
  }
}

.hint {
  color: var(--input-text-label-color);
  font-size: var(--input-field-font-size);
  left: 0;
  line-height: var(--input-field-font-size);
  opacity: var(--input-hint-opacity);
  pointer-events: none;
  position: absolute;
  top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));
  transition-duration: var(--animation-duration);
  transition-property: opacity;
  transition-timing-function: var(--animation-curve-default);
}

.bar {
  display: block;
  position: relative;
  width: 100%;

  &::before,
  &::after {
    background-color: var(--input-text-highlight-color);
    bottom: 0;
    content: '';
    height: 2px;
    position: absolute;
    transition-duration: 0.2s;
    transition-property: width, background-color;
    transition-timing-function: var(--animation-curve-default);
    width: 0;
  }

  &::before {
    left: 50%;
  }

  &::after {
    right: 50%;
  }
}

.error,
.counter {
  color: var(--input-text-error-color);
  font-size: var(--input-label-font-size);
  line-height: var(--input-underline-height);
  margin-bottom: calc(-1 * var(--input-underline-height));
}

.counter {
  color: var(--input-text-label-color);
  position: absolute;
  right: 0;
}

.disabled > .inputElement {
  border-bottom-style: dotted;
  color: var(--input-text-disabled-text-color);
}

.errored {
  padding-bottom: 0;

  & > .inputElement {
    border-bottom-color: var(--input-text-error-color);
    margin-top: 1px;
  }

  & > .counter,
  & > .label {
    color: var(--input-text-error-color);
  }

  & > .label > .required {
    color: var(--input-text-required-color);
  }
}

.hidden {
  display: none;
}