quasar/src/components/modal/modal.ios.styl at v0.14 · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
body.with-modal
  overflow hidden !important

minimized-modal()
  max-width 80vw
  max-height 80vh

maximized-modal()
  width 100%
  height 100%
  max-width 100%
  max-height 100%
  border-radius 0

.modal-content
  position relative
  background $modal-background
  box-shadow $shadow-24
  overflow-y auto
  min-width 280px
  max-height 80vh
  border-radius $modal-border-radius
  -webkit-backface-visibility hidden

  .layout
    width 100%
    height 100%

.modal
  z-index $z-modal
  &.minimized, &.with-backdrop
    background $dimmed-background
  &.minimized .modal-content
    minimized-modal()
  &.maximized .modal-content
    maximized-modal()

.q-modal-enter, .q-modal-leave-active
  opacity 0

@media (min-width $breakpoint-md-min)
  .modal:not(.maximized)
    background $dimmed-background
    &.q-modal-enter .modal-content
      transform scale(1.2)
    &.q-modal-leave-active .modal-content
      transform scale(.8)
  .modal.maximized
    &.q-modal-enter, &.q-modal-leave-active
      .modal-content
        transform translateX(101%)

@media (max-width $breakpoint-sm-max)
  .modal:not(.minimized)
    .modal-content
      maximized-modal()
    &.q-modal-enter, &.q-modal-leave-active
      .modal-content
        transform translateX(101%)
  .modal.minimized
    &.q-modal-enter .modal-content
      transform scale(1.2)
    &.q-modal-leave-active .modal-content
      transform scale(.8)

.modal, .modal-content
  transition all .2s ease-in-out

.modal-header
  text-align $modal-header-text-align
  padding $modal-header-padding
  font-size $modal-header-font-size
  font-weight 500

.modal-body
  padding $modal-body-padding
.modal-slim-body
  padding $modal-slim-body-padding
.modal-body, .modal-slim-body
  text-align $modal-body-text-align
  color $modal-body-color

.small-modal-scroll, .modal-scroll, .big-modal-scroll
  overflow auto
  -webkit-overflow-scrolling touch
  will-change scroll-position
.small-modal-scroll
  max-height (.65 * $modal-scroll-size)
.modal-scroll
  max-height $modal-scroll-size
.big-modal-scroll
  max-height (2 * $modal-scroll-size)

.modal-buttons:not(.modal-buttons-top)
  padding $modal-buttons-padding
  border-top 1px solid $grey-5
  color $primary
  .q-btn
    flex 1 1 auto
    font-size 110%
    margin 0
    padding 1rem
    border-radius 0
    &:last-child
      font-weight bold
  &.row
    .q-btn + .q-btn
      border-left 1px solid $grey-5
  &.column
    .q-btn + .q-btn
      border-top 1px solid $grey-5

.modal-buttons-top
  background $grey-2
  height 45px

.q-modal-bottom-enter, .q-modal-bottom-leave-active
  opacity 0
  .modal-content
    transform translateY(101%)

.q-modal-top-enter, .q-modal-top-leave-active
  opacity 0
  .modal-content
    transform translateY(-101%)

.q-modal-right-enter, .q-modal-right-leave-active
  opacity 0
  .modal-content
    transform translateX(101%)

.q-modal-left-enter, .q-modal-left-leave-active
  opacity 0
  .modal-content
    transform translateX(-101%)