quasar/src/components/field/QField.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

$field-transition = .36s cubic-bezier(.4,0,.2,1)

@keyframes q-autofill
  to
    background transparent
    color $input-autofill-color

.q-field
  font-size $input-font-size

  &--with-bottom
    padding-bottom 20px

  &__marginal
    height 56px
    color rgba(0, 0, 0, .54)
    font-size 24px

    > * + *
      margin-left 2px

    .q-avatar
      font-size 32px

  &__before, &__prepend
    padding-right 12px

  &__after, &__append
    padding-left 12px

    &:empty
      display none

  &__append + &__append
    padding-left 2px

  &__inner
    text-align left

  &__bottom
    font-size 12px
    min-height 12px
    line-height 1
    color rgba(0, 0, 0, .54)
    padding 8px 12px 0

    &--animated
      transform translateY(100%)
      position absolute
      left 0
      right 0
      bottom 0

  &__messages
    line-height 1

    > div
      word-break break-word
      word-wrap break-word
      overflow-wrap break-word

      & + div
        margin-top 4px

  &__counter
    padding-left 8px
    line-height 1

  &--item-aligned
    padding 8px 16px

    .q-field__before
      min-width 56px

  &__control-container
    height inherit

  &__control
    color $primary
    color var(--q-color-primary)
    height 56px
    max-width 100%
    outline none

    &:before, &:after
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      pointer-events none
    &:before
      border-radius inherit

  &__native, &__prefix, &__suffix
    font-weight 400
    line-height 28px
    letter-spacing .00937em
    text-decoration inherit
    text-transform inherit
    border none
    border-radius 0
    background none
    color $input-text-color
    outline 0
    padding 6px 0

  &__native
    width 100%
    min-width 0 // needed for FF
    outline 0 !important // needed for FF
    &[type="file"]
      line-height 1em // needed for Chrome type="file"
  &__prefix, &__suffix
    transition opacity $field-transition
    white-space nowrap
  &__prefix
    padding-right 4px
  &__suffix
    padding-left 4px

  &--readonly, &--disabled
    .q-placeholder // override "disable" CSS on it
      opacity 1 !important

  &--readonly
    &.q-field--labeled
      .q-field__native
        cursor default
    &.q-field--float
      .q-field__native
        cursor text

  &--disabled
    .q-field__inner
      cursor not-allowed

    .q-field__control
      pointer-events none

    .q-field__control > div
      opacity .6 !important

      &, * // @stylint ignore
        outline 0 !important

  &__label
    left 0
    right 0
    top 18px
    color $input-label-color
    font-size 16px
    line-height 20px
    font-weight 400
    letter-spacing .00937em
    text-decoration inherit
    text-transform inherit
    transform-origin left top
    transition transform $field-transition, right $field-transition

  &--float .q-field__label
    transform translateY(-40%) scale(.75)
    right calc(-100% / 3)

  .q-field__native, .q-select__input
    &:-webkit-autofill
      -webkit-animation-name q-autofill
      -webkit-animation-fill-mode both

    &:-webkit-autofill + .q-field__label
      transform translateY(-40%) scale(.75)
    &[type="number"]:invalid + .q-field__label
      transform translateY(-40%) scale(.75)

    &:invalid
      box-shadow none

  &--focused
    .q-field__label
      color currentColor

  &--filled

    .q-field__control
      padding 0 12px
      background rgba(0,0,0,.05)
      border-radius $generic-border-radius $generic-border-radius 0 0

      &:before
        background rgba(0,0,0,.05)
        border-bottom 1px solid rgba(0,0,0,.42)
        opacity 0
        transition opacity $field-transition, background $field-transition

      &:hover:before
        opacity 1

      &:after
        height 2px
        top auto
        transform-origin center bottom
        transform scale3d(0, 1, 1)
        background currentColor
        transition transform $field-transition

    &.q-field--rounded .q-field__control
      border-radius 28px 28px 0 0

    &.q-field--focused
      .q-field__control
        &:before
          opacity 1
          background rgba(0,0,0,.12)
        &:after
          transform scale3d(1, 1, 1)

    &.q-field--dark
      .q-field__control, .q-field__control:before
        background rgba(255, 255, 255, .07)
      &.q-field--focused .q-field__control:before
        background rgba(255, 255, 255, .1)

    &.q-field--readonly
      .q-field__control:before
        opacity 1
        background transparent
        border-bottom-style dashed

  &--outlined

    .q-field__control
      border-radius $generic-border-radius
      padding 0 12px

      &:before
        border 1px solid rgba(0,0,0,.24)
        transition border-color $field-transition
      &:hover:before
        border-color black

      &:after
        height inherit
        border-radius inherit
        border 2px solid transparent
        transition border-color $field-transition

    &.q-field--rounded .q-field__control
      border-radius 28px

    &.q-field--focused
      .q-field__control:after
        border-color currentColor
        border-width 2px
        transform scale3d(1, 1, 1)

    &.q-field--readonly
      .q-field__control:before
        border-style dashed

  &--standard

    .q-field__control
      &:before
        border-bottom 1px solid rgba(0,0,0,.24)
        transition border-color $field-transition

      &:hover:before
        border-color black

      &:after
        height 2px
        top auto
        border-bottom-left-radius inherit
        border-bottom-right-radius inherit
        transform-origin center bottom
        transform scale3d(0, 1, 1)
        background currentColor
        transition transform $field-transition

    &.q-field--focused
      .q-field__control:after
        transform scale3d(1, 1, 1)

    &.q-field--readonly
      .q-field__control:before
        border-bottom-style dashed

  &--dark

    .q-field__control:before
      border-color rgba(255, 255, 255, .6)

    .q-field__control:hover:before
      border-color white

    .q-field__native, .q-field__prefix, .q-field__suffix, .q-select__input
      color white

    &:not(.q-field--focused) .q-field__label, .q-field__marginal, .q-field__bottom
      color rgba(255, 255, 255, .7)

  &--standout

    .q-field__control
      padding 0 12px
      background rgba(0,0,0,.05)
      border-radius $generic-border-radius
      transition box-shadow $field-transition, background-color $field-transition

      &:before
        background rgba(0,0,0,.07)
        opacity 0
        transition opacity $field-transition, background $field-transition

      &:hover:before
        opacity 1

    &.q-field--rounded .q-field__control
      border-radius 28px

    &.q-field--focused
      .q-field__control
        box-shadow $shadow-2
        background black
      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
        color white

    &.q-field--readonly
      .q-field__control:before
        opacity 1
        background transparent
        border 1px dashed rgba(0,0,0,.24)

    &.q-field--dark
      .q-field__control
        background rgba(255, 255, 255, .07)
        &:before
          background rgba(255, 255, 255, .07)
      &.q-field--focused
        .q-field__control
          background white
        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
          color black
      &.q-field--readonly
        .q-field__control:before
          border-color rgba(255, 255, 255, .24)

  &--labeled
    .q-field__native, .q-field__prefix, .q-field__suffix
      line-height 24px
      padding-top 24px
      padding-bottom 8px

    &:not(.q-field--float)
      .q-field__prefix, .q-field__suffix
        opacity 0

      .q-field__native, .q-select__input
        &::-webkit-input-placeholder
          color transparent
        &::-moz-placeholder
          color transparent
        &:-ms-input-placeholder
          color transparent !important
        &::-ms-input-placeholder
          color transparent
        &::placeholder
          color transparent

    &.q-field--dense
      .q-field__native, .q-field__prefix, .q-field__suffix
        padding-top 14px
        padding-bottom 2px

  &--dense
    .q-field__control, .q-field__marginal
      height 40px
    .q-field__bottom
      font-size 11px

    .q-field__label
      font-size 14px
      top 10px
    .q-field__before, .q-field__prepend
      padding-right 6px
    .q-field__after, .q-field__append
      padding-left 6px
    .q-field__append + .q-field__append
      padding-left 2px

    .q-avatar
      font-size 24px

    &.q-field--float .q-field__label
      transform translateY(-30%) scale(.75)

    .q-field__native, .q-select__input
      &:-webkit-autofill + .q-field__label
        transform translateY(-30%) scale(.75)
      &[type="number"]:invalid + .q-field__label
        transform translateY(-30%) scale(.75)

  &--borderless, &--standard

    .q-field__bottom,
    &.q-field--dense .q-field__control
      padding-left 0
      padding-right 0

  &--error
    .q-field__label
      animation q-field-label .36s

    .q-field__bottom
      color $negative
      color var(--q-color-negative)


  &--auto-height

    .q-field__control
      height auto

    .q-field__control, .q-field__native
      min-height 56px

    .q-field__native
      align-items center

    .q-field__control-container
      padding-top 0

    .q-field__native, .q-field__prefix, .q-field__suffix
      line-height 18px

    &.q-field--labeled
      .q-field__control-container
        padding-top 24px
      .q-field__native, .q-field__prefix, .q-field__suffix
        padding-top 0
      .q-field__native
        min-height 24px

    &.q-field--dense
      .q-field__control, .q-field__native
        min-height 40px

      &.q-field--labeled
        .q-field__control-container
          padding-top 14px
        .q-field__native
          min-height 24px

  &--square .q-field__control
    border-radius 0 !important

.q-transition--field-message
  &-enter-active,
  &-leave-active
    transition transform .6s cubic-bezier(.86, 0, .07, 1), opacity .6s cubic-bezier(.86, 0, .07, 1)

  &-enter, &-leave-to
    opacity 0
    transform translateY(-10px)

  &-leave, &-leave-active
    position absolute

@keyframes q-field-label
  40%
    margin-left 2px

  60%, 80%
    margin-left -2px

  70%, 90%
    margin-left 2px