quasar-framework/src/css-components/list/list.ios.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

$item-primary-secondary-color ?= rgb(117, 117, 117)
$item-content-label-color     ?= rgba(0, 0, 0, .87)
$item-label-color             ?= rgba(0, 0, 0, .54)

.item
  height 48px
  position relative
  display block
  margin 0
  padding 0
  font-size 16px
  line-height 16px
  transition all .45s cubic-bezier(.23, 1, .32, 1) 0ms
  background none
  &.active, &.router-link-active
    background rgba(0, 0, 0, .2)

  &.item-link
    cursor pointer
    &:active
      background rgba(0, 0, 0, .3)

  > .item-primary
    color $item-primary-secondary-color
  > div.item-primary
    position absolute
    top 0
    margin 4px 12px
    height 40px
    width 40px
    text-align center
    line-height 40px
    padding 0
    border-radius 50%
    font-size 20px
    > * // @stylint ignore
      margin-top -4px
      font-size 24px
      line-height 30px
  > i.item-primary
    position absolute
    top 0
    margin 12px
    left 4px
    height 24px
    width 24px
    font-size 24px
    line-height 24px
    border-radius 50%
  > img.item-primary
    display inline-flex
    align-items center
    justify-content center
    font-size 20px
    height 40px
    width 40px
    position absolute
    top 4px
    left 16px
    user-select none
    &:not(.thumbnail)
      border-radius 50%

  > .item-content
    padding 16px 0
    margin-left 16px
    margin-right 16px
    position relative
    &.inset
      margin-left 72px
    &.has-secondary
      margin-right 72px
    &:not(.no-style)
      > span, > div > span
        color $item-content-label-color

  > .item-primary ~ .item-content
    margin-left 72px

  > .item-secondary
    color $item-primary-secondary-color
    position absolute
    top 0
    margin 12px
    right 4px
    height 24px
    width 40px
    line-height 24px
    font-size 24px
    text-align right

    &.stamp
      width 55px
      margin-left 0
      text-align right
      font-size 12px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
  > i.item-secondary
    width 24px
  > img.item-secondary
    margin 4px 12px
    height 40px
    &:not(.thumbnail)
      border-radius 50%
  > * // @stylint ignore
    text-align left

  &:not(.two-lines):not(.three-lines):not(.multiple-lines) > .item-content > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
    overflow hidden
    text-overflow ellipsis
    white-space nowrap

  &.two-lines
    height 72px
    > .item-primary
      top 14px
    > img.item-primary
      top 18px
    > .item-secondary
      top 12px
      &.stamp
        top 4px
    > .item-content
      padding-top 20px
      padding-bottom 16px

      &:not(.no-style)
        > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
          overflow hidden
          text-overflow ellipsis
          white-space nowrap

        > div:not(:first-of-type):not([class^='quasar-'])
          font-size 14px
          line-height 16px
          height 16px
          margin 4px 0 0
          color $item-label-color

  &.three-lines
    height 88px
    > .item-primary
      top 14px
    > .item-secondary:not(.stamp)
      top 3px
    > .item-secondary.stamp + .item-secondary
      top 30px
    > .item-content
      padding-top 16px
      padding-bottom 16px

      &:not(.no-style)
        > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
          overflow hidden
          text-overflow ellipsis

        > div:first-of-type:not([class^='quasar-'])
          white-space nowrap

        > div:not(:first-of-type):not([class^='quasar-'])
          font-size 14px
          line-height 18px
          height 36px
          margin 4px 0 0
          color $item-label-color
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical

  &.multiple-lines
    height auto
    > .item-content
      position static
      padding-top 16px

  .item-label
    color $item-label-color !important
  .item-smaller
    font-size 14px

.item + .item,
.item + .quasar-collapsible,
.quasar-collapsible + .item,
.quasar-collapsible + .quasar-collapsible
  &.item-delimiter
    border-top 1px solid rgb(224, 224, 224)
  &.item-inset-delimiter
    &:after
      content ''
      position absolute
      top 0
      left 72px
      right 0
      height 1px
      background rgb(224, 224, 224)

body.desktop .item.item-link:hover
  background rgba(0, 0, 0, .2)

.list
  text-align left
  border 1px solid rgb(224, 224, 224)

  > .item, > .quasar-collapsible
    &:first-child
      margin-top 8px
    &:last-child
      margin-bottom 8px

  hr
    margin 8px 0
    height 1px
    border 0
    background-color rgb(224, 224, 224)
    &.inset
      margin-left 72px
    &:last-child
      visibility hidden

  .list-label
    color $item-label-color
    font-size 14px
    font-weight 500
    line-height 48px
    padding-left 16px
    width 100%
    &.inset
      padding-left 72px

  hr + .list-label
    margin-top -8px

  &.striped .item:nth-child(even)
    background-color rgba(0, 0, 0, .05)

  &.highlight .item:hover
    background-color rgba(0, 0, 0, .1)

  &.item-delimiter
    .item + .item,
    .item + .quasar-collapsible,
    .quasar-collapsible + .item,
    .quasar-collapsible + .quasar-collapsible
      border-top 1px solid rgb(224, 224, 224)
  &.item-inset-delimiter
    .item + .item,
    .item + .quasar-collapsible,
    .quasar-collapsible + .item,
    .quasar-collapsible + .quasar-collapsible
      &:after
        content ''
        position absolute
        top 0
        left 72px
        right 0
        height 1px
        background rgb(224, 224, 224)