webcimes-modal 1.1.1 → 1.1.3

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 (29) hide show
  1. package/README.md +20 -8
  2. package/demo/demo_esm.html +2 -2
  3. package/demo/demo_udm.html +2 -2
  4. package/dist/css/webcimes-modal.css +1 -417
  5. package/dist/css/webcimes-modal.css.map +1 -1
  6. package/dist/js/webcimes-modal.esm.d.ts +119 -0
  7. package/dist/js/webcimes-modal.esm.js +2 -0
  8. package/dist/js/webcimes-modal.esm.js.map +1 -0
  9. package/dist/js/webcimes-modal.udm.d.ts +119 -0
  10. package/dist/js/webcimes-modal.udm.js +2 -0
  11. package/dist/js/webcimes-modal.udm.js.map +1 -0
  12. package/package.json +7 -4
  13. package/src/ts/webcimes-modal.d.ts +119 -0
  14. package/src/ts/webcimes-modal.d.ts.map +1 -0
  15. package/src/ts/webcimes-modal.ts +55 -41
  16. package/test/script.js +29 -0
  17. package/test/test.html +55 -0
  18. package/tsconfig.json +4 -1
  19. package/webpack.config.ts +30 -27
  20. package/dist/css/webcimes-modal.min.css +0 -2
  21. package/dist/css/webcimes-modal.min.css.map +0 -1
  22. package/dist/js/esm/webcimes-modal.esm.js +0 -396
  23. package/dist/js/esm/webcimes-modal.esm.js.map +0 -1
  24. package/dist/js/esm/webcimes-modal.esm.min.js +0 -2
  25. package/dist/js/esm/webcimes-modal.esm.min.js.map +0 -1
  26. package/dist/js/udm/webcimes-modal.udm.js +0 -421
  27. package/dist/js/udm/webcimes-modal.udm.js.map +0 -1
  28. package/dist/js/udm/webcimes-modal.udm.min.js +0 -2
  29. package/dist/js/udm/webcimes-modal.udm.min.js.map +0 -1
package/README.md CHANGED
@@ -22,7 +22,7 @@ You can use an importmap to resolve the arbitrary module names to complete paths
22
22
  <script type="importmap">
23
23
  {
24
24
  "imports": {
25
- "webcimes-modal": "./node_modules/webcimes-modal/dist/js/esm/webcimes-modal.esm.min.js"
25
+ "webcimes-modal": "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js"
26
26
  }
27
27
  }
28
28
  </script>
@@ -37,14 +37,14 @@ Or you can also set the full path directly in the import:
37
37
  ...
38
38
  <script type="module">
39
39
  // Import webcimes-modal
40
- import {WebcimesModal} from "./node_modules/webcimes-modal/dist/js/esm/webcimes-modal.esm.min.js";
40
+ import {WebcimesModal} from "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js";
41
41
  ...
42
42
  </script>
43
43
  </head>
44
44
  ...
45
45
  ```
46
46
 
47
- #### Import javascript module:
47
+ #### Then import javascript module:
48
48
  ```javascript
49
49
  import { WebcimesModal } from "webcimes-modal";
50
50
  ```
@@ -55,14 +55,14 @@ You can directly load the udm module in the script tag:
55
55
  <html>
56
56
  <head>
57
57
  ...
58
- <script src="./node_modules/webcimes-modal/dist/js/udm/webcimes-modal.udm.min.js" type="text/javascript"></script>
58
+ <script src="./node_modules/webcimes-modal/dist/js/webcimes-modal.udm.js" type="text/javascript"></script>
59
59
  </head>
60
60
  ...
61
61
  ```
62
62
 
63
63
  ### Import stylesheet:
64
64
  ```html
65
- <link rel="stylesheet" href="./node_modules/webcimes-modal/dist/css/webcimes-modal.min.css">
65
+ <link rel="stylesheet" href="./node_modules/webcimes-modal/dist/css/webcimes-modal.css">
66
66
  ```
