react-ui-basics 0.0.145 → 0.0.146

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