lens/src/renderer/components/input/input.scss

/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */


.Input {
  position: relative;
  text-align: left;

  &.invalid.dirty:not(.validating) {
    label:after {
      width: 100%;
      background: $colorError;
    }
  }

  &.focused:not(.validating) {
    label:after {
      width: 100%;
    }
  }

  &.validatingLine {
    label:after {
      width: 100%;
      @include stripeLinesAnimation;
    }
  }

  label {
    --flex-gap: #{$padding / 1.5};

    position: relative;
    padding: $padding / 4 * 3 0;
    border-bottom: 1px solid $halfGray;
    line-height: 1;

    &:after {
      content: "";
      position: absolute;
      top: calc(100% - 1px);
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: $primary;
      transition: width 250ms;
    }
  }

  input, textarea {
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-transform: inherit;

    &:invalid {
      box-shadow: none;
    }

    &::placeholder {
      color: inherit;
      opacity: .75;
    }
  }

  textarea {
    @include hidden-scrollbar;
    line-height: 1.2;
    resize: none;
  }

  fieldset:disabled &,
  &.disabled {
    opacity: .5;
    pointer-events: none;
  }

  .input-info {
    .errors {
      color: var(--colorError);
      font-size: $font-size-small;
    }

    .maxLengthIndicator {
      text-align: right;
      font-size: 80%;
      padding: $padding / 3;
    }
  }

  //- Themes

  &.theme {
    &.round {
      &.invalid.dirty {
        label {
          border-color: $colorSoftError;
        }
      }
      label {
        border-radius: $radius;
        border: 1px solid $halfGray;
        color: inherit;
        padding: $padding / 4 * 3 $padding / 4 * 3;

        &:focus-within {
          border-color: $colorInfo;
        }

        &:after {
          display: none;
        }
      }
      &.black {
        label {
          background: var(--inputControlBackground);
          border-color: var(--inputControlBorder);
          color: var(--textColorTertiary);
          padding: $padding;

          &:hover {
            border-color: var(--inputControlHoverBorder);
          }
        }
      }
    }
  }
}

.Tooltip.InputTooltipError {
  --bgc: #{$colorError};
  --border: none;
  --color: white;
}