vuetify/src/stylus/components/_text-fields.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'
@import '../theme'

v-text-field($material)
  & > .v-input__control > .v-input__slot:before
    border-color: $material.input-bottom-line

  &:not(.v-input--has-state) > .v-input__control > .v-input__slot:hover:before
    border-color: $material.text.primary

  &.v-input--is-disabled > .v-input__control > .v-input__slot:before
    border-image: repeating-linear-gradient(
      to right,
      $material.text.disabled 0px,
      $material.text.disabled 2px,
      transparent 2px,
      transparent 4px
    ) 1 repeat

    .v-text-field__prefix,
    .v-text-field__suffix
      color: $material.text.disabled

  &__prefix,
  &__suffix
    color: $material.text.secondary

  &--solo > .v-input__control > .v-input__slot
    border-radius: 2px
    background: $material.cards

  &--solo-inverted.v-text-field--solo
    & > .v-input__control > .v-input__slot
      background: rgba($material.inputs.solo-inverted)

    &.v-input--is-focused > .v-input__control > .v-input__slot
      background: rgba($material.inputs.solo-inverted-focused)

      .v-label,
      input
          color: $material.inputs.solo-inverted-focused-text

  &--box
    & > .v-input__control > .v-input__slot
      background: $material.text-fields.box

    .v-text-field__prefix
      max-height: 32px
      margin-top: 22px

    &.v-input--is-dirty,
    &.v-input--is-focused,
    &.v-text-field--placeholder
      .v-text-field__prefix
        margin-top: 22px
        transition: $primary-transition

    &:not(.v-input--is-focused) > .v-input__control > .v-input__slot:hover
      background: $material.text-fields.box-hover

  &--outline
    & > .v-input__control > .v-input__slot
      border: 2px solid $material.text.secondary

    &:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot:hover
      border: 2px solid $material.text.primary

v-text-field-rtl()
  .v-label
    transform-origin: top right

  .v-counter
    margin-left: 0
    margin-right: 8px

  &--enclosed
    .v-input__append-outer
      margin-left: 0
      margin-right: 16px

    .v-input__prepend-outer
      margin-left: 16px
      margin-right: 0

  &--reverse
    input
      text-align: left

    .v-label
      transform-origin: top left

  &__prefix
    text-align: left
    padding-right: 0
    padding-left: 4px

  &__suffix
    padding-left: 0
    padding-right: 4px

  &--reverse
    .v-text-field__prefix
      text-align: right
      padding-left: 0
      padding-right: 4px

    .v-text-field__suffix
      padding-left: 0
      padding-right: 4px

theme(v-text-field, "v-text-field")
rtl(v-text-field-rtl, "v-text-field")

.v-text-field
  padding-top: $text-field-active-label-height
  margin-top: $input-top-spacing - $text-field-active-label-height

  input
    flex: 1 1 auto
    line-height: 20px
    padding: 8px 0 8px
    max-width: 100%
    min-width: 0px
    width: 100%

  .v-input__prepend-inner,
  .v-input__append-inner
    align-self: flex-start
    display: inline-flex
    margin-top: 4px
    line-height: 1
    user-select: none

  .v-input__prepend-inner
    margin-right: auto
    padding-right: 4px

  .v-input__append-inner
    margin-left: auto
    padding-left: 4px

  .v-counter
    margin-left: 8px
    white-space: nowrap

  .v-label
    max-width: 90%
    overflow: hidden
    text-overflow: ellipsis
    top: 6px // equal to the margin top of icons
    transform-origin: top left
    white-space: nowrap
    pointer-events: none

    &--active
      max-width: 133%
      transform: translateY(-18px) scale(.75)

  & > .v-input__control > .v-input__slot
    cursor: text
    transition: background $primary-transition

    &:before,
    &:after
      bottom: -1px // Needed for browser autocomplete styles
      content: ''
      left: 0
      position: absolute
      transition: $primary-transition
      width: 100%

    &:before
      border-style: solid
      border-width: thin 0 0 0

    &:after
      border-color: currentColor
      border-style: solid
      border-width: thin 0 thin 0
      transform: scaleX(0)

  &__details
    display: flex
    flex: 1 0 auto
    max-width: 100%
    overflow: hidden

  &__prefix,
  &__suffix
    align-self: center
    cursor: default

  &__prefix
    text-align: right
    padding-right: 4px

  &__suffix
    padding-left: 4px
    white-space: nowrap

  &--reverse
    .v-text-field__prefix
      text-align: left
      padding-right: 0
      padding-left: 4px

    .v-text-field__suffix
      padding-left: 0
      padding-right: 4px

  & > .v-input__control > .v-input__slot > .v-text-field__slot
    display: flex
    flex: 1 1 auto
    position: relative

  &--box,
  &--outline
    position: relative

    & > .v-input__control > .v-input__slot
      align-items: stretch
      min-height: 56px

    input
      margin-top: 22px

    &.v-text-field--single-line
      input
        margin-top: 12px

    .v-label
      top: 18px

      &--active
        transform: translateY(-6px) scale(.75)

  &--box > .v-input__control > .v-input__slot
    border-top-left-radius: 4px
    border-top-right-radius: 4px

    &:before
      border-style: solid
      border-width: thin 0 thin 0

  &.v-text-field--enclosed
    margin: 0
    padding: 0

    &:not(.v-text-field--box)
      .v-progress-linear__background
        display: none

    .v-input__prepend-outer,
    .v-input__prepend-inner,
    .v-input__append-inner,
    .v-input__append-outer
      margin-top: 16px

    .v-text-field__details,
    & > .v-input__control > .v-input__slot
      padding: 0 12px

    .v-text-field__details
      margin-bottom: 8px

  &.v-text-field--full-width
    &.v-input
      margin-bottom: 0
      margin-top: 0

    .v-label
      top: calc(50% - 10px)

    .v-input__control
      padding: 12px 0

    .v-input__prepend-outer,
    .v-input__append-outer
      margin-top: 4px

    .v-input__append-inner
      align-self: center
      margin-top: 0

  &--reverse
    input
      text-align: right

    .v-label
      transform-origin: top right

    & > .v-input__control > .v-input__slot,
    .v-text-field__slot
      flex-direction: row-reverse

  &--solo,
  &--outline,
  &--full-width
    & > .v-input__control > .v-input__slot
      &:before,
      &:after
        display: none

  &--outline
    margin-bottom: 16px
    transition: border $primary-transition

    & > .v-input__control > .v-input__slot
      background: transparent !important
      border-radius: 4px

    .v-text-field__prefix
      max-height: 32px

    .v-input__prepend-outer,
    .v-input__append-outer
      margin-top: 18px // 2px for border

    &.v-input--is-dirty,
    &.v-input--is-focused,
    &.v-text-field--placeholder
      .v-text-field__prefix
        margin-top: 22px
        transition: $primary-transition

    &.v-input--is-focused, &.v-input--has-state
      & > .v-input__control > .v-input__slot
        border: 2px solid currentColor
        transition: border $primary-transition

  &.v-text-field--solo
    .v-label
      top: calc(50% - 10px)

    .v-input__control
      min-height: 48px
      padding: 0

    &:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot
      elevation(2)

    .v-text-field__slot
      align-items: center

    .v-input__append-inner,
    .v-input__prepend-inner
      align-self: center
      margin-top: 0

    .v-input__prepend-outer,
    .v-input__append-outer
      margin-top: 12px

  &.v-input--is-focused > .v-input__control > .v-input__slot:after
    transform: scaleX(1)

  &.v-input--has-state > .v-input__control > .v-input__slot:before
    border-color: currentColor