quasar/src/components/bar/QBar.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.q-bar
  background rgba(0, 0, 0, .2)

  > .q-icon
    margin-left 2px
  > div, > div + .q-icon
    margin-left 8px
  > .q-btn
    margin-left 2px

  > .q-icon:first-child, > .q-btn:first-child, > div:first-child
    margin-left 0

  &--standard
    padding 0 12px
    height 32px
    font-size 18px
    > div
      font-size 16px
    .q-btn
      font-size 11px

  &--dense
    padding 0 8px
    height 24px
    font-size 14px
    .q-btn
      font-size 8px

  &--dark
    background rgba(255, 255, 255, .15)