dynamic.label.example.css

// ui-dynamic-input
.ui-dynamic-input
  position: relative
  &__label
    position: absolute
    top: 19px
    left: 20px
    right: 10px
    max-width: 100%
    font-size: 14px
    color: $colorGray
    pointer-events: none
    transform-origin: left top
    // +text-overflow
    transition: .25s $ease
  &__input
    -webkit-appearance: none
    display: block
    width: 100%
    background: white
    font-family: $baseFont
    color: $fontColor
    border: 1px solid $borderColor
    border-radius: 0px
    font-size: 14px
    padding: 25px 20px 11px
    line-height: normal
    transition: border .25s $ease, color .25s $ease
    &::placeholder
      color: $colorGray
    &:focus, &:active
      border-color: $fontColor
    &.has-error
      color: $colorRed
      border-color: $colorRed
      &::placeholder
        color: rgba($colorRed, .5)
    &[disabled], &[readonly]
      background: $colorBg
      font-weight: 300
      &:focus, &:active
        border-color: $borderColor
  &.is-focused
    .ui-dynamic-input
      &__label
        // top: 9px
        // font-size: 10px
        // compensate scale
        max-width: 128%
        width: 128%
        +text-overflow
        transform: translate(0,-10px) scale(.72)
  textarea.ui-dynamic-input__input
    resize: vertical