react-ui-basics 0.0.144 → 0.0.145

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.
package/bundle.css CHANGED
@@ -1,81 +1,305 @@
1
- .Checkbox {
1
+ .animated {
2
+ transition: opacity 250ms ease;
3
+ opacity: 0;
4
+ }
5
+
6
+ .animated.mounting, .animated.mounted {
7
+ opacity: 1;
8
+ }
9
+
10
+ .AutocompleteSelect {
11
+ display: inline-flex;
12
+ flex-flow: column;
13
+ justify-content: center;
2
14
  position: relative;
3
- white-space: pre;
15
+ min-width: 250px;
16
+ min-height: 36px;
17
+ user-select: none;
4
18
  }
5
19
 
6
- .Checkbox *, .Checkbox *:before, .Checkbox *:after {
20
+ @keyframes clockwise {
21
+ 0% {
22
+ -webkit-transform: rotate(-90deg);
23
+ }
24
+ 100% {
25
+ -webkit-transform: translateX(0px);
26
+ }
27
+ }
28
+ @keyframes anticlockwise {
29
+ 0% {
30
+ -webkit-transform: rotate(90deg);
31
+ }
32
+ 100% {
33
+ -webkit-transform: translateX(0px);
34
+ }
35
+ }
36
+ .AutocompleteSelect > .input {
37
+ width: 100%;
38
+ }
39
+
40
+ .AutocompleteSelect .Scrollable {
41
+ padding-right: 0;
42
+ min-width: 100%;
43
+ }
44
+
45
+ .AutocompleteSelect.inline-multiple > .label {
46
+ top: -12px;
47
+ }
48
+
49
+ .AutocompleteSelect.inline-multiple > .selected {
50
+ flex-flow: row wrap;
51
+ }
52
+
53
+ .AutocompleteSelect.multiple-mini-inline {
54
+ height: 42px;
55
+ }
56
+
57
+ .AutocompleteSelect.multiple-mini-inline > .label {
58
+ cursor: pointer;
59
+ width: 100%;
60
+ margin-left: -10px;
61
+ padding: 10px;
7
62
  box-sizing: border-box;
63
+ top: 0;
8
64
  }
9
65
 
10
- .Checkbox label {
66
+ .AutocompleteSelect.multiple-mini-inline > .label.active {
67
+ padding: 0 10px;
68
+ }
69
+
70
+ .AutocompleteSelect.multiple-mini-inline > .selected {
71
+ width: 250px;
72
+ }
73
+
74
+ .AutocompleteSelect.multiple-mini-inline > .input {
75
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
76
+ position: absolute;
77
+ top: 38px;
78
+ z-index: 2;
79
+ background-color: white;
80
+ min-width: 130%;
81
+ }
82
+
83
+ .AutocompleteSelect.multiple-mini-inline > .input .TextField {
84
+ padding-left: 10px;
85
+ padding-right: 10px;
86
+ width: 100%;
87
+ box-sizing: border-box;
88
+ }
89
+
90
+ .AutocompleteSelect.multiple-mini-inline > .input.hidden {
91
+ opacity: 0;
92
+ visibility: hidden;
93
+ }
94
+
95
+ .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
96
+ margin-top: 0;
97
+ }
98
+
99
+ .AutocompleteSelect .TextField {
100
+ margin-top: 8px;
101
+ }
102
+
103
+ .AutocompleteSelect .TextField input {
104
+ font-size: 14px;
105
+ }
106
+
107
+ .AutocompleteSelect > .label {
108
+ position: absolute;
109
+ transition: all 0.2s ease;
11
110
  font-family: Roboto, sans-serif;
12
111
  font-size: 14px;
13
- color: #1e252d;
112
+ color: rgba(0, 0, 0, 0.5);
113
+ z-index: 1;
114
+ cursor: text;
115
+ user-select: none;
116
+ left: 4px;
117
+ top: 12px;
118
+ }
119
+
120
+ .AutocompleteSelect > .label.active {
121
+ font-size: 10px;
122
+ top: 2px;
123
+ }
124
+
125
+ .AutocompleteSelect > .label.active .arrow {
126
+ border-width: 4px 4px 0 4px;
127
+ margin-bottom: 1px;
128
+ }
129
+
130
+ .AutocompleteSelect > .label .arrow {
131
+ width: 0;
132
+ height: 0;
133
+ border-style: solid;
134
+ border-width: 5px 5px 0 5px;
135
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
136
+ display: inline-block;
137
+ margin-left: 5px;
138
+ margin-bottom: 2px;
139
+ transition: all 0.2s ease;
140
+ }
141
+
142
+ .AutocompleteSelect > .selected {
143
+ margin-top: 8px;
144
+ display: flex;
14
145
  cursor: pointer;
15
146
  }
16
147
 
17
- .Checkbox label:before, .Checkbox label:after {
18
- content: "";
148
+ .AutocompleteSelect > .selected > .reset {
149
+ min-width: 36px;
150
+ max-width: 36px;
19
151
  position: absolute;
20
- left: 0;
152
+ right: 0;
21
153
  top: 0;
154
+ background-color: white;
22
155
  }
23
156
 
24
- .Checkbox label:before {
25
- width: 20px;
26
- height: 20px;
27
- background: #fff;
28
- border: 2px solid #252525;
29
- border-radius: 2px;
157
+ .AutocompleteSelect > .selected > .reset .material-icons {
158
+ margin: 0;
159
+ color: #BFBFBF;
160
+ font-size: 20px;
161
+ }
162
+
163
+ .AutocompleteSelect > .selected.nolabel {
164
+ margin-top: 0px;
165
+ border-bottom: 1px solid #e5e3e3;
166
+ }
167
+
168
+ .AutocompleteSelect > .selected.nolabel .DummyChild {
169
+ display: inline-flex;
170
+ align-items: center;
171
+ flex-grow: 1;
172
+ font-size: 16px;
173
+ margin: 0px 10px;
174
+ margin-bottom: 5px;
175
+ height: 19px;
176
+ }
177
+
178
+ .AutocompleteSelect > .selected.nolabel .arrow {
179
+ width: 0;
180
+ height: 0;
181
+ border-style: solid;
182
+ border-width: 5px 5px 0 5px;
183
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
184
+ display: inline-block;
185
+ transition: all 0.2s ease;
186
+ margin: 0px 17px 3px 5px;
187
+ }
188
+
189
+ .AutocompleteSelect > .selected.inline {
190
+ font-size: 14px;
191
+ font-family: Roboto, sans-serif;
192
+ color: #1e252d;
193
+ text-overflow: ellipsis;
194
+ white-space: nowrap;
195
+ overflow: hidden;
196
+ display: flex;
197
+ align-items: center;
198
+ }
199
+
200
+ .AutocompleteSelect > .selected.clickable {
201
+ overflow: hidden;
30
202
  cursor: pointer;
31
- transition: background 0.3s;
203
+ padding: 10px;
204
+ margin-left: -10px;
205
+ margin-right: -10px;
32
206
  }
33
207
 
34
- .Checkbox input[type=checkbox] {
35
- outline: 0;
36
- margin-right: 10px;
37
- visibility: hidden;
208
+ .AutocompleteSelect.inlineSelected {
209
+ flex-flow: row wrap;
210
+ justify-content: flex-start;
38
211
  }
39
212
 
40
- .Checkbox input[type=checkbox]:checked + label:before {
41
- background: #4AC263;
42
- border: none;
213
+ .AutocompleteSelect.inlineSelected.hasSelected {
214
+ padding-top: 7px;
43
215
  }
44
216
 
45
- .Checkbox input[type=checkbox]:checked + label:after {
46
- transform: rotate(-45deg);
47
- top: 6px;
48
- left: 4px;
49
- width: 12px;
50
- height: 6px;
51
- border: 2px solid #fff;
52
- border-top-style: none;
53
- border-right-style: none;
217
+ .AutocompleteSelect.inlineSelected > .label {
218
+ width: 100%;
219
+ height: 100%;
54
220
  }
55
221
 
56
- .Checkbox input[type=checkbox]:disabled + label {
57
- color: gray;
222
+ .AutocompleteSelect.inlineSelected > .label.active {
223
+ z-index: 0;
224
+ }
225
+
226
+ .AutocompleteSelect.inlineSelected .input {
227
+ width: unset;
228
+ flex-basis: 50px;
229
+ flex-grow: 1;
230
+ }
231
+
232
+ .AutocompleteSelect.inlineSelected .input::after {
233
+ content: attr(data-value);
234
+ visibility: hidden;
235
+ white-space: pre;
236
+ font: inherit;
237
+ min-width: 2px;
238
+ border: 0;
239
+ margin: 0;
240
+ outline: 0;
241
+ float: left;
242
+ display: inline-block;
243
+ margin-top: -24px;
244
+ font-size: 14px;
245
+ padding: 2px;
246
+ }
247
+
248
+ .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
249
+ margin-top: 7px;
250
+ }
251
+
252
+ .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
253
+ cursor: pointer;
254
+ margin: 5px 10px 5px 0px;
255
+ display: inline-flex;
256
+ flex-flow: row wrap;
257
+ height: 30px;
258
+ align-items: center;
259
+ background-color: #f0f0f0;
260
+ border-radius: 30px;
261
+ position: relative;
262
+ font-family: Roboto, sans-serif;
263
+ font-size: 14px;
264
+ color: #1e252d;
58
265
  }
59
266
 
60
- .Checkbox input[type=checkbox]:disabled + label:before {
61
- border-color: rgba(0, 0, 0, 0.26);
267
+ .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
268
+ padding-left: 35px;
269
+ padding-right: 10px;
62
270
  }
63
271
 
64
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
65
- background: rgba(0, 0, 0, 0.26);
272
+ .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
273
+ cursor: pointer;
274
+ min-width: 30px;
275
+ width: 30px;
276
+ height: 30px;
277
+ opacity: 0;
278
+ position: absolute;
279
+ top: 0px;
280
+ left: 0px;
281
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
282
+ background-color: deepskyblue;
283
+ color: white;
284
+ border-radius: 30px;
285
+ display: flex;
286
+ flex-flow: row;
287
+ justify-content: center;
288
+ align-items: center;
289
+ animation: anticlockwise 0.15s linear;
66
290
  }
67
291
 
68
- .CircleProgress {
69
- width: 48px;
70
- height: 48px;
292
+ .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
293
+ font-size: 22px;
71
294
  }
72
295
 
73
- .CircleProgress .line {
74
- stroke-width: 2px;
75
- stroke: black;
76
- stroke-linecap: square;
77
- fill: none;
78
- transition: stroke-dashoffset 0.2s ease;
296
+ .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
297
+ width: 30px;
298
+ height: 30px;
299
+ opacity: 1;
300
+ animation: clockwise 0.15s linear;
301
+ overflow: hidden;
302
+ position: absolute;
79
303
  }
80
304
 
81
305
  .Button {
@@ -243,391 +467,257 @@
243
467
  border: 0;
244
468
  }
245
469
 
246
- .DropFileInput {
247
- flex-grow: 1;
248
- }
249
-
250
- .DropFileInput .Dropzone {
251
- border: 1px dashed #808080;
252
- padding: 12px;
253
- display: flex;
254
- flex-flow: row nowrap;
255
- justify-content: center;
256
- align-items: center;
257
- color: gray;
258
- cursor: pointer;
259
- border-radius: 3px;
260
- font-weight: normal;
261
- line-height: 22px;
262
- font-size: 14px;
263
- color: #7E7E7E;
264
- max-width: 100%;
265
- word-break: break-all;
266
- word-break: break-word;
267
- }
268
-
269
- .DropFileInput .Dropzone .icon.withText {
270
- margin-right: 10px;
271
- }
272
-
273
- .animated {
274
- transition: opacity 250ms ease;
275
- opacity: 0;
276
- }
277
-
278
- .animated.mounting, .animated.mounted {
279
- opacity: 1;
280
- }
281
-
282
- .AutocompleteSelect {
283
- display: inline-flex;
284
- flex-flow: column;
285
- justify-content: center;
470
+ .Checkbox {
286
471
  position: relative;
287
- min-width: 250px;
288
- min-height: 36px;
289
- user-select: none;
290
- }
291
-
292
- @keyframes clockwise {
293
- 0% {
294
- -webkit-transform: rotate(-90deg);
295
- }
296
- 100% {
297
- -webkit-transform: translateX(0px);
298
- }
299
- }
300
- @keyframes anticlockwise {
301
- 0% {
302
- -webkit-transform: rotate(90deg);
303
- }
304
- 100% {
305
- -webkit-transform: translateX(0px);
306
- }
307
- }
308
- .AutocompleteSelect > .input {
309
- width: 100%;
310
- }
311
-
312
- .AutocompleteSelect .Scrollable {
313
- padding-right: 0;
314
- min-width: 100%;
315
- }
316
-
317
- .AutocompleteSelect.inline-multiple > .label {
318
- top: -12px;
319
- }
320
-
321
- .AutocompleteSelect.inline-multiple > .selected {
322
- flex-flow: row wrap;
323
- }
324
-
325
- .AutocompleteSelect.multiple-mini-inline {
326
- height: 42px;
472
+ white-space: pre;
327
473
  }
328
474
 
329
- .AutocompleteSelect.multiple-mini-inline > .label {
330
- cursor: pointer;
331
- width: 100%;
332
- margin-left: -10px;
333
- padding: 10px;
475
+ .Checkbox *, .Checkbox *:before, .Checkbox *:after {
334
476
  box-sizing: border-box;
335
- top: 0;
336
- }
337
-
338
- .AutocompleteSelect.multiple-mini-inline > .label.active {
339
- padding: 0 10px;
340
477
  }
341
478
 
342
- .AutocompleteSelect.multiple-mini-inline > .selected {
343
- width: 250px;
479
+ .Checkbox label {
480
+ font-family: Roboto, sans-serif;
481
+ font-size: 14px;
482
+ color: #1e252d;
483
+ cursor: pointer;
344
484
  }
345
485
 
346
- .AutocompleteSelect.multiple-mini-inline > .input {
347
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
486
+ .Checkbox label:before, .Checkbox label:after {
487
+ content: "";
348
488
  position: absolute;
349
- top: 38px;
350
- z-index: 2;
351
- background-color: white;
352
- min-width: 130%;
489
+ left: 0;
490
+ top: 0;
353
491
  }
354
492
 
355
- .AutocompleteSelect.multiple-mini-inline > .input .TextField {
356
- padding-left: 10px;
357
- padding-right: 10px;
358
- width: 100%;
359
- box-sizing: border-box;
493
+ .Checkbox label:before {
494
+ width: 20px;
495
+ height: 20px;
496
+ background: #fff;
497
+ border: 2px solid #252525;
498
+ border-radius: 2px;
499
+ cursor: pointer;
500
+ transition: background 0.3s;
360
501
  }
361
502
 
362
- .AutocompleteSelect.multiple-mini-inline > .input.hidden {
363
- opacity: 0;
503
+ .Checkbox input[type=checkbox] {
504
+ outline: 0;
505
+ margin-right: 10px;
364
506
  visibility: hidden;
365
507
  }
366
508
 
367
- .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
368
- margin-top: 0;
369
- }
370
-
371
- .AutocompleteSelect .TextField {
372
- margin-top: 8px;
373
- }
374
-
375
- .AutocompleteSelect .TextField input {
376
- font-size: 14px;
509
+ .Checkbox input[type=checkbox]:checked + label:before {
510
+ background: #4AC263;
511
+ border: none;
377
512
  }
378
513
 
379
- .AutocompleteSelect > .label {
380
- position: absolute;
381
- transition: all 0.2s ease;
382
- font-family: Roboto, sans-serif;
383
- font-size: 14px;
384
- color: rgba(0, 0, 0, 0.5);
385
- z-index: 1;
386
- cursor: text;
387
- user-select: none;
514
+ .Checkbox input[type=checkbox]:checked + label:after {
515
+ transform: rotate(-45deg);
516
+ top: 6px;
388
517
  left: 4px;
389
- top: 12px;
390
- }
391
-
392
- .AutocompleteSelect > .label.active {
393
- font-size: 10px;
394
- top: 2px;
395
- }
396
-
397
- .AutocompleteSelect > .label.active .arrow {
398
- border-width: 4px 4px 0 4px;
399
- margin-bottom: 1px;
400
- }
401
-
402
- .AutocompleteSelect > .label .arrow {
403
- width: 0;
404
- height: 0;
405
- border-style: solid;
406
- border-width: 5px 5px 0 5px;
407
- border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
408
- display: inline-block;
409
- margin-left: 5px;
410
- margin-bottom: 2px;
411
- transition: all 0.2s ease;
412
- }
413
-
414
- .AutocompleteSelect > .selected {
415
- margin-top: 8px;
416
- display: flex;
417
- cursor: pointer;
518
+ width: 12px;
519
+ height: 6px;
520
+ border: 2px solid #fff;
521
+ border-top-style: none;
522
+ border-right-style: none;
418
523
  }
419
524
 
420
- .AutocompleteSelect > .selected > .reset {
421
- min-width: 36px;
422
- max-width: 36px;
423
- position: absolute;
424
- right: 0;
425
- top: 0;
426
- background-color: white;
525
+ .Checkbox input[type=checkbox]:disabled + label {
526
+ color: gray;
427
527
  }
428
528
 
429
- .AutocompleteSelect > .selected > .reset .material-icons {
430
- margin: 0;
431
- color: #BFBFBF;
432
- font-size: 20px;
529
+ .Checkbox input[type=checkbox]:disabled + label:before {
530
+ border-color: rgba(0, 0, 0, 0.26);
433
531
  }
434
532
 
435
- .AutocompleteSelect > .selected.nolabel {
436
- margin-top: 0px;
437
- border-bottom: 1px solid #e5e3e3;
533
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
534
+ background: rgba(0, 0, 0, 0.26);
438
535
  }
439
536
 
440
- .AutocompleteSelect > .selected.nolabel .DummyChild {
441
- display: inline-flex;
442
- align-items: center;
443
- flex-grow: 1;
444
- font-size: 16px;
445
- margin: 0px 10px;
446
- margin-bottom: 5px;
447
- height: 19px;
537
+ .DNDContainer {
538
+ position: relative;
448
539
  }
449
540
 
450
- .AutocompleteSelect > .selected.nolabel .arrow {
451
- width: 0;
452
- height: 0;
453
- border-style: solid;
454
- border-width: 5px 5px 0 5px;
455
- border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
456
- display: inline-block;
457
- transition: all 0.2s ease;
458
- margin: 0px 17px 3px 5px;
541
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
542
+ cursor: pointer;
459
543
  }
460
544
 
461
- .AutocompleteSelect > .selected.inline {
462
- font-size: 14px;
463
- font-family: Roboto, sans-serif;
464
- color: #1e252d;
465
- text-overflow: ellipsis;
466
- white-space: nowrap;
467
- overflow: hidden;
468
- display: flex;
469
- align-items: center;
545
+ .DNDContainer .Draggable.placeholder {
546
+ opacity: 0.2;
470
547
  }
471
548
 
472
- .AutocompleteSelect > .selected.clickable {
473
- overflow: hidden;
474
- cursor: pointer;
475
- padding: 10px;
476
- margin-left: -10px;
477
- margin-right: -10px;
549
+ .DNDContainer .Draggable.copy {
550
+ position: absolute;
551
+ box-sizing: border-box;
552
+ will-change: transform;
553
+ opacity: 0;
478
554
  }
479
555
 
480
- .AutocompleteSelect.inlineSelected {
481
- flex-flow: row wrap;
482
- justify-content: flex-start;
556
+ .DNDContainer .Draggable.dragged {
557
+ z-index: 10;
483
558
  }
484
559
 
485
- .AutocompleteSelect.inlineSelected.hasSelected {
486
- padding-top: 7px;
560
+ .DNDContainer .overlay {
561
+ position: absolute;
562
+ top: 0;
563
+ left: 0;
564
+ right: 0;
565
+ bottom: 0;
566
+ pointer-events: none;
487
567
  }
488
568
 
489
- .AutocompleteSelect.inlineSelected > .label {
490
- width: 100%;
491
- height: 100%;
569
+ .CircleProgress {
570
+ width: 48px;
571
+ height: 48px;
492
572
  }
493
573
 
494
- .AutocompleteSelect.inlineSelected > .label.active {
495
- z-index: 0;
574
+ .CircleProgress .line {
575
+ stroke-width: 2px;
576
+ stroke: black;
577
+ stroke-linecap: square;
578
+ fill: none;
579
+ transition: stroke-dashoffset 0.2s ease;
496
580
  }
497
581
 
498
- .AutocompleteSelect.inlineSelected .input {
499
- width: unset;
500
- flex-basis: 50px;
501
- flex-grow: 1;
582
+ .FilteredList {
583
+ max-height: 250px;
584
+ position: relative;
502
585
  }
503
586
 
504
- .AutocompleteSelect.inlineSelected .input::after {
505
- content: attr(data-value);
587
+ .FilteredList.popup {
588
+ padding: 0;
506
589
  visibility: hidden;
507
- white-space: pre;
508
- font: inherit;
509
- min-width: 2px;
510
- border: 0;
511
- margin: 0;
512
- outline: 0;
513
- float: left;
514
- display: inline-block;
515
- margin-top: -24px;
516
- font-size: 14px;
517
- padding: 2px;
590
+ position: absolute;
591
+ background: white;
592
+ z-index: 4;
593
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
594
+ transition: all 0.2s ease-out;
595
+ top: calc(100% + 4px);
596
+ opacity: 0;
597
+ border-radius: 2px;
518
598
  }
519
599
 
520
- .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
521
- margin-top: 7px;
600
+ .FilteredList.popup.visible {
601
+ opacity: 1;
602
+ visibility: visible;
522
603
  }
523
604
 
524
- .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
525
- cursor: pointer;
526
- margin: 5px 10px 5px 0px;
527
- display: inline-flex;
528
- flex-flow: row wrap;
529
- height: 30px;
605
+ .FilteredList.inline {
606
+ max-height: 225px;
607
+ margin-top: 5px;
608
+ }
609
+
610
+ .FilteredList .child {
611
+ display: flex;
612
+ flex-flow: row nowrap;
530
613
  align-items: center;
531
- background-color: #f0f0f0;
532
- border-radius: 30px;
533
- position: relative;
534
- font-family: Roboto, sans-serif;
614
+ white-space: nowrap;
535
615
  font-size: 14px;
536
- color: #1e252d;
616
+ color: #222222;
617
+ height: 30px;
618
+ padding: 5px 10px;
619
+ padding-right: 15px;
620
+ cursor: pointer;
621
+ overflow: hidden;
622
+ transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
623
+ border-left: 5px solid #4AC263;
624
+ padding-left: 15px;
625
+ margin-left: -5px;
537
626
  }
538
627
 
539
- .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
540
- padding-left: 35px;
541
- padding-right: 10px;
628
+ .FilteredList .child.hidden {
629
+ height: 0 !important;
630
+ padding: 0 !important;
542
631
  }
543
632
 
544
- .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
545
- cursor: pointer;
546
- min-width: 30px;
547
- width: 30px;
548
- height: 30px;
549
- opacity: 0;
550
- position: absolute;
551
- top: 0px;
552
- left: 0px;
553
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
554
- background-color: deepskyblue;
555
- color: white;
556
- border-radius: 30px;
557
- display: flex;
558
- flex-flow: row;
559
- justify-content: center;
560
- align-items: center;
561
- animation: anticlockwise 0.15s linear;
633
+ .FilteredList .child.selected {
634
+ background-color: #F0F0F0;
635
+ padding-left: 10px;
636
+ margin-left: 0px;
562
637
  }
563
638
 
564
- .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
565
- font-size: 22px;
639
+ .FilteredList .child.active {
640
+ background-color: #eeeeee;
566
641
  }
567
642
 
568
- .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
569
- width: 30px;
570
- height: 30px;
571
- opacity: 1;
572
- animation: clockwise 0.15s linear;
573
- overflow: hidden;
574
- position: absolute;
643
+ .FilteredList .child {
644
+ margin-top: 8px;
575
645
  }
576
646
 
577
- .Button.FloatingActionButton {
578
- position: absolute;
579
- right: 16px;
580
- bottom: 16px;
581
- width: 56px;
582
- height: 56px;
583
- padding: 16px;
584
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
647
+ .FilteredList .child.hidden {
648
+ margin-top: 0;
585
649
  }
586
650
 
587
- .Button.FloatingActionButton.raised {
588
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
651
+ .FilteredList .child:not(.hidden) ~ .child {
652
+ margin-top: 0;
589
653
  }
590
654
 
591
- .Button.FloatingActionButton.mini {
592
- width: 40px;
593
- height: 40px;
594
- padding: 8px;
655
+ .FilteredList .child:not(.hidden) ~ .child:last-child {
656
+ margin-bottom: 8px;
595
657
  }
596
658
 
597
- .Button.FloatingActionButton.hidden {
598
- bottom: -100px;
659
+ .FilteredList .child:not(.hidden):last-child {
660
+ margin-bottom: 8px;
599
661
  }
600
662
 
601
- .DNDContainer {
663
+ .Dropzone {
602
664
  position: relative;
603
665
  }
604
666
 
605
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
606
- cursor: pointer;
667
+ .Dropzone > .overlay {
668
+ position: absolute;
669
+ left: 0;
670
+ right: 0;
671
+ top: 0;
672
+ bottom: 0;
673
+ background-color: #38ADC4;
674
+ z-index: 1;
675
+ opacity: 0;
676
+ transition: all 0.2s ease;
677
+ transition-delay: 100ms;
678
+ visibility: hidden;
679
+ display: flex;
680
+ justify-content: center;
681
+ align-items: center;
607
682
  }
608
683
 
609
- .DNDContainer .Draggable.placeholder {
610
- opacity: 0.2;
684
+ .Dropzone > .overlay .drop {
685
+ border-radius: 4px;
686
+ border: 1px dashed #FFFFFF;
687
+ position: absolute;
688
+ top: 18px;
689
+ left: 18px;
690
+ right: 18px;
691
+ bottom: 18px;
692
+ display: flex;
693
+ justify-content: center;
694
+ align-items: center;
695
+ font-weight: 500;
696
+ font-size: 18px;
697
+ color: #FFFFFF;
611
698
  }
612
699
 
613
- .DNDContainer .Draggable.copy {
614
- position: absolute;
615
- box-sizing: border-box;
616
- will-change: transform;
617
- opacity: 0;
700
+ .Dropzone.dragging > .overlay {
701
+ opacity: 0.7;
702
+ visibility: visible;
703
+ transition-delay: 0s;
618
704
  }
619
705
 
620
- .DNDContainer .Draggable.dragged {
621
- z-index: 10;
706
+ .Dropzone.dragging > * {
707
+ pointer-events: none;
622
708
  }
623
709
 
624
- .DNDContainer .overlay {
710
+ .Dropzone > input.file {
625
711
  position: absolute;
626
- top: 0;
627
712
  left: 0;
628
713
  right: 0;
714
+ top: 0;
629
715
  bottom: 0;
630
- pointer-events: none;
716
+ width: 100%;
717
+ height: 100%;
718
+ opacity: 0;
719
+ cursor: pointer;
720
+ z-index: 1;
631
721
  }
632
722
 
633
723
  .FormUploadProgress {
@@ -699,129 +789,6 @@
699
789
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
700
790
  }
701
791
 
702
- .DialogModal {
703
- overflow: hidden;
704
- }
705
-
706
- .DialogModal .content {
707
- top: 20vh;
708
- }
709
-
710
- .Dialog {
711
- background-color: white;
712
- min-width: 460px;
713
- max-width: 40vw;
714
- padding: 15px;
715
- }
716
-
717
- .Dialog .title {
718
- margin-bottom: 15px;
719
- padding: 20px 50px 0px 30px;
720
- font-size: 1.25rem;
721
- line-height: 2rem;
722
- font-weight: 400;
723
- letter-spacing: 0.0125em;
724
- }
725
-
726
- .Dialog .description {
727
- color: rgba(0, 0, 0, 0.54);
728
- font-size: 1rem;
729
- line-height: 1.5rem;
730
- font-weight: 400;
731
- letter-spacing: 0.03125em;
732
- margin-top: 20px;
733
- padding: 0 24px 24px;
734
- }
735
-
736
- .Dialog > div.row {
737
- margin-bottom: 15px;
738
- }
739
-
740
- .Dialog > div.row:last-child {
741
- margin-bottom: 0;
742
- }
743
-
744
- .FilteredList {
745
- max-height: 250px;
746
- position: relative;
747
- }
748
-
749
- .FilteredList.popup {
750
- padding: 0;
751
- visibility: hidden;
752
- position: absolute;
753
- background: white;
754
- z-index: 4;
755
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
756
- transition: all 0.2s ease-out;
757
- top: calc(100% + 4px);
758
- opacity: 0;
759
- border-radius: 2px;
760
- }
761
-
762
- .FilteredList.popup.visible {
763
- opacity: 1;
764
- visibility: visible;
765
- }
766
-
767
- .FilteredList.inline {
768
- max-height: 225px;
769
- margin-top: 5px;
770
- }
771
-
772
- .FilteredList .child {
773
- display: flex;
774
- flex-flow: row nowrap;
775
- align-items: center;
776
- white-space: nowrap;
777
- font-size: 14px;
778
- color: #222222;
779
- height: 30px;
780
- padding: 5px 10px;
781
- padding-right: 15px;
782
- cursor: pointer;
783
- overflow: hidden;
784
- transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
785
- border-left: 5px solid #4AC263;
786
- padding-left: 15px;
787
- margin-left: -5px;
788
- }
789
-
790
- .FilteredList .child.hidden {
791
- height: 0 !important;
792
- padding: 0 !important;
793
- }
794
-
795
- .FilteredList .child.selected {
796
- background-color: #F0F0F0;
797
- padding-left: 10px;
798
- margin-left: 0px;
799
- }
800
-
801
- .FilteredList .child.active {
802
- background-color: #eeeeee;
803
- }
804
-
805
- .FilteredList .child {
806
- margin-top: 8px;
807
- }
808
-
809
- .FilteredList .child.hidden {
810
- margin-top: 0;
811
- }
812
-
813
- .FilteredList .child:not(.hidden) ~ .child {
814
- margin-top: 0;
815
- }
816
-
817
- .FilteredList .child:not(.hidden) ~ .child:last-child {
818
- margin-bottom: 8px;
819
- }
820
-
821
- .FilteredList .child:not(.hidden):last-child {
822
- margin-bottom: 8px;
823
- }
824
-
825
792
  .ImageGallery {
826
793
  position: fixed;
827
794
  top: 0;
@@ -1057,64 +1024,134 @@
1057
1024
  font-size: 24px;
1058
1025
  }
1059
1026
 
1060
- .Dropzone {
1061
- position: relative;
1027
+ .DialogModal {
1028
+ overflow: hidden;
1062
1029
  }
1063
1030
 
1064
- .Dropzone > .overlay {
1031
+ .DialogModal .content {
1032
+ top: 20vh;
1033
+ }
1034
+
1035
+ .Dialog {
1036
+ background-color: white;
1037
+ min-width: 460px;
1038
+ max-width: 40vw;
1039
+ padding: 15px;
1040
+ }
1041
+
1042
+ .Dialog .title {
1043
+ margin-bottom: 15px;
1044
+ padding: 20px 50px 0px 30px;
1045
+ font-size: 1.25rem;
1046
+ line-height: 2rem;
1047
+ font-weight: 400;
1048
+ letter-spacing: 0.0125em;
1049
+ }
1050
+
1051
+ .Dialog .description {
1052
+ color: rgba(0, 0, 0, 0.54);
1053
+ font-size: 1rem;
1054
+ line-height: 1.5rem;
1055
+ font-weight: 400;
1056
+ letter-spacing: 0.03125em;
1057
+ margin-top: 20px;
1058
+ padding: 0 24px 24px;
1059
+ }
1060
+
1061
+ .Dialog > div.row {
1062
+ margin-bottom: 15px;
1063
+ }
1064
+
1065
+ .Dialog > div.row:last-child {
1066
+ margin-bottom: 0;
1067
+ }
1068
+
1069
+ .Button.FloatingActionButton {
1065
1070
  position: absolute;
1066
- left: 0;
1067
- right: 0;
1068
- top: 0;
1069
- bottom: 0;
1070
- background-color: #38ADC4;
1071
- z-index: 1;
1072
- opacity: 0;
1073
- transition: all 0.2s ease;
1074
- transition-delay: 100ms;
1075
- visibility: hidden;
1071
+ right: 16px;
1072
+ bottom: 16px;
1073
+ width: 56px;
1074
+ height: 56px;
1075
+ padding: 16px;
1076
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1077
+ }
1078
+
1079
+ .Button.FloatingActionButton.raised {
1080
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
1081
+ }
1082
+
1083
+ .Button.FloatingActionButton.mini {
1084
+ width: 40px;
1085
+ height: 40px;
1086
+ padding: 8px;
1087
+ }
1088
+
1089
+ .Button.FloatingActionButton.hidden {
1090
+ bottom: -100px;
1091
+ }
1092
+
1093
+ .DropFileInput {
1094
+ flex-grow: 1;
1095
+ }
1096
+
1097
+ .DropFileInput .Dropzone {
1098
+ border: 1px dashed #808080;
1099
+ padding: 12px;
1076
1100
  display: flex;
1101
+ flex-flow: row nowrap;
1077
1102
  justify-content: center;
1078
1103
  align-items: center;
1104
+ color: gray;
1105
+ cursor: pointer;
1106
+ border-radius: 3px;
1107
+ font-weight: normal;
1108
+ line-height: 22px;
1109
+ font-size: 14px;
1110
+ color: #7E7E7E;
1111
+ max-width: 100%;
1112
+ word-break: break-all;
1113
+ word-break: break-word;
1079
1114
  }
1080
1115
 
1081
- .Dropzone > .overlay .drop {
1082
- border-radius: 4px;
1083
- border: 1px dashed #FFFFFF;
1116
+ .DropFileInput .Dropzone .icon.withText {
1117
+ margin-right: 10px;
1118
+ }
1119
+
1120
+ .ModalMenu {
1084
1121
  position: absolute;
1085
- top: 18px;
1086
- left: 18px;
1087
- right: 18px;
1088
- bottom: 18px;
1089
- display: flex;
1090
- justify-content: center;
1091
- align-items: center;
1092
- font-weight: 500;
1093
- font-size: 18px;
1094
- color: #FFFFFF;
1122
+ top: 10px;
1123
+ right: 50px;
1124
+ }
1125
+
1126
+ .ModalMenu .material-icons {
1127
+ color: #818181;
1128
+ }
1129
+
1130
+ .ModalMenu .Button.animated {
1131
+ position: absolute;
1132
+ transition: opacity 150ms ease-in, right 200ms ease-in;
1133
+ opacity: 0;
1134
+ right: 0;
1135
+ top: 0;
1136
+ }
1137
+
1138
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1139
+ opacity: 1;
1095
1140
  }
1096
1141
 
1097
- .Dropzone.dragging > .overlay {
1098
- opacity: 0.7;
1099
- visibility: visible;
1100
- transition-delay: 0s;
1142
+ .ModalMenu .Button.animated.unmounting {
1143
+ transition: opacity 100ms ease-out, right 200ms ease-out;
1101
1144
  }
1102
1145
 
1103
- .Dropzone.dragging > * {
1104
- pointer-events: none;
1146
+ .ModalMenu .Button.active {
1147
+ background: #EBEBEB;
1105
1148
  }
1106
1149
 
1107
- .Dropzone > input.file {
1108
- position: absolute;
1109
- left: 0;
1110
- right: 0;
1111
- top: 0;
1112
- bottom: 0;
1113
- width: 100%;
1114
- height: 100%;
1115
- opacity: 0;
1116
- cursor: pointer;
1117
- z-index: 1;
1150
+ .ModalMenu .separator {
1151
+ height: 24px;
1152
+ width: 1px;
1153
+ background-color: #D9D9D9;
1154
+ margin-left: 4px;
1118
1155
  }
1119
1156
 
1120
1157
  .Modal {
@@ -1187,88 +1224,6 @@
1187
1224
  position: absolute;
1188
1225
  }
1189
1226
 
1190
- .ModalMenu {
1191
- position: absolute;
1192
- top: 10px;
1193
- right: 50px;
1194
- }
1195
-
1196
- .ModalMenu .material-icons {
1197
- color: #818181;
1198
- }
1199
-
1200
- .ModalMenu .Button.animated {
1201
- position: absolute;
1202
- transition: opacity 150ms ease-in, right 200ms ease-in;
1203
- opacity: 0;
1204
- right: 0;
1205
- top: 0;
1206
- }
1207
-
1208
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1209
- opacity: 1;
1210
- }
1211
-
1212
- .ModalMenu .Button.animated.unmounting {
1213
- transition: opacity 100ms ease-out, right 200ms ease-out;
1214
- }
1215
-
1216
- .ModalMenu .Button.active {
1217
- background: #EBEBEB;
1218
- }
1219
-
1220
- .ModalMenu .separator {
1221
- height: 24px;
1222
- width: 1px;
1223
- background-color: #D9D9D9;
1224
- margin-left: 4px;
1225
- }
1226
-
1227
- .Snackbar {
1228
- transform: translateX(-50%);
1229
- overflow: hidden;
1230
- background-color: #323232;
1231
- padding: 14px 24px 14px 24px;
1232
- color: #fff;
1233
- min-width: 288px;
1234
- max-width: 568px;
1235
- position: fixed;
1236
- bottom: -50px;
1237
- left: 50%;
1238
- display: flex;
1239
- flex-wrap: nowrap;
1240
- align-items: center;
1241
- opacity: 0;
1242
- transition: bottom 0.25s ease, opacity 0.2s ease;
1243
- border-radius: 4px;
1244
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1245
- }
1246
-
1247
- .Snackbar.shown {
1248
- bottom: 15px;
1249
- opacity: 1;
1250
- }
1251
-
1252
- .Snackbar .message {
1253
- overflow: hidden;
1254
- line-height: 1.2em;
1255
- min-height: 1.2em;
1256
- max-height: 2.4em;
1257
- flex: 1;
1258
- }
1259
-
1260
- .Snackbar .action {
1261
- text-transform: uppercase;
1262
- font-weight: bold;
1263
- margin-left: 48px;
1264
- color: #bf3727;
1265
- }
1266
-
1267
- .Snackbar .action a {
1268
- text-decoration: none;
1269
- color: #bf3727;
1270
- }
1271
-
1272
1227
  .Scrollable {
1273
1228
  max-height: 250px;
1274
1229
  max-width: 250px;
@@ -1364,65 +1319,49 @@
1364
1319
  will-change: left;
1365
1320
  }
1366
1321
 
1367
- .SpinningProgress {
1368
- width: 48px;
1369
- height: 48px;
1370
- position: relative;
1371
- margin: 0 auto;
1372
- }
1373
-
1374
- .SpinningProgress:before {
1375
- content: "";
1376
- display: block;
1377
- padding-top: 100%;
1322
+ .Snackbar {
1323
+ transform: translateX(-50%);
1324
+ overflow: hidden;
1325
+ background-color: #323232;
1326
+ padding: 14px 24px 14px 24px;
1327
+ color: #fff;
1328
+ min-width: 288px;
1329
+ max-width: 568px;
1330
+ position: fixed;
1331
+ bottom: -50px;
1332
+ left: 50%;
1333
+ display: flex;
1334
+ flex-wrap: nowrap;
1335
+ align-items: center;
1336
+ opacity: 0;
1337
+ transition: bottom 0.25s ease, opacity 0.2s ease;
1338
+ border-radius: 4px;
1339
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1378
1340
  }
1379
1341
 
1380
- .SpinningProgress .circular {
1381
- animation: rotate 2s linear infinite;
1382
- height: 100%;
1383
- transform-origin: center center;
1384
- width: 100%;
1385
- position: absolute;
1386
- top: 0;
1387
- bottom: 0;
1388
- left: 0;
1389
- right: 0;
1390
- margin: auto;
1342
+ .Snackbar.shown {
1343
+ bottom: 15px;
1344
+ opacity: 1;
1391
1345
  }
1392
1346
 
1393
- .SpinningProgress .line {
1394
- stroke: black;
1395
- stroke-width: 2px;
1396
- stroke-dasharray: 1, 96;
1397
- stroke-dashoffset: 0;
1398
- animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1347
+ .Snackbar .message {
1348
+ overflow: hidden;
1349
+ line-height: 1.2em;
1350
+ min-height: 1.2em;
1351
+ max-height: 2.4em;
1352
+ flex: 1;
1399
1353
  }
1400
1354
 
1401
- @keyframes rotate {
1402
- 100% {
1403
- transform: rotate(360deg);
1404
- }
1405
- }
1406
- @keyframes dash {
1407
- 0% {
1408
- stroke-dasharray: 1, 96;
1409
- stroke-dashoffset: 0;
1410
- }
1411
- 50% {
1412
- stroke-dasharray: 43, 96;
1413
- stroke-dashoffset: -17px;
1414
- }
1415
- 100% {
1416
- stroke-dasharray: 43, 96;
1417
- stroke-dashoffset: -53px;
1418
- }
1419
- }
1420
- .ScrollableTable .Scrollable .scrollbar {
1421
- top: 56px;
1355
+ .Snackbar .action {
1356
+ text-transform: uppercase;
1357
+ font-weight: bold;
1358
+ margin-left: 48px;
1359
+ color: #bf3727;
1422
1360
  }
1423
1361
 
1424
- .ScrollableTable .Table {
1425
- position: static;
1362
+ .Snackbar .action a {
1363
+ text-decoration: none;
1364
+ color: #bf3727;
1426
1365
  }
1427
1366
 
1428
1367
  .TextField {
@@ -1780,4 +1719,66 @@
1780
1719
 
1781
1720
  .Switch .switch-input:checked + .switch-label .toggle--off {
1782
1721
  display: none;
1722
+ }
1723
+
1724
+ .ScrollableTable .Scrollable .scrollbar {
1725
+ top: 56px;
1726
+ }
1727
+
1728
+ .ScrollableTable .Table {
1729
+ position: static;
1730
+ }
1731
+
1732
+ .SpinningProgress {
1733
+ width: 48px;
1734
+ height: 48px;
1735
+ position: relative;
1736
+ margin: 0 auto;
1737
+ }
1738
+
1739
+ .SpinningProgress:before {
1740
+ content: "";
1741
+ display: block;
1742
+ padding-top: 100%;
1743
+ }
1744
+
1745
+ .SpinningProgress .circular {
1746
+ animation: rotate 2s linear infinite;
1747
+ height: 100%;
1748
+ transform-origin: center center;
1749
+ width: 100%;
1750
+ position: absolute;
1751
+ top: 0;
1752
+ bottom: 0;
1753
+ left: 0;
1754
+ right: 0;
1755
+ margin: auto;
1756
+ }
1757
+
1758
+ .SpinningProgress .line {
1759
+ stroke: black;
1760
+ stroke-width: 2px;
1761
+ stroke-dasharray: 1, 96;
1762
+ stroke-dashoffset: 0;
1763
+ animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1764
+ }
1765
+
1766
+ @keyframes rotate {
1767
+ 100% {
1768
+ transform: rotate(360deg);
1769
+ }
1770
+ }
1771
+ @keyframes dash {
1772
+ 0% {
1773
+ stroke-dasharray: 1, 96;
1774
+ stroke-dashoffset: 0;
1775
+ }
1776
+ 50% {
1777
+ stroke-dasharray: 43, 96;
1778
+ stroke-dashoffset: -17px;
1779
+ }
1780
+ 100% {
1781
+ stroke-dasharray: 43, 96;
1782
+ stroke-dashoffset: -53px;
1783
+ }
1783
1784
  }