quasar/src/components/notify/notify.mat.styl at v0.17 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.q-notifications > div
  z-index $z-notify

.q-notification-list
  pointer-events none
  left 0
  right 0
  margin-bottom 10px
  position relative
.q-notification-list-center
  top 0
  bottom 0
.q-notification-list-top
  top 0
.q-notification-list-bottom
  bottom 0

body.q-ios-statusbar-x
  .q-notification-list-center, .q-notification-list-top
    top env(safe-area-inset-top)
  .q-notification-list-center, .q-notification-list-bottom
    bottom env(safe-area-inset-bottom)

.q-notification
  border-radius 5px
  pointer-events all
  display inline-block
  margin 10px 10px 0
  transition-property transform,opacity
  transition-duration 1s
  z-index $z-notify
  max-width 100%

.q-notification-
  &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