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)
// right changes quicker and overflows the container
$field-transition-label-right-down = .396s cubic-bezier(.4,0,.2,1)
$field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)

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

  ::-ms-clear,
  ::-ms-reveal
    display: none

  &--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: 20px
    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

  &__shadow
    top: 8px
    opacity: 0
    overflow: hidden
    white-space: pre-wrap
    transition: opacity $field-transition

    + .q-field__native
      &::placeholder
        transition: opacity $field-transition
      &:focus::placeholder
        opacity: 0

  &__native, &__prefix, &__suffix, &__input
    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, &__input
    width: 100%
    min-width: 0 // needed for FF
    outline: 0 !important // needed for FF

    &:-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

  &__native[type="file"]
    line-height: 1em // needed for Chrome type="file"
  &__input
    padding: 0
    height: 0
    min-height: 24px
    line-height: 24px
  &__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, .q-field__input
        cursor: default
    &.q-field--float
      .q-field__native, .q-field__input
        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-label-right-up

  &--float .q-field__label
    transform: translateY(-40%) scale(.75)
    right: calc(-100% / 3)
    transition: transform $field-transition, right $field-transition-label-right-down

  &--highlighted
    .q-field__label
      color: currentColor
    .q-field__shadow
      opacity: .5

  &--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--highlighted
      .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--highlighted .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: #000

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

    .q-field__native,
    .q-field__input
      &:-webkit-autofill
        margin-top: 1px
        margin-bottom: 1px

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

    &.q-field--highlighted
      // prevent rounded border imperfections to be seen through the :after border
      .q-field__control:hover:before
        border-color: transparent
      .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: #000

      &: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--highlighted
      .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: #fff

    .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
      color: #fff

    &:not(.q-field--highlighted) .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--highlighted
      .q-field__control
        box-shadow: $shadow-2
        background: #000
      .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
        color: #fff

    &.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--highlighted
        .q-field__control
          background: #fff
        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
          color: #000
      &.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

    .q-field__shadow
      top: 0

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

      .q-field__native, .q-field__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__shadow
      top: 0
    .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-field__marginal
      .q-avatar
        font-size: 24px

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

    .q-field__native, .q-field__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)

  &__focusable-action
    opacity: 0.6
    cursor: pointer
    outline: 0 !important
    border: 0
    color: inherit
    background: transparent
    padding: 0

    &:hover,
    &:focus
      opacity: 1

  &--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__shadow
        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__shadow
          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

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