react-ui-basics 0.0.180 → 0.0.182

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,593 +1,408 @@
1
- .Button {
2
- position: relative;
3
- min-width: 64px;
4
- min-height: 36px;
5
- height: 24px;
6
- margin: 0px;
7
- padding: 0px 16px;
8
- border: none;
9
- outline: none;
10
- font-size: 14px;
11
- font-weight: 500;
12
- letter-spacing: 1.25px;
13
- background: #dfdfdf;
14
- text-transform: uppercase;
15
- font-family: Roboto, sans-serif;
16
- -webkit-tap-highlight-color: transparent;
17
- display: inline-flex;
18
- justify-content: center;
19
- align-items: center;
20
- cursor: pointer;
21
- overflow: hidden;
22
- user-select: none;
23
- border-radius: 3px;
24
- transition: all 0.2s ease;
1
+ .animated {
2
+ transition: opacity 250ms ease;
3
+ opacity: 0;
25
4
  }
26
5
 
27
- .Button.flat {
28
- background-color: transparent;
6
+ .animated.mounting, .animated.mounted {
7
+ opacity: 1;
29
8
  }
30
9
 
31
- .Button.flat:hover {
32
- background-color: rgba(0, 0, 0, 0.05);
10
+ .CircleProgress {
11
+ width: 48px;
12
+ height: 48px;
33
13
  }
34
14
 
35
- .Button.green {
36
- background-color: #43a047;
37
- color: white;
15
+ .CircleProgress .line {
16
+ stroke-width: 2px;
17
+ stroke: black;
18
+ stroke-linecap: square;
19
+ fill: none;
20
+ transition: stroke-dashoffset 0.2s ease;
38
21
  }
39
22
 
40
- .Button.green:hover {
41
- background-color: #3b8e3f;
23
+ .FilteredList {
24
+ max-height: 250px;
25
+ position: relative;
42
26
  }
43
27
 
44
- .Button.blue {
45
- background-color: #039be5;
46
- color: white;
28
+ .FilteredList.popup {
29
+ padding: 0;
30
+ visibility: hidden;
31
+ position: absolute;
32
+ background: white;
33
+ z-index: 4;
34
+ 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);
35
+ transition: all 0.2s ease-out;
36
+ top: calc(100% + 4px);
37
+ opacity: 0;
38
+ border-radius: 2px;
47
39
  }
48
40
 
49
- .Button.blue:hover {
50
- background-color: #038acc;
41
+ .FilteredList.popup.visible {
42
+ opacity: 1;
43
+ visibility: visible;
51
44
  }
52
45
 
53
- .Button.red {
54
- background-color: #e53935;
55
- color: white;
46
+ .FilteredList.inline {
47
+ max-height: 225px;
48
+ margin-top: 5px;
56
49
  }
57
50
 
58
- .Button.red:hover {
59
- background-color: #e2231e;
51
+ .FilteredList .child {
52
+ display: flex;
53
+ flex-flow: row nowrap;
54
+ align-items: center;
55
+ white-space: nowrap;
56
+ font-size: 14px;
57
+ color: #222222;
58
+ height: 30px;
59
+ padding: 5px 10px;
60
+ padding-right: 15px;
61
+ cursor: pointer;
62
+ overflow: hidden;
63
+ transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
64
+ border-left: 5px solid #4AC263;
65
+ padding-left: 15px;
66
+ margin-left: -5px;
60
67
  }
61
68
 
62
- .Button.black {
63
- background-color: #1e252d;
64
- color: white;
69
+ .FilteredList .child.hidden {
70
+ height: 0 !important;
71
+ padding: 0 !important;
65
72
  }
66
73
 
67
- .Button.black:hover {
68
- background-color: #14181e;
74
+ .FilteredList .child.selected {
75
+ background-color: #F0F0F0;
76
+ padding-left: 10px;
77
+ margin-left: 0px;
69
78
  }
70
79
 
71
- .Button.gray {
72
- background: #D9D9D9;
73
- color: #999999;
80
+ .FilteredList .child.active {
81
+ background-color: #eeeeee;
74
82
  }
75
83
 
76
- .Button.gray:hover {
77
- background-color: #cccccc;
84
+ .FilteredList .child {
85
+ margin-top: 8px;
78
86
  }
79
87
 
80
- .Button.small {
81
- padding: 0px 8px;
82
- min-height: 16px;
83
- min-width: 16px;
88
+ .FilteredList .child.hidden {
89
+ margin-top: 0;
84
90
  }
85
91
 
86
- .Button > .material-icons {
87
- margin-right: 10px;
92
+ .FilteredList .child:not(.hidden) ~ .child {
93
+ margin-top: 0;
88
94
  }
89
95
 
90
- .Button.round {
91
- padding: 0px;
92
- min-width: 36px;
93
- border-radius: 50%;
96
+ .FilteredList .child:not(.hidden) ~ .child:last-child {
97
+ margin-bottom: 8px;
94
98
  }
95
99
 
96
- .Button.round > .material-icons {
97
- margin: 0px;
100
+ .FilteredList .child:not(.hidden):last-child {
101
+ margin-bottom: 8px;
98
102
  }
99
103
 
100
- .Button .ripple {
101
- position: absolute;
102
- background: rgba(0, 0, 0, 0.1);
103
- border-radius: 100%;
104
- transform: scale(0);
105
- pointer-events: none;
106
- transition: opacity 0.2s ease-out;
104
+ .ImageGallery {
105
+ position: fixed;
106
+ top: 0;
107
+ left: 0;
108
+ bottom: 0;
109
+ right: 0;
110
+ z-index: 1000;
111
+ background-color: rgba(0, 0, 0, 0.01);
112
+ user-select: none;
107
113
  }
108
114
 
109
- .Button .ripple.show {
110
- animation: ripple 0.35s ease-out;
115
+ .ImageGallery:focus {
116
+ outline-width: 0px;
111
117
  }
112
118
 
113
- .Button:active .ripple.showed {
119
+ .ImageGallery.animated {
120
+ transition: background-color 0.25s ease;
114
121
  opacity: 1;
115
122
  }
116
123
 
117
- .Button:focus .ripple.focused {
118
- opacity: 1;
119
- transition: opacity 0.2s ease-out, transform 0.2s ease-out;
120
- transform: scale(1);
121
- animation: resize 1.25s ease-out infinite;
122
- animation-delay: 0.2s;
123
- animation-direction: alternate;
124
+ .ImageGallery.mounting, .ImageGallery.mounted {
125
+ background-color: rgba(0, 0, 0, 0.8);
124
126
  }
125
127
 
126
- .Button .ripple.showed {
127
- transform: scale(2);
128
- opacity: 0;
128
+ .ImageGallery .image {
129
+ position: absolute;
130
+ cursor: grab;
129
131
  }
130
132
 
131
- @keyframes ripple {
132
- to {
133
- transform: scale(2);
134
- }
135
- }
136
- @keyframes resize {
137
- to {
138
- transform: scale(0.9);
139
- }
140
- }
141
- .Button.raised {
142
- transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
133
+ .ImageGallery .image .counter {
134
+ display: none;
143
135
  }
144
136
 
145
- .Button.raised:hover {
146
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
137
+ .ImageGallery .image img {
138
+ border-radius: 4px;
139
+ max-width: 100%;
140
+ min-width: 100%;
147
141
  }
148
142
 
149
- .Button.raised:active {
150
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
143
+ .ImageGallery .image.animated {
144
+ transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
145
+ will-change: top, left, width, height, opacity;
151
146
  }
152
147
 
153
- .Button.disabled {
154
- box-shadow: none;
155
- background: #D9D9D9;
156
- color: #999999;
148
+ .ImageGallery .image.animated.mounting, .ImageGallery .image.animated.mounted, .ImageGallery .image.animated.unmounting {
149
+ opacity: 1;
157
150
  }
158
151
 
159
- .Button.disabled:hover {
160
- background-color: #cccccc;
152
+ .ImageGallery .image.zoomed {
153
+ text-align: center;
154
+ overflow: hidden;
161
155
  }
162
156
 
163
- .Button::-moz-focus-inner {
164
- border: 0;
157
+ .ImageGallery .image.dragging {
158
+ transition: none;
159
+ cursor: move;
165
160
  }
166
161
 
167
- .AutocompleteSelect {
168
- display: inline-flex;
169
- flex-flow: column;
170
- justify-content: center;
171
- position: relative;
172
- min-width: 250px;
173
- min-height: 36px;
174
- user-select: none;
162
+ .ImageGallery .image .close {
163
+ position: absolute;
164
+ top: -18px;
165
+ right: -18px;
175
166
  }
176
167
 
177
- @keyframes clockwise {
178
- 0% {
179
- -webkit-transform: rotate(-90deg);
180
- }
181
- 100% {
182
- -webkit-transform: translateX(0px);
183
- }
184
- }
185
- @keyframes anticlockwise {
186
- 0% {
187
- -webkit-transform: rotate(90deg);
188
- }
189
- 100% {
190
- -webkit-transform: translateX(0px);
191
- }
168
+ .ImageGallery .image .spinner {
169
+ position: absolute;
170
+ top: 0;
171
+ bottom: 0;
172
+ left: 0;
173
+ right: 0;
174
+ background: rgba(0, 0, 0, 0.65);
192
175
  }
193
- .AutocompleteSelect > .input {
194
- width: 100%;
176
+
177
+ .ImageGallery .image .spinner .SpinningProgress {
178
+ position: absolute;
179
+ top: 50%;
180
+ left: 50%;
181
+ margin-left: -24px;
182
+ margin-top: -24px;
195
183
  }
196
184
 
197
- .AutocompleteSelect .Scrollable {
198
- padding-right: 0;
199
- min-width: 100%;
185
+ .ImageGallery .image .spinner .SpinningProgress .line {
186
+ stroke: #2196F3;
200
187
  }
201
188
 
202
- .AutocompleteSelect.inline-multiple > .label {
203
- top: -12px;
189
+ .ImageGallery .Button.animated {
190
+ transition: all 0.25s ease;
191
+ opacity: 0;
192
+ transform: scale(0);
204
193
  }
205
194
 
206
- .AutocompleteSelect.inline-multiple > .selected {
207
- flex-flow: row wrap;
195
+ .ImageGallery .Button.animated.mounted, .ImageGallery .Button.animated.mounting {
196
+ opacity: 1;
197
+ transform: scale(1);
208
198
  }
209
199
 
210
- .AutocompleteSelect.multiple-mini-inline {
211
- height: 42px;
200
+ .ImageGallery .Button {
201
+ color: white;
202
+ background: rgba(0, 0, 0, 0.4);
212
203
  }
213
204
 
214
- .AutocompleteSelect.multiple-mini-inline > .label {
215
- cursor: pointer;
216
- width: 100%;
217
- margin-left: -10px;
218
- padding: 10px;
219
- box-sizing: border-box;
220
- top: 0;
205
+ .ImageGallery .Button:hover {
206
+ background: rgba(0, 0, 0, 0.7);
221
207
  }
222
208
 
223
- .AutocompleteSelect.multiple-mini-inline > .label.active {
224
- padding: 0 10px;
209
+ .ImageGallery > .arrow {
210
+ position: absolute;
211
+ top: 50%;
212
+ height: 76px;
213
+ width: 76px;
214
+ margin-top: -38px;
225
215
  }
226
216
 
227
- .AutocompleteSelect.multiple-mini-inline > .selected {
228
- width: 250px;
217
+ .ImageGallery > .arrow.left {
218
+ left: 5%;
229
219
  }
230
220
 
231
- .AutocompleteSelect.multiple-mini-inline > .input {
232
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
233
- position: absolute;
234
- top: 38px;
235
- z-index: 2;
236
- background-color: white;
237
- min-width: 130%;
221
+ .ImageGallery > .arrow.right {
222
+ right: 5%;
238
223
  }
239
224
 
240
- .AutocompleteSelect.multiple-mini-inline > .input .TextField {
241
- padding-left: 10px;
242
- padding-right: 10px;
243
- width: 100%;
244
- box-sizing: border-box;
225
+ .ImageGallery > .arrow .material-icons {
226
+ font-size: 40px;
245
227
  }
246
228
 
247
- .AutocompleteSelect.multiple-mini-inline > .input.hidden {
248
- opacity: 0;
249
- visibility: hidden;
229
+ .ImageGallery .counter {
230
+ position: absolute;
231
+ top: 10px;
232
+ left: 10px;
233
+ color: white;
234
+ font-size: 13px;
250
235
  }
251
236
 
252
- .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
253
- margin-top: 0;
237
+ .ImageGallery .previews {
238
+ height: 80px;
239
+ position: absolute;
240
+ bottom: 15px;
241
+ left: 50%;
242
+ transform: translateX(-50%);
243
+ padding: 0 45px;
254
244
  }
255
245
 
256
- .AutocompleteSelect .TextField {
257
- margin-top: 8px;
246
+ .ImageGallery .previews .viewport {
247
+ overflow: hidden;
248
+ position: relative;
249
+ height: 100%;
258
250
  }
259
251
 
260
- .AutocompleteSelect .TextField input {
261
- font-size: 14px;
252
+ .ImageGallery .previews .container {
253
+ position: relative;
254
+ display: flex;
255
+ flex-flow: row nowrap;
256
+ height: 100%;
257
+ transition: left 0.25s ease;
262
258
  }
263
259
 
264
- .AutocompleteSelect > .label {
265
- position: absolute;
266
- transition: all 0.2s ease;
267
- font-family: Roboto, sans-serif;
268
- font-size: 14px;
269
- color: rgba(0, 0, 0, 0.5);
270
- z-index: 1;
271
- cursor: text;
272
- user-select: none;
273
- left: 4px;
274
- top: 12px;
260
+ .ImageGallery .previews .preview {
261
+ position: relative;
262
+ height: 100%;
263
+ display: inline-block;
264
+ width: 106.66px;
265
+ overflow: hidden;
266
+ margin-left: 12px;
267
+ border-radius: 2px;
268
+ cursor: pointer;
269
+ box-sizing: border-box;
275
270
  }
276
271
 
277
- .AutocompleteSelect > .label.active {
278
- font-size: 10px;
279
- top: 2px;
272
+ .ImageGallery .previews .preview:first-child {
273
+ margin-left: 0;
280
274
  }
281
275
 
282
- .AutocompleteSelect > .label.active .arrow {
283
- border-width: 4px 4px 0 4px;
284
- margin-bottom: 1px;
276
+ .ImageGallery .previews .preview > .border {
277
+ position: absolute;
278
+ bottom: 0;
279
+ width: 100%;
280
+ height: 3px;
285
281
  }
286
282
 
287
- .AutocompleteSelect > .label .arrow {
283
+ .ImageGallery .previews .preview > .border .line {
284
+ left: 50%;
288
285
  width: 0;
289
- height: 0;
290
- border-style: solid;
291
- border-width: 5px 5px 0 5px;
292
- border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
293
- display: inline-block;
294
- margin-left: 5px;
295
- margin-bottom: 2px;
286
+ height: 3px;
287
+ min-height: 3px;
288
+ background-color: #4AC263;
296
289
  transition: all 0.2s ease;
290
+ position: absolute;
297
291
  }
298
292
 
299
- .AutocompleteSelect > .selected {
300
- margin-top: 8px;
301
- display: flex;
302
- cursor: pointer;
303
- }
304
-
305
- .AutocompleteSelect > .selected > .reset {
306
- min-width: 36px;
307
- max-width: 36px;
293
+ .ImageGallery .previews .preview:after {
294
+ content: "";
308
295
  position: absolute;
309
- right: 0;
310
296
  top: 0;
311
- background-color: white;
297
+ right: 0;
298
+ bottom: 0;
299
+ left: 0;
300
+ background: rgba(0, 0, 0, 0.35);
301
+ transition: background 0.2s ease;
312
302
  }
313
303
 
314
- .AutocompleteSelect > .selected > .reset .material-icons {
315
- margin: 0;
316
- color: #BFBFBF;
317
- font-size: 20px;
304
+ .ImageGallery .previews .preview:hover:after {
305
+ background: rgba(0, 0, 0, 0.1);
318
306
  }
319
307
 
320
- .AutocompleteSelect > .selected.nolabel {
321
- margin-top: 0px;
322
- border-bottom: 1px solid #e5e3e3;
308
+ .ImageGallery .previews .preview.selected .border .line {
309
+ left: 0;
310
+ width: 100%;
323
311
  }
324
312
 
325
- .AutocompleteSelect > .selected.nolabel .DummyChild {
326
- display: inline-flex;
327
- align-items: center;
328
- flex-grow: 1;
329
- font-size: 16px;
330
- margin: 0px 10px;
331
- margin-bottom: 5px;
332
- height: 19px;
313
+ .ImageGallery .previews .preview.selected:after {
314
+ background: rgba(0, 0, 0, 0);
333
315
  }
334
316
 
335
- .AutocompleteSelect > .selected.nolabel .arrow {
336
- width: 0;
337
- height: 0;
338
- border-style: solid;
339
- border-width: 5px 5px 0 5px;
340
- border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
341
- display: inline-block;
342
- transition: all 0.2s ease;
343
- margin: 0px 17px 3px 5px;
317
+ .ImageGallery .previews > .arrow {
318
+ position: absolute;
319
+ top: 50%;
320
+ height: 30px;
321
+ width: 30px;
322
+ min-width: 30px;
323
+ min-height: 30px;
324
+ margin-top: -15px;
344
325
  }
345
326
 
346
- .AutocompleteSelect > .selected.inline {
347
- font-size: 14px;
348
- font-family: Roboto, sans-serif;
349
- color: #1e252d;
350
- text-overflow: ellipsis;
351
- white-space: nowrap;
352
- overflow: hidden;
353
- display: flex;
354
- align-items: center;
327
+ .ImageGallery .previews > .arrow.left {
328
+ left: 0;
355
329
  }
356
330
 
357
- .AutocompleteSelect > .selected.clickable {
358
- overflow: hidden;
359
- cursor: pointer;
360
- padding: 10px;
361
- margin-left: -10px;
362
- margin-right: -10px;
331
+ .ImageGallery .previews > .arrow.right {
332
+ right: 0;
363
333
  }
364
334
 
365
- .AutocompleteSelect.inlineSelected {
366
- flex-flow: row wrap;
367
- justify-content: flex-start;
335
+ .ImageGallery .previews > .arrow .material-icons {
336
+ font-size: 24px;
368
337
  }
369
338
 
370
- .AutocompleteSelect.inlineSelected.hasSelected {
371
- padding-top: 7px;
339
+ .FormUploadProgress {
340
+ position: absolute;
341
+ left: 0;
342
+ right: 0;
343
+ top: 0;
344
+ bottom: 0;
345
+ background-color: rgba(255, 255, 255, 0.6);
346
+ z-index: 2;
372
347
  }
373
348
 
374
- .AutocompleteSelect.inlineSelected > .label {
375
- width: 100%;
376
- height: 100%;
349
+ .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
350
+ transition-delay: 500ms;
377
351
  }
378
352
 
379
- .AutocompleteSelect.inlineSelected > .label.active {
380
- z-index: 0;
353
+ .FormUploadProgress .wrapper {
354
+ position: sticky;
355
+ top: 40%;
356
+ margin-top: 40%;
357
+ margin-left: 50%;
358
+ transform: translateX(-50%);
359
+ display: flex;
360
+ flex-flow: column;
361
+ justify-content: center;
362
+ align-items: center;
381
363
  }
382
364
 
383
- .AutocompleteSelect.inlineSelected .input {
384
- width: unset;
385
- flex-basis: 50px;
386
- flex-grow: 1;
365
+ .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
366
+ position: absolute;
367
+ width: 107px;
368
+ height: 107px;
369
+ top: 0;
370
+ left: 0;
387
371
  }
388
372
 
389
- .AutocompleteSelect.inlineSelected .input::after {
390
- content: attr(data-value);
391
- visibility: hidden;
392
- white-space: pre;
393
- font: inherit;
394
- min-width: 2px;
395
- border: 0;
396
- margin: 0;
397
- outline: 0;
398
- float: left;
399
- display: inline-block;
400
- margin-top: -24px;
401
- font-size: 14px;
402
- padding: 2px;
403
- }
404
-
405
- .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
406
- margin-top: 7px;
407
- }
408
-
409
- .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
410
- cursor: pointer;
411
- margin: 5px 10px 5px 0px;
412
- display: inline-flex;
413
- flex-flow: row wrap;
414
- height: 30px;
415
- align-items: center;
416
- background-color: #f0f0f0;
417
- border-radius: 30px;
418
- position: relative;
419
- font-family: Roboto, sans-serif;
420
- font-size: 14px;
421
- color: #1e252d;
422
- }
423
-
424
- .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
425
- padding-left: 35px;
426
- padding-right: 10px;
373
+ .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
374
+ stroke: #2196F3;
427
375
  }
428
376
 
429
- .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
430
- cursor: pointer;
431
- min-width: 30px;
432
- width: 30px;
433
- height: 30px;
434
- opacity: 0;
435
- position: absolute;
436
- top: 0px;
437
- left: 0px;
438
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
439
- background-color: deepskyblue;
440
- color: white;
441
- border-radius: 30px;
377
+ .FormUploadProgress .wrapper > .progress {
378
+ width: 107px;
379
+ height: 107px;
380
+ min-height: 107px;
442
381
  display: flex;
443
- flex-flow: row;
444
382
  justify-content: center;
445
383
  align-items: center;
446
- animation: anticlockwise 0.15s linear;
447
- }
448
-
449
- .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
450
- font-size: 22px;
451
- }
452
-
453
- .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
454
- width: 30px;
455
- height: 30px;
456
- opacity: 1;
457
- animation: clockwise 0.15s linear;
458
- overflow: hidden;
459
- position: absolute;
460
- }
461
-
462
- .animated {
463
- transition: opacity 250ms ease;
464
- opacity: 0;
465
- }
466
-
467
- .animated.mounting, .animated.mounted {
468
- opacity: 1;
469
- }
470
-
471
- .CircleProgress {
472
- width: 48px;
473
- height: 48px;
474
- }
475
-
476
- .CircleProgress .line {
477
- stroke-width: 2px;
478
- stroke: black;
479
- stroke-linecap: square;
480
- fill: none;
481
- transition: stroke-dashoffset 0.2s ease;
482
- }
483
-
484
- .Checkbox {
384
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
385
+ border-radius: 50%;
386
+ background: white;
485
387
  position: relative;
486
- white-space: pre;
487
- }
488
-
489
- .Checkbox *, .Checkbox *:before, .Checkbox *:after {
490
- box-sizing: border-box;
491
- }
492
-
493
- .Checkbox label {
494
- font-family: Roboto, sans-serif;
495
- font-size: 14px;
496
- color: #1e252d;
497
- cursor: pointer;
498
- }
499
-
500
- .Checkbox label:before, .Checkbox label:after {
501
- content: "";
502
- position: absolute;
503
- left: 0;
504
- top: 0;
505
- }
506
-
507
- .Checkbox label:before {
508
- width: 20px;
509
- height: 20px;
510
- background: #fff;
511
- border: 2px solid #252525;
512
- border-radius: 2px;
513
- cursor: pointer;
514
- transition: background 0.3s;
515
- }
516
-
517
- .Checkbox input[type=checkbox] {
518
- outline: 0;
519
- margin-right: 10px;
520
- visibility: hidden;
521
- }
522
-
523
- .Checkbox input[type=checkbox]:checked + label:before {
524
- background: #4AC263;
525
- border: none;
526
- }
527
-
528
- .Checkbox input[type=checkbox]:checked + label:after {
529
- transform: rotate(-45deg);
530
- top: 6px;
531
- left: 4px;
532
- width: 12px;
533
- height: 6px;
534
- border: 2px solid #fff;
535
- border-top-style: none;
536
- border-right-style: none;
537
- }
538
-
539
- .Checkbox input[type=checkbox]:disabled + label {
540
- color: gray;
541
- }
542
-
543
- .Checkbox input[type=checkbox]:disabled + label:before {
544
- border-color: rgba(0, 0, 0, 0.26);
545
- }
546
-
547
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
548
- background: rgba(0, 0, 0, 0.26);
549
- }
550
-
551
- .DialogModal {
552
- overflow: hidden;
553
- }
554
-
555
- .DialogModal .content {
556
- top: 20vh;
557
- }
558
-
559
- .Dialog {
560
- background-color: white;
561
- min-width: 460px;
562
- max-width: 40vw;
563
- padding: 15px;
564
388
  }
565
389
 
566
- .Dialog .title {
567
- margin-bottom: 15px;
568
- padding: 20px 50px 0px 30px;
569
- font-size: 1.25rem;
570
- line-height: 2rem;
571
- font-weight: 400;
572
- letter-spacing: 0.0125em;
390
+ .FormUploadProgress .wrapper > .progress > .value {
391
+ display: inline-block;
392
+ margin-top: 5px;
393
+ font-weight: bold;
394
+ line-height: 16px;
395
+ font-size: 13px;
396
+ text-align: center;
397
+ color: #818181;
573
398
  }
574
399
 
575
- .Dialog .description {
576
- color: rgba(0, 0, 0, 0.54);
577
- font-size: 1rem;
578
- line-height: 1.5rem;
579
- font-weight: 400;
580
- letter-spacing: 0.03125em;
400
+ .FormUploadProgress .wrapper .cancel {
401
+ min-width: 107px;
581
402
  margin-top: 20px;
582
- padding: 0 24px 24px;
583
- }
584
-
585
- .Dialog > div.row {
586
- margin-bottom: 15px;
587
- }
588
-
589
- .Dialog > div.row:last-child {
590
- margin-bottom: 0;
403
+ background-color: white;
404
+ color: #F96B5C;
405
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
591
406
  }
592
407
 
593
408
  .Dropzone {
@@ -650,205 +465,41 @@
650
465
  z-index: 1;
651
466
  }
652
467
 
653
- .FilteredList {
654
- max-height: 250px;
655
- position: relative;
468
+ .ModalMenu {
469
+ position: absolute;
470
+ top: 10px;
471
+ right: 50px;
656
472
  }
657
473
 
658
- .FilteredList.popup {
659
- padding: 0;
660
- visibility: hidden;
474
+ .ModalMenu .material-icons {
475
+ color: #818181;
476
+ }
477
+
478
+ .ModalMenu .Button.animated {
661
479
  position: absolute;
662
- background: white;
663
- z-index: 4;
664
- 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);
665
- transition: all 0.2s ease-out;
666
- top: calc(100% + 4px);
480
+ transition: opacity 150ms ease-in, right 200ms ease-in;
667
481
  opacity: 0;
668
- border-radius: 2px;
482
+ right: 0;
483
+ top: 0;
669
484
  }
670
485
 
671
- .FilteredList.popup.visible {
486
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
672
487
  opacity: 1;
673
- visibility: visible;
674
488
  }
675
489
 
676
- .FilteredList.inline {
677
- max-height: 225px;
678
- margin-top: 5px;
490
+ .ModalMenu .Button.animated.unmounting {
491
+ transition: opacity 100ms ease-out, right 200ms ease-out;
679
492
  }
680
493
 
681
- .FilteredList .child {
682
- display: flex;
683
- flex-flow: row nowrap;
684
- align-items: center;
685
- white-space: nowrap;
686
- font-size: 14px;
687
- color: #222222;
688
- height: 30px;
689
- padding: 5px 10px;
690
- padding-right: 15px;
691
- cursor: pointer;
692
- overflow: hidden;
693
- transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
694
- border-left: 5px solid #4AC263;
695
- padding-left: 15px;
696
- margin-left: -5px;
697
- }
698
-
699
- .FilteredList .child.hidden {
700
- height: 0 !important;
701
- padding: 0 !important;
702
- }
703
-
704
- .FilteredList .child.selected {
705
- background-color: #F0F0F0;
706
- padding-left: 10px;
707
- margin-left: 0px;
708
- }
709
-
710
- .FilteredList .child.active {
711
- background-color: #eeeeee;
712
- }
713
-
714
- .FilteredList .child {
715
- margin-top: 8px;
716
- }
717
-
718
- .FilteredList .child.hidden {
719
- margin-top: 0;
720
- }
721
-
722
- .FilteredList .child:not(.hidden) ~ .child {
723
- margin-top: 0;
724
- }
725
-
726
- .FilteredList .child:not(.hidden) ~ .child:last-child {
727
- margin-bottom: 8px;
728
- }
729
-
730
- .FilteredList .child:not(.hidden):last-child {
731
- margin-bottom: 8px;
732
- }
733
-
734
- .Button.FloatingActionButton {
735
- position: absolute;
736
- right: 16px;
737
- bottom: 16px;
738
- width: 56px;
739
- height: 56px;
740
- padding: 16px;
741
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
742
- }
743
-
744
- .Button.FloatingActionButton.raised {
745
- 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);
746
- }
747
-
748
- .Button.FloatingActionButton.mini {
749
- width: 40px;
750
- height: 40px;
751
- padding: 8px;
752
- }
753
-
754
- .Button.FloatingActionButton.hidden {
755
- bottom: -100px;
756
- }
757
-
758
- .DropFileInput {
759
- flex-grow: 1;
760
- }
761
-
762
- .DropFileInput .Dropzone {
763
- border: 1px dashed #808080;
764
- padding: 12px;
765
- display: flex;
766
- flex-flow: row nowrap;
767
- justify-content: center;
768
- align-items: center;
769
- color: gray;
770
- cursor: pointer;
771
- border-radius: 3px;
772
- font-weight: normal;
773
- line-height: 22px;
774
- font-size: 14px;
775
- color: #7E7E7E;
776
- max-width: 100%;
777
- word-break: break-all;
778
- word-break: break-word;
779
- }
780
-
781
- .DropFileInput .Dropzone .icon.withText {
782
- margin-right: 10px;
783
- }
784
-
785
- .FormUploadProgress {
786
- position: absolute;
787
- left: 0;
788
- right: 0;
789
- top: 0;
790
- bottom: 0;
791
- background-color: rgba(255, 255, 255, 0.6);
792
- z-index: 2;
793
- }
794
-
795
- .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
796
- transition-delay: 500ms;
797
- }
798
-
799
- .FormUploadProgress .wrapper {
800
- position: sticky;
801
- top: 40%;
802
- margin-top: 40%;
803
- margin-left: 50%;
804
- transform: translateX(-50%);
805
- display: flex;
806
- flex-flow: column;
807
- justify-content: center;
808
- align-items: center;
809
- }
810
-
811
- .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
812
- position: absolute;
813
- width: 107px;
814
- height: 107px;
815
- top: 0;
816
- left: 0;
817
- }
818
-
819
- .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
820
- stroke: #2196F3;
821
- }
822
-
823
- .FormUploadProgress .wrapper > .progress {
824
- width: 107px;
825
- height: 107px;
826
- min-height: 107px;
827
- display: flex;
828
- justify-content: center;
829
- align-items: center;
830
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
831
- border-radius: 50%;
832
- background: white;
833
- position: relative;
834
- }
835
-
836
- .FormUploadProgress .wrapper > .progress > .value {
837
- display: inline-block;
838
- margin-top: 5px;
839
- font-weight: bold;
840
- line-height: 16px;
841
- font-size: 13px;
842
- text-align: center;
843
- color: #818181;
494
+ .ModalMenu .Button.active {
495
+ background: #EBEBEB;
844
496
  }
845
497
 
846
- .FormUploadProgress .wrapper .cancel {
847
- min-width: 107px;
848
- margin-top: 20px;
849
- background-color: white;
850
- color: #F96B5C;
851
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
498
+ .ModalMenu .separator {
499
+ height: 24px;
500
+ width: 1px;
501
+ background-color: #D9D9D9;
502
+ margin-left: 4px;
852
503
  }
853
504
 
854
505
  .Scrollable {
@@ -946,36 +597,76 @@
946
597
  will-change: left;
947
598
  }
948
599
 
949
- .DNDContainer {
950
- position: relative;
600
+ .DropFileInput {
601
+ flex-grow: 1;
951
602
  }
952
603
 
953
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
604
+ .DropFileInput .Dropzone {
605
+ border: 1px dashed #808080;
606
+ padding: 12px;
607
+ display: flex;
608
+ flex-flow: row nowrap;
609
+ justify-content: center;
610
+ align-items: center;
611
+ color: gray;
954
612
  cursor: pointer;
613
+ border-radius: 3px;
614
+ font-weight: normal;
615
+ line-height: 22px;
616
+ font-size: 14px;
617
+ color: #7E7E7E;
618
+ max-width: 100%;
619
+ word-break: break-all;
620
+ word-break: break-word;
955
621
  }
956
622
 
957
- .DNDContainer .Draggable.placeholder {
958
- opacity: 0.2;
623
+ .DropFileInput .Dropzone .icon.withText {
624
+ margin-right: 10px;
959
625
  }
960
626
 
961
- .DNDContainer .Draggable.copy {
962
- position: absolute;
963
- box-sizing: border-box;
964
- will-change: transform;
627
+ .Snackbar {
628
+ transform: translateX(-50%);
629
+ overflow: hidden;
630
+ background-color: #323232;
631
+ padding: 14px 24px 14px 24px;
632
+ color: #fff;
633
+ min-width: 288px;
634
+ max-width: 568px;
635
+ position: fixed;
636
+ bottom: -50px;
637
+ left: 50%;
638
+ display: flex;
639
+ flex-wrap: nowrap;
640
+ align-items: center;
965
641
  opacity: 0;
642
+ transition: bottom 0.25s ease, opacity 0.2s ease;
643
+ border-radius: 4px;
644
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
966
645
  }
967
646
 
968
- .DNDContainer .Draggable.dragged {
969
- z-index: 10;
647
+ .Snackbar.shown {
648
+ bottom: 15px;
649
+ opacity: 1;
970
650
  }
971
651
 
972
- .DNDContainer .overlay {
973
- position: absolute;
974
- top: 0;
975
- left: 0;
976
- right: 0;
977
- bottom: 0;
978
- pointer-events: none;
652
+ .Snackbar .message {
653
+ overflow: hidden;
654
+ line-height: 1.2em;
655
+ min-height: 1.2em;
656
+ max-height: 2.4em;
657
+ flex: 1;
658
+ }
659
+
660
+ .Snackbar .action {
661
+ text-transform: uppercase;
662
+ font-weight: bold;
663
+ margin-left: 48px;
664
+ color: #bf3727;
665
+ }
666
+
667
+ .Snackbar .action a {
668
+ text-decoration: none;
669
+ color: #bf3727;
979
670
  }
980
671
 
981
672
  .Modal {
@@ -990,144 +681,310 @@
990
681
  transition-delay: 0.2s;
991
682
  }
992
683
 
993
- .Modal.show {
994
- transition-delay: 0s;
995
- bottom: 0;
684
+ .Modal.show {
685
+ transition-delay: 0s;
686
+ bottom: 0;
687
+ }
688
+
689
+ .Modal > .overlay {
690
+ position: fixed;
691
+ top: 0;
692
+ bottom: 100%;
693
+ left: 0;
694
+ right: 0;
695
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
696
+ opacity: 0;
697
+ background-color: black;
698
+ pointer-events: none;
699
+ }
700
+
701
+ .Modal > .overlay.show {
702
+ opacity: 0.5;
703
+ bottom: 0;
704
+ }
705
+
706
+ .Modal > .content {
707
+ left: 50%;
708
+ top: 10vh;
709
+ margin-bottom: 10vh;
710
+ font-size: 16px;
711
+ padding: 0;
712
+ opacity: 0;
713
+ transition: opacity 0.25s ease, transform 0.25s ease;
714
+ transform: scaleY(0) translateY(-200px) translateX(-50%);
715
+ transform-origin: top;
716
+ position: absolute;
717
+ border-radius: 2px;
718
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
719
+ }
720
+
721
+ .Modal > .content.show {
722
+ opacity: 1;
723
+ transform: scaleY(1) translateY(0px) translateX(-50%);
724
+ }
725
+
726
+ .Modal > .content > .Scrollable {
727
+ overflow: visible;
728
+ max-height: 80vh;
729
+ }
730
+
731
+ .Modal > .content > .Scrollable > .viewport {
732
+ min-width: 10px;
733
+ min-height: 10px;
734
+ }
735
+
736
+ .Modal > .content > .Button.close {
737
+ top: 10px;
738
+ right: 10px;
739
+ position: absolute;
740
+ }
741
+
742
+ .Switch {
743
+ display: inline-flex;
744
+ padding-top: 5px;
745
+ }
746
+
747
+ .Switch .switch-input {
748
+ display: none;
749
+ }
750
+
751
+ .Switch .switch-label {
752
+ position: relative;
753
+ display: inline-flex;
754
+ align-items: center;
755
+ min-width: 38px;
756
+ height: 24px;
757
+ cursor: pointer;
758
+ font-weight: 500;
759
+ text-align: left;
760
+ user-select: none;
761
+ margin: 0;
762
+ padding: 0;
763
+ padding-left: 44px;
764
+ box-sizing: border-box;
765
+ }
766
+
767
+ .Switch .switch-label:before, .Switch .switch-label:after {
768
+ content: "";
769
+ box-sizing: border-box;
770
+ position: absolute;
771
+ margin: 0;
772
+ outline: 0;
773
+ top: 50%;
774
+ transform: translate(0, -50%);
775
+ transition: all 0.3s ease;
776
+ }
777
+
778
+ .Switch .switch-label:before {
779
+ left: 1px;
780
+ width: 34px;
781
+ height: 14px;
782
+ background-color: #9E9E9E;
783
+ border-radius: 8px;
784
+ }
785
+
786
+ .Switch .switch-label:after {
787
+ left: 0;
788
+ width: 20px;
789
+ height: 20px;
790
+ background-color: #FAFAFA;
791
+ border-radius: 50%;
792
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
793
+ }
794
+
795
+ .Switch .switch-label .toggle--on {
796
+ display: none;
797
+ }
798
+
799
+ .Switch .switch-label .toggle--off {
800
+ display: inline-block;
801
+ }
802
+
803
+ .Switch .switch-label .label {
804
+ margin-right: 5px;
805
+ }
806
+
807
+ .Switch .switch-input:checked + .switch-label:before {
808
+ background-color: #A5D6A7;
809
+ }
810
+
811
+ .Switch .switch-input:checked + .switch-label:after {
812
+ background-color: #4CAF50;
813
+ transform: translate(80%, -50%);
814
+ }
815
+
816
+ .Switch .switch-input:checked + .switch-label .toggle--on {
817
+ display: inline-block;
818
+ }
819
+
820
+ .Switch .switch-input:checked + .switch-label .toggle--off {
821
+ display: none;
822
+ }
823
+
824
+ .Button {
825
+ position: relative;
826
+ min-width: 64px;
827
+ min-height: 36px;
828
+ height: 24px;
829
+ margin: 0px;
830
+ padding: 0px 16px;
831
+ border: none;
832
+ outline: none;
833
+ font-size: 14px;
834
+ font-weight: 500;
835
+ letter-spacing: 1.25px;
836
+ background: #dfdfdf;
837
+ text-transform: uppercase;
838
+ font-family: Roboto, sans-serif;
839
+ -webkit-tap-highlight-color: transparent;
840
+ display: inline-flex;
841
+ justify-content: center;
842
+ align-items: center;
843
+ cursor: pointer;
844
+ overflow: hidden;
845
+ user-select: none;
846
+ border-radius: 3px;
847
+ transition: all 0.2s ease;
848
+ }
849
+
850
+ .Button.flat {
851
+ background-color: transparent;
852
+ }
853
+
854
+ .Button.flat:hover {
855
+ background-color: rgba(0, 0, 0, 0.05);
856
+ }
857
+
858
+ .Button.green {
859
+ background-color: #43a047;
860
+ color: white;
861
+ }
862
+
863
+ .Button.green:hover {
864
+ background-color: #3b8e3f;
865
+ }
866
+
867
+ .Button.blue {
868
+ background-color: #039be5;
869
+ color: white;
870
+ }
871
+
872
+ .Button.blue:hover {
873
+ background-color: #038acc;
874
+ }
875
+
876
+ .Button.red {
877
+ background-color: #e53935;
878
+ color: white;
996
879
  }
997
880
 
998
- .Modal > .overlay {
999
- position: fixed;
1000
- top: 0;
1001
- bottom: 100%;
1002
- left: 0;
1003
- right: 0;
1004
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1005
- opacity: 0;
1006
- background-color: black;
1007
- pointer-events: none;
881
+ .Button.red:hover {
882
+ background-color: #e2231e;
1008
883
  }
1009
884
 
1010
- .Modal > .overlay.show {
1011
- opacity: 0.5;
1012
- bottom: 0;
885
+ .Button.black {
886
+ background-color: #1e252d;
887
+ color: white;
1013
888
  }
1014
889
 
1015
- .Modal > .content {
1016
- left: 50%;
1017
- top: 10vh;
1018
- margin-bottom: 10vh;
1019
- font-size: 16px;
1020
- padding: 0;
1021
- opacity: 0;
1022
- transition: opacity 0.25s ease, transform 0.25s ease;
1023
- transform: scaleY(0) translateY(-200px) translateX(-50%);
1024
- transform-origin: top;
1025
- position: absolute;
1026
- border-radius: 2px;
1027
- box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
890
+ .Button.black:hover {
891
+ background-color: #14181e;
1028
892
  }
1029
893
 
1030
- .Modal > .content.show {
1031
- opacity: 1;
1032
- transform: scaleY(1) translateY(0px) translateX(-50%);
894
+ .Button.gray {
895
+ background: #D9D9D9;
896
+ color: #999999;
1033
897
  }
1034
898
 
1035
- .Modal > .content > .Scrollable {
1036
- overflow: visible;
1037
- max-height: 80vh;
899
+ .Button.gray:hover {
900
+ background-color: #cccccc;
1038
901
  }
1039
902
 
1040
- .Modal > .content > .Scrollable > .viewport {
1041
- min-width: 10px;
1042
- min-height: 10px;
903
+ .Button.small {
904
+ padding: 0px 8px;
905
+ min-height: 16px;
906
+ min-width: 16px;
1043
907
  }
1044
908
 
1045
- .Modal > .content > .Button.close {
1046
- top: 10px;
1047
- right: 10px;
1048
- position: absolute;
909
+ .Button > .material-icons {
910
+ margin-right: 10px;
1049
911
  }
1050
912
 
1051
- .ModalMenu {
1052
- position: absolute;
1053
- top: 10px;
1054
- right: 50px;
913
+ .Button.round {
914
+ padding: 0px;
915
+ min-width: 36px;
916
+ border-radius: 50%;
1055
917
  }
1056
918
 
1057
- .ModalMenu .material-icons {
1058
- color: #818181;
919
+ .Button.round > .material-icons {
920
+ margin: 0px;
1059
921
  }
1060
922
 
1061
- .ModalMenu .Button.animated {
923
+ .Button .ripple {
1062
924
  position: absolute;
1063
- transition: opacity 150ms ease-in, right 200ms ease-in;
1064
- opacity: 0;
1065
- right: 0;
1066
- top: 0;
925
+ background: rgba(0, 0, 0, 0.1);
926
+ border-radius: 100%;
927
+ transform: scale(0);
928
+ pointer-events: none;
929
+ transition: opacity 0.2s ease-out;
1067
930
  }
1068
931
 
1069
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
932
+ .Button .ripple.show {
933
+ animation: ripple 0.35s ease-out;
934
+ }
935
+
936
+ .Button:active .ripple.showed {
1070
937
  opacity: 1;
1071
938
  }
1072
939
 
1073
- .ModalMenu .Button.animated.unmounting {
1074
- transition: opacity 100ms ease-out, right 200ms ease-out;
940
+ .Button:focus .ripple.focused {
941
+ opacity: 1;
942
+ transition: opacity 0.2s ease-out, transform 0.2s ease-out;
943
+ transform: scale(1);
944
+ animation: resize 1.25s ease-out infinite;
945
+ animation-delay: 0.2s;
946
+ animation-direction: alternate;
1075
947
  }
1076
948
 
1077
- .ModalMenu .Button.active {
1078
- background: #EBEBEB;
949
+ .Button .ripple.showed {
950
+ transform: scale(2);
951
+ opacity: 0;
1079
952
  }
1080
953
 
1081
- .ModalMenu .separator {
1082
- height: 24px;
1083
- width: 1px;
1084
- background-color: #D9D9D9;
1085
- margin-left: 4px;
954
+ @keyframes ripple {
955
+ to {
956
+ transform: scale(2);
957
+ }
958
+ }
959
+ @keyframes resize {
960
+ to {
961
+ transform: scale(0.9);
962
+ }
963
+ }
964
+ .Button.raised {
965
+ transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
1086
966
  }
1087
967
 
1088
- .Snackbar {
1089
- transform: translateX(-50%);
1090
- overflow: hidden;
1091
- background-color: #323232;
1092
- padding: 14px 24px 14px 24px;
1093
- color: #fff;
1094
- min-width: 288px;
1095
- max-width: 568px;
1096
- position: fixed;
1097
- bottom: -50px;
1098
- left: 50%;
1099
- display: flex;
1100
- flex-wrap: nowrap;
1101
- align-items: center;
1102
- opacity: 0;
1103
- transition: bottom 0.25s ease, opacity 0.2s ease;
1104
- border-radius: 4px;
1105
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
968
+ .Button.raised:hover {
969
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
1106
970
  }
1107
971
 
1108
- .Snackbar.shown {
1109
- bottom: 15px;
1110
- opacity: 1;
972
+ .Button.raised:active {
973
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
1111
974
  }
1112
975
 
1113
- .Snackbar .message {
1114
- overflow: hidden;
1115
- line-height: 1.2em;
1116
- min-height: 1.2em;
1117
- max-height: 2.4em;
1118
- flex: 1;
976
+ .Button.disabled {
977
+ box-shadow: none;
978
+ background: #D9D9D9;
979
+ color: #999999;
1119
980
  }
1120
981
 
1121
- .Snackbar .action {
1122
- text-transform: uppercase;
1123
- font-weight: bold;
1124
- margin-left: 48px;
1125
- color: #bf3727;
982
+ .Button.disabled:hover {
983
+ background-color: #cccccc;
1126
984
  }
1127
985
 
1128
- .Snackbar .action a {
1129
- text-decoration: none;
1130
- color: #bf3727;
986
+ .Button::-moz-focus-inner {
987
+ border: 0;
1131
988
  }
1132
989
 
1133
990
  .TextField {
@@ -1273,86 +1130,46 @@
1273
1130
  animation-name: shake;
1274
1131
  }
1275
1132
 
1276
- .Switch {
1277
- display: inline-flex;
1278
- padding-top: 5px;
1279
- }
1280
-
1281
- .Switch .switch-input {
1282
- display: none;
1283
- }
1284
-
1285
- .Switch .switch-label {
1286
- position: relative;
1287
- display: inline-flex;
1288
- align-items: center;
1289
- min-width: 38px;
1290
- height: 24px;
1291
- cursor: pointer;
1292
- font-weight: 500;
1293
- text-align: left;
1294
- user-select: none;
1295
- margin: 0;
1296
- padding: 0;
1297
- padding-left: 44px;
1298
- box-sizing: border-box;
1299
- }
1300
-
1301
- .Switch .switch-label:before, .Switch .switch-label:after {
1302
- content: "";
1303
- box-sizing: border-box;
1133
+ .Button.FloatingActionButton {
1304
1134
  position: absolute;
1305
- margin: 0;
1306
- outline: 0;
1307
- top: 50%;
1308
- transform: translate(0, -50%);
1309
- transition: all 0.3s ease;
1310
- }
1311
-
1312
- .Switch .switch-label:before {
1313
- left: 1px;
1314
- width: 34px;
1315
- height: 14px;
1316
- background-color: #9E9E9E;
1317
- border-radius: 8px;
1318
- }
1319
-
1320
- .Switch .switch-label:after {
1321
- left: 0;
1322
- width: 20px;
1323
- height: 20px;
1324
- background-color: #FAFAFA;
1325
- border-radius: 50%;
1326
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
1135
+ right: 16px;
1136
+ bottom: 16px;
1137
+ width: 56px;
1138
+ height: 56px;
1139
+ padding: 16px;
1140
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1327
1141
  }
1328
1142
 
1329
- .Switch .switch-label .toggle--on {
1330
- display: none;
1143
+ .Button.FloatingActionButton.raised {
1144
+ 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);
1331
1145
  }
1332
1146
 
1333
- .Switch .switch-label .toggle--off {
1334
- display: inline-block;
1147
+ .Button.FloatingActionButton.mini {
1148
+ width: 40px;
1149
+ height: 40px;
1150
+ padding: 8px;
1335
1151
  }
1336
1152
 
1337
- .Switch .switch-label .label {
1338
- margin-right: 5px;
1153
+ .Button.FloatingActionButton.hidden {
1154
+ bottom: -100px;
1339
1155
  }
1340
1156
 
1341
- .Switch .switch-input:checked + .switch-label:before {
1342
- background-color: #A5D6A7;
1157
+ .DNDContainer .DroppableList .Draggable {
1158
+ transform: unset;
1159
+ transition: unset;
1160
+ opacity: 1;
1343
1161
  }
1344
1162
 
1345
- .Switch .switch-input:checked + .switch-label:after {
1346
- background-color: #4CAF50;
1347
- transform: translate(80%, -50%);
1163
+ .DNDContainer .DroppableList .Draggable.dragged {
1164
+ transition: unset !important;
1348
1165
  }
1349
-
1350
- .Switch .switch-input:checked + .switch-label .toggle--on {
1351
- display: inline-block;
1166
+
1167
+ .DNDContainer .DroppableList.hover .Draggable {
1168
+ transition: transform 0.2s ease-in;
1352
1169
  }
1353
1170
 
1354
- .Switch .switch-input:checked + .switch-label .toggle--off {
1355
- display: none;
1171
+ .DNDContainer .DroppableList.resetting .Draggable {
1172
+ transition: transform 0.1s ease-in;
1356
1173
  }
1357
1174
 
1358
1175
  .SpinningProgress {
@@ -1408,257 +1225,440 @@
1408
1225
  stroke-dashoffset: -53px;
1409
1226
  }
1410
1227
  }
1411
- .DNDContainer .DroppableList .Draggable {
1412
- transform: unset;
1413
- transition: unset;
1414
- opacity: 1;
1228
+ .AutocompleteSelect {
1229
+ display: inline-flex;
1230
+ flex-flow: column;
1231
+ justify-content: center;
1232
+ position: relative;
1233
+ min-width: 250px;
1234
+ min-height: 36px;
1235
+ user-select: none;
1415
1236
  }
1416
1237
 
1417
- .DNDContainer .DroppableList .Draggable.dragged {
1418
- transition: unset !important;
1238
+ @keyframes clockwise {
1239
+ 0% {
1240
+ -webkit-transform: rotate(-90deg);
1241
+ }
1242
+ 100% {
1243
+ -webkit-transform: translateX(0px);
1244
+ }
1245
+ }
1246
+ @keyframes anticlockwise {
1247
+ 0% {
1248
+ -webkit-transform: rotate(90deg);
1249
+ }
1250
+ 100% {
1251
+ -webkit-transform: translateX(0px);
1252
+ }
1253
+ }
1254
+ .AutocompleteSelect > .input {
1255
+ width: 100%;
1419
1256
  }
1420
1257
 
1421
- .DNDContainer .DroppableList.hover .Draggable {
1422
- transition: transform 0.2s ease-in;
1258
+ .AutocompleteSelect .Scrollable {
1259
+ padding-right: 0;
1260
+ min-width: 100%;
1423
1261
  }
1424
1262
 
1425
- .DNDContainer .DroppableList.resetting .Draggable {
1426
- transition: transform 0.1s ease-in;
1263
+ .AutocompleteSelect.inline-multiple > .label {
1264
+ top: -12px;
1427
1265
  }
1428
1266
 
1429
- .ImageGallery {
1430
- position: fixed;
1267
+ .AutocompleteSelect.inline-multiple > .selected {
1268
+ flex-flow: row wrap;
1269
+ }
1270
+
1271
+ .AutocompleteSelect.multiple-mini-inline {
1272
+ height: 42px;
1273
+ }
1274
+
1275
+ .AutocompleteSelect.multiple-mini-inline > .label {
1276
+ cursor: pointer;
1277
+ width: 100%;
1278
+ margin-left: -10px;
1279
+ padding: 10px;
1280
+ box-sizing: border-box;
1431
1281
  top: 0;
1432
- left: 0;
1433
- bottom: 0;
1434
- right: 0;
1435
- z-index: 1000;
1436
- background-color: rgba(0, 0, 0, 0.01);
1282
+ }
1283
+
1284
+ .AutocompleteSelect.multiple-mini-inline > .label.active {
1285
+ padding: 0 10px;
1286
+ }
1287
+
1288
+ .AutocompleteSelect.multiple-mini-inline > .selected {
1289
+ width: 250px;
1290
+ }
1291
+
1292
+ .AutocompleteSelect.multiple-mini-inline > .input {
1293
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1294
+ position: absolute;
1295
+ top: 38px;
1296
+ z-index: 2;
1297
+ background-color: white;
1298
+ min-width: 130%;
1299
+ }
1300
+
1301
+ .AutocompleteSelect.multiple-mini-inline > .input .TextField {
1302
+ padding-left: 10px;
1303
+ padding-right: 10px;
1304
+ width: 100%;
1305
+ box-sizing: border-box;
1306
+ }
1307
+
1308
+ .AutocompleteSelect.multiple-mini-inline > .input.hidden {
1309
+ opacity: 0;
1310
+ visibility: hidden;
1311
+ }
1312
+
1313
+ .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
1314
+ margin-top: 0;
1315
+ }
1316
+
1317
+ .AutocompleteSelect .TextField {
1318
+ margin-top: 8px;
1319
+ }
1320
+
1321
+ .AutocompleteSelect .TextField input {
1322
+ font-size: 14px;
1323
+ }
1324
+
1325
+ .AutocompleteSelect > .label {
1326
+ position: absolute;
1327
+ transition: all 0.2s ease;
1328
+ font-family: Roboto, sans-serif;
1329
+ font-size: 14px;
1330
+ color: rgba(0, 0, 0, 0.5);
1331
+ z-index: 1;
1332
+ cursor: text;
1437
1333
  user-select: none;
1334
+ left: 4px;
1335
+ top: 12px;
1438
1336
  }
1439
1337
 
1440
- .ImageGallery:focus {
1441
- outline-width: 0px;
1338
+ .AutocompleteSelect > .label.active {
1339
+ font-size: 10px;
1340
+ top: 2px;
1442
1341
  }
1443
1342
 
1444
- .ImageGallery.animated {
1445
- transition: background-color 0.25s ease;
1446
- opacity: 1;
1343
+ .AutocompleteSelect > .label.active .arrow {
1344
+ border-width: 4px 4px 0 4px;
1345
+ margin-bottom: 1px;
1447
1346
  }
1448
1347
 
1449
- .ImageGallery.mounting, .ImageGallery.mounted {
1450
- background-color: rgba(0, 0, 0, 0.8);
1348
+ .AutocompleteSelect > .label .arrow {
1349
+ width: 0;
1350
+ height: 0;
1351
+ border-style: solid;
1352
+ border-width: 5px 5px 0 5px;
1353
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
1354
+ display: inline-block;
1355
+ margin-left: 5px;
1356
+ margin-bottom: 2px;
1357
+ transition: all 0.2s ease;
1451
1358
  }
1452
1359
 
1453
- .ImageGallery .image {
1360
+ .AutocompleteSelect > .selected {
1361
+ margin-top: 8px;
1362
+ display: flex;
1363
+ cursor: pointer;
1364
+ }
1365
+
1366
+ .AutocompleteSelect > .selected > .reset {
1367
+ min-width: 36px;
1368
+ max-width: 36px;
1454
1369
  position: absolute;
1455
- cursor: grab;
1370
+ right: 0;
1371
+ top: 0;
1372
+ background-color: white;
1456
1373
  }
1457
1374
 
1458
- .ImageGallery .image .counter {
1459
- display: none;
1375
+ .AutocompleteSelect > .selected > .reset .material-icons {
1376
+ margin: 0;
1377
+ color: #BFBFBF;
1378
+ font-size: 20px;
1460
1379
  }
1461
1380
 
1462
- .ImageGallery .image img {
1463
- border-radius: 4px;
1464
- max-width: 100%;
1465
- min-width: 100%;
1381
+ .AutocompleteSelect > .selected.nolabel {
1382
+ margin-top: 0px;
1383
+ border-bottom: 1px solid #e5e3e3;
1466
1384
  }
1467
1385
 
1468
- .ImageGallery .image.animated {
1469
- transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
1470
- will-change: top, left, width, height, opacity;
1386
+ .AutocompleteSelect > .selected.nolabel .DummyChild {
1387
+ display: inline-flex;
1388
+ align-items: center;
1389
+ flex-grow: 1;
1390
+ font-size: 16px;
1391
+ margin: 0px 10px;
1392
+ margin-bottom: 5px;
1393
+ height: 19px;
1471
1394
  }
1472
1395
 
1473
- .ImageGallery .image.animated.mounting, .ImageGallery .image.animated.mounted, .ImageGallery .image.animated.unmounting {
1474
- opacity: 1;
1396
+ .AutocompleteSelect > .selected.nolabel .arrow {
1397
+ width: 0;
1398
+ height: 0;
1399
+ border-style: solid;
1400
+ border-width: 5px 5px 0 5px;
1401
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
1402
+ display: inline-block;
1403
+ transition: all 0.2s ease;
1404
+ margin: 0px 17px 3px 5px;
1405
+ }
1406
+
1407
+ .AutocompleteSelect > .selected.inline {
1408
+ font-size: 14px;
1409
+ font-family: Roboto, sans-serif;
1410
+ color: #1e252d;
1411
+ text-overflow: ellipsis;
1412
+ white-space: nowrap;
1413
+ overflow: hidden;
1414
+ display: flex;
1415
+ align-items: center;
1416
+ }
1417
+
1418
+ .AutocompleteSelect > .selected.clickable {
1419
+ overflow: hidden;
1420
+ cursor: pointer;
1421
+ padding: 10px;
1422
+ margin-left: -10px;
1423
+ margin-right: -10px;
1424
+ }
1425
+
1426
+ .AutocompleteSelect.inlineSelected {
1427
+ flex-flow: row wrap;
1428
+ justify-content: flex-start;
1429
+ }
1430
+
1431
+ .AutocompleteSelect.inlineSelected.hasSelected {
1432
+ padding-top: 7px;
1433
+ }
1434
+
1435
+ .AutocompleteSelect.inlineSelected > .label {
1436
+ width: 100%;
1437
+ height: 100%;
1438
+ }
1439
+
1440
+ .AutocompleteSelect.inlineSelected > .label.active {
1441
+ z-index: 0;
1442
+ }
1443
+
1444
+ .AutocompleteSelect.inlineSelected .input {
1445
+ width: unset;
1446
+ flex-basis: 50px;
1447
+ flex-grow: 1;
1448
+ }
1449
+
1450
+ .AutocompleteSelect.inlineSelected .input::after {
1451
+ content: attr(data-value);
1452
+ visibility: hidden;
1453
+ white-space: pre;
1454
+ font: inherit;
1455
+ min-width: 2px;
1456
+ border: 0;
1457
+ margin: 0;
1458
+ outline: 0;
1459
+ float: left;
1460
+ display: inline-block;
1461
+ margin-top: -24px;
1462
+ font-size: 14px;
1463
+ padding: 2px;
1464
+ }
1465
+
1466
+ .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
1467
+ margin-top: 7px;
1475
1468
  }
1476
1469
 
1477
- .ImageGallery .image.zoomed {
1478
- text-align: center;
1479
- overflow: hidden;
1470
+ .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
1471
+ cursor: pointer;
1472
+ margin: 5px 10px 5px 0px;
1473
+ display: inline-flex;
1474
+ flex-flow: row wrap;
1475
+ height: 30px;
1476
+ align-items: center;
1477
+ background-color: #f0f0f0;
1478
+ border-radius: 30px;
1479
+ position: relative;
1480
+ font-family: Roboto, sans-serif;
1481
+ font-size: 14px;
1482
+ color: #1e252d;
1480
1483
  }
1481
1484
 
1482
- .ImageGallery .image.dragging {
1483
- transition: none;
1484
- cursor: move;
1485
+ .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
1486
+ padding-left: 35px;
1487
+ padding-right: 10px;
1485
1488
  }
1486
1489
 
1487
- .ImageGallery .image .close {
1490
+ .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
1491
+ cursor: pointer;
1492
+ min-width: 30px;
1493
+ width: 30px;
1494
+ height: 30px;
1495
+ opacity: 0;
1488
1496
  position: absolute;
1489
- top: -18px;
1490
- right: -18px;
1497
+ top: 0px;
1498
+ left: 0px;
1499
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1500
+ background-color: deepskyblue;
1501
+ color: white;
1502
+ border-radius: 30px;
1503
+ display: flex;
1504
+ flex-flow: row;
1505
+ justify-content: center;
1506
+ align-items: center;
1507
+ animation: anticlockwise 0.15s linear;
1491
1508
  }
1492
1509
 
1493
- .ImageGallery .image .spinner {
1494
- position: absolute;
1495
- top: 0;
1496
- bottom: 0;
1497
- left: 0;
1498
- right: 0;
1499
- background: rgba(0, 0, 0, 0.65);
1510
+ .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
1511
+ font-size: 22px;
1500
1512
  }
1501
1513
 
1502
- .ImageGallery .image .spinner .SpinningProgress {
1514
+ .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
1515
+ width: 30px;
1516
+ height: 30px;
1517
+ opacity: 1;
1518
+ animation: clockwise 0.15s linear;
1519
+ overflow: hidden;
1503
1520
  position: absolute;
1504
- top: 50%;
1505
- left: 50%;
1506
- margin-left: -24px;
1507
- margin-top: -24px;
1508
1521
  }
1509
1522
 
1510
- .ImageGallery .image .spinner .SpinningProgress .line {
1511
- stroke: #2196F3;
1523
+ .Checkbox {
1524
+ position: relative;
1525
+ white-space: pre;
1512
1526
  }
1513
1527
 
1514
- .ImageGallery .Button.animated {
1515
- transition: all 0.25s ease;
1516
- opacity: 0;
1517
- transform: scale(0);
1528
+ .Checkbox *, .Checkbox *:before, .Checkbox *:after {
1529
+ box-sizing: border-box;
1518
1530
  }
1519
1531
 
1520
- .ImageGallery .Button.animated.mounted, .ImageGallery .Button.animated.mounting {
1521
- opacity: 1;
1522
- transform: scale(1);
1532
+ .Checkbox label {
1533
+ font-family: Roboto, sans-serif;
1534
+ font-size: 14px;
1535
+ color: #1e252d;
1536
+ cursor: pointer;
1523
1537
  }
1524
1538
 
1525
- .ImageGallery .Button {
1526
- color: white;
1527
- background: rgba(0, 0, 0, 0.4);
1539
+ .Checkbox label:before, .Checkbox label:after {
1540
+ content: "";
1541
+ position: absolute;
1542
+ left: 0;
1543
+ top: 0;
1528
1544
  }
1529
1545
 
1530
- .ImageGallery .Button:hover {
1531
- background: rgba(0, 0, 0, 0.7);
1546
+ .Checkbox label:before {
1547
+ width: 20px;
1548
+ height: 20px;
1549
+ background: #fff;
1550
+ border: 2px solid #252525;
1551
+ border-radius: 2px;
1552
+ cursor: pointer;
1553
+ transition: background 0.3s;
1532
1554
  }
1533
1555
 
1534
- .ImageGallery > .arrow {
1535
- position: absolute;
1536
- top: 50%;
1537
- height: 76px;
1538
- width: 76px;
1539
- margin-top: -38px;
1556
+ .Checkbox input[type=checkbox] {
1557
+ outline: 0;
1558
+ margin-right: 10px;
1559
+ visibility: hidden;
1540
1560
  }
1541
1561
 
1542
- .ImageGallery > .arrow.left {
1543
- left: 5%;
1562
+ .Checkbox input[type=checkbox]:checked + label:before {
1563
+ background: #4AC263;
1564
+ border: none;
1544
1565
  }
1545
1566
 
1546
- .ImageGallery > .arrow.right {
1547
- right: 5%;
1567
+ .Checkbox input[type=checkbox]:checked + label:after {
1568
+ transform: rotate(-45deg);
1569
+ top: 6px;
1570
+ left: 4px;
1571
+ width: 12px;
1572
+ height: 6px;
1573
+ border: 2px solid #fff;
1574
+ border-top-style: none;
1575
+ border-right-style: none;
1548
1576
  }
1549
1577
 
1550
- .ImageGallery > .arrow .material-icons {
1551
- font-size: 40px;
1578
+ .Checkbox input[type=checkbox]:disabled + label {
1579
+ color: gray;
1552
1580
  }
1553
1581
 
1554
- .ImageGallery .counter {
1555
- position: absolute;
1556
- top: 10px;
1557
- left: 10px;
1558
- color: white;
1559
- font-size: 13px;
1582
+ .Checkbox input[type=checkbox]:disabled + label:before {
1583
+ border-color: rgba(0, 0, 0, 0.26);
1560
1584
  }
1561
1585
 
1562
- .ImageGallery .previews {
1563
- height: 80px;
1564
- position: absolute;
1565
- bottom: 15px;
1566
- left: 50%;
1567
- transform: translateX(-50%);
1568
- padding: 0 45px;
1586
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
1587
+ background: rgba(0, 0, 0, 0.26);
1569
1588
  }
1570
1589
 
1571
- .ImageGallery .previews .viewport {
1590
+ .DialogModal {
1572
1591
  overflow: hidden;
1573
- position: relative;
1574
- height: 100%;
1575
1592
  }
1576
1593
 
1577
- .ImageGallery .previews .container {
1578
- position: relative;
1579
- display: flex;
1580
- flex-flow: row nowrap;
1581
- height: 100%;
1582
- transition: left 0.25s ease;
1594
+ .DialogModal .content {
1595
+ top: 20vh;
1583
1596
  }
1584
1597
 
1585
- .ImageGallery .previews .preview {
1586
- position: relative;
1587
- height: 100%;
1588
- display: inline-block;
1589
- width: 106.66px;
1590
- overflow: hidden;
1591
- margin-left: 12px;
1592
- border-radius: 2px;
1593
- cursor: pointer;
1594
- box-sizing: border-box;
1598
+ .Dialog {
1599
+ background-color: white;
1600
+ min-width: 460px;
1601
+ max-width: 40vw;
1602
+ padding: 15px;
1595
1603
  }
1596
1604
 
1597
- .ImageGallery .previews .preview:first-child {
1598
- margin-left: 0;
1605
+ .Dialog .title {
1606
+ margin-bottom: 15px;
1607
+ padding: 20px 50px 0px 30px;
1608
+ font-size: 1.25rem;
1609
+ line-height: 2rem;
1610
+ font-weight: 400;
1611
+ letter-spacing: 0.0125em;
1599
1612
  }
1600
1613
 
1601
- .ImageGallery .previews .preview > .border {
1602
- position: absolute;
1603
- bottom: 0;
1604
- width: 100%;
1605
- height: 3px;
1614
+ .Dialog .description {
1615
+ color: rgba(0, 0, 0, 0.54);
1616
+ font-size: 1rem;
1617
+ line-height: 1.5rem;
1618
+ font-weight: 400;
1619
+ letter-spacing: 0.03125em;
1620
+ margin-top: 20px;
1621
+ padding: 0 24px 24px;
1606
1622
  }
1607
1623
 
1608
- .ImageGallery .previews .preview > .border .line {
1609
- left: 50%;
1610
- width: 0;
1611
- height: 3px;
1612
- min-height: 3px;
1613
- background-color: #4AC263;
1614
- transition: all 0.2s ease;
1615
- position: absolute;
1624
+ .Dialog > div.row {
1625
+ margin-bottom: 15px;
1616
1626
  }
1617
1627
 
1618
- .ImageGallery .previews .preview:after {
1619
- content: "";
1620
- position: absolute;
1621
- top: 0;
1622
- right: 0;
1623
- bottom: 0;
1624
- left: 0;
1625
- background: rgba(0, 0, 0, 0.35);
1626
- transition: background 0.2s ease;
1628
+ .Dialog > div.row:last-child {
1629
+ margin-bottom: 0;
1627
1630
  }
1628
1631
 
1629
- .ImageGallery .previews .preview:hover:after {
1630
- background: rgba(0, 0, 0, 0.1);
1632
+ .DNDContainer {
1633
+ position: relative;
1631
1634
  }
1632
1635
 
1633
- .ImageGallery .previews .preview.selected .border .line {
1634
- left: 0;
1635
- width: 100%;
1636
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
1637
+ cursor: pointer;
1636
1638
  }
1637
1639
 
1638
- .ImageGallery .previews .preview.selected:after {
1639
- background: rgba(0, 0, 0, 0);
1640
+ .DNDContainer .Draggable.placeholder {
1641
+ opacity: 0.2;
1640
1642
  }
1641
1643
 
1642
- .ImageGallery .previews > .arrow {
1644
+ .DNDContainer .Draggable.copy {
1643
1645
  position: absolute;
1644
- top: 50%;
1645
- height: 30px;
1646
- width: 30px;
1647
- min-width: 30px;
1648
- min-height: 30px;
1649
- margin-top: -15px;
1646
+ box-sizing: border-box;
1647
+ will-change: transform;
1648
+ opacity: 0;
1650
1649
  }
1651
1650
 
1652
- .ImageGallery .previews > .arrow.left {
1653
- left: 0;
1651
+ .DNDContainer .Draggable.dragged {
1652
+ z-index: 10;
1654
1653
  }
1655
1654
 
1656
- .ImageGallery .previews > .arrow.right {
1655
+ .DNDContainer .overlay {
1656
+ position: absolute;
1657
+ top: 0;
1658
+ left: 0;
1657
1659
  right: 0;
1658
- }
1659
-
1660
- .ImageGallery .previews > .arrow .material-icons {
1661
- font-size: 24px;
1660
+ bottom: 0;
1661
+ pointer-events: none;
1662
1662
  }
1663
1663
 
1664
1664
  .CalendarMonthView {