<input type="text" placeholder="Arnulf Beckenbauer" class="form-control form-control--invalid" />
<input type="text" placeholder="Arnulf Beckenbauer" class="form-control form-control--invalid" />
/* No context defined. */
  • Content:
    .form-control,
    .custom-form-control {
      @extend %heading-font-regular;
    
      display: block;
    
      width: 100%;
      padding: $spacer-xs;
    
      font-size: $font-size-base;
      line-height: $paragraph-line-height;
    
      transition: standard-transition(background-color);
    }
    
    .form-control {
      appearance: none;
      border: 2px solid $form-control-border-color;
      border-radius: 0;
      outline: none;
      caret-color: $form-control-caret-color;
    
      &::placeholder {
        color: $form-control-placeholder-color;
      }
    
      &:focus {
        color: $form-control-focus-color;
        background-color: $form-control-focus-bg;
      }
    
      &--invalid {
        border-color: $form-control-invalid-border-color;
      }
    }
    
    .custom-form-control {
      position: relative;
      min-height: ($paragraph-line-height * 1rem);
      transition: standard-transition(background-color, color, border-color);
    
      &.form-control--invalid,
      .form-group--invalid & {
        .form-label,
        .form-text {
          color: $form-control-invalid-border-color;
        }
    
        .form-label {
          &::before {
            border-color: $form-control-invalid-border-color;
          }
        }
      }
    
      // Hide the real input inside
      > .form-control__input {
        position: absolute;
        z-index: -1; // Put the input behind the label so it doesn't overlay text
        opacity: 0;
      }
    }
    
  • URL: /components/raw/form-control/_form-control.scss
  • Filesystem Path: components/05-atoms/form-elements/form-control/_form-control.scss
  • Size: 1.3 KB

No notes defined.