vuetify/src/stylus/components/_lists.styl

Vue.js 2 Semantic Component Framework

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

/* Themes */
v-list($material)
  background: $material.cards
  color: $material.text.primary

  .v-list--disabled
    color: $material.text.disabled

  .v-list__tile__sub-title
    color: $material.text.secondary

  .v-list__tile__mask
    color: $material.text.disabled

    background: $material.expansion-panels.focus

  .v-list__tile--link:hover,
  .v-list__tile--highlighted,
  .v-list__group__header:hover
    background: $material.list-tile.hover

  .v-list__group--active:before,
  .v-list__group--active:after
    background: $material.dividers

  .v-list__group--disabled
    .v-list__tile
      color: $material.text.disabled !important

    .v-list__group__header__prepend-icon .v-icon
      color: $material.icons.inactive !important

v-list-rtl()
  &__tile
    &__title
      text-align: right
    &__content
      text-align: right

theme(v-list, "v-list")
rtl(v-list-rtl, "v-list")

.v-list
  list-style-type: none
  padding: $list-top-padding 0 $list-bottom-padding
  transition: $primary-transition

  // TODO: Remove for List rewrite v2.0
  > div
    transition: inherit

  &__tile
    align-items: center
    color: inherit
    display: flex
    font-size: $list-tile-font-size
    font-weight: $list-tile-font-weight
    height: $list-item-single-height
    margin: 0
    padding: 0 16px
    position: relative
    text-decoration: none
    transition: $primary-transition

    &--link
      cursor: pointer
      user-select: none

    &__content,
    &__action
      height: 100%

    &__title,
    &__sub-title
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      transition: $primary-transition
      width: 100%

    &__title
      height: 24px
      line-height: 24px
      position: relative
      text-align: left

    &__sub-title
      font-size: $list-sub-title-font-size

    &__avatar
      display: flex
      justify-content: flex-start
      min-width: 56px

    &__action
      display: flex
      justify-content: flex-start
      min-width: 56px
      align-items: center

      .v-btn // fix button padding if used
        padding 0
        margin 0

        &--icon
          margin -6px

      .v-radio.v-radio
        margin: 0

      // QoL when using selection controls in actions
      .v-input--selection-controls
        padding: 0
        margin: 0

        .v-messages
          display: none

        .v-input__slot
          margin: 0

      &-text
        color: $list-action-text-font-color
        font-size: $list-action-text-font-size

      &--stack
        align-items: flex-end
        justify-content: space-between
        padding-top: $list-top-padding
        padding-bottom: $list-bottom-padding
        white-space: nowrap
        flex-direction: column

    &__content
      text-align: left
      flex: 1 1 auto
      overflow: hidden
      display: flex
      align-items: flex-start
      justify-content: center
      flex-direction: column

      ~ .v-list__tile__avatar
        justify-content: flex-end

      ~ .v-list__tile__action:not(.v-list__tile__action--stack)
        justify-content: flex-end

    &--active
      .v-list__tile__action:first-of-type
        .v-icon
          color: inherit

    &--avatar
      height: $list-item-avatar-single-height

  &--dense
    padding-top: $list-item-dense-top-padding
    padding-bottom: $list-item-dense-top-padding

    .v-subheader
      font-size: $subheader-dense-font-size
      height: $list-dense-subheader-height

    .v-list__group
      .v-subheader
        height $list-dense-subheader-group-height

    .v-list__tile
      font-size: $list-item-dense-font-size

      &--avatar
        height: $list-item-dense-avatar-single-height

      &:not(.v-list__tile--avatar)
        height: $list-item-dense-single-height

      .v-icon
        font-size: $list-item-dense-icon-font-size

    .v-list__tile__sub-title
      font-size: $list-item-dense-font-size

  &--disabled
    pointer-events: none

  &--two-line
    .v-list__tile
      height: $list-item-double-height

    &.v-list--dense
      .v-list__tile
        height: $list-item-dense-double-height

  &--three-line
    .v-list__tile
      height: $list-item-triple-height

    .v-list__tile__avatar
      margin-top: $list-item-avatar-triple-margin-top

    .v-list__tile__sub-title
      white-space: initial
      -webkit-line-clamp: 2
      -webkit-box-orient: vertical
      display: -webkit-box

    &.v-list--dense
      .v-list__tile
        height: $list-item-dense-triple-height

  > .v-list__group
    &:before
      top: 0

      .v-list__tile__avatar
        margin-top: $list-item-dense-avatar-triple-margin-top

  &__group
    padding: 0
    position: relative
    transition: inherit

    &:before,
    &:after
      content: ''
      height: 1px
      left: 0
      position: absolute
      transition: $primary-transition
      width: 100%

    &--active ~ .v-list__group
      &:before
        display: none

    &__header
      align-items: center
      cursor: pointer
      display: flex
      list-style-type: none

      > div:not(.v-list__group__header__prepend-icon):not(.v-list__group__header__append-icon)
        flex: 1 1 auto
        overflow: hidden

      .v-list__group__header__append-icon,
      .v-list__group__header__prepend-icon
        padding: 0 16px
        user-select: none

      &--sub-group
        align-items: center
        display: flex

        div .v-list__tile
          padding-left: 0

        .v-list__group__header__prepend-icon
          padding: 0 0 0 40px
          margin-right: 8px

      .v-list__group__header__prepend-icon
        display: flex
        justify-content: flex-start
        min-width: 56px

      &--active
        .v-list__group__header__append-icon
          .v-icon
            transform: rotate(-180deg)

        .v-list__group__header__prepend-icon
          .v-icon
            color: inherit

        &.v-list__group__header--sub-group
          .v-list__group__header__prepend-icon
            .v-icon
              transform: rotate(-180deg)

    &__items
      position: relative
      padding: 0
      transition: inherit

      > div
        display: block

      &--no-action
        .v-list__tile
          padding-left: $list-item-left-padding

    &--disabled
      pointer-events: none

  &--subheader
    padding-top: 0