vuetify/src/stylus/components/_system-bars.styl

Vue.js 2 Semantic Component Framework

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

/* Theme */
system-bar($material)
  background-color: $material.status-bar.regular
  color: $material.text.secondary

  .icon
    color: $material.text.secondary

  &--lights-out
    background-color: $material.status-bar.lights-out !important

theme(system-bar, "system-bar")

.system-bar
  align-items: center
  display: flex
  font-size: $headings.body-2.size
  font-weight: $headings.body-2.weight
  padding: 0 8px

  .icon
    font-size: $headings.subheading.size

  &--fixed, &--absolute
    left: 0
    top: 0
    width: 100%
    z-index: 3

  &--fixed
    position: fixed

  &--absolute
    position: absolute

  &--status
    .icon
      margin-right: 4px

  &--window
    .icon
      font-size: $headings.h6.size
      margin-right: 8px