webcimes-modal 1.0.1 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/.eslintrc.json +0 -0
  2. package/.gitignore +2 -0
  3. package/LICENSE.md +0 -0
  4. package/README.md +67 -17
  5. package/{demo.html → demo/demo_esm.html} +7 -6
  6. package/demo/demo_udm.html +94 -0
  7. package/{webcimes-modal.css → dist/css/webcimes-modal.css} +418 -415
  8. package/dist/css/webcimes-modal.css.map +1 -0
  9. package/dist/css/webcimes-modal.min.css +2 -0
  10. package/dist/css/webcimes-modal.min.css.map +1 -0
  11. package/{images → dist/images}/times.svg +0 -0
  12. package/{webcimes-modal.js → dist/js/esm/webcimes-modal.esm.js} +151 -108
  13. package/dist/js/esm/webcimes-modal.esm.js.map +1 -0
  14. package/dist/js/esm/webcimes-modal.esm.min.js +2 -0
  15. package/dist/js/esm/webcimes-modal.esm.min.js.map +1 -0
  16. package/dist/js/udm/webcimes-modal.udm.js +421 -0
  17. package/dist/js/udm/webcimes-modal.udm.js.map +1 -0
  18. package/dist/js/udm/webcimes-modal.udm.min.js +2 -0
  19. package/dist/js/udm/webcimes-modal.udm.min.js.map +1 -0
  20. package/package.json +16 -4
  21. package/src/css/webcimes-modal.css +416 -0
  22. package/src/images/times.svg +1 -0
  23. package/{webcimes-modal.ts → src/ts/webcimes-modal.ts} +22 -9
  24. package/tsconfig.json +15 -8
  25. package/webpack.config.ts +147 -0
  26. package/demo_test.html +0 -0
  27. package/webcimes-modal.js.map +0 -1
