vuetify/src/stylus/components/_toolbar.styl

Vue.js 2 Semantic Component Framework

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

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

v-toolbar-content($direction)
  margin-{$direction}: 0

  &.v-btn--icon
    margin-{$direction}: -6px

  &.v-menu .v-menu__activator,
  &.v-tooltip span
    .v-btn
      margin-{$direction}: 0

    .v-btn--icon
      margin-{$direction}: -6px

v-toolbar-rtl()
  &__title
    &:not(:first-child)
      margin-left: 0
      margin-right: 20px

theme(v-toolbar, "v-toolbar")
rtl(v-toolbar-rtl, "v-toolbar")

.v-toolbar
  bootable()
  elevation(4)

  position: relative
  width: 100%
  will-change: padding-left, padding-right

  // TODO: Do we even need this?
  .v-text-field--enclosed,
  .v-text-field--box
    margin: 0

    .v-text-field__details
      display: none

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

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

    &:not(:first-child)
      margin-left: 20px

  &__content,
  &__extension
    align-items: center
    display: flex
    padding: 0 $grid-gutters.xl

    @media $display-breakpoints.sm-and-down
      padding: 0 $grid-gutters.lg

    .v-btn--icon
      margin: 6px

    > *:first-child
      v-toolbar-content(left)

    > *:last-child
      v-toolbar-content(right)

    > .v-list
      flex: 1 1 auto
      max-height: 100%

    > .v-list:first-child
      margin-left: '-%s' % $grid-gutters.xl

      @media $display-breakpoints.sm-and-down
        margin-left: '-%s' % $grid-gutters.lg

    > .v-list:last-child
      margin-right: '-%s' % $grid-gutters.xl

      @media $display-breakpoints.sm-and-down
        margin-right: '-%s' % $grid-gutters.lg

  &__extension
    > .v-toolbar__title
      margin-left: 72px

  &__items
    display: flex
    height: inherit
    max-width: 100%
    padding: 0

    .v-btn
      align-items: center
      align-self: center

    .v-tooltip,
    .v-tooltip > span
      height: inherit

    .v-btn:not(.v-btn--floating):not(.v-btn--icon),
    .v-menu,
    .v-menu__activator
      height: inherit
      margin: 0

/** Types */
.v-toolbar
  .v-overflow-btn,
  .v-btn-toggle
    elevation(0)

  .v-input
    margin: 0

  .v-overflow-btn
    .v-input__control,
    .v-input__slot
      &:before
        display: none

  &--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: $grid-gutters.lg
    width: auto

  &--clipped
    z-index: 3