react-ui-basics 0.0.126 → 0.0.130

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,317 +1,228 @@
1
- .animated {
2
- transition: opacity 250ms ease;
3
- opacity: 0;
4
- }
5
-
6
- .animated.mounting, .animated.mounted {
7
- opacity: 1;
8
- }
9
-
10
- .AutocompleteSelect {
11
- display: inline-flex;
12
- flex-flow: column;
13
- justify-content: center;
1
+ .Button {
14
2
  position: relative;
15
- min-width: 250px;
3
+ min-width: 64px;
16
4
  min-height: 36px;
5
+ height: 24px;
6
+ margin: 0px;
7
+ padding: 0px 16px;
8
+ border: none;
9
+ outline: none;
10
+ font-size: 14px;
11
+ font-weight: 500;
12
+ letter-spacing: 1.25px;
13
+ background: #dfdfdf;
14
+ text-transform: uppercase;
15
+ font-family: Roboto, sans-serif;
16
+ display: inline-flex;
17
+ justify-content: center;
18
+ align-items: center;
19
+ cursor: pointer;
20
+ overflow: hidden;
17
21
  user-select: none;
22
+ border-radius: 3px;
23
+ transition: all 0.2s ease;
18
24
  }
19
25
 
20
- @keyframes clockwise {
21
- 0% {
22
- -webkit-transform: rotate(-90deg);
23
- }
24
- 100% {
25
- -webkit-transform: translateX(0px);
26
- }
26
+ .Button.flat {
27
+ background-color: transparent;
27
28
  }
28
- @keyframes anticlockwise {
29
- 0% {
30
- -webkit-transform: rotate(90deg);
31
- }
32
- 100% {
33
- -webkit-transform: translateX(0px);
34
- }
29
+
30
+ .Button.flat:hover {
31
+ background-color: rgba(0, 0, 0, 0.05);
35
32
  }
36
- .AutocompleteSelect > .input {
37
- width: 100%;
33
+
34
+ .Button.green {
35
+ background-color: #4AC263;
36
+ color: white;
38
37
  }
39
38
 
40
- .AutocompleteSelect .Scrollable {
41
- padding-right: 0;
42
- min-width: 100%;
39
+ .Button.green:hover {
40
+ background-color: #3db556;
43
41
  }
44
42
 
45
- .AutocompleteSelect.inline-multiple > .label {
46
- top: -12px;
43
+ .Button.blue {
44
+ background-color: #61a0b2;
45
+ color: white;
47
46
  }
48
47
 
49
- .AutocompleteSelect.inline-multiple > .selected {
50
- flex-flow: row wrap;
48
+ .Button.blue:hover {
49
+ background-color: #5295a8;
51
50
  }
52
51
 
53
- .AutocompleteSelect.multiple-mini-inline {
54
- height: 42px;
52
+ .Button.red {
53
+ background-color: #F44336;
54
+ color: white;
55
55
  }
56
56
 
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;
57
+ .Button.red:hover {
58
+ background-color: #f32c1e;
64
59
  }
65
60
 
66
- .AutocompleteSelect.multiple-mini-inline > .label.active {
67
- padding: 0 10px;
61
+ .Button.black {
62
+ background-color: #1e252d;
63
+ color: white;
68
64
  }
69
65
 
70
- .AutocompleteSelect.multiple-mini-inline > .selected {
71
- width: 250px;
66
+ .Button.black:hover {
67
+ background-color: #14181e;
72
68
  }
73
69
 
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%;
70
+ .Button.gray {
71
+ background: #D9D9D9;
72
+ color: #999999;
81
73
  }
82
74
 
83
- .AutocompleteSelect.multiple-mini-inline > .input .TextField {
84
- padding-left: 10px;
85
- padding-right: 10px;
86
- width: 100%;
87
- box-sizing: border-box;
75
+ .Button.gray:hover {
76
+ background-color: #cccccc;
88
77
  }
89
78
 
90
- .AutocompleteSelect.multiple-mini-inline > .input.hidden {
91
- opacity: 0;
92
- visibility: hidden;
79
+ .Button.small {
80
+ padding: 0px 8px;
81
+ min-height: 16px;
82
+ min-width: 16px;
93
83
  }
94
84
 
95
- .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
96
- margin-top: 0;
85
+ .Button > .material-icons {
86
+ margin-right: 10px;
97
87
  }
98
88
 
99
- .AutocompleteSelect .TextField {
100
- margin-top: 8px;
89
+ .Button.round {
90
+ padding: 0px;
91
+ min-width: 36px;
92
+ border-radius: 50%;
101
93
  }
102
94
 
103
- .AutocompleteSelect .TextField input {
104
- font-size: 14px;
95
+ .Button.round > .material-icons {
96
+ margin: 0px;
105
97
  }
106
98
 
107
- .AutocompleteSelect > .label {
99
+ .Button .ripple {
108
100
  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;
101
+ background: rgba(0, 0, 0, 0.1);
102
+ border-radius: 100%;
103
+ transform: scale(0);
104
+ pointer-events: none;
105
+ transition: opacity 0.2s ease-out;
118
106
  }
119
107
 
120
- .AutocompleteSelect > .label.active {
121
- font-size: 10px;
122
- top: 2px;
108
+ .Button .ripple.show {
109
+ animation: ripple 0.35s ease-out;
123
110
  }
124
111
 
125
- .AutocompleteSelect > .label.active .arrow {
126
- border-width: 4px 4px 0 4px;
127
- margin-bottom: 1px;
112
+ .Button:active .ripple.showed {
113
+ opacity: 1;
128
114
  }
129
115
 
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;
116
+ .Button .ripple.showed {
117
+ transform: scale(2);
118
+ opacity: 0;
140
119
  }
141
120
 
142
- .AutocompleteSelect > .selected {
143
- margin-top: 8px;
144
- display: flex;
145
- cursor: pointer;
121
+ @keyframes ripple {
122
+ to {
123
+ transform: scale(2);
124
+ }
146
125
  }
147
-
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;
126
+ .Button.raised {
127
+ transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
155
128
  }
156
129
 
157
- .AutocompleteSelect > .selected > .reset .material-icons {
158
- margin: 0;
159
- color: #BFBFBF;
160
- font-size: 20px;
130
+ .Button.raised:hover {
131
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
161
132
  }
162
133
 
163
- .AutocompleteSelect > .selected.nolabel {
164
- margin-top: 0px;
165
- border-bottom: 1px solid #e5e3e3;
134
+ .Button.raised:active {
135
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
166
136
  }
167
137
 
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;
138
+ .Button.disabled {
139
+ box-shadow: none;
140
+ background: #D9D9D9;
141
+ color: #999999;
176
142
  }
177
143
 
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;
144
+ .Button.disabled:hover {
145
+ background-color: #cccccc;
187
146
  }
188
147
 
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;
148
+ .Button::-moz-focus-inner {
149
+ border: 0;
198
150
  }
199
151
 
200
- .AutocompleteSelect > .selected.clickable {
201
- overflow: hidden;
202
- cursor: pointer;
203
- padding: 10px;
204
- margin-left: -10px;
205
- margin-right: -10px;
152
+ .animated {
153
+ transition: opacity 250ms ease;
154
+ opacity: 0;
206
155
  }
207
156
 
208
- .AutocompleteSelect.inlineSelected {
209
- flex-flow: row wrap;
210
- justify-content: flex-start;
157
+ .animated.mounting, .animated.mounted {
158
+ opacity: 1;
211
159
  }
212
160
 
213
- .AutocompleteSelect.inlineSelected.hasSelected {
214
- padding-top: 7px;
161
+ .Checkbox {
162
+ position: relative;
163
+ white-space: pre;
215
164
  }
216
165
 
217
- .AutocompleteSelect.inlineSelected > .label {
218
- width: 100%;
219
- height: 100%;
220
- }
221
-
222
- .AutocompleteSelect.inlineSelected > .label.active {
223
- z-index: 0;
224
- }
225
-
226
- .AutocompleteSelect.inlineSelected .input {
227
- width: unset;
228
- flex-basis: 50px;
229
- flex-grow: 1;
166
+ .Checkbox *, .Checkbox *:before, .Checkbox *:after {
167
+ box-sizing: border-box;
230
168
  }
231
169
 
232
- .AutocompleteSelect.inlineSelected .input::after {
233
- content: attr(data-value);
234
- white-space: pre;
235
- font: inherit;
236
- min-width: 2px;
237
- border: 0;
238
- margin: 0;
239
- outline: 0;
240
- float: left;
241
- display: inline-block;
242
- margin-top: -24px;
170
+ .Checkbox label {
171
+ font-family: Roboto, sans-serif;
243
172
  font-size: 14px;
244
- padding: 2px;
173
+ color: #1e252d;
174
+ cursor: pointer;
245
175
  }
246
176
 
247
- .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
248
- margin-top: 7px;
177
+ .Checkbox label:before, .Checkbox label:after {
178
+ content: "";
179
+ position: absolute;
180
+ left: 0;
181
+ top: 0;
249
182
  }
250
183
 
251
- .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
184
+ .Checkbox label:before {
185
+ width: 20px;
186
+ height: 20px;
187
+ background: #fff;
188
+ border: 2px solid #252525;
189
+ border-radius: 2px;
252
190
  cursor: pointer;
253
- margin: 5px 10px 5px 0px;
254
- display: inline-flex;
255
- flex-flow: row wrap;
256
- height: 30px;
257
- align-items: center;
258
- background-color: #f0f0f0;
259
- border-radius: 30px;
260
- position: relative;
261
- font-family: Roboto, sans-serif;
262
- font-size: 14px;
263
- color: #1e252d;
191
+ transition: background 0.3s;
264
192
  }
265
193
 
266
- .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
267
- padding-left: 35px;
268
- padding-right: 10px;
194
+ .Checkbox input[type=checkbox] {
195
+ outline: 0;
196
+ margin-right: 10px;
197
+ visibility: hidden;
269
198
  }
270
199
 
271
- .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
272
- cursor: pointer;
273
- min-width: 30px;
274
- width: 30px;
275
- height: 30px;
276
- opacity: 0;
277
- position: absolute;
278
- top: 0px;
279
- left: 0px;
280
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
281
- background-color: deepskyblue;
282
- color: white;
283
- border-radius: 30px;
284
- display: flex;
285
- flex-flow: row;
286
- justify-content: center;
287
- align-items: center;
288
- animation: anticlockwise 0.15s linear;
200
+ .Checkbox input[type=checkbox]:checked + label:before {
201
+ background: #4AC263;
202
+ border: none;
289
203
  }
290
204
 
291
- .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
292
- font-size: 22px;
205
+ .Checkbox input[type=checkbox]:checked + label:after {
206
+ transform: rotate(-45deg);
207
+ top: 6px;
208
+ left: 4px;
209
+ width: 12px;
210
+ height: 6px;
211
+ border: 2px solid #fff;
212
+ border-top-style: none;
213
+ border-right-style: none;
293
214
  }
294
215
 
295
- .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
296
- width: 30px;
297
- height: 30px;
298
- opacity: 1;
299
- animation: clockwise 0.15s linear;
300
- overflow: hidden;
301
- position: absolute;
216
+ .Checkbox input[type=checkbox]:disabled + label {
217
+ color: gray;
302
218
  }
303
219
 
304
- .CircleProgress {
305
- width: 48px;
306
- height: 48px;
220
+ .Checkbox input[type=checkbox]:disabled + label:before {
221
+ border-color: rgba(0, 0, 0, 0.26);
307
222
  }
308
223
 
309
- .CircleProgress .line {
310
- stroke-width: 2px;
311
- stroke: black;
312
- stroke-linecap: square;
313
- fill: none;
314
- transition: stroke-dashoffset 0.2s ease;
224
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
225
+ background: rgba(0, 0, 0, 0.26);
315
226
  }
316
227
 
317
228
  .DialogModal {
@@ -356,254 +267,344 @@
356
267
  margin-bottom: 0;
357
268
  }
358
269
 
359
- .Checkbox {
270
+ .DNDContainer {
360
271
  position: relative;
361
- white-space: pre;
362
272
  }
363
273
 
364
- .Checkbox *, .Checkbox *:before, .Checkbox *:after {
274
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
275
+ cursor: pointer;
276
+ }
277
+
278
+ .DNDContainer .Draggable.placeholder {
279
+ opacity: 0.2;
280
+ }
281
+
282
+ .DNDContainer .Draggable.copy {
283
+ position: absolute;
365
284
  box-sizing: border-box;
285
+ will-change: transform;
286
+ opacity: 0;
366
287
  }
367
288
 
368
- .Checkbox label {
369
- font-family: Roboto, sans-serif;
370
- font-size: 14px;
371
- color: #1e252d;
372
- cursor: pointer;
289
+ .DNDContainer .Draggable.dragged {
290
+ z-index: 10;
373
291
  }
374
292
 
375
- .Checkbox label:before, .Checkbox label:after {
376
- content: "";
293
+ .DNDContainer .overlay {
377
294
  position: absolute;
378
- left: 0;
379
295
  top: 0;
296
+ left: 0;
297
+ right: 0;
298
+ bottom: 0;
299
+ pointer-events: none;
380
300
  }
381
301
 
382
- .Checkbox label:before {
383
- width: 20px;
384
- height: 20px;
385
- background: #fff;
386
- border: 2px solid #252525;
387
- border-radius: 2px;
388
- cursor: pointer;
389
- transition: background 0.3s;
302
+ .CircleProgress {
303
+ width: 48px;
304
+ height: 48px;
390
305
  }
391
306
 
392
- .Checkbox input[type=checkbox] {
393
- outline: 0;
394
- margin-right: 10px;
395
- visibility: hidden;
307
+ .CircleProgress .line {
308
+ stroke-width: 2px;
309
+ stroke: black;
310
+ stroke-linecap: square;
311
+ fill: none;
312
+ transition: stroke-dashoffset 0.2s ease;
396
313
  }
397
314
 
398
- .Checkbox input[type=checkbox]:checked + label:before {
399
- background: #4AC263;
400
- border: none;
315
+ .AutocompleteSelect {
316
+ display: inline-flex;
317
+ flex-flow: column;
318
+ justify-content: center;
319
+ position: relative;
320
+ min-width: 250px;
321
+ min-height: 36px;
322
+ user-select: none;
401
323
  }
402
324
 
403
- .Checkbox input[type=checkbox]:checked + label:after {
404
- transform: rotate(-45deg);
405
- top: 6px;
406
- left: 4px;
407
- width: 12px;
408
- height: 6px;
409
- border: 2px solid #fff;
410
- border-top-style: none;
411
- border-right-style: none;
325
+ @keyframes clockwise {
326
+ 0% {
327
+ -webkit-transform: rotate(-90deg);
328
+ }
329
+ 100% {
330
+ -webkit-transform: translateX(0px);
331
+ }
332
+ }
333
+ @keyframes anticlockwise {
334
+ 0% {
335
+ -webkit-transform: rotate(90deg);
336
+ }
337
+ 100% {
338
+ -webkit-transform: translateX(0px);
339
+ }
340
+ }
341
+ .AutocompleteSelect > .input {
342
+ width: 100%;
412
343
  }
413
344
 
414
- .Checkbox input[type=checkbox]:disabled + label {
415
- color: gray;
345
+ .AutocompleteSelect .Scrollable {
346
+ padding-right: 0;
347
+ min-width: 100%;
416
348
  }
417
349
 
418
- .Checkbox input[type=checkbox]:disabled + label:before {
419
- border-color: rgba(0, 0, 0, 0.26);
350
+ .AutocompleteSelect.inline-multiple > .label {
351
+ top: -12px;
420
352
  }
421
353
 
422
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
423
- background: rgba(0, 0, 0, 0.26);
354
+ .AutocompleteSelect.inline-multiple > .selected {
355
+ flex-flow: row wrap;
424
356
  }
425
357
 
426
- .DNDContainer {
427
- position: relative;
358
+ .AutocompleteSelect.multiple-mini-inline {
359
+ height: 42px;
428
360
  }
429
361
 
430
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
362
+ .AutocompleteSelect.multiple-mini-inline > .label {
431
363
  cursor: pointer;
364
+ width: 100%;
365
+ margin-left: -10px;
366
+ padding: 10px;
367
+ box-sizing: border-box;
368
+ top: 0;
432
369
  }
433
370
 
434
- .DNDContainer .Draggable.placeholder {
435
- opacity: 0.2;
371
+ .AutocompleteSelect.multiple-mini-inline > .label.active {
372
+ padding: 0 10px;
436
373
  }
437
374
 
438
- .DNDContainer .Draggable.copy {
439
- position: absolute;
440
- box-sizing: border-box;
441
- will-change: transform;
442
- opacity: 0;
375
+ .AutocompleteSelect.multiple-mini-inline > .selected {
376
+ width: 250px;
443
377
  }
444
378
 
445
- .DNDContainer .Draggable.dragged {
446
- z-index: 10;
379
+ .AutocompleteSelect.multiple-mini-inline > .input {
380
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
381
+ position: absolute;
382
+ top: 38px;
383
+ z-index: 2;
384
+ background-color: white;
385
+ min-width: 130%;
447
386
  }
448
387
 
449
- .DNDContainer .overlay {
450
- position: absolute;
451
- top: 0;
452
- left: 0;
453
- right: 0;
454
- bottom: 0;
455
- pointer-events: none;
388
+ .AutocompleteSelect.multiple-mini-inline > .input .TextField {
389
+ padding-left: 10px;
390
+ padding-right: 10px;
391
+ width: 100%;
392
+ box-sizing: border-box;
456
393
  }
457
394
 
458
- .Button {
459
- position: relative;
460
- min-width: 64px;
461
- min-height: 36px;
462
- height: 24px;
463
- margin: 0px;
464
- padding: 0px 16px;
465
- border: none;
466
- outline: none;
467
- font-size: 14px;
468
- font-weight: 500;
469
- letter-spacing: 1.25px;
470
- background: #dfdfdf;
471
- text-transform: uppercase;
472
- font-family: Roboto, sans-serif;
473
- display: inline-flex;
474
- justify-content: center;
475
- align-items: center;
476
- cursor: pointer;
477
- overflow: hidden;
478
- user-select: none;
479
- border-radius: 3px;
480
- transition: all 0.2s ease;
395
+ .AutocompleteSelect.multiple-mini-inline > .input.hidden {
396
+ opacity: 0;
397
+ visibility: hidden;
481
398
  }
482
399
 
483
- .Button.flat {
484
- background-color: transparent;
400
+ .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
401
+ margin-top: 0;
485
402
  }
486
403
 
487
- .Button.flat:hover {
488
- background-color: rgba(0, 0, 0, 0.05);
404
+ .AutocompleteSelect .TextField {
405
+ margin-top: 8px;
489
406
  }
490
407
 
491
- .Button.green {
492
- background-color: #4AC263;
493
- color: white;
408
+ .AutocompleteSelect .TextField input {
409
+ font-size: 14px;
494
410
  }
495
411
 
496
- .Button.green:hover {
497
- background-color: #3db556;
412
+ .AutocompleteSelect > .label {
413
+ position: absolute;
414
+ transition: all 0.2s ease;
415
+ font-family: Roboto, sans-serif;
416
+ font-size: 14px;
417
+ color: rgba(0, 0, 0, 0.5);
418
+ z-index: 1;
419
+ cursor: text;
420
+ user-select: none;
421
+ left: 4px;
422
+ top: 12px;
498
423
  }
499
424
 
500
- .Button.blue {
501
- background-color: #61a0b2;
502
- color: white;
425
+ .AutocompleteSelect > .label.active {
426
+ font-size: 10px;
427
+ top: 2px;
503
428
  }
504
429
 
505
- .Button.blue:hover {
506
- background-color: #5295a8;
430
+ .AutocompleteSelect > .label.active .arrow {
431
+ border-width: 4px 4px 0 4px;
432
+ margin-bottom: 1px;
507
433
  }
508
434
 
509
- .Button.red {
510
- background-color: #F44336;
511
- color: white;
435
+ .AutocompleteSelect > .label .arrow {
436
+ width: 0;
437
+ height: 0;
438
+ border-style: solid;
439
+ border-width: 5px 5px 0 5px;
440
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
441
+ display: inline-block;
442
+ margin-left: 5px;
443
+ margin-bottom: 2px;
444
+ transition: all 0.2s ease;
512
445
  }
513
446
 
514
- .Button.red:hover {
515
- background-color: #f32c1e;
447
+ .AutocompleteSelect > .selected {
448
+ margin-top: 8px;
449
+ display: flex;
450
+ cursor: pointer;
516
451
  }
517
452
 
518
- .Button.black {
519
- background-color: #1e252d;
520
- color: white;
453
+ .AutocompleteSelect > .selected > .reset {
454
+ min-width: 36px;
455
+ max-width: 36px;
456
+ position: absolute;
457
+ right: 0;
458
+ top: 0;
459
+ background-color: white;
521
460
  }
522
461
 
523
- .Button.black:hover {
524
- background-color: #14181e;
462
+ .AutocompleteSelect > .selected > .reset .material-icons {
463
+ margin: 0;
464
+ color: #BFBFBF;
465
+ font-size: 20px;
525
466
  }
526
467
 
527
- .Button.gray {
528
- background: #D9D9D9;
529
- color: #999999;
468
+ .AutocompleteSelect > .selected.nolabel {
469
+ margin-top: 0px;
470
+ border-bottom: 1px solid #e5e3e3;
530
471
  }
531
472
 
532
- .Button.gray:hover {
533
- background-color: #cccccc;
473
+ .AutocompleteSelect > .selected.nolabel .DummyChild {
474
+ display: inline-flex;
475
+ align-items: center;
476
+ flex-grow: 1;
477
+ font-size: 16px;
478
+ margin: 0px 10px;
479
+ margin-bottom: 5px;
480
+ height: 19px;
534
481
  }
535
482
 
536
- .Button.small {
537
- padding: 0px 8px;
538
- min-height: 16px;
539
- min-width: 16px;
483
+ .AutocompleteSelect > .selected.nolabel .arrow {
484
+ width: 0;
485
+ height: 0;
486
+ border-style: solid;
487
+ border-width: 5px 5px 0 5px;
488
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
489
+ display: inline-block;
490
+ transition: all 0.2s ease;
491
+ margin: 0px 17px 3px 5px;
540
492
  }
541
493
 
542
- .Button > .material-icons {
543
- margin-right: 10px;
494
+ .AutocompleteSelect > .selected.inline {
495
+ font-size: 14px;
496
+ font-family: Roboto, sans-serif;
497
+ color: #1e252d;
498
+ text-overflow: ellipsis;
499
+ white-space: nowrap;
500
+ overflow: hidden;
501
+ display: flex;
502
+ align-items: center;
544
503
  }
545
504
 
546
- .Button.round {
547
- padding: 0px;
548
- min-width: 36px;
549
- border-radius: 50%;
505
+ .AutocompleteSelect > .selected.clickable {
506
+ overflow: hidden;
507
+ cursor: pointer;
508
+ padding: 10px;
509
+ margin-left: -10px;
510
+ margin-right: -10px;
550
511
  }
551
512
 
552
- .Button.round > .material-icons {
553
- margin: 0px;
513
+ .AutocompleteSelect.inlineSelected {
514
+ flex-flow: row wrap;
515
+ justify-content: flex-start;
554
516
  }
555
517
 
556
- .Button .ripple {
557
- position: absolute;
558
- background: rgba(0, 0, 0, 0.1);
559
- border-radius: 100%;
560
- transform: scale(0);
561
- pointer-events: none;
562
- transition: opacity 0.2s ease-out;
518
+ .AutocompleteSelect.inlineSelected.hasSelected {
519
+ padding-top: 7px;
563
520
  }
564
521
 
565
- .Button .ripple.show {
566
- animation: ripple 0.35s ease-out;
522
+ .AutocompleteSelect.inlineSelected > .label {
523
+ width: 100%;
524
+ height: 100%;
567
525
  }
568
526
 
569
- .Button:active .ripple.showed {
570
- opacity: 1;
527
+ .AutocompleteSelect.inlineSelected > .label.active {
528
+ z-index: 0;
571
529
  }
572
530
 
573
- .Button .ripple.showed {
574
- transform: scale(2);
575
- opacity: 0;
531
+ .AutocompleteSelect.inlineSelected .input {
532
+ width: unset;
533
+ flex-basis: 50px;
534
+ flex-grow: 1;
576
535
  }
577
536
 
578
- @keyframes ripple {
579
- to {
580
- transform: scale(2);
581
- }
537
+ .AutocompleteSelect.inlineSelected .input::after {
538
+ content: attr(data-value);
539
+ visibility: hidden;
540
+ white-space: pre;
541
+ font: inherit;
542
+ min-width: 2px;
543
+ border: 0;
544
+ margin: 0;
545
+ outline: 0;
546
+ float: left;
547
+ display: inline-block;
548
+ margin-top: -24px;
549
+ font-size: 14px;
550
+ padding: 2px;
582
551
  }
583
- .Button.raised {
584
- transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
552
+
553
+ .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
554
+ margin-top: 7px;
585
555
  }
586
556
 
587
- .Button.raised:hover {
588
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
557
+ .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
558
+ cursor: pointer;
559
+ margin: 5px 10px 5px 0px;
560
+ display: inline-flex;
561
+ flex-flow: row wrap;
562
+ height: 30px;
563
+ align-items: center;
564
+ background-color: #f0f0f0;
565
+ border-radius: 30px;
566
+ position: relative;
567
+ font-family: Roboto, sans-serif;
568
+ font-size: 14px;
569
+ color: #1e252d;
589
570
  }
590
571
 
591
- .Button.raised:active {
592
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
572
+ .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
573
+ padding-left: 35px;
574
+ padding-right: 10px;
593
575
  }
594
576
 
595
- .Button.disabled {
596
- box-shadow: none;
597
- background: #D9D9D9;
598
- color: #999999;
577
+ .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
578
+ cursor: pointer;
579
+ min-width: 30px;
580
+ width: 30px;
581
+ height: 30px;
582
+ opacity: 0;
583
+ position: absolute;
584
+ top: 0px;
585
+ left: 0px;
586
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
587
+ background-color: deepskyblue;
588
+ color: white;
589
+ border-radius: 30px;
590
+ display: flex;
591
+ flex-flow: row;
592
+ justify-content: center;
593
+ align-items: center;
594
+ animation: anticlockwise 0.15s linear;
599
595
  }
600
596
 
601
- .Button.disabled:hover {
602
- background-color: #cccccc;
597
+ .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
598
+ font-size: 22px;
603
599
  }
604
600
 
605
- .Button::-moz-focus-inner {
606
- border: 0;
601
+ .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
602
+ width: 30px;
603
+ height: 30px;
604
+ opacity: 1;
605
+ animation: clockwise 0.15s linear;
606
+ overflow: hidden;
607
+ position: absolute;
607
608
  }
608
609
 
609
610
  .DropFileInput {
@@ -633,87 +634,6 @@
633
634
  margin-right: 10px;
634
635
  }
635
636
 
636
- .FilteredList {
637
- max-height: 250px;
638
- position: relative;
639
- }
640
-
641
- .FilteredList.popup {
642
- padding: 0;
643
- visibility: hidden;
644
- position: absolute;
645
- background: white;
646
- z-index: 4;
647
- 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);
648
- transition: all 0.2s ease-out;
649
- top: calc(100% + 4px);
650
- opacity: 0;
651
- border-radius: 2px;
652
- }
653
-
654
- .FilteredList.popup.visible {
655
- opacity: 1;
656
- visibility: visible;
657
- }
658
-
659
- .FilteredList.inline {
660
- max-height: 225px;
661
- margin-top: 5px;
662
- }
663
-
664
- .FilteredList .child {
665
- display: flex;
666
- flex-flow: row nowrap;
667
- align-items: center;
668
- white-space: nowrap;
669
- font-size: 14px;
670
- color: #222222;
671
- height: 30px;
672
- padding: 5px 10px;
673
- padding-right: 15px;
674
- cursor: pointer;
675
- overflow: hidden;
676
- transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
677
- border-left: 5px solid #4AC263;
678
- padding-left: 15px;
679
- margin-left: -5px;
680
- }
681
-
682
- .FilteredList .child.hidden {
683
- height: 0 !important;
684
- padding: 0 !important;
685
- }
686
-
687
- .FilteredList .child.selected {
688
- background-color: #F0F0F0;
689
- padding-left: 10px;
690
- margin-left: 0px;
691
- }
692
-
693
- .FilteredList .child.active {
694
- background-color: #eeeeee;
695
- }
696
-
697
- .FilteredList .child {
698
- margin-top: 8px;
699
- }
700
-
701
- .FilteredList .child.hidden {
702
- margin-top: 0;
703
- }
704
-
705
- .FilteredList .child:not(.hidden) ~ .child {
706
- margin-top: 0;
707
- }
708
-
709
- .FilteredList .child:not(.hidden) ~ .child:last-child {
710
- margin-bottom: 8px;
711
- }
712
-
713
- .FilteredList .child:not(.hidden):last-child {
714
- margin-bottom: 8px;
715
- }
716
-
717
637
  .Dropzone {
718
638
  position: relative;
719
639
  }
@@ -774,134 +694,109 @@
774
694
  z-index: 1;
775
695
  }
776
696
 
777
- .Button.FloatingActionButton {
778
- position: absolute;
779
- right: 16px;
780
- bottom: 16px;
781
- width: 56px;
782
- height: 56px;
783
- padding: 16px;
784
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
785
- }
786
-
787
- .Button.FloatingActionButton.raised {
788
- 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);
789
- }
790
-
791
- .Button.FloatingActionButton.mini {
792
- width: 40px;
793
- height: 40px;
794
- padding: 8px;
697
+ .FilteredList {
698
+ max-height: 250px;
699
+ position: relative;
795
700
  }
796
701
 
797
- .Button.FloatingActionButton.hidden {
798
- bottom: -100px;
702
+ .FilteredList.popup {
703
+ padding: 0;
704
+ visibility: hidden;
705
+ position: absolute;
706
+ background: white;
707
+ z-index: 4;
708
+ 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);
709
+ transition: all 0.2s ease-out;
710
+ top: calc(100% + 4px);
711
+ opacity: 0;
712
+ border-radius: 2px;
799
713
  }
800
714
 
801
- .FormUploadProgress {
802
- position: absolute;
803
- left: 0;
804
- right: 0;
805
- top: 0;
806
- bottom: 0;
807
- background-color: rgba(255, 255, 255, 0.6);
808
- z-index: 2;
715
+ .FilteredList.popup.visible {
716
+ opacity: 1;
717
+ visibility: visible;
809
718
  }
810
719
 
811
- .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
812
- transition-delay: 500ms;
720
+ .FilteredList.inline {
721
+ max-height: 225px;
722
+ margin-top: 5px;
813
723
  }
814
724
 
815
- .FormUploadProgress .wrapper {
816
- position: sticky;
817
- top: 40%;
818
- margin-top: 40%;
819
- margin-left: 50%;
820
- transform: translateX(-50%);
725
+ .FilteredList .child {
821
726
  display: flex;
822
- flex-flow: column;
823
- justify-content: center;
727
+ flex-flow: row nowrap;
824
728
  align-items: center;
729
+ white-space: nowrap;
730
+ font-size: 14px;
731
+ color: #222222;
732
+ height: 30px;
733
+ padding: 5px 10px;
734
+ padding-right: 15px;
735
+ cursor: pointer;
736
+ overflow: hidden;
737
+ transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
738
+ border-left: 5px solid #4AC263;
739
+ padding-left: 15px;
740
+ margin-left: -5px;
825
741
  }
826
742
 
827
- .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
828
- position: absolute;
829
- width: 107px;
830
- height: 107px;
831
- top: 0;
832
- left: 0;
743
+ .FilteredList .child.hidden {
744
+ height: 0 !important;
745
+ padding: 0 !important;
833
746
  }
834
747
 
835
- .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
836
- stroke: #2196F3;
748
+ .FilteredList .child.selected {
749
+ background-color: #F0F0F0;
750
+ padding-left: 10px;
751
+ margin-left: 0px;
837
752
  }
838
753
 
839
- .FormUploadProgress .wrapper > .progress {
840
- width: 107px;
841
- height: 107px;
842
- min-height: 107px;
843
- display: flex;
844
- justify-content: center;
845
- align-items: center;
846
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
847
- border-radius: 50%;
848
- background: white;
849
- position: relative;
754
+ .FilteredList .child.active {
755
+ background-color: #eeeeee;
850
756
  }
851
757
 
852
- .FormUploadProgress .wrapper > .progress > .value {
853
- display: inline-block;
854
- margin-top: 5px;
855
- font-weight: bold;
856
- line-height: 16px;
857
- font-size: 13px;
858
- text-align: center;
859
- color: #818181;
758
+ .FilteredList .child {
759
+ margin-top: 8px;
860
760
  }
861
761
 
862
- .FormUploadProgress .wrapper .cancel {
863
- min-width: 107px;
864
- margin-top: 20px;
865
- background-color: white;
866
- color: #F96B5C;
867
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
762
+ .FilteredList .child.hidden {
763
+ margin-top: 0;
868
764
  }
869
765
 
870
- .ModalMenu {
871
- position: absolute;
872
- top: 10px;
873
- right: 50px;
766
+ .FilteredList .child:not(.hidden) ~ .child {
767
+ margin-top: 0;
874
768
  }
875
769
 
876
- .ModalMenu .material-icons {
877
- color: #818181;
770
+ .FilteredList .child:not(.hidden) ~ .child:last-child {
771
+ margin-bottom: 8px;
878
772
  }
879
773
 
880
- .ModalMenu .Button.animated {
881
- position: absolute;
882
- transition: opacity 150ms ease-in, right 200ms ease-in;
883
- opacity: 0;
884
- right: 0;
885
- top: 0;
774
+ .FilteredList .child:not(.hidden):last-child {
775
+ margin-bottom: 8px;
886
776
  }
887
777
 
888
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
889
- opacity: 1;
778
+ .Button.FloatingActionButton {
779
+ position: absolute;
780
+ right: 16px;
781
+ bottom: 16px;
782
+ width: 56px;
783
+ height: 56px;
784
+ padding: 16px;
785
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
890
786
  }
891
787
 
892
- .ModalMenu .Button.animated.unmounting {
893
- transition: opacity 100ms ease-out, right 200ms ease-out;
788
+ .Button.FloatingActionButton.raised {
789
+ 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);
894
790
  }
895
791
 
896
- .ModalMenu .Button.active {
897
- background: #EBEBEB;
792
+ .Button.FloatingActionButton.mini {
793
+ width: 40px;
794
+ height: 40px;
795
+ padding: 8px;
898
796
  }
899
797
 
900
- .ModalMenu .separator {
901
- height: 24px;
902
- width: 1px;
903
- background-color: #D9D9D9;
904
- margin-left: 4px;
798
+ .Button.FloatingActionButton.hidden {
799
+ bottom: -100px;
905
800
  }
906
801
 
907
802
  .ImageGallery {
@@ -1139,6 +1034,75 @@
1139
1034
  font-size: 24px;
1140
1035
  }
1141
1036
 
1037
+ .FormUploadProgress {
1038
+ position: absolute;
1039
+ left: 0;
1040
+ right: 0;
1041
+ top: 0;
1042
+ bottom: 0;
1043
+ background-color: rgba(255, 255, 255, 0.6);
1044
+ z-index: 2;
1045
+ }
1046
+
1047
+ .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
1048
+ transition-delay: 500ms;
1049
+ }
1050
+
1051
+ .FormUploadProgress .wrapper {
1052
+ position: sticky;
1053
+ top: 40%;
1054
+ margin-top: 40%;
1055
+ margin-left: 50%;
1056
+ transform: translateX(-50%);
1057
+ display: flex;
1058
+ flex-flow: column;
1059
+ justify-content: center;
1060
+ align-items: center;
1061
+ }
1062
+
1063
+ .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
1064
+ position: absolute;
1065
+ width: 107px;
1066
+ height: 107px;
1067
+ top: 0;
1068
+ left: 0;
1069
+ }
1070
+
1071
+ .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
1072
+ stroke: #2196F3;
1073
+ }
1074
+
1075
+ .FormUploadProgress .wrapper > .progress {
1076
+ width: 107px;
1077
+ height: 107px;
1078
+ min-height: 107px;
1079
+ display: flex;
1080
+ justify-content: center;
1081
+ align-items: center;
1082
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1083
+ border-radius: 50%;
1084
+ background: white;
1085
+ position: relative;
1086
+ }
1087
+
1088
+ .FormUploadProgress .wrapper > .progress > .value {
1089
+ display: inline-block;
1090
+ margin-top: 5px;
1091
+ font-weight: bold;
1092
+ line-height: 16px;
1093
+ font-size: 13px;
1094
+ text-align: center;
1095
+ color: #818181;
1096
+ }
1097
+
1098
+ .FormUploadProgress .wrapper .cancel {
1099
+ min-width: 107px;
1100
+ margin-top: 20px;
1101
+ background-color: white;
1102
+ color: #F96B5C;
1103
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1104
+ }
1105
+
1142
1106
  .Modal {
1143
1107
  display: block;
1144
1108
  position: fixed;
@@ -1209,6 +1173,43 @@
1209
1173
  position: absolute;
1210
1174
  }
1211
1175
 
1176
+ .ModalMenu {
1177
+ position: absolute;
1178
+ top: 10px;
1179
+ right: 50px;
1180
+ }
1181
+
1182
+ .ModalMenu .material-icons {
1183
+ color: #818181;
1184
+ }
1185
+
1186
+ .ModalMenu .Button.animated {
1187
+ position: absolute;
1188
+ transition: opacity 150ms ease-in, right 200ms ease-in;
1189
+ opacity: 0;
1190
+ right: 0;
1191
+ top: 0;
1192
+ }
1193
+
1194
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1195
+ opacity: 1;
1196
+ }
1197
+
1198
+ .ModalMenu .Button.animated.unmounting {
1199
+ transition: opacity 100ms ease-out, right 200ms ease-out;
1200
+ }
1201
+
1202
+ .ModalMenu .Button.active {
1203
+ background: #EBEBEB;
1204
+ }
1205
+
1206
+ .ModalMenu .separator {
1207
+ height: 24px;
1208
+ width: 1px;
1209
+ background-color: #D9D9D9;
1210
+ margin-left: 4px;
1211
+ }
1212
+
1212
1213
  .Scrollable {
1213
1214
  max-height: 250px;
1214
1215
  max-width: 250px;
@@ -1349,6 +1350,59 @@
1349
1350
  color: #bf3727;
1350
1351
  }
1351
1352
 
1353
+ .SpinningProgress {
1354
+ width: 48px;
1355
+ height: 48px;
1356
+ position: relative;
1357
+ margin: 0 auto;
1358
+ }
1359
+
1360
+ .SpinningProgress:before {
1361
+ content: "";
1362
+ display: block;
1363
+ padding-top: 100%;
1364
+ }
1365
+
1366
+ .SpinningProgress .circular {
1367
+ animation: rotate 2s linear infinite;
1368
+ height: 100%;
1369
+ transform-origin: center center;
1370
+ width: 100%;
1371
+ position: absolute;
1372
+ top: 0;
1373
+ bottom: 0;
1374
+ left: 0;
1375
+ right: 0;
1376
+ margin: auto;
1377
+ }
1378
+
1379
+ .SpinningProgress .line {
1380
+ stroke: black;
1381
+ stroke-width: 2px;
1382
+ stroke-dasharray: 1, 96;
1383
+ stroke-dashoffset: 0;
1384
+ animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1385
+ }
1386
+
1387
+ @keyframes rotate {
1388
+ 100% {
1389
+ transform: rotate(360deg);
1390
+ }
1391
+ }
1392
+ @keyframes dash {
1393
+ 0% {
1394
+ stroke-dasharray: 1, 96;
1395
+ stroke-dashoffset: 0;
1396
+ }
1397
+ 50% {
1398
+ stroke-dasharray: 43, 96;
1399
+ stroke-dashoffset: -17px;
1400
+ }
1401
+ 100% {
1402
+ stroke-dasharray: 43, 96;
1403
+ stroke-dashoffset: -53px;
1404
+ }
1405
+ }
1352
1406
  .Switch {
1353
1407
  display: inline-flex;
1354
1408
  padding-top: 5px;
@@ -1385,105 +1439,166 @@
1385
1439
  transition: all 0.3s ease;
1386
1440
  }
1387
1441
 
1388
- .Switch .switch-label:before {
1389
- left: 1px;
1390
- width: 34px;
1391
- height: 14px;
1392
- background-color: #9E9E9E;
1393
- border-radius: 8px;
1442
+ .Switch .switch-label:before {
1443
+ left: 1px;
1444
+ width: 34px;
1445
+ height: 14px;
1446
+ background-color: #9E9E9E;
1447
+ border-radius: 8px;
1448
+ }
1449
+
1450
+ .Switch .switch-label:after {
1451
+ left: 0;
1452
+ width: 20px;
1453
+ height: 20px;
1454
+ background-color: #FAFAFA;
1455
+ border-radius: 50%;
1456
+ 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);
1457
+ }
1458
+
1459
+ .Switch .switch-label .toggle--on {
1460
+ display: none;
1461
+ }
1462
+
1463
+ .Switch .switch-label .toggle--off {
1464
+ display: inline-block;
1465
+ }
1466
+
1467
+ .Switch .switch-label .label {
1468
+ margin-right: 5px;
1469
+ }
1470
+
1471
+ .Switch .switch-input:checked + .switch-label:before {
1472
+ background-color: #A5D6A7;
1473
+ }
1474
+
1475
+ .Switch .switch-input:checked + .switch-label:after {
1476
+ background-color: #4CAF50;
1477
+ transform: translate(80%, -50%);
1478
+ }
1479
+
1480
+ .Switch .switch-input:checked + .switch-label .toggle--on {
1481
+ display: inline-block;
1482
+ }
1483
+
1484
+ .Switch .switch-input:checked + .switch-label .toggle--off {
1485
+ display: none;
1486
+ }
1487
+
1488
+ .Table {
1489
+ font-family: Roboto, sans-serif;
1490
+ font-size: 14px;
1491
+ color: #1e252d;
1492
+ border-spacing: 0;
1493
+ border-collapse: collapse;
1494
+ width: 100%;
1495
+ position: relative;
1496
+ }
1497
+
1498
+ .Table td, .Table th {
1499
+ padding: 5px;
1500
+ font-weight: 500;
1501
+ color: #2e2e2e;
1502
+ }
1503
+
1504
+ .Table td {
1505
+ height: 48px;
1506
+ border-bottom: 1px solid #ebebeb;
1507
+ border-top: 1px solid #ebebeb;
1508
+ }
1509
+
1510
+ .Table td:first-child {
1511
+ padding-left: 45px;
1512
+ }
1513
+
1514
+ .Table td:last-child {
1515
+ padding-right: 45px;
1394
1516
  }
1395
1517
 
1396
- .Switch .switch-label:after {
1397
- left: 0;
1398
- width: 20px;
1399
- height: 20px;
1400
- background-color: #FAFAFA;
1401
- border-radius: 50%;
1402
- 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);
1518
+ .Table th {
1519
+ color: #808080;
1520
+ height: 55px;
1521
+ padding: 0px;
1403
1522
  }
1404
1523
 
1405
- .Switch .switch-label .toggle--on {
1406
- display: none;
1524
+ .Table th .sortable {
1525
+ cursor: pointer;
1407
1526
  }
1408
1527
 
1409
- .Switch .switch-label .toggle--off {
1410
- display: inline-block;
1528
+ .Table th .sortable.active {
1529
+ font-weight: bold;
1411
1530
  }
1412
1531
 
1413
- .Switch .switch-label .label {
1414
- margin-right: 5px;
1532
+ .Table th .sortable.active .material-icons {
1533
+ font-size: 16px;
1415
1534
  }
1416
1535
 
1417
- .Switch .switch-input:checked + .switch-label:before {
1418
- background-color: #A5D6A7;
1536
+ .Table th .sortable.false {
1537
+ padding-right: 22px;
1419
1538
  }
1420
1539
 
1421
- .Switch .switch-input:checked + .switch-label:after {
1422
- background-color: #4CAF50;
1423
- transform: translate(80%, -50%);
1540
+ .Table th:first-child .hidden, .Table th:first-child .fixed {
1541
+ padding-left: 45px;
1424
1542
  }
1425
1543
 
1426
- .Switch .switch-input:checked + .switch-label .toggle--on {
1427
- display: inline-block;
1544
+ .Table th:last-child .hidden, .Table th:last-child .fixed {
1545
+ padding-right: 45px;
1428
1546
  }
1429
1547
 
1430
- .Switch .switch-input:checked + .switch-label .toggle--off {
1431
- display: none;
1548
+ .Table th .hidden {
1549
+ color: transparent;
1550
+ height: 0px;
1551
+ padding: 5px;
1432
1552
  }
1433
1553
 
1434
- .SpinningProgress {
1435
- width: 48px;
1436
- height: 48px;
1437
- position: relative;
1438
- margin: 0 auto;
1554
+ .Table th .fixed {
1555
+ font-weight: normal;
1556
+ display: flex;
1557
+ flex-flow: row;
1558
+ justify-items: center;
1559
+ align-items: center;
1560
+ text-align: left;
1561
+ height: 56px;
1562
+ padding: 0px 5px;
1563
+ background-color: white;
1564
+ position: absolute;
1565
+ top: 0px;
1566
+ z-index: 1;
1567
+ box-sizing: border-box;
1568
+ border-bottom: 1px solid #ebebeb;
1569
+ border-top: 1px solid #ebebeb;
1439
1570
  }
1440
1571
 
1441
- .SpinningProgress:before {
1442
- content: "";
1443
- display: block;
1444
- padding-top: 100%;
1572
+ .Table tbody tr:hover {
1573
+ background-color: #f2f2f2;
1445
1574
  }
1446
1575
 
1447
- .SpinningProgress .circular {
1448
- animation: rotate 2s linear infinite;
1449
- height: 100%;
1450
- transform-origin: center center;
1451
- width: 100%;
1452
- position: absolute;
1453
- top: 0;
1454
- bottom: 0;
1455
- left: 0;
1456
- right: 0;
1457
- margin: auto;
1576
+ .Table tbody tr.disabled td {
1577
+ color: #93a4b7;
1458
1578
  }
1459
1579
 
1460
- .SpinningProgress .line {
1461
- stroke: black;
1462
- stroke-width: 2px;
1463
- stroke-dasharray: 1, 96;
1464
- stroke-dashoffset: 0;
1465
- animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1580
+ .Table .ro {
1581
+ color: #47576a;
1466
1582
  }
1467
1583
 
1468
- @keyframes rotate {
1469
- 100% {
1470
- transform: rotate(360deg);
1471
- }
1584
+ .Table .editable {
1585
+ cursor: pointer;
1472
1586
  }
1473
- @keyframes dash {
1474
- 0% {
1475
- stroke-dasharray: 1, 96;
1476
- stroke-dashoffset: 0;
1477
- }
1478
- 50% {
1479
- stroke-dasharray: 43, 96;
1480
- stroke-dashoffset: -17px;
1481
- }
1482
- 100% {
1483
- stroke-dasharray: 43, 96;
1484
- stroke-dashoffset: -53px;
1485
- }
1587
+
1588
+ .Table .editable > .TextField {
1589
+ height: 20px !important;
1590
+ margin: 0px;
1591
+ position: relative;
1592
+ display: block;
1593
+ }
1594
+
1595
+ .Table .editable > .TextField input {
1596
+ width: 100%;
1597
+ height: 20px;
1598
+ padding: 0px;
1599
+ background-color: #f0f0f0;
1486
1600
  }
1601
+
1487
1602
  .TextField {
1488
1603
  position: relative;
1489
1604
  width: 100%;
@@ -1627,118 +1742,12 @@
1627
1742
  animation-name: shake;
1628
1743
  }
1629
1744
 
1630
- .Table {
1631
- font-family: Roboto, sans-serif;
1632
- font-size: 14px;
1633
- color: #1e252d;
1634
- border-spacing: 0;
1635
- border-collapse: collapse;
1636
- width: 100%;
1637
- position: relative;
1638
- }
1639
-
1640
- .Table td, .Table th {
1641
- padding: 5px;
1642
- font-weight: 500;
1643
- color: #2e2e2e;
1644
- }
1645
-
1646
- .Table td {
1647
- height: 48px;
1648
- border-bottom: 1px solid #ebebeb;
1649
- border-top: 1px solid #ebebeb;
1650
- }
1651
-
1652
- .Table td:first-child {
1653
- padding-left: 45px;
1654
- }
1655
-
1656
- .Table td:last-child {
1657
- padding-right: 45px;
1658
- }
1659
-
1660
- .Table th {
1661
- color: #808080;
1662
- height: 55px;
1663
- padding: 0px;
1664
- }
1665
-
1666
- .Table th .sortable {
1667
- cursor: pointer;
1668
- }
1669
-
1670
- .Table th .sortable.active {
1671
- font-weight: bold;
1672
- }
1673
-
1674
- .Table th .sortable.active .material-icons {
1675
- font-size: 16px;
1676
- }
1677
-
1678
- .Table th .sortable.false {
1679
- padding-right: 22px;
1680
- }
1681
-
1682
- .Table th:first-child .hidden, .Table th:first-child .fixed {
1683
- padding-left: 45px;
1684
- }
1685
-
1686
- .Table th:last-child .hidden, .Table th:last-child .fixed {
1687
- padding-right: 45px;
1688
- }
1689
-
1690
- .Table th .hidden {
1691
- color: transparent;
1692
- height: 0px;
1693
- padding: 5px;
1694
- }
1695
-
1696
- .Table th .fixed {
1697
- font-weight: normal;
1698
- display: flex;
1699
- flex-flow: row;
1700
- justify-items: center;
1701
- align-items: center;
1702
- text-align: left;
1703
- height: 56px;
1704
- padding: 0px 5px;
1705
- background-color: white;
1706
- position: absolute;
1707
- top: 0px;
1708
- z-index: 1;
1709
- box-sizing: border-box;
1710
- border-bottom: 1px solid #ebebeb;
1711
- border-top: 1px solid #ebebeb;
1712
- }
1713
-
1714
- .Table tbody tr:hover {
1715
- background-color: #f2f2f2;
1716
- }
1717
-
1718
- .Table tbody tr.disabled td {
1719
- color: #93a4b7;
1720
- }
1721
-
1722
- .Table .ro {
1723
- color: #47576a;
1724
- }
1725
-
1726
- .Table .editable {
1727
- cursor: pointer;
1728
- }
1729
-
1730
- .Table .editable > .TextField {
1731
- height: 20px !important;
1732
- margin: 0px;
1733
- position: relative;
1734
- display: block;
1745
+ .ScrollableTable .Scrollable .scrollbar {
1746
+ top: 56px;
1735
1747
  }
1736
1748
 
1737
- .Table .editable > .TextField input {
1738
- width: 100%;
1739
- height: 20px;
1740
- padding: 0px;
1741
- background-color: #f0f0f0;
1749
+ .ScrollableTable .Table {
1750
+ position: static;
1742
1751
  }
1743
1752
 
1744
1753
  .DNDContainer .DroppableList .Draggable {
@@ -1757,12 +1766,4 @@
1757
1766
 
1758
1767
  .DNDContainer .DroppableList.resetting .Draggable {
1759
1768
  transition: transform 0.1s ease-in;
1760
- }
1761
-
1762
- .ScrollableTable .Scrollable .scrollbar {
1763
- top: 56px;
1764
- }
1765
-
1766
- .ScrollableTable .Table {
1767
- position: static;
1768
1769
  }