vuetify/src/stylus/components/_toolbar.styl

Vue.js 2 Semantic Component Framework

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

/* Theme */
toolbar($material)
  background-color: $material.app-bar
  color: $material.text.primary

theme(toolbar, "toolbar")

.toolbar
  bootable()
  elevation(4)

  display: block
  position: relative
  width: 100%
  will-change: padding-left

  .input-group--solo
    .input-group__details
      display: none
      
  .input-group--single-line:not(.input-group--solo)
    padding: 0

    label
      top: auto

/** Children */
.toolbar
  .tabs
    width: 100%

  &__title
    font-size: $headings.h6.size
    font-weight: $headings.h6.weight
    letter-spacing: $headings.h6.letter-spacing
    margin-left: 16px
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis

  &__content, &__extension
    align-items: center
    display: flex

    > .list
      flex: 1 1 auto
      margin: 0 !important // come back to this
      max-height: 100%

    > .btn:last-child, > .menu:first-child
      margin-right: 8px

    > .btn:first-child, > .menu:first-child
      margin-left: 8px

    > *:not(.btn):not(.menu):first-child:not(:only-child)
      margin-left: $grid-gutters.lg

    > *:not(.btn):not(.menu):last-child:not(:only-child)
      margin-right: $grid-gutters.lg

  &__items
    display: flex
    height: 100%
    max-width: 100%
    padding: 0
    
    .menu,
    .btn
      height: 100%
      margin: 0

  @media $display-breakpoints.xs-only
    .toolbar__content,
    .toolbar__extension
      > .btn:last-child
        margin-right: 17px

      > .btn:first-child
        margin-left: 17px

      > *:not(.btn):not(.menu):first-child:not(:only-child)
        margin-left: $grid-gutters.xl

      > *:not(.btn):not(.menu):last-child:not(:only-child)
        margin-right: $grid-gutters.xl

  @media all and (max-width: $grid-breakpoints.sm) and (orientation: portrait)
    toolbar-content(7px)

/** Types */
.toolbar
  &--card
    border-radius: $card-border-radius $card-border-radius 0 0
    elevation(0)

  &--fixed
    position: fixed
    z-index: 2

  &--fixed, &--absolute
    top: 0
    left: 0

  &--absolute
    position: absolute
    z-index 2

  &--floating
    display: inline-flex
    margin: 16px
    width: auto
  
  &--clipped
    z-index: 3

  &--prominent
    toolbar-content(15px)

  &--dense
    toolbar-content(7px)

toolbar-content(left)
  .toolbar__content,
  .toolbar__extension
    > *:first-child
      margin-left: left

    > *:last-child
      margin-right: left