create a scss mixin

[macolo]

The following has been tested for normal input fields of type text in most recent Safari, Firefox, Chrome on mac os x.

Here is a sample html markup, it includes some vue markup as well, but this can be removed without any side effects:

<div class="row">
                    <div class="col-24 col-md-18">
                        <keep-alive>
                            <ValidationProvider name="street" rules="required" v-slot="{ errors }">
                                <div class="form-group">
                                    <label class="has-float-label">
                                        <input class="form-control" name="street" type="text" placeholder="Street"
                                               :class="{ 'is-invalid': errors[0] }"
                                               v-model="formData.street">
                                        <span>Street</span>
                                    </label>
                                    <p class="invalid-feedback d-block">
                                        {{ errors[0] }}
                                    </p>
                                </div>
                            </ValidationProvider>
                        </keep-alive>
                    </div>
</div>

Could this be added to the sources somehow? A mixin can come pretty handy for those that use bootstrap-sass anyway.

@import "~bootstrap/scss/functions/";
@import "~bootstrap/scss/mixins/";
@import "~bootstrap/scss/variables/";

@mixin has-float-label {
  // taken from https://github.com/tonystar/bootstrap-float-label/blob/master/bootstrap-float-label.css
  display: block;
  position: relative;

  label, & > span {
    background: white;
    position: absolute;
    cursor: text;
    font-size: 75%;
    opacity: 1;
    -webkit-transition: all .2s;
    transition: all .2s;
    top: -.5em;
    left: 0.75rem;
    z-index: 3;
    line-height: 1;
    padding: 0 2px;
  }

  .form-control {

    &::placeholder {
      opacity: 1;
      transition: all .2s;
    }

    &:placeholder-shown:not(:focus)::placeholder {
      opacity: 0;
    }

    &:placeholder-shown:not(:focus) + * {
      font-size: 100%;
      color: $input-placeholder-color;
      transform: translateY(-50%);
      top: 50%;
    }
  }

}