67
67
 
68
68
  ## Usage
@@ -220,6 +220,18 @@ const myModal = new WebcimesModal({
220
220
  });
221
221
  ```
222
222
 
223
+ You can also use `addEventListener` for get the events from the instance like this:
224
+
225
+ ```javascript
226
+ // Get the instance
227
+ const myModal = new WebcimesModal(...);
228
+
229
+ // Create an event on the current modal
230
+ myModal.modal.addEventListener("afterDestroy", () => {
231
+ console.log("after destroy");
232
+ });
233
+ ```
234
+
223
235
  ### Destroy
224
236
  To destroy the modal, you have several ways:
225
237
 
@@ -242,7 +254,7 @@ myModal.destroy();
242
254
  ```
243
255
 
244
256
  ### Get dom element
245
- You can get the current dom element from the modal like this:
257
+ You can get the dom element of the current modal like this:
246
258
 
247
259
  ```javascript
248
260
  // Get the instance
@@ -250,7 +262,7 @@ const myModal = new WebcimesModal(...);
250
262
 
251
263
  // Things
252
264
 
253
- // Then get the dom element
265
+ // Then get the dom element of the current modal
254
266
  myModal.modal;
255
267
  ```
256
268
 
@@ -262,7 +274,7 @@ const myModal = new WebcimesModal(...);
262
274
 
263
275
  // Things
264
276
 
265
- // Then get the dom element
277
+ // Then get the dom element containing all modals
266
278
  myModal.webcimesModals;