package/{webcimes-modal.css → dist/css/webcimes-modal.css} RENAMED
@@ -1,415 +1,418 @@
1
- /**
2
- * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)
3
- * MIT License - https://choosealicense.com/licenses/mit/
4
- * Date: 2023-03-25
5
- */
6
-
7
- /*
8
- -----------------------
9
- WEBCIMES MODAL
10
- -----------------------
11
- */
12
-
13
- .webcimesModals,
14
- .webcimesModals *,
15
- .webcimesModals *::before,
16
- .webcimesModals *::after
17
- {
18
- -webkit-box-sizing: border-box;
19
- -moz-box-sizing: border-box;
20
- box-sizing: border-box;
21
- }
22
- .webcimesModals
23
- {
24
- --webcimes-modals-background: rgba(0,0,0,0.8);
25
- --webcimes-modals-z-index: 5;
26
-
27
- position: fixed;
28
- background: var(--webcimes-modals-background);
29
- top: 0;
30
- bottom: 0;
31
- left: 0;
32
- right: 0;
33
- display: flex;
34
- align-items: center;
35
- justify-content: center;
36
- z-index: var(--webcimes-modals-z-index);
37
- }
38
- .webcimesModals > .modal
39
- {
40
- --modal-color: inherit;
41
- --modal-background: #fff;
42
- --modal-border-color: #ddd;
43
- --modal-box-shadow: 1px 1px 3px 0px #444;
44
- --modal-title-font-size: 24px;
45
- --modal-button-cancel-background: rgba(102,102,102,1);
46
- --modal-button-cancel-background-hover: rgba(102,102,102,0.7);
47
- --modal-button-cancel-color: #fff;
48
- --modal-button-cancel-color-hover: #fff;
49
- --modal-button-confirm-background: rgba(0,0,0,1);
50
- --modal-button-confirm-background-hover: rgba(0,0,0,0.7);
51
- --modal-button-confirm-color: #fff;
52
- --modal-button-confirm-color-hover: #fff;
53
-
54
- position: absolute;
55
- border-radius: 5px;
56
- overflow:auto;
57
- color: var(--modal-color);
58
- background: var(--modal-background);
59
- -webkit-box-shadow: var(--modal-box-shadow);
60
- -moz-box-shadow: var(--modal-box-shadow);
61
- -o-box-shadow: var(--modal-box-shadow);
62
- box-shadow: var(--modal-box-shadow);
63
- }
64
- .webcimesModals > .modal button
65
- {
66
- font-family: inherit;
67
- font-size: inherit;
68
- font-weight: inherit;
69
- border: none;
70
- background: none;
71
- }
72
- .webcimesModals > .modal > .modalHeader
73
- {
74
- position: relative;
75
- background: var(--modal-background);
76
- padding: 20px 40px;
77
- border-bottom: 1px solid var(--modal-border-color);
78
- display: flex;
79
- align-items: center;
80
- }
81
- .webcimesModals > .modal > .modalHeader.sticky
82
- {
83
- position: sticky;
84
- top: 0;
85
- }
86
- .webcimesModals > .modal > .modalHeader.movable
87
- {
88
- cursor: move;
89
- touch-action: none;
90
- }
91
- .webcimesModals > .modal > .modalHeader > .title
92
- {
93
- overflow: hidden;
94
- text-overflow: ellipsis;
95
- font-size: var(--modal-title-font-size);
96
- }
97
- .webcimesModals > .modal > .modalHeader > .close
98
- {
99
- position: absolute;
100
- height: 20px;
101
- width: 12px;
102
- right: 15px;
103
- top: 50%;
104
- margin-top: -10px;
105
- background-image: url("images/times.svg");
106
- cursor: pointer;
107
- opacity: 1;
108
- -webkit-transition: opacity 0.6s ease 0s;
109
- -moz-transition: opacity 0.6s ease 0s;
110
- -o-transition: opacity 0.6s ease 0s;
111
- transition: opacity 0.6s ease 0s;
112
- }
113
- .webcimesModals > .modal > .modalHeader > .close:hover
114
- {
115
- opacity: 0.5;
116
- }
117
- .webcimesModals > .modal > .modalBody
118
- {
119
- padding: 20px 40px;
120
- }
121
- .webcimesModals > .modal > .modalBody.movable
122
- {
123
- cursor: move;
124
- }
125
- .webcimesModals > .modal > .modalFooter
126
- {
127
- background: var(--modal-background);
128
- padding: 20px 40px;
129
- border-top: 1px solid var(--modal-border-color);
130
- display: flex;
131
- justify-content: flex-end;
132
- flex-wrap: wrap;
133
- }
134
- .webcimesModals > .modal > .modalFooter.sticky
135
- {
136
- position: sticky;
137
- bottom: 0;
138
- }
139
- .webcimesModals > .modal > .modalFooter.movable
140
- {
141
- cursor: move;
142
- touch-action: none;
143
- }
144
- .webcimesModals > .modal > .modalFooter button
145
- {
146
- max-width: 100%;
147
- flex: 0 0 auto;
148
- border-radius: 5px;
149
- padding: 10px 30px;
150
- margin: 5px;
151
- cursor: pointer;
152
- text-overflow: ellipsis;
153
- overflow: hidden;
154
- -webkit-transition: color 0.6s ease 0s, background 0.6s ease 0s;
155
- -moz-transition: color 0.6s ease 0s, background 0.6s ease 0s;
156
- -o-transition: color 0.6s ease 0s, background 0.6s ease 0s;
157
- transition: color 0.6s ease 0s, background 0.6s ease 0s;
158
- }
159
- .webcimesModals > .modal > .modalFooter button.cancel
160
- {
161
- background: var(--modal-button-cancel-background);
162
- color: var(--modal-button-cancel-color);
163
- }
164
- .webcimesModals > .modal > .modalFooter button.cancel:hover
165
- {
166
- background: var(--modal-button-cancel-background-hover);
167
- color: var(--modal-button-cancel-color-hover);
168
- }
169
- .webcimesModals > .modal > .modalFooter button.confirm
170
- {
171
- background: var(--modal-button-confirm-background);
172
- color: var(--modal-button-confirm-color);
173
- }
174
- .webcimesModals > .modal > .modalFooter button.confirm:hover
175
- {
176
- background: var(--modal-button-confirm-background-hover);
177
- color: var(--modal-button-confirm-color-hover);
178
- }
179
-
180
- /* ANIMATIONS */
181
-
182
- @-webkit-keyframes animFadeIn
183
- {
184
- 0%
185
- {
186
- opacity: 0;
187
- }
188
- 100%
189
- {
190
- opacity: 1;
191
- }
192
- }
193
- @keyframes animFadeIn
194
- {
195
- 0%
196
- {
197
- opacity:0;
198
- }
199
- 100%
200
- {
201
- opacity:1;
202
- }
203
- }
204
- .animFadeIn
205
- {
206
- -webkit-animation-duration: 0.5s;
207
- animation-duration: 0.5s;
208
- -webkit-animation-fill-mode: both;
209
- animation-fill-mode: both;
210
- -webkit-animation-name: animFadeIn;
211
- animation-name: animFadeIn;
212
- }
213
-
214
- @-webkit-keyframes animFadeOut
215
- {
216
- 0%
217
- {
218
- opacity: 1;
219
- }
220
- 100%
221
- {
222
- opacity: 0;
223
- }
224
- }
225
- @keyframes animFadeOut
226
- {
227
- 0%
228
- {
229
- opacity: 1;
230
- }
231
- 100%
232
- {
233
- opacity: 0;
234
- }
235
- }
236
- .animFadeOut
237
- {
238
- -webkit-animation-duration: 0.5s;
239
- animation-duration: 0.5s;
240
- -webkit-animation-fill-mode: both;
241
- animation-fill-mode: both;
242
- -webkit-animation-name: animFadeOut;
243
- animation-name: animFadeOut;
244
- }
245
-
246
- @-webkit-keyframes animDropDown
247
- {
248
- 0%
249
- {
250
- -webkit-transform: translateY(-20vh);
251
- -moz-transform: translateY(-20vh);
252
- -ms-transform: translateY(-20vh);
253
- -o-transform: translateY(-20vh);
254
- transform: translateY(-20vh);
255
- opacity: 0;
256
- }
257
- 100%
258
- {
259
- -webkit-transform: translateY(0);
260
- -moz-transform: translateY(0);
261
- -ms-transform: translateY(0);
262
- -o-transform: translateY(0);
263
- transform: translateY(0);
264
- opacity: 1;
265
- }
266
- }
267
-
268
- @keyframes animDropDown
269
- {
270
- 0%
271
- {
272
- -webkit-transform: translateY(-20vh);
273
- -moz-transform: translateY(-20vh);
274
- -ms-transform: translateY(-20vh);
275
- -o-transform: translateY(-20vh);
276
- transform: translateY(-20vh);
277
- opacity: 0;
278
- }
279
- 100%
280
- {
281
- -webkit-transform: translateY(0);
282
- -moz-transform: translateY(0);
283
- -ms-transform: translateY(0);
284
- -o-transform: translateY(0);
285
- transform: translateY(0);
286
- opacity: 1;
287
- }
288
- }
289
- .animDropDown
290
- {
291
- -webkit-animation-duration: 0.5s;
292
- animation-duration: 0.5s;
293
- -webkit-animation-fill-mode: both;
294
- animation-fill-mode: both;
295
- -webkit-animation-name: animDropDown;
296
- animation-name: animDropDown;
297
- }
298
-
299
- @-webkit-keyframes animDropUp
300
- {
301
- 0%
302
- {
303
- -webkit-transform: translateY(0);
304
- -moz-transform: translateY(0);
305
- -ms-transform: translateY(0);
306
- -o-transform: translateY(0);
307
- transform: translateY(0);
308
- opacity: 1;
309
- }
310
- 100%
311
- {
312
- -webkit-transform: translateY(-20vh);
313
- -moz-transform: translateY(-20vh);
314
- -ms-transform: translateY(-20vh);
315
- -o-transform: translateY(-20vh);
316
- transform: translateY(-20vh);
317
- opacity: 0;
318
- }
319
- }
320
-
321
- @keyframes animDropUp
322
- {
323
- 0%
324
- {
325
- -webkit-transform: translateY(0);
326
- -moz-transform: translateY(0);
327
- -ms-transform: translateY(0);
328
- -o-transform: translateY(0);
329
- transform: translateY(0);
330
- opacity: 1;
331
- }
332
- 100%
333
- {
334
- -webkit-transform: translateY(-20vh);
335
- -moz-transform: translateY(-20vh);
336
- -ms-transform: translateY(-20vh);
337
- -o-transform: translateY(-20vh);
338
- transform: translateY(-20vh);
339
- opacity: 0;
340
- }
341
- }
342
- .animDropUp
343
- {
344
- -webkit-animation-duration: 0.5s;
345
- animation-duration: 0.5s;
346
- -webkit-animation-fill-mode: both;
347
- animation-fill-mode: both;
348
- -webkit-animation-name: animDropUp;
349
- animation-name: animDropUp;
350
- }
351
-
352
- @-webkit-keyframes animGrowShrink
353
- {
354
- 0%
355
- {
356
- -webkit-transform: scale(1);
357
- -moz-transform: scale(1);
358
- -ms-transform: scale(1);
359
- -o-transform: scale(1);
360
- transform: scale(1);
361
- }
362
- 50%
363
- {
364
- -webkit-transform: scale(1.2);
365
- -moz-transform: scale(1.2);
366
- -ms-transform: scale(1.2);
367
- -o-transform: scale(1.2);
368
- transform: scale(1.2);
369
- }
370
- 100%
371
- {
372
- -webkit-transform: scale(1);
373
- -moz-transform: scale(1);
374
- -ms-transform: scale(1);
375
- -o-transform: scale(1);
376
- transform: scale(1);
377
- }
378
- }
379
-
380
- @keyframes animGrowShrink
381
- {
382
- 0%
383
- {
384
- -webkit-transform: scale(1);
385
- -moz-transform: scale(1);
386
- -ms-transform: scale(1);
387
- -o-transform: scale(1);
388
- transform: scale(1);
389
- }
390
- 50%
391
- {
392
- -webkit-transform: scale(1.1);
393
- -moz-transform: scale(1.1);
394
- -ms-transform: scale(1.1);
395
- -o-transform: scale(1.1);
396
- transform: scale(1.1);
397
- }
398
- 100%
399
- {
400
- -webkit-transform: scale(1);
401
- -moz-transform: scale(1);
402
- -ms-transform: scale(1);
403
- -o-transform: scale(1);
404
- transform: scale(1);
405
- }
406
- }
407
- .animGrowShrink
408
- {
409
- -webkit-animation-duration: 0.5s;
410
- animation-duration: 0.5s;
411
- -webkit-animation-fill-mode: both;
412
- animation-fill-mode: both;
413
- -webkit-animation-name: animGrowShrink;
414
- animation-name: animGrowShrink;
415
- }
1
+ /**
2
+ * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)
3
+ * MIT License - https://choosealicense.com/licenses/mit/
4
+ * Date: 2023-03-25
5
+ */
6
+
7
+ /*
8
+ -----------------------
9
+ WEBCIMES MODAL
10
+ -----------------------
11
+ */
12
+
13
+ .webcimesModals,
14
+ .webcimesModals *,
15
+ .webcimesModals *::before,
16
+ .webcimesModals *::after
17
+ {
18
+ -webkit-box-sizing: border-box;
19
+ -moz-box-sizing: border-box;
20
+ box-sizing: border-box;
21
+ }
22
+ .webcimesModals
23
+ {
24
+ --webcimes-modals-background: rgba(0,0,0,0.8);
25
+ --webcimes-modals-z-index: 5;
26
+
27
+ position: fixed;
28
+ background: var(--webcimes-modals-background);
29
+ top: 0;
30
+ bottom: 0;
31
+ left: 0;
32
+ right: 0;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ z-index: var(--webcimes-modals-z-index);
37
+ }
38
+ .webcimesModals > .modal
39
+ {
40
+ --modal-color: inherit;
41
+ --modal-background: #fff;
42
+ --modal-border-color: #ddd;
43
+ --modal-box-shadow: 1px 1px 3px 0px #444;
44
+ --modal-title-font-size: 24px;
45
+ --modal-button-cancel-background: rgba(102,102,102,1);
46
+ --modal-button-cancel-background-hover: rgba(102,102,102,0.7);
47
+ --modal-button-cancel-color: #fff;
48
+ --modal-button-cancel-color-hover: #fff;
49
+ --modal-button-confirm-background: rgba(0,0,0,1);
50
+ --modal-button-confirm-background-hover: rgba(0,0,0,0.7);
51
+ --modal-button-confirm-color: #fff;
52
+ --modal-button-confirm-color-hover: #fff;
53
+
54
+ position: absolute;
55
+ border-radius: 5px;
56
+ overflow:auto;
57
+ color: var(--modal-color);
58
+ background: var(--modal-background);
59
+ -webkit-box-shadow: var(--modal-box-shadow);
60
+ -moz-box-shadow: var(--modal-box-shadow);
61
+ -o-box-shadow: var(--modal-box-shadow);
62
+ box-shadow: var(--modal-box-shadow);
63
+ }
64
+ .webcimesModals > .modal button
65
+ {
66
+ font-family: inherit;
67
+ font-size: inherit;
68
+ font-weight: inherit;
69
+ border: none;
70
+ background: none;
71
+ }
72
+ .webcimesModals > .modal > .modalHeader
73
+ {
74
+ position: relative;
75
+ background: var(--modal-background);
76
+ padding: 20px 40px;
77
+ border-bottom: 1px solid var(--modal-border-color);
78
+ display: flex;
79
+ align-items: center;
80
+ }
81
+ .webcimesModals > .modal > .modalHeader.sticky
82
+ {
83
+ position: sticky;
84
+ top: 0;
85
+ }
86
+ .webcimesModals > .modal > .modalHeader.movable
87
+ {
88
+ cursor: move;
89
+ touch-action: none;
90
+ }
91
+ .webcimesModals > .modal > .modalHeader > .title
92
+ {
93
+ flex: 1;
94
+ overflow: hidden;
95
+ text-overflow: ellipsis;
96
+ font-size: var(--modal-title-font-size);
97
+ }
98
+ .webcimesModals > .modal > .modalHeader > .close
99
+ {
100
+ position: absolute;
101
+ height: 20px;
102
+ width: 12px;
103
+ right: 15px;
104
+ top: 50%;
105
+ margin-top: -10px;
106
+ background-image: url(../images/times.svg);
107
+ cursor: pointer;
108
+ opacity: 1;
109
+ -webkit-transition: opacity 0.6s ease 0s;
110
+ -moz-transition: opacity 0.6s ease 0s;
111
+ -o-transition: opacity 0.6s ease 0s;
112
+ transition: opacity 0.6s ease 0s;
113
+ }
114
+ .webcimesModals > .modal > .modalHeader > .close:hover
115
+ {
116
+ opacity: 0.5;
117
+ }
118
+ .webcimesModals > .modal > .modalBody
119
+ {
120
+ padding: 20px 40px;
121
+ }
122
+ .webcimesModals > .modal > .modalBody.movable
123
+ {
124
+ cursor: move;
125
+ }
126
+ .webcimesModals > .modal > .modalFooter
127
+ {
128
+ background: var(--modal-background);
129
+ padding: 20px 40px;
130
+ border-top: 1px solid var(--modal-border-color);
131
+ display: flex;
132
+ justify-content: flex-end;
133
+ flex-wrap: wrap;
134
+ }
135
+ .webcimesModals > .modal > .modalFooter.sticky
136
+ {
137
+ position: sticky;
138
+ bottom: 0;
139
+ }
140
+ .webcimesModals > .modal > .modalFooter.movable
141
+ {
142
+ cursor: move;
143
+ touch-action: none;
144
+ }
145
+ .webcimesModals > .modal > .modalFooter button
146
+ {
147
+ max-width: 100%;
148
+ flex: 0 0 auto;
149
+ border-radius: 5px;
150
+ padding: 10px 30px;
151
+ margin: 5px;
152
+ cursor: pointer;
153
+ text-overflow: ellipsis;
154
+ overflow: hidden;
155
+ -webkit-transition: color 0.6s ease 0s, background 0.6s ease 0s;
156
+ -moz-transition: color 0.6s ease 0s, background 0.6s ease 0s;
157
+ -o-transition: color 0.6s ease 0s, background 0.6s ease 0s;
158
+ transition: color 0.6s ease 0s, background 0.6s ease 0s;
159
+ }
160
+ .webcimesModals > .modal > .modalFooter button.cancel
161
+ {
162
+ background: var(--modal-button-cancel-background);
163
+ color: var(--modal-button-cancel-color);
164
+ }
165
+ .webcimesModals > .modal > .modalFooter button.cancel:hover
166
+ {
167
+ background: var(--modal-button-cancel-background-hover);
168
+ color: var(--modal-button-cancel-color-hover);
169
+ }
170
+ .webcimesModals > .modal > .modalFooter button.confirm
171
+ {
172
+ background: var(--modal-button-confirm-background);
173
+ color: var(--modal-button-confirm-color);
174
+ }
175
+ .webcimesModals > .modal > .modalFooter button.confirm:hover
176
+ {
177
+ background: var(--modal-button-confirm-background-hover);
178
+ color: var(--modal-button-confirm-color-hover);
179
+ }
180
+
181
+ /* ANIMATIONS */
182
+
183
+ @-webkit-keyframes animFadeIn
184
+ {
185
+ 0%
186
+ {
187
+ opacity: 0;
188
+ }
189
+ 100%
190
+ {
191
+ opacity: 1;
192
+ }
193
+ }
194
+ @keyframes animFadeIn
195
+ {
196
+ 0%
197
+ {
198
+ opacity:0;
199
+ }
200
+ 100%
201
+ {
202
+ opacity:1;
203
+ }
204
+ }
205
+ .animFadeIn
206
+ {
207
+ -webkit-animation-duration: 0.5s;
208
+ animation-duration: 0.5s;
209
+ -webkit-animation-fill-mode: both;
210
+ animation-fill-mode: both;
211
+ -webkit-animation-name: animFadeIn;
212
+ animation-name: animFadeIn;
213
+ }
214
+
215
+ @-webkit-keyframes animFadeOut
216
+ {
217
+ 0%
218
+ {
219
+ opacity: 1;
220
+ }
221
+ 100%
222
+ {
223
+ opacity: 0;
224
+ }
225
+ }
226
+ @keyframes animFadeOut
227
+ {
228
+ 0%
229
+ {
230
+ opacity: 1;
231
+ }
232
+ 100%
233
+ {
234
+ opacity: 0;
235
+ }
236
+ }
237
+ .animFadeOut
238
+ {
239
+ -webkit-animation-duration: 0.5s;
240
+ animation-duration: 0.5s;
241
+ -webkit-animation-fill-mode: both;
242
+ animation-fill-mode: both;
243
+ -webkit-animation-name: animFadeOut;
244
+ animation-name: animFadeOut;
245
+ }
246
+
247
+ @-webkit-keyframes animDropDown
248
+ {
249
+ 0%
250
+ {
251
+ -webkit-transform: translateY(-20vh);
252
+ -moz-transform: translateY(-20vh);
253
+ -ms-transform: translateY(-20vh);
254
+ -o-transform: translateY(-20vh);
255
+ transform: translateY(-20vh);
256
+ opacity: 0;
257
+ }
258
+ 100%
259
+ {
260
+ -webkit-transform: translateY(0);
261
+ -moz-transform: translateY(0);
262
+ -ms-transform: translateY(0);
263
+ -o-transform: translateY(0);
264
+ transform: translateY(0);
265
+ opacity: 1;
266
+ }
267
+ }
268
+
269
+ @keyframes animDropDown
270
+ {
271
+ 0%
272
+ {
273
+ -webkit-transform: translateY(-20vh);
274
+ -moz-transform: translateY(-20vh);
275
+ -ms-transform: translateY(-20vh);
276
+ -o-transform: translateY(-20vh);
277
+ transform: translateY(-20vh);
278
+ opacity: 0;
279
+ }
280
+ 100%
281
+ {
282
+ -webkit-transform: translateY(0);
283
+ -moz-transform: translateY(0);
284
+ -ms-transform: translateY(0);
285
+ -o-transform: translateY(0);
286
+ transform: translateY(0);
287
+ opacity: 1;
288
+ }
289
+ }
290
+ .animDropDown
291
+ {
292
+ -webkit-animation-duration: 0.5s;
293
+ animation-duration: 0.5s;
294
+ -webkit-animation-fill-mode: both;
295
+ animation-fill-mode: both;
296
+ -webkit-animation-name: animDropDown;
297
+ animation-name: animDropDown;
298
+ }
299
+
300
+ @-webkit-keyframes animDropUp
301
+ {
302
+ 0%
303
+ {
304
+ -webkit-transform: translateY(0);
305
+ -moz-transform: translateY(0);
306
+ -ms-transform: translateY(0);
307
+ -o-transform: translateY(0);
308
+ transform: translateY(0);
309
+ opacity: 1;
310
+ }
311
+ 100%
312
+ {
313
+ -webkit-transform: translateY(-20vh);
314
+ -moz-transform: translateY(-20vh);
315
+ -ms-transform: translateY(-20vh);
316
+ -o-transform: translateY(-20vh);
317
+ transform: translateY(-20vh);
318
+ opacity: 0;
319
+ }
320
+ }
321
+
322
+ @keyframes animDropUp
323
+ {
324
+ 0%
325
+ {
326
+ -webkit-transform: translateY(0);
327
+ -moz-transform: translateY(0);
328
+ -ms-transform: translateY(0);
329
+ -o-transform: translateY(0);
330
+ transform: translateY(0);
331
+ opacity: 1;
332
+ }
333
+ 100%
334
+ {
335
+ -webkit-transform: translateY(-20vh);
336
+ -moz-transform: translateY(-20vh);
337
+ -ms-transform: translateY(-20vh);
338
+ -o-transform: translateY(-20vh);
339
+ transform: translateY(-20vh);
340
+ opacity: 0;
341
+ }
342
+ }
343
+ .animDropUp
344
+ {
345
+ -webkit-animation-duration: 0.5s;
346
+ animation-duration: 0.5s;
347
+ -webkit-animation-fill-mode: both;
348
+ animation-fill-mode: both;
349
+ -webkit-animation-name: animDropUp;
350
+ animation-name: animDropUp;
351
+ }
352
+
353
+ @-webkit-keyframes animGrowShrink
354
+ {
355
+ 0%
356
+ {
357
+ -webkit-transform: scale(1);
358
+ -moz-transform: scale(1);
359
+ -ms-transform: scale(1);
360
+ -o-transform: scale(1);
361
+ transform: scale(1);
362
+ }
363
+ 50%
364
+ {
365
+ -webkit-transform: scale(1.2);
366
+ -moz-transform: scale(1.2);
367
+ -ms-transform: scale(1.2);
368
+ -o-transform: scale(1.2);
369
+ transform: scale(1.2);
370
+ }
371
+ 100%
372
+ {
373
+ -webkit-transform: scale(1);
374
+ -moz-transform: scale(1);
375
+ -ms-transform: scale(1);
376
+ -o-transform: scale(1);
377
+ transform: scale(1);
378
+ }
379
+ }
380
+
381
+ @keyframes animGrowShrink
382
+ {
383
+ 0%
384
+ {
385
+ -webkit-transform: scale(1);
386
+ -moz-transform: scale(1);
387
+ -ms-transform: scale(1);
388
+ -o-transform: scale(1);
389
+ transform: scale(1);
390
+ }
391
+ 50%
392
+ {
393
+ -webkit-transform: scale(1.1);
394
+ -moz-transform: scale(1.1);
395
+ -ms-transform: scale(1.1);
396
+ -o-transform: scale(1.1);
397
+ transform: scale(1.1);
398
+ }
399
+ 100%
400
+ {
401
+ -webkit-transform: scale(1);
402
+ -moz-transform: scale(1);
403
+ -ms-transform: scale(1);
404
+ -o-transform: scale(1);
405
+ transform: scale(1);
406
+ }
407
+ }
408
+ .animGrowShrink
409
+ {
410
+ -webkit-animation-duration: 0.5s;
411
+ animation-duration: 0.5s;
412
+ -webkit-animation-fill-mode: both;
413
+ animation-fill-mode: both;
414
+ -webkit-animation-name: animGrowShrink;
415
+ animation-name: animGrowShrink;
416
+ }
417
+
418
+ /*# sourceMappingURL=webcimes-modal.css.map*/