Material-style (animated placeholder label) text input component in Vue.js

MaterialInput.vue

<template>
  <div class="input-wrapper">
    <input :type="type" :class="{ 'has-content': value.length }" v-model="value">
    <div class="input-label">{{ label }}</div>
  </div>
</template>

<script>
  export default {
    name: 'Input',
    props: [
      'type',
      'label',
    ],
    data: () => ({
      value: '',
    }),
  };
</script>

<style lang="scss">
  .input-wrapper {
    position: relative;
    font-size: 1.1rem;
    .input-label {
      position: absolute;
      left: 0.3rem;
      top: 0.4rem;
      color: #000000;
      pointer-events: none;
      transition: font-size .3s, top .3s, color .3s;
    }
    input {
      display: block;
      border: 1px solid #999999;
      border-radius: 5px;
      background: linear-gradient(rgba(#ffffff, 0.2), rgba(#ffffff, 1));
      padding: 0.3rem;
      font-size: 1.1rem;
      &:focus {
        border-color: #0000ff;
      }
      &:focus, &.has-content {
        + .input-label {
          font-size: 0.8rem;
          top: -1rem;
          color: inherit;
        }
      }
    }
  }
</style>