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

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-item-stamp
  font-size $item-stamp-font-size
  line-height $item-stamp-font-size
  white-space nowrap
  margin .3rem 0

.q-item-side
  color $item-side-color
  flex 0 0 auto
  min-width $item-primary-size
.q-item-side-right
  text-align right
.q-item-avatar, .q-item-avatar img
  width $item-primary-size
  height $item-primary-size
  border-radius 50%

.q-item-letter, .q-item-icon
  font-size $item-icon-size
.q-item-inverted
  border-radius 50%
  color white
  background $item-side-color
  height $item-primary-size
  width $item-primary-size
  &, .q-icon
    font-size $item-inverted-icon-size

.q-item-main
  flex 1 1 auto
  min-width 0
.q-item-main-inset
  margin-left $item-inset

.q-item-label
  line-height 1.2
  > span
    color $item-content-secondary-text-color
.q-item-sublabel
  color $item-content-secondary-text-color
  font-size 90%
  margin-top .2rem
  > span
    font-weight 500

.q-item-section + .q-item-section
  margin-left $item-gutter

.q-item
  position relative
  display flex
  align-items center
  font-size $item-font-size
  text-align left

  padding ($item-padding / 2) $item-padding
  min-height $item-min-height

  &.active, &.{$router-link-active}, &:focus
    background $item-active-color

  &:focus
    outline 0

.q-item-image
  min-width $item-image-size
  max-width $item-image-size
  max-height $item-image-size

.q-list-multiline > .q-item, .q-item-multiline
  align-items flex-start

.q-list-link > .q-item, .q-item-link
  cursor pointer

.q-list-highlight > .q-item, .q-item-highlight,
.q-list-link > .q-item, .q-item-link
  &:hover
    background $item-highlight-color

.q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator
  border-top 1px solid $item-separator-color
.q-list-inset-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-inset-separator
  &:after
    content ''
    position absolute
    top 0
    right 0
    left ($item-padding + $item-inset)
    height 1px
    background $item-separator-color

.q-list-dense > .q-item, .q-item-dense
  padding round($item-padding * $item-dense-factor) $item-padding
  min-height round($item-min-height * $item-dense-factor)
.q-list-sparse > .q-item, .q-item-sparse
  padding ($item-padding * $item-sparse-factor) $item-padding
  min-height ($item-min-height * $item-sparse-factor)

.q-list-striped > .q-item:nth-child(even)
  background-color $item-stripe-color
.q-list-striped-odd > .q-item:nth-child(odd)
  background-color $item-stripe-color

.q-list
  border 1px solid $item-separator-color
  padding ($item-padding / 2) 0

.q-item-separator-component
  margin ($item-padding / 2) 0
  height 1px
  border 0
  background-color $item-separator-color
  &:last-child
    display none
  & + .q-list-header
    margin-top ($item-padding / 2)
.q-item-separator-inset-component
  margin-left ($item-padding + $item-gutter + $item-primary-size)

.q-list-header
  color $item-label-color
  font-size 10px
  font-weight 500
  min-height 35px
  padding ($item-padding / 2) $item-padding
  line-height 14px
  letter-spacing 1px
  text-transform uppercase
.q-list-header-inset
  padding-left ($item-padding + $item-inset)


.q-list-dark, .q-item-dark
  .q-item-side
    color $item-side-dark-color
  .q-item-inverted
    color black
    background $item-side-dark-color
  .q-item-label > span, .q-item-sublabel
    color $item-content-secondary-text-dark-color
  .q-item
    color white
    &.active, &.{$router-link-active}, &:focus
      background $item-active-dark-color
.q-list-dark
  border 1px solid $item-separator-dark-color
  &.q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator
    border-top 1px solid $item-separator-dark-color
  &.q-list-inset-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-inset-separator
    &:after
      background $item-separator-dark-color
  &.q-list-striped > .q-item:nth-child(even)
    background-color $item-stripe-dark-color
  &.q-list-striped-odd > .q-item:nth-child(odd)
    background-color $item-stripe-dark-color
  .q-item-separator-component
    background-color $item-separator-dark-color
  .q-list-header
    color $item-label-dark-color

  &.q-list-highlight > .q-item, .q-item-highlight,
  &.q-list-link > .q-item, .q-item-link
    &:hover
      background $item-highlight-dark-color