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

Vue.js 2 Semantic Component Framework

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

textfield($material)
  &.input-group--text-field-box
    .input-group__input
      background: $material.buttons.focused-alt

  input::placeholder,
  textarea::placeholder
    color: $material.text.disabled

  &:not(.input-group--error)
    .input-group__counter
      color: $material.text.secondary

theme(textfield, "input-group--text-field")

/** Label */
.input-group--text-field label
  position: absolute
  top: $input-group-text-field-label-top
  left: 0

/** Input */
.input-group--text-field
  // TODO: Revisit in 1.1 refactor
  // Input was mis-aligned by 1px
  input
    padding-bottom: 1px

  input,
  textarea
    font-size: $input-font-size

    &::placeholder
      color: inherit
      transition: .3s $transition.swing

.input-group--text-field input
  box-shadow: none
  flex: 1
  height: $input-height
  margin: 0
  min-width: 0
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

  &:focus
    outline: none

  &:disabled
    pointer-events: none

/** Textarea */
.input-group--text-field
  textarea
    flex: 1 1

    &:focus
      outline: none

.input-group--text-field.input-group--textarea
  label
    top: 13px

  .input-group__input
    border-radius: 2px
    transition: .4s $transition.fast-in-fast-out

  textarea
    font-size: $input-font-size
    transition: .3s $transition.swing

  &:not(.input-group--full-width)
    label
      top: 30px
      left: 15px

    .input-group__input
      padding: 30px 0 0 13px

  .input-group__details
    &:before,
    &:after
      opacity: 0

/** Counter */
.input-group--text-field
  .input-group__counter
    margin-left: auto

    &--error
      color: inherit

/** Input States */
.input-group--text-field
  &.input-group--placeholder.input-group--dirty
    input::placeholder,
    textarea::placeholder
      opacity: 0

/** No Resize */
.input-group--text-field
  &.input-group--no-resize textarea
      resize: none

/** Types */
.input-group--text-field
  // Icons
  &.input-group--prepend-icon
    .input-group__prepend-icon
      align-items: center
      display: flex
      justify-content: flex-start
      min-width: 40px

    .input-group__details
      margin-left: auto
      max-width: calc(100% - 40px)

    label
      left: 40px

  &:not(.input-group--single-line)
    &.input-group--focused,
    &.input-group--placeholder
      label
        opacity: 1

      &:not(.input-group--textarea)
        label
          transform: translate(0, -18px) scale(.75)

      &:not(.input-group--full-width).input-group--textarea
        label
          transform: translate(0, -8px) scale(.75)

      &.input-group--text-field-box
        label
          transform: translate(0, -10px) scale(.75)

  &.input-group--dirty
    &.input-group--select,
    &:not(.input-group--textarea)
      label
        transform: translate(0, -18px) scale(.75)

    &:not(.input-group--full-width).input-group--textarea
      label
        transform: translate(0, -8px) scale(.75)

  // Multi Line
  &.input-group--multi-line
    textarea
      padding-top: 4px

  // Full Width
  &.input-group--full-width
    padding: 16px

    label
      margin-left: $grid-gutters.lg

    .input-group__details:before, .input-group__details:after
      display: none

/** Prefix/Suffix */
.input-group--prefix
  &:not(.input-group--focused):not(.input-group--dirty)
    label
      left: 16px

.input-group--prefix,
.input-group--suffix
  .input-group--text-field__prefix,
  .input-group--text-field__suffix
    align-items: center
    display: inline-flex
    font-size: 16px
    margin-top: 1px

  .input-group--text-field__prefix
    margin-right: 3px

  .input-group--text-field__suffix
    margin-left: 3px

/** Box */
.input-group--text-field-box
  input, textarea
    cursor: pointer

  label
    left: 16px

  .input-group__input
    align-items: flex-end
    border-radius: 4px 4px 0 0
    cursor: pointer
    min-height: 56px
    user-select: none

  .input-group__details
    padding: 8px 16px 0
    user-select: none

    &:before,
    &:after
      height: 2px
      border-bottom-left-radius: 4px
      border-bottom-right-radius: 4px

  &.input-group--multi-line
    textarea
      padding-left: 24px
      padding-right: 24px

  &:not(.input-group--textarea)
    &.input-group--multi-line
      .input-group__input
        padding-top: 26px

      label
        top: 26px

    &:not(.input-group--multi-line)
      .input-group__input
        padding-left: 16px
        padding-right: 16px

      label
        top: 32px

    &:not(.input-group--single-line)
      &.input-group--focused,
      &.input-group--dirty
        label
          transform: translate(0, -10px) scale(0.75)
  // Icons
  &.input-group--prepend-icon
    .input-group__details
      &:before, &:after
        margin-left: 56px
        max-width: calc(100% - 56px)

    label
      left: 56px