quasar/src/plugins/Notify.styl

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

.q-notifications__list
  z-index: $z-notify
  pointer-events: none
  left: 0
  right: 0
  margin-bottom: 10px
  position: relative

  &--center
    top: 0
    bottom: 0
  &--top
    top: 0
  &--bottom
    bottom: 0

body.q-ios-padding .q-notifications__list
  &--center, &--top
    top: $ios-statusbar-height
    top: env(safe-area-inset-top)
  &--center, &--bottom
    bottom: env(safe-area-inset-bottom)

.q-notification
  box-shadow: $shadow-2
  border-radius: $generic-border-radius
  pointer-events: all
  display: inline-flex
  margin: 10px 10px 0
  transition: transform 1s, opacity 1s
  z-index: $z-notify
  flex-shrink: 0

  max-width: 95vw

  background: #323232
  color: #fff

  font-size: 14px

  &__icon
    font-size: 24px
    margin-right: 16px
    flex: 0 0 1em

  &__avatar
    font-size: 32px
    margin-right: 8px

  &__spinner
    font-size: 32px
    margin-right: 8px

  &__message
    padding: 8px 0

  &__caption
    font-size: 0.9em
    opacity: 0.7

  &__actions
    color: $primary
    color: var(--q-color-primary)

  &__badge
    animation: q-notif-badge .42s
    padding: 4px 8px
    position: absolute
    background: $negative
    box-shadow: $shadow-1
    background-color: $negative
    background-color: var(--q-color-negative)
    color: #fff
    border-radius: $generic-border-radius
    font-size: 12px
    line-height: 12px

    &--top-left,
    &--top-right
      top: -6px

    &--bottom-left,
    &--bottom-right
      bottom: -6px

    &--top-left,
    &--bottom-left
      left: -22px

    &--top-right,
    &--bottom-right
      right: -22px

  &__progress
    z-index: -1
    position: absolute
    height: 3px
    bottom: 0
    left: -10px
    right: -10px
    animation: q-notif-progress linear
    background: currentColor
    opacity: .3
    border-radius: $generic-border-radius $generic-border-radius 0 0
    transform-origin: 0 50%
    transform: scaleX(0)

  &--standard
    padding: 0 16px
    min-height: 48px

    .q-notification__actions
      padding: 6px 0 6px 8px
      margin-right: -8px

  &--multi-line
    min-height: 68px
    padding: 8px 16px

    .q-notification__badge
      &--top-left,
      &--top-right
        top: -15px

      &--bottom-left,
      &--bottom-right
        bottom: -15px

    .q-notification__progress
      bottom: -8px

    .q-notification__actions
      padding: 0

      &--with-media
        padding-left: 25px

  &--top-left-enter, &--top-left-leave-to,
  &--top-enter, &--top-leave-to,
  &--top-right-enter, &--top-right-leave-to
    opacity: 0
    transform: translateY(-50px)
    z-index: ($z-notify - 1)

  &--left-enter, &--left-leave-to,
  &--center-enter, &--center-leave-to,
  &--right-enter, &--right-leave-to
    opacity: 0
    transform: rotateX(90deg)
    z-index: ($z-notify - 1)

  &--bottom-left-enter, &--bottom-left-leave-to,
  &--bottom-enter, &--bottom-leave-to,
  &--bottom-right-enter, &--bottom-right-leave-to
    opacity: 0
    transform: translateY(50px)
    z-index: ($z-notify - 1)

  &--top-left-leave-active,
  &--top-leave-active,
  &--top-right-leave-active,
  &--left-leave-active,
  &--center-leave-active,
  &--right-leave-active,
  &--bottom-left-leave-active,
  &--bottom-leave-active,
  &--bottom-right-leave-active
    position: absolute
    z-index: ($z-notify - 1)
    margin-left: 0
    margin-right: 0

  &--top-leave-active,
  &--center-leave-active
    top: 0

  &--bottom-left-leave-active,
  &--bottom-leave-active,
  &--bottom-right-leave-active
    bottom: 0

@media (min-width: $breakpoint-sm-min)
  .q-notification
    max-width: 65vw

@keyframes q-notif-badge
  15%
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)

  30%
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)

  45%
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)

  60%
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)

  75%
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)

@keyframes q-notif-progress
  0%
    transform: scaleX(1)
  100%
    transform: scaleX(0)