floating labels for bootstrap 4 forms

based on https://github.com/tonystar/bootstrap-float-label/blob/master/bootstrap-float-label.css

Bootstrap 4 form row:

<div class="row">
    <div class="col">
        <div class="form-group">
            <label class="has-float-label">
                <input class="form-control" name="email" type="text" placeholder="E-Mail" class="is-invalid">
                <span>E-Mail</span>
            </label>
            <p class="invalid-feedback d-block">
                This is a validation error message that needs to be inserted dynamically
            </p>
        </div>
    </div>
</div>

SCSS mixin:

@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: 0;
      transition: all .2s;
    }

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

}