<div>
    <input class="form-control" type="text" placeholder="Type here…">
    <select class="form-control">
        <option value="">Please choose</option>
        <option value="a">Option A</option>
        <option value="b">Option B</option>
    </select>
    <textarea class="form-control" rows="8"></textarea>
</div>
<div>
    <input class="form-control" type="text" placeholder="Type here…" />
    <select class="form-control">
        <option value="">Please choose</option>
        <option value="a">Option A</option>
        <option value="b">Option B</option>
    </select>
    <textarea class="form-control" rows="8"></textarea>
</div>
/* No context defined for this component. */
  • Content:
    .form-control,
    .custom-form-control {
      @extend %heading-font-regular;
      display: block;
      transition: standard-transition(background-color);
      padding: $spacer-xs;
      width: 100%;
      line-height: $form-control-line-height;
      font-size: $form-control-font-size;
    }
    
    .form-control {
      outline: none;
      border: 2px solid $form-control-border-color;
      border-radius: 0;
      caret-color: $form-control-caret-color;
      appearance: none;
    
      &:focus {
        background-color: $form-control-focus-bg;
        color: $form-control-focus-color;
      }
    
      &::placeholder {
        color: $form-control-placeholder-color;
      }
    
      &--invalid {
        border-color: $form-control-invalid-border-color;
      }
    }
    
    .custom-form-control {
      position: relative;
      transition: standard-transition(background-color, color, border-color);
      min-height: ($base-line-height * 1rem);
    
      &.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;
        opacity: 0;
        z-index: -1; // Put the input behind the label so it doesn't overlay text
      }
    }
    
  • URL: /components/raw/form-control/_form-control.scss
  • Filesystem Path: components/01-atoms/form/form-control/_form-control.scss
  • Size: 1.3 KB

There are no notes for this item.