vuetify/src/stylus/components/_select.styl

Vue.js 2 Semantic Component Framework

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

v-select($material)
  // Needs an explicit color to override
  // higher level color
  .v-select__selections
    color: $material.text.primary

  &.v-input--is-disabled
    .v-select__selections
      color: $material.text.disabled

  .v-chip--disabled,
  .v-select__selection--disabled
    color: $material.text.disabled

  &.v-text-field--solo-inverted.v-input--is-focused
    .v-select__selections
      color: $material.inputs.solo-inverted-focused-text

theme(v-select, 'v-select')

.v-select
  position: relative // For **attach** prop

  & > .v-input__control > .v-input__slot
    cursor: pointer

  .v-chip
    flex: 0 1 auto

  .fade-transition-leave-active
    position: absolute
    left: 0

  &.v-input--is-dirty
    ::placeholder
      color: transparent !important

  &:not(.v-input--is-dirty)
    &:not(.v-input--is-focused)
      .v-text-field__prefix
          line-height: 20px
          position: absolute
          top: 7px
          transition: $primary-transition

  &.v-text-field--enclosed:not(.v-text-field--single-line)
    .v-select__selections
      padding-top: 24px

  &.v-text-field
    input
      flex: 1 1 // Doesn't resize on IE11 with 3rd param
      margin-top: 0
      min-width: 0
      pointer-events: none
      position: relative

  &.v-select--is-menu-active
    .v-input__icon--append .v-icon
      transform: rotate(180deg)

  &.v-select--chips
    input
      margin: 0

    .v-select__selections
      min-height: 42px

    &.v-select--chips--small
      .v-select__selections
        min-height: 32px

    &:not(.v-text-field--single-line)
      &.v-text-field--box,
      &.v-text-field--enclosed
        .v-select__selections
          min-height: 68px

        &.v-select--chips--small
          .v-select__selections
            min-height: 56px

  &.v-text-field--reverse
    .v-select__slot,
    .v-select__selections
      flex-direction: row-reverse

  &__selections
    align-items: center
    display: flex
    flex: 1 1 auto
    flex-wrap: wrap
    line-height: 18px

  &__selection
    max-width: 90%

    &--comma
      align-items: center
      display: inline-flex
      margin: 7px 4px 7px 0

  &__slot
    position: relative
    align-items: center
    display: flex
    width: 100%

  &:not(.v-text-field--single-line)
    .v-select__slot
      // If an input is a direct child
      // there is no selections div
      // and we must move input to
      // the end of the container
      > input
        align-self: flex-end