267
279
  ```
268
280
 
package/demo/demo_esm.html CHANGED
@@ -6,11 +6,11 @@
6
6
  <meta name="Copyright" content="© https://webcimes.com">
7
7
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8
8
  <title>Demo webcimes-modal ESM</title>
9
- <link rel="stylesheet" href="../dist/css/webcimes-modal.min.css">
9
+ <link rel="stylesheet" href="../dist/css/webcimes-modal.css">
10
10
  <script type="importmap">
11
11
  {
12
12
  "imports": {
13
- "webcimes-modal": "../dist/js/esm/webcimes-modal.esm.min.js"
13
+ "webcimes-modal": "../dist/js/webcimes-modal.esm.js"
14
14
  }
15
15
  }
16
16
  </script>
package/demo/demo_udm.html CHANGED
@@ -6,8 +6,8 @@
6
6
  <meta name="Copyright" content="© https://webcimes.com">
7
7
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8
8
  <title>Demo webcimes-modal UDM</title>
9
- <link rel="stylesheet" href="../dist/css/webcimes-modal.min.css">
10
- <script src="../dist/js/udm/webcimes-modal.udm.min.js" type="text/javascript"></script>
9
+ <link rel="stylesheet" href="../dist/css/webcimes-modal.css">
10
+ <script src="../dist/js/webcimes-modal.udm.js" type="text/javascript"></script>
11
11
  <script>
12
12
  // Wait for dom content loaded
13
13
  document.addEventListener("DOMContentLoaded", function()
package/dist/css/webcimes-modal.css CHANGED
@@ -1,418 +1,2 @@
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
-
1
+ .webcimesModals,.webcimesModals *,.webcimesModals :after,.webcimesModals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimesModals{--webcimes-modals-background:rgba(0,0,0,.8);--webcimes-modals-z-index:5;align-items:center;background:var(--webcimes-modals-background);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--webcimes-modals-z-index)}.webcimesModals>.modal{--modal-color:inherit;--modal-background:#fff;--modal-border-color:#ddd;--modal-box-shadow:1px 1px 3px 0px #444;--modal-title-font-size:24px;--modal-button-cancel-background:#666;--modal-button-cancel-background-hover:hsla(0,0%,40%,.7);--modal-button-cancel-color:#fff;--modal-button-cancel-color-hover:#fff;--modal-button-confirm-background:#000;--modal-button-confirm-background-hover:rgba(0,0,0,.7);--modal-button-confirm-color:#fff;--modal-button-confirm-color-hover:#fff;background:var(--modal-background);border-radius:5px;-webkit-box-shadow:var(--modal-box-shadow);-moz-box-shadow:var(--modal-box-shadow);-o-box-shadow:var(--modal-box-shadow);box-shadow:var(--modal-box-shadow);color:var(--modal-color);overflow:auto;position:absolute}.webcimesModals>.modal button{background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit}.webcimesModals>.modal>.modalHeader{align-items:center;background:var(--modal-background);border-bottom:1px solid var(--modal-border-color);display:flex;padding:20px 40px;position:relative}.webcimesModals>.modal>.modalHeader.sticky{position:sticky;top:0}.webcimesModals>.modal>.modalHeader.movable{cursor:move;touch-action:none}.webcimesModals>.modal>.modalHeader>.title{flex:1;font-size:var(--modal-title-font-size);overflow:hidden;text-overflow:ellipsis}.webcimesModals>.modal>.modalHeader>.close{background-image:url(../images/times.svg);cursor:pointer;height:20px;margin-top:-10px;opacity:1;position:absolute;right:15px;top:50%;-webkit-transition:opacity .6s ease 0s;-moz-transition:opacity .6s ease 0s;-o-transition:opacity .6s ease 0s;transition:opacity .6s ease 0s;width:12px}.webcimesModals>.modal>.modalHeader>.close:hover{opacity:.5}.webcimesModals>.modal>.modalBody{padding:20px 40px}.webcimesModals>.modal>.modalBody.movable{cursor:move}.webcimesModals>.modal>.modalFooter{background:var(--modal-background);border-top:1px solid var(--modal-border-color);display:flex;flex-wrap:wrap;justify-content:flex-end;padding:20px 40px}.webcimesModals>.modal>.modalFooter.sticky{bottom:0;position:sticky}.webcimesModals>.modal>.modalFooter.movable{cursor:move;touch-action:none}.webcimesModals>.modal>.modalFooter button{border-radius:5px;cursor:pointer;flex:0 0 auto;margin:5px;max-width:100%;overflow:hidden;padding:10px 30px;text-overflow:ellipsis;-webkit-transition:color .6s ease 0s,background .6s ease 0s;-moz-transition:color .6s ease 0s,background .6s ease 0s;-o-transition:color .6s ease 0s,background .6s ease 0s;transition:color .6s ease 0s,background .6s ease 0s}.webcimesModals>.modal>.modalFooter button.cancel{background:var(--modal-button-cancel-background);color:var(--modal-button-cancel-color)}.webcimesModals>.modal>.modalFooter button.cancel:hover{background:var(--modal-button-cancel-background-hover);color:var(--modal-button-cancel-color-hover)}.webcimesModals>.modal>.modalFooter button.confirm{background:var(--modal-button-confirm-background);color:var(--modal-button-confirm-color)}.webcimesModals>.modal>.modalFooter button.confirm:hover{background:var(--modal-button-confirm-background-hover);color:var(--modal-button-confirm-color-hover)}@-webkit-keyframes animFadeIn{0%{opacity:0}to{opacity:1}}@keyframes animFadeIn{0%{opacity:0}to{opacity:1}}.animFadeIn{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animFadeIn;animation-name:animFadeIn}@-webkit-keyframes animFadeOut{0%{opacity:1}to{opacity:0}}@keyframes animFadeOut{0%{opacity:1}to{opacity:0}}.animFadeOut{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animFadeOut;animation-name:animFadeOut}@-webkit-keyframes animDropDown{0%{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@keyframes animDropDown{0%{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}.animDropDown{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animDropDown;animation-name:animDropDown}@-webkit-keyframes animDropUp{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}}@keyframes animDropUp{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}}.animDropUp{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animDropUp;animation-name:animDropUp}@-webkit-keyframes animGrowShrink{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes animGrowShrink{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.animGrowShrink{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animGrowShrink;animation-name:animGrowShrink}
418
2
  /*# sourceMappingURL=webcimes-modal.css.map*/
package/dist/css/webcimes-modal.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css/webcimes-modal.css","mappings":"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","sources":["webpack://webcimes-modal/./src/css/webcimes-modal.css"],"sourcesContent":["/**\r\n * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)\r\n * MIT License - https://choosealicense.com/licenses/mit/\r\n * Date: 2023-03-25\r\n */\r\n\r\n/*\r\n-----------------------\r\n WEBCIMES MODAL\r\n-----------------------\r\n*/\r\n\r\n.webcimesModals,\r\n.webcimesModals *,\r\n.webcimesModals *::before,\r\n.webcimesModals *::after\r\n{ \r\n\t-webkit-box-sizing: border-box;\r\n\t-moz-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n}\r\n.webcimesModals\r\n{\r\n\t--webcimes-modals-background: rgba(0,0,0,0.8);\r\n\t--webcimes-modals-z-index: 5;\r\n\r\n\tposition: fixed;\r\n\tbackground: var(--webcimes-modals-background);\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tz-index: var(--webcimes-modals-z-index);\r\n}\r\n.webcimesModals > .modal\r\n{\r\n\t--modal-color: inherit;\r\n\t--modal-background: #fff;\r\n\t--modal-border-color: #ddd;\r\n\t--modal-box-shadow: 1px 1px 3px 0px #444;\r\n\t--modal-title-font-size: 24px;\r\n\t--modal-button-cancel-background: rgba(102,102,102,1);\r\n\t--modal-button-cancel-background-hover: rgba(102,102,102,0.7);\r\n\t--modal-button-cancel-color: #fff;\r\n\t--modal-button-cancel-color-hover: #fff;\r\n\t--modal-button-confirm-background: rgba(0,0,0,1);\r\n\t--modal-button-confirm-background-hover: rgba(0,0,0,0.7);\r\n\t--modal-button-confirm-color: #fff;\r\n\t--modal-button-confirm-color-hover: #fff;\r\n\t\r\n\tposition: absolute;\r\n\tborder-radius: 5px;\r\n\toverflow:auto;\r\n\tcolor: var(--modal-color);\r\n\tbackground: var(--modal-background);\r\n\t-webkit-box-shadow: var(--modal-box-shadow);\r\n\t-moz-box-shadow: var(--modal-box-shadow);\r\n\t-o-box-shadow: var(--modal-box-shadow);\r\n\tbox-shadow: var(--modal-box-shadow);\r\n}\r\n.webcimesModals > .modal button\r\n{\r\n\tfont-family: inherit;\r\n\tfont-size: inherit;\r\n\tfont-weight: inherit;\r\n\tborder: none;\r\n\tbackground: none;\r\n}\r\n.webcimesModals > .modal > .modalHeader\r\n{\r\n\tposition: relative;\r\n\tbackground: var(--modal-background);\r\n\tpadding: 20px 40px;\r\n\tborder-bottom: 1px solid var(--modal-border-color);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.webcimesModals > .modal > .modalHeader.sticky\r\n{\r\n\tposition: sticky;\r\n\ttop: 0;\r\n}\r\n.webcimesModals > .modal > .modalHeader.movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimesModals > .modal > .modalHeader > .title\r\n{\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\tfont-size: var(--modal-title-font-size);\r\n}\r\n.webcimesModals > .modal > .modalHeader > .close\r\n{\r\n\tposition: absolute;\r\n\theight: 20px;\r\n\twidth: 12px;\r\n\tright: 15px;\r\n\ttop: 50%;\r\n\tmargin-top: -10px;\r\n\tbackground-image: url(\"../images/times.svg\");\r\n cursor: pointer;\r\n\topacity: 1;\r\n -webkit-transition: opacity 0.6s ease 0s;\r\n -moz-transition: opacity 0.6s ease 0s;\r\n -o-transition: opacity 0.6s ease 0s;\r\n transition: opacity 0.6s ease 0s;\r\n}\r\n.webcimesModals > .modal > .modalHeader > .close:hover\r\n{\r\n\topacity: 0.5;\r\n}\r\n.webcimesModals > .modal > .modalBody\r\n{\r\n\tpadding: 20px 40px;\r\n}\r\n.webcimesModals > .modal > .modalBody.movable\r\n{\r\n\tcursor: move;\r\n}\r\n.webcimesModals > .modal > .modalFooter\r\n{\r\n\tbackground: var(--modal-background);\r\n\tpadding: 20px 40px;\r\n\tborder-top: 1px solid var(--modal-border-color);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tflex-wrap: wrap;\r\n}\r\n.webcimesModals > .modal > .modalFooter.sticky\r\n{\r\n\tposition: sticky;\r\n\tbottom: 0;\r\n}\r\n.webcimesModals > .modal > .modalFooter.movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimesModals > .modal > .modalFooter button\r\n{\r\n\tmax-width: 100%;\r\n\tflex: 0 0 auto;\r\n\tborder-radius: 5px;\r\n\tpadding: 10px 30px;\r\n\tmargin: 5px;\r\n\tcursor: pointer;\r\n\ttext-overflow: ellipsis;\r\n\toverflow: hidden;\r\n -webkit-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n -moz-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n -o-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n}\r\n.webcimesModals > .modal > .modalFooter button.cancel\r\n{\r\n\tbackground: var(--modal-button-cancel-background);\r\n\tcolor: var(--modal-button-cancel-color);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.cancel:hover\r\n{\r\n\tbackground: var(--modal-button-cancel-background-hover);\r\n\tcolor: var(--modal-button-cancel-color-hover);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.confirm\r\n{\r\n\tbackground: var(--modal-button-confirm-background);\r\n\tcolor: var(--modal-button-confirm-color);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.confirm:hover\r\n{\r\n\tbackground: var(--modal-button-confirm-background-hover);\r\n\tcolor: var(--modal-button-confirm-color-hover);\r\n}\r\n\r\n/* ANIMATIONS */\r\n\r\n@-webkit-keyframes animFadeIn\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n@keyframes animFadeIn\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity:0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity:1;\r\n\t}\r\n}\r\n.animFadeIn\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animFadeIn;\r\n\tanimation-name: animFadeIn;\r\n}\r\n\r\n@-webkit-keyframes animFadeOut\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n@keyframes animFadeOut\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n.animFadeOut\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animFadeOut;\r\n\tanimation-name: animFadeOut;\r\n}\r\n\r\n@-webkit-keyframes animDropDown\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n@keyframes animDropDown\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n.animDropDown\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animDropDown;\r\n\tanimation-name: animDropDown;\r\n}\r\n\r\n@-webkit-keyframes animDropUp\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animDropUp\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n.animDropUp\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animDropUp;\r\n\tanimation-name: animDropUp;\r\n}\r\n\r\n@-webkit-keyframes animGrowShrink\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t50%\r\n\t{\r\n\t\t-webkit-transform: scale(1.2);\r\n\t\t-moz-transform: scale(1.2);\r\n\t\t-ms-transform: scale(1.2);\r\n\t\t-o-transform: scale(1.2);\r\n\t\ttransform: scale(1.2);\r\n\t}\r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n\r\n@keyframes animGrowShrink\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t50%\r\n\t{\r\n\t\t-webkit-transform: scale(1.1);\r\n\t\t-moz-transform: scale(1.1);\r\n\t\t-ms-transform: scale(1.1);\r\n\t\t-o-transform: scale(1.1);\r\n\t\ttransform: scale(1.1);\r\n\t}\r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n.animGrowShrink\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animGrowShrink;\r\n\tanimation-name: animGrowShrink;\r\n}"],"names":[],"sourceRoot":""}
1
+ {"version":3,"file":"css/webcimes-modal.css","mappings":"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","sources":["webpack://webcimes-modal/./src/css/webcimes-modal.css"],"sourcesContent":["/**\r\n * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)\r\n * MIT License - https://choosealicense.com/licenses/mit/\r\n * Date: 2023-03-25\r\n */\r\n\r\n/*\r\n-----------------------\r\n WEBCIMES MODAL\r\n-----------------------\r\n*/\r\n\r\n.webcimesModals,\r\n.webcimesModals *,\r\n.webcimesModals *::before,\r\n.webcimesModals *::after\r\n{ \r\n\t-webkit-box-sizing: border-box;\r\n\t-moz-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n}\r\n.webcimesModals\r\n{\r\n\t--webcimes-modals-background: rgba(0,0,0,0.8);\r\n\t--webcimes-modals-z-index: 5;\r\n\r\n\tposition: fixed;\r\n\tbackground: var(--webcimes-modals-background);\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tz-index: var(--webcimes-modals-z-index);\r\n}\r\n.webcimesModals > .modal\r\n{\r\n\t--modal-color: inherit;\r\n\t--modal-background: #fff;\r\n\t--modal-border-color: #ddd;\r\n\t--modal-box-shadow: 1px 1px 3px 0px #444;\r\n\t--modal-title-font-size: 24px;\r\n\t--modal-button-cancel-background: rgba(102,102,102,1);\r\n\t--modal-button-cancel-background-hover: rgba(102,102,102,0.7);\r\n\t--modal-button-cancel-color: #fff;\r\n\t--modal-button-cancel-color-hover: #fff;\r\n\t--modal-button-confirm-background: rgba(0,0,0,1);\r\n\t--modal-button-confirm-background-hover: rgba(0,0,0,0.7);\r\n\t--modal-button-confirm-color: #fff;\r\n\t--modal-button-confirm-color-hover: #fff;\r\n\t\r\n\tposition: absolute;\r\n\tborder-radius: 5px;\r\n\toverflow:auto;\r\n\tcolor: var(--modal-color);\r\n\tbackground: var(--modal-background);\r\n\t-webkit-box-shadow: var(--modal-box-shadow);\r\n\t-moz-box-shadow: var(--modal-box-shadow);\r\n\t-o-box-shadow: var(--modal-box-shadow);\r\n\tbox-shadow: var(--modal-box-shadow);\r\n}\r\n.webcimesModals > .modal button\r\n{\r\n\tfont-family: inherit;\r\n\tfont-size: inherit;\r\n\tfont-weight: inherit;\r\n\tborder: none;\r\n\tbackground: none;\r\n}\r\n.webcimesModals > .modal > .modalHeader\r\n{\r\n\tposition: relative;\r\n\tbackground: var(--modal-background);\r\n\tpadding: 20px 40px;\r\n\tborder-bottom: 1px solid var(--modal-border-color);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.webcimesModals > .modal > .modalHeader.sticky\r\n{\r\n\tposition: sticky;\r\n\ttop: 0;\r\n}\r\n.webcimesModals > .modal > .modalHeader.movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimesModals > .modal > .modalHeader > .title\r\n{\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\tfont-size: var(--modal-title-font-size);\r\n}\r\n.webcimesModals > .modal > .modalHeader > .close\r\n{\r\n\tposition: absolute;\r\n\theight: 20px;\r\n\twidth: 12px;\r\n\tright: 15px;\r\n\ttop: 50%;\r\n\tmargin-top: -10px;\r\n\tbackground-image: url(\"../images/times.svg\");\r\n cursor: pointer;\r\n\topacity: 1;\r\n -webkit-transition: opacity 0.6s ease 0s;\r\n -moz-transition: opacity 0.6s ease 0s;\r\n -o-transition: opacity 0.6s ease 0s;\r\n transition: opacity 0.6s ease 0s;\r\n}\r\n.webcimesModals > .modal > .modalHeader > .close:hover\r\n{\r\n\topacity: 0.5;\r\n}\r\n.webcimesModals > .modal > .modalBody\r\n{\r\n\tpadding: 20px 40px;\r\n}\r\n.webcimesModals > .modal > .modalBody.movable\r\n{\r\n\tcursor: move;\r\n}\r\n.webcimesModals > .modal > .modalFooter\r\n{\r\n\tbackground: var(--modal-background);\r\n\tpadding: 20px 40px;\r\n\tborder-top: 1px solid var(--modal-border-color);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tflex-wrap: wrap;\r\n}\r\n.webcimesModals > .modal > .modalFooter.sticky\r\n{\r\n\tposition: sticky;\r\n\tbottom: 0;\r\n}\r\n.webcimesModals > .modal > .modalFooter.movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimesModals > .modal > .modalFooter button\r\n{\r\n\tmax-width: 100%;\r\n\tflex: 0 0 auto;\r\n\tborder-radius: 5px;\r\n\tpadding: 10px 30px;\r\n\tmargin: 5px;\r\n\tcursor: pointer;\r\n\ttext-overflow: ellipsis;\r\n\toverflow: hidden;\r\n -webkit-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n -moz-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n -o-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n}\r\n.webcimesModals > .modal > .modalFooter button.cancel\r\n{\r\n\tbackground: var(--modal-button-cancel-background);\r\n\tcolor: var(--modal-button-cancel-color);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.cancel:hover\r\n{\r\n\tbackground: var(--modal-button-cancel-background-hover);\r\n\tcolor: var(--modal-button-cancel-color-hover);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.confirm\r\n{\r\n\tbackground: var(--modal-button-confirm-background);\r\n\tcolor: var(--modal-button-confirm-color);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.confirm:hover\r\n{\r\n\tbackground: var(--modal-button-confirm-background-hover);\r\n\tcolor: var(--modal-button-confirm-color-hover);\r\n}\r\n\r\n/* ANIMATIONS */\r\n\r\n@-webkit-keyframes animFadeIn\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n@keyframes animFadeIn\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity:0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity:1;\r\n\t}\r\n}\r\n.animFadeIn\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animFadeIn;\r\n\tanimation-name: animFadeIn;\r\n}\r\n\r\n@-webkit-keyframes animFadeOut\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n@keyframes animFadeOut\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n.animFadeOut\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animFadeOut;\r\n\tanimation-name: animFadeOut;\r\n}\r\n\r\n@-webkit-keyframes animDropDown\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n@keyframes animDropDown\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n.animDropDown\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animDropDown;\r\n\tanimation-name: animDropDown;\r\n}\r\n\r\n@-webkit-keyframes animDropUp\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animDropUp\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n.animDropUp\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animDropUp;\r\n\tanimation-name: animDropUp;\r\n}\r\n\r\n@-webkit-keyframes animGrowShrink\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t50%\r\n\t{\r\n\t\t-webkit-transform: scale(1.2);\r\n\t\t-moz-transform: scale(1.2);\r\n\t\t-ms-transform: scale(1.2);\r\n\t\t-o-transform: scale(1.2);\r\n\t\ttransform: scale(1.2);\r\n\t}\r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n\r\n@keyframes animGrowShrink\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t50%\r\n\t{\r\n\t\t-webkit-transform: scale(1.1);\r\n\t\t-moz-transform: scale(1.1);\r\n\t\t-ms-transform: scale(1.1);\r\n\t\t-o-transform: scale(1.1);\r\n\t\ttransform: scale(1.1);\r\n\t}\r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n.animGrowShrink\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animGrowShrink;\r\n\tanimation-name: animGrowShrink;\r\n}"],"names":[],"sourceRoot":""}