You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

62 lines
1.0 KiB

  1. <template lang='pug'>
  2. v-snackbar.nav-notify(
  3. :color='notification.style'
  4. top
  5. multi-line
  6. v-model='notificationState'
  7. :timeout='6000'
  8. )
  9. .text-left
  10. v-icon.mr-3(dark) mdi-{{ notification.icon }}
  11. span {{ notification.message }}
  12. </template>
  13. <script>
  14. import { get, sync } from 'vuex-pathify'
  15. export default {
  16. data() {
  17. return { }
  18. },
  19. computed: {
  20. notification: get('notification'),
  21. notificationState: sync('notification@isActive')
  22. }
  23. }
  24. </script>
  25. <style lang='scss'>
  26. .nav-notify {
  27. top: -64px;
  28. padding-top: 0;
  29. z-index: 999;
  30. .v-snack__wrapper {
  31. border-top-left-radius: 0;
  32. border-top-right-radius: 0;
  33. position: relative;
  34. margin-top: 0;
  35. &::after {
  36. content: '';
  37. display: block;
  38. width: 100%;
  39. height: 2px;
  40. background-color: rgba(255,255,255,.4);
  41. position: absolute;
  42. bottom: 0;
  43. left: 0;
  44. animation: nav-notify-anim 6s linear;
  45. }
  46. }
  47. }
  48. @keyframes nav-notify-anim {
  49. 0% {
  50. width: 100%;
  51. }
  52. 100% {
  53. width: 0%;
  54. }
  55. }
  56. </style>