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

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

$breadcrumb-radius    ?= $generic-border-radius
$breadcrumb-height    ?= 34px
$breadcrumb-separator ?= 15px

$breadcrumb-primary   ?= $primary
$breadcrumb-secondary ?= lighten($breadcrumb-primary, 10%)

$breadcrumb-hover     ?= $tertiary
$breadcrumb-active    ?= darken($breadcrumb-hover, 15%)


ul.breadcrumb
  list-style none
  display inline-flex
  flex-wrap nowrap
  margin ($breadcrumb-height / 3) 0 0 0
  padding 0

  i
    font-size 1.7em

  li
    float left
    margin-bottom ($breadcrumb-height / 3)
    a
      color white
      display block
      background $breadcrumb-primary
      text-decoration none
      position relative
      height $breadcrumb-height
      line-height $breadcrumb-height
      padding 0 10px 0 5px

      text-align center
      margin-right 23px

    &:nth-child(even) a
      background $breadcrumb-secondary
      &:before
        border-color $breadcrumb-secondary
        border-left-color transparent
      &:after
        border-left-color $breadcrumb-secondary

    &:first-child a
      padding-left $breadcrumb-separator
      border-radius $breadcrumb-radius 0 0 $breadcrumb-radius
      &:before
        border 0

    &:last-child a
      padding-right $breadcrumb-separator
      border-radius 0 $breadcrumb-radius $breadcrumb-radius 0
      &:after
        border 0

    a
      &:before, &:after
        content ''
        position absolute
        top 0
        bottom 0
        border 0 solid $breadcrumb-primary
        border-width ($breadcrumb-height / 2) 10px

      &:before
        left (- $breadcrumb-separator)
        border-left-color transparent

      &:after
        left 100%
        border-color transparent
        border-left-color $breadcrumb-primary

      &:active
        background $breadcrumb-active
        &:before
          border-color $breadcrumb-active
          border-left-color transparent
        &:after
          border-left-color $breadcrumb-active

body.desktop ul.breadcrumb a
  &:hover
    background $breadcrumb-hover
    &:before
      border-color $breadcrumb-hover
      border-left-color transparent
    &:after
      border-left-color $breadcrumb-hover