quasar

.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 min-width 300px max-width 95vw background #323232 color white font-size 14px &__icon font-size 24px padding-right 16px &__avatar font-size 32px padding-right 8px &__message padding 8px 0 &__actions color #c581ff &--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__actions padding 0 &--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, &--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