vuetify/src/stylus/components/_snackbars.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'

.snack
  background-color: $snackbar-background-color
  position: fixed
  display: flex
  height: 0
  pointer-events: none
  visibility: visible
  z-index: 1000

  &--absolute
    position: absolute

  &--top
    top: 0
    left: 50%
    transform: translate(-50%, 0)

  &--bottom
    bottom: 48px
    left: 50%
    transform: translate(-50%, 0)

  &--left
    left: 8px
    right: initial
    transform: none

    &.snack--top
      top: 8px

    &.snack--bottom
      bottom: 56px

  &--right
    left: initial
    right: 8px
    transform: none

    &.snack--top
      top: 8px

    &.snack--bottom
      top: initial
      bottom: 56px

  &__content
    background-color: inherit
    padding: 14px 24px
    border-radius: 2px
    pointer-events: auto
    max-width: 568px
    min-width: 288px
    height: 48px
    align-items: center
    color: #fff
    display: flex
    font-size: 14px
    justify-content: space-between
    transition: .4s $transition.swing
    position: relative !important
    elevation(6)

    .btn
      margin: 0 0 0 48px

.snack
  &--multi-line &__content
    height: 80px
    padding: 24px

  &--bottom, &--right
    &.snack--multi-line
      bottom: 80px

  &--vertical &__content
    height: 112px
    padding: 24px 24px 14px
    flex-direction: column
    align-items: initial

    .btn
      align-self: flex-end

  &--bottom, &--right
    &.snack--vertical
      bottom: 112px

@media $display-breakpoints.xs-only
  .snack
    width: 100%
    left: 0
    right: initial
    transform: none

    &--right, &--left
      &.snack--top
        top: 0

      &.snack--bottom
        bottom: 48px

    &__content
      border-radius: 0
      max-width: 100%
      width: 100%

      .btn
        margin: 0 0 0 24px