vuetify/src/stylus/components/_input-groups.styl

Vue.js 2 Semantic Component Framework

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

/* Theme */
input-group($material)
  input,
  textarea
    color: $material.text.primary

    &:disabled
      color: $material.text.disabled

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

  &.input-group--textarea:not(.input-group--full-width)
    .input-group__input
      border: 2px solid $material.text.secondary
      
  &.input-group--solo
    background: $material.cards
  
  &.input-group--solo-inverted
    background: rgba($material.inputs.solo-inverted)
    
    &.input-group--focused
      background: rgba($material.inputs.solo-inverted-focused)
        
      .input-group__append-icon,
      .input-group__prepend-icon,
      input,
      label
          color: $material.inputs.solo-inverted-focused-text

  // This is specific for selects
  &.input-group--dirty
    .input-group__selections__comma
      &:not(.input-group__selections__comma--active)
        color: $material.text.primary

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

    &.input-group--disabled
      label,
      .input-group__selections__comma
        color: $material.text.disabled

    .input-group__details:before
      background-color: $material.input-bottom-line

    &:not(.input-group--focused):not(.input-group--disabled)
      .input-group__input
        .input-group__append-icon,
        .input-group__prepend-icon
          &:not(:hover)
            color: $material.text.secondary

      &:not(.input-group--disabled):not(.input-group--overflow):not(.input-group--segmented):not(.input-group--editable):hover
        .input-group__details:before
          background-color: $material.text.primary

        &.input-group--textarea:not(.input-group--full-width)
          .input-group__input
            border-color: $material.text.primary

  &.input-group
    &--overflow, &--segmented, &--editable
      .input-group__input,
      .input-group__details
        &:before
          background-color: $material.dividers

  &.input-group--disabled
    .input-group__input
      .input-group__append-icon,
      .input-group__prepend-icon
        color: $material.text.disabled

    .input-group__details:before
      background-color: transparent
      background-image: linear-gradient(
        to right,
        $material.text.disabled 0,
        $material.text.disabled 33%,
        transparent 0
      )

  .input-group--text-field
    &__prefix, &__suffix
      color: $material.text.secondary

    &.input-group--disabled
      &__prefix, &__suffix
        color: $material.text.disabled

theme(input-group, "input-group")

.input-group
  display: flex
  flex: 1 1
  flex-wrap: wrap
  min-width: 24px
  padding: $input-group-padding
  position: relative
  width: 100%
  outline: none
  transition: box-shadow $primary-transition

/** Input */
.input-group
  input
    width: 100%

/** Label */
.input-group
  label
    display: inline-block
    font-size: $input-font-size
    line-height: $input-height
    height: $input-height
    max-width: 90%
    min-width: 0
    overflow: hidden
    pointer-events: none
    text-align: left
    text-overflow: ellipsis
    transform-origin: top left
    transition: .4s $transition.fast-in-fast-out
    white-space: nowrap
    width: 100%
    z-index: 0

/** Blocks */
.input-group
  &__input
    display: flex
    flex: 1 0 100%
    min-width: 0
    min-height: $input-height

/** Icons */
.input-group
  &__icon-cb
    cursor: pointer

.input-group
  &.input-group--focused,
  &.input-group--error
    .input-group__append-icon,
    .input-group__prepend-icon
      color: inherit

  &.input-group--append-icon, &.input-group--selection-controls
    label
      max-width: 75%

  &.input-group--prepend-icon
    label
      max-width: 75%

  &.input-group--append-icon.input-group--prepend-icon
    label
      max-width: 65%

  .input-group__append-icon
    padding: 0 6px

  .input-group__append-icon,
  .input-group__prepend-icon
    align-self: center
    user-select: none

/** States */
.input-group
  // Single Line
  &.input-group--single-line,
  &.input-group--solo
    &.input-group--dirty
      label
        display: none

  // Solo
  &.input-group--solo
    min-height: 46px
    border-radius: $card-border-radius
    padding: 0
    transition: $primary-transition
    elevation(2)

    label
      top: 8px
      padding-left: 16px
      transform: none !important

    .input-group__input
      align-items: center
      padding: 8px 16px

    .input-group__details
      display: none

  &--disabled
    pointer-events: none

    .input-group__details:before
      background-color: transparent
      background-position: bottom
      background-size: 3px 1px
      background-repeat: repeat-x

  // Focused
  &.input-group--text-field
    &:not(.input-group--single-line):not(.input-group--error)
      &.input-group--focused
        label
          color: inherit

        .input-group__input
          border-color: inherit

    &.input-group--focused
      &:not(.input-group--disabled)
        .input-group__details
          &:after
            transform: scaleX(1)

  // Required
  &--required
    label:after
      content: '*'

  // Error
  &.input-group--error
    label
      animation: shake .6s $transition.swing

    .input-group__messages
      color: inherit

    .input-group__details
      &:before
        background-color: currentColor

/** Details */
.input-group
  .slide-y-transition-leave,
  .slide-y-transition-leave-to
    position: absolute

  &__details
    color: inherit
    display: flex
    padding-top: 4px
    flex: 1 0 100%
    font-size: 12px
    min-height: 26px
    overflow: hidden
    position: relative
    width: 100%

    &:after, &:before
      content: ''
      position: absolute
      left: 0
      transition: .3s $transition.fast-out-slow-in

    &:after
      background-color: currentColor
      color: inherit
      top: 0
      height: 2px
      transform: scaleX(0)
      transform-origin: center center 0
      width: 100%
      z-index: 1

    &:before
      top: 0
      height: 1px
      width: 100%
      z-index: 0

  &--hide-details
    .input-group__details
      min-height: 2px
      padding: 0

  &--async-loading
    .input-group__details
      &:before,
      &:after
        display: none

  /** Async loading indicator */
  .progress-linear
    position: absolute
    top: 0
    left: 0
    margin: 0

/** Hint */
.input-group
  &__hint
    // flex: 1 0
    transition: .3s $transition.fast-in-fast-out

/** Error */
.input-group
  &__error
    color: inherit
    flex: 1 0
    transition: .3s $transition.fast-in-fast-out

/** Types */
.input-group
  &--overflow,
  &--segmented,
  &--editable
    &.input-group--active
      background-color: #fff