quasar-framework/src/css-components/textfield/textfield.mat.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

$textfield-border-size        ?= 2px
$textfield-border-style       ?= solid
$textfield-border-color       ?= $form-lighter-color
$textfield-focus-border-color ?= $form-active-color
$textfield-font-size          ?= .9rem
$label-font-size              ?= $textfield-font-size

$textfield-padding-horizontal ?= 0
$textfield-padding-vertical   ?= 8px

$caret-color                  ?= $grey-9

input, textarea, .textfield
  &:not(.no-style)
    background none
    font-size $textfield-font-size
    max-width 100%
    margin-bottom 2px
    padding $textfield-padding-vertical $textfield-padding-horizontal
    border 0
    outline 0
    transition all .3s
    border-bottom $textfield-border-size $textfield-border-style $textfield-border-color
    &:focus, &:hover
      border-bottom $textfield-border-size $textfield-border-style $textfield-focus-border-color
    &[disabled], &.disabled
      border-bottom-color darken($form-darker-color, 20%)
      border-bottom-style dotted

textarea:not(.no-style)
  height 11em

label
  font-size $label-font-size

input, .textfield
  &.caret
    position relative
    padding-right 17px
    white-space nowrap
    overflow hidden
    > div
      overflow hidden
    &:after
      position absolute
      top 50%
      right 0
      transform translateY(-50%) scaleY(.45) scaleX(.85)
      content '\25BC'

.stacked-label, .floating-label
  position relative
  display inline-block
  width 100%
  label
    position absolute
    pointer-events none
    top 0
    left 0
    transform-origin left top
    color rgba(0, 0, 0, .54)

.stacked-label
  label
    display block
    transform scale(.8)
  input
    padding-top 1.4rem
  textarea
    margin-top 1.4rem
  input:focus + label, textarea:focus + label
    color $form-active-color

.floating-label
  label
    bottom $textfield-padding-vertical
    transition transform .15s ease-in-out, color .3s
  input + label, textarea + label
    transform translateY(1.7rem) scale(1)
  input
    padding-top 1.45rem
  textarea
    margin-top 1.45rem
  input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~ label
    transform translateY(0) scale(.8)
    color $form-active-color