react-ui-basics 0.0.177 → 0.0.178

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