ion-md-input.scss

$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: #444 !default;

.item-md-label {
  display: block;
  background-color: transparent;
  box-shadow: none;
  padding-top: 30px;
  padding-bottom: 0;
  .input-label {
    position: absolute;
    padding: 5px 0 0;
    z-index: 2;
    -webkit-transform: translate3d(0, -30px, 0) scale(1);
    transform: translate3d(0, -30px, 0) scale(1);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    color: $dark;
    opacity: 0.5;
    transform-origin: 0;
  }
  input {
    z-index: 1;
    position: relative;
    bottom: 0;
  }
  .highlight {
    position: absolute;
    bottom: 0;
    height: 2px;
    left: 0;
    width: 100%;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
  }
  .highlight-light {
    background: $light;
  }
  .highlight-stable {
    background: $stable;
  }
  .highlight-positive {
    background: $positive;
  }
  .highlight-calm {
    background: $calm;
  }
  .highlight-balanced {
    background: $balanced;
  }
  .highlight-energized {
    background: $energized;
  }
  .highlight-assertive {
    background: $assertive;
  }
  .highlight-royal {
    background: $royal;
  }
  .highlight-dark {
    background: $dark;
  }
  input:focus ~ .input-label,
  input.used ~ .input-label {
    -webkit-transform: translate3d(0, -60px, 0) scale(0.9);
    transform: translate3d(0, -60px, 0) scale(0.9);
    opacity: 1;
  }
  input:focus ~ .highlight {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}