react-ui-basics 0.0.139 → 0.0.140

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.
Files changed (4) hide show
  1. package/Table.js +33 -16
  2. package/Table.js.map +1 -1
  3. package/bundle.css +641 -641
  4. package/package.json +1 -1
package/bundle.css CHANGED
@@ -7,618 +7,618 @@
7
7
  opacity: 1;
8
8
  }
9
9
 
10
- .AutocompleteSelect {
11
- display: inline-flex;
12
- flex-flow: column;
13
- justify-content: center;
10
+ .Button {
14
11
  position: relative;
15
- min-width: 250px;
12
+ min-width: 64px;
16
13
  min-height: 36px;
14
+ height: 24px;
15
+ margin: 0px;
16
+ padding: 0px 16px;
17
+ border: none;
18
+ outline: none;
19
+ font-size: 14px;
20
+ font-weight: 500;
21
+ letter-spacing: 1.25px;
22
+ background: #dfdfdf;
23
+ text-transform: uppercase;
24
+ font-family: Roboto, sans-serif;
25
+ display: inline-flex;
26
+ justify-content: center;
27
+ align-items: center;
28
+ cursor: pointer;
29
+ overflow: hidden;
17
30
  user-select: none;
31
+ border-radius: 3px;
32
+ transition: all 0.2s ease;
18
33
  }
19
34
 
20
- @keyframes clockwise {
21
- 0% {
22
- -webkit-transform: rotate(-90deg);
23
- }
24
- 100% {
25
- -webkit-transform: translateX(0px);
26
- }
35
+ .Button.flat {
36
+ background-color: transparent;
27
37
  }
28
- @keyframes anticlockwise {
29
- 0% {
30
- -webkit-transform: rotate(90deg);
31
- }
32
- 100% {
33
- -webkit-transform: translateX(0px);
34
- }
38
+
39
+ .Button.flat:hover {
40
+ background-color: rgba(0, 0, 0, 0.05);
35
41
  }
36
- .AutocompleteSelect > .input {
37
- width: 100%;
42
+
43
+ .Button.green {
44
+ background-color: #43a047;
45
+ color: white;
38
46
  }
39
47
 
40
- .AutocompleteSelect .Scrollable {
41
- padding-right: 0;
42
- min-width: 100%;
48
+ .Button.green:hover {
49
+ background-color: #3b8e3f;
43
50
  }
44
51
 
45
- .AutocompleteSelect.inline-multiple > .label {
46
- top: -12px;
52
+ .Button.blue {
53
+ background-color: #039be5;
54
+ color: white;
47
55
  }
48
56
 
49
- .AutocompleteSelect.inline-multiple > .selected {
50
- flex-flow: row wrap;
57
+ .Button.blue:hover {
58
+ background-color: #038acc;
51
59
  }
52
60
 
53
- .AutocompleteSelect.multiple-mini-inline {
54
- height: 42px;
61
+ .Button.red {
62
+ background-color: #e53935;
63
+ color: white;
55
64
  }
56
65
 
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;
66
+ .Button.red:hover {
67
+ background-color: #e2231e;
64
68
  }
65
69
 
66
- .AutocompleteSelect.multiple-mini-inline > .label.active {
67
- padding: 0 10px;
70
+ .Button.black {
71
+ background-color: #1e252d;
72
+ color: white;
68
73
  }
69
74
 
70
- .AutocompleteSelect.multiple-mini-inline > .selected {
71
- width: 250px;
75
+ .Button.black:hover {
76
+ background-color: #14181e;
72
77
  }
73
78
 
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%;
79
+ .Button.gray {
80
+ background: #D9D9D9;
81
+ color: #999999;
81
82
  }
82
83
 
83
- .AutocompleteSelect.multiple-mini-inline > .input .TextField {
84
- padding-left: 10px;
85
- padding-right: 10px;
86
- width: 100%;
87
- box-sizing: border-box;
84
+ .Button.gray:hover {
85
+ background-color: #cccccc;
88
86
  }
89
87
 
90
- .AutocompleteSelect.multiple-mini-inline > .input.hidden {
91
- opacity: 0;
92
- visibility: hidden;
88
+ .Button.small {
89
+ padding: 0px 8px;
90
+ min-height: 16px;
91
+ min-width: 16px;
93
92
  }
94
93
 
95
- .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
96
- margin-top: 0;
94
+ .Button > .material-icons {
95
+ margin-right: 10px;
97
96
  }
98
97
 
99
- .AutocompleteSelect .TextField {
100
- margin-top: 8px;
98
+ .Button.round {
99
+ padding: 0px;
100
+ min-width: 36px;
101
+ border-radius: 50%;
101
102
  }
102
103
 
103
- .AutocompleteSelect .TextField input {
104
- font-size: 14px;
104
+ .Button.round > .material-icons {
105
+ margin: 0px;
105
106
  }
106
107
 
107
- .AutocompleteSelect > .label {
108
+ .Button .ripple {
108
109
  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;
110
+ background: rgba(0, 0, 0, 0.1);
111
+ border-radius: 100%;
112
+ transform: scale(0);
113
+ pointer-events: none;
114
+ transition: opacity 0.2s ease-out;
118
115
  }
119
116
 
120
- .AutocompleteSelect > .label.active {
121
- font-size: 10px;
122
- top: 2px;
117
+ .Button .ripple.show {
118
+ animation: ripple 0.35s ease-out;
123
119
  }
124
120
 
125
- .AutocompleteSelect > .label.active .arrow {
126
- border-width: 4px 4px 0 4px;
127
- margin-bottom: 1px;
121
+ .Button:active .ripple.showed {
122
+ opacity: 1;
128
123
  }
129
124
 
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;
125
+ .Button:focus .ripple.focused {
126
+ opacity: 1;
127
+ transition: opacity 0.2s ease-out, transform 0.2s ease-out;
128
+ transform: scale(1);
129
+ animation: resize 1.25s ease-out infinite;
130
+ animation-delay: 0.2s;
131
+ animation-direction: alternate;
140
132
  }
141
133
 
142
- .AutocompleteSelect > .selected {
143
- margin-top: 8px;
144
- display: flex;
145
- cursor: pointer;
134
+ .Button .ripple.showed {
135
+ transform: scale(2);
136
+ opacity: 0;
146
137
  }
147
138
 
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;
139
+ @keyframes ripple {
140
+ to {
141
+ transform: scale(2);
142
+ }
155
143
  }
156
-
157
- .AutocompleteSelect > .selected > .reset .material-icons {
158
- margin: 0;
159
- color: #BFBFBF;
160
- font-size: 20px;
144
+ @keyframes resize {
145
+ to {
146
+ transform: scale(0.9);
147
+ }
148
+ }
149
+ .Button.raised {
150
+ transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
161
151
  }
162
152
 
163
- .AutocompleteSelect > .selected.nolabel {
164
- margin-top: 0px;
165
- border-bottom: 1px solid #e5e3e3;
153
+ .Button.raised:hover {
154
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
166
155
  }
167
156
 
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;
157
+ .Button.raised:active {
158
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
176
159
  }
177
160
 
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;
161
+ .Button.disabled {
162
+ box-shadow: none;
163
+ background: #D9D9D9;
164
+ color: #999999;
187
165
  }
188
166
 
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;
167
+ .Button.disabled:hover {
168
+ background-color: #cccccc;
198
169
  }
199
170
 
200
- .AutocompleteSelect > .selected.clickable {
201
- overflow: hidden;
202
- cursor: pointer;
203
- padding: 10px;
204
- margin-left: -10px;
205
- margin-right: -10px;
171
+ .Button::-moz-focus-inner {
172
+ border: 0;
206
173
  }
207
174
 
208
- .AutocompleteSelect.inlineSelected {
209
- flex-flow: row wrap;
210
- justify-content: flex-start;
175
+ .Checkbox {
176
+ position: relative;
177
+ white-space: pre;
211
178
  }
212
179
 
213
- .AutocompleteSelect.inlineSelected.hasSelected {
214
- padding-top: 7px;
180
+ .Checkbox *, .Checkbox *:before, .Checkbox *:after {
181
+ box-sizing: border-box;
215
182
  }
216
183
 
217
- .AutocompleteSelect.inlineSelected > .label {
218
- width: 100%;
219
- height: 100%;
184
+ .Checkbox label {
185
+ font-family: Roboto, sans-serif;
186
+ font-size: 14px;
187
+ color: #1e252d;
188
+ cursor: pointer;
220
189
  }
221
190
 
222
- .AutocompleteSelect.inlineSelected > .label.active {
223
- z-index: 0;
191
+ .Checkbox label:before, .Checkbox label:after {
192
+ content: "";
193
+ position: absolute;
194
+ left: 0;
195
+ top: 0;
224
196
  }
225
197
 
226
- .AutocompleteSelect.inlineSelected .input {
227
- width: unset;
228
- flex-basis: 50px;
229
- flex-grow: 1;
198
+ .Checkbox label:before {
199
+ width: 20px;
200
+ height: 20px;
201
+ background: #fff;
202
+ border: 2px solid #252525;
203
+ border-radius: 2px;
204
+ cursor: pointer;
205
+ transition: background 0.3s;
230
206
  }
231
207
 
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;
208
+ .Checkbox input[type=checkbox] {
240
209
  outline: 0;
241
- float: left;
242
- display: inline-block;
243
- margin-top: -24px;
244
- font-size: 14px;
245
- padding: 2px;
210
+ margin-right: 10px;
211
+ visibility: hidden;
246
212
  }
247
213
 
248
- .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
249
- margin-top: 7px;
214
+ .Checkbox input[type=checkbox]:checked + label:before {
215
+ background: #4AC263;
216
+ border: none;
250
217
  }
251
218
 
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;
219
+ .Checkbox input[type=checkbox]:checked + label:after {
220
+ transform: rotate(-45deg);
221
+ top: 6px;
222
+ left: 4px;
223
+ width: 12px;
224
+ height: 6px;
225
+ border: 2px solid #fff;
226
+ border-top-style: none;
227
+ border-right-style: none;
265
228
  }
266
229
 
267
- .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
268
- padding-left: 35px;
269
- padding-right: 10px;
230
+ .Checkbox input[type=checkbox]:disabled + label {
231
+ color: gray;
270
232
  }
271
233
 
272
- .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
273
- cursor: pointer;
274
- min-width: 30px;
275
- width: 30px;
276
- height: 30px;
277
- opacity: 0;
278
- position: absolute;
279
- top: 0px;
280
- left: 0px;
281
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
282
- background-color: deepskyblue;
283
- color: white;
284
- border-radius: 30px;
285
- display: flex;
286
- flex-flow: row;
287
- justify-content: center;
288
- align-items: center;
289
- animation: anticlockwise 0.15s linear;
234
+ .Checkbox input[type=checkbox]:disabled + label:before {
235
+ border-color: rgba(0, 0, 0, 0.26);
290
236
  }
291
237
 
292
- .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
293
- font-size: 22px;
238
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
239
+ background: rgba(0, 0, 0, 0.26);
294
240
  }
295
241
 
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;
242
+ .CircleProgress {
243
+ width: 48px;
244
+ height: 48px;
303
245
  }
304
246
 
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;
322
- align-items: center;
323
- cursor: pointer;
324
- overflow: hidden;
325
- user-select: none;
326
- border-radius: 3px;
327
- transition: all 0.2s ease;
247
+ .CircleProgress .line {
248
+ stroke-width: 2px;
249
+ stroke: black;
250
+ stroke-linecap: square;
251
+ fill: none;
252
+ transition: stroke-dashoffset 0.2s ease;
328
253
  }
329
254
 
330
- .Button.flat {
331
- background-color: transparent;
255
+ .DialogModal {
256
+ overflow: hidden;
332
257
  }
333
258
 
334
- .Button.flat:hover {
335
- background-color: rgba(0, 0, 0, 0.05);
259
+ .DialogModal .content {
260
+ top: 20vh;
336
261
  }
337
262
 
338
- .Button.green {
339
- background-color: #43a047;
340
- color: white;
263
+ .Dialog {
264
+ background-color: white;
265
+ min-width: 460px;
266
+ max-width: 40vw;
267
+ padding: 15px;
341
268
  }
342
269
 
343
- .Button.green:hover {
344
- background-color: #3b8e3f;
270
+ .Dialog .title {
271
+ margin-bottom: 15px;
272
+ padding: 20px 50px 0px 30px;
273
+ font-size: 1.25rem;
274
+ line-height: 2rem;
275
+ font-weight: 400;
276
+ letter-spacing: 0.0125em;
345
277
  }
346
278
 
347
- .Button.blue {
348
- background-color: #039be5;
349
- color: white;
279
+ .Dialog .description {
280
+ color: rgba(0, 0, 0, 0.54);
281
+ font-size: 1rem;
282
+ line-height: 1.5rem;
283
+ font-weight: 400;
284
+ letter-spacing: 0.03125em;
285
+ margin-top: 20px;
286
+ padding: 0 24px 24px;
350
287
  }
351
288
 
352
- .Button.blue:hover {
353
- background-color: #038acc;
289
+ .Dialog > div.row {
290
+ margin-bottom: 15px;
354
291
  }
355
292
 
356
- .Button.red {
357
- background-color: #e53935;
358
- color: white;
293
+ .Dialog > div.row:last-child {
294
+ margin-bottom: 0;
359
295
  }
360
296
 
361
- .Button.red:hover {
362
- background-color: #e2231e;
297
+ .DNDContainer {
298
+ position: relative;
363
299
  }
364
300
 
365
- .Button.black {
366
- background-color: #1e252d;
367
- color: white;
301
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
302
+ cursor: pointer;
368
303
  }
369
304
 
370
- .Button.black:hover {
371
- background-color: #14181e;
305
+ .DNDContainer .Draggable.placeholder {
306
+ opacity: 0.2;
372
307
  }
373
308
 
374
- .Button.gray {
375
- background: #D9D9D9;
376
- color: #999999;
309
+ .DNDContainer .Draggable.copy {
310
+ position: absolute;
311
+ box-sizing: border-box;
312
+ will-change: transform;
313
+ opacity: 0;
377
314
  }
378
315
 
379
- .Button.gray:hover {
380
- background-color: #cccccc;
316
+ .DNDContainer .Draggable.dragged {
317
+ z-index: 10;
381
318
  }
382
319
 
383
- .Button.small {
384
- padding: 0px 8px;
385
- min-height: 16px;
386
- min-width: 16px;
320
+ .DNDContainer .overlay {
321
+ position: absolute;
322
+ top: 0;
323
+ left: 0;
324
+ right: 0;
325
+ bottom: 0;
326
+ pointer-events: none;
387
327
  }
388
328
 
389
- .Button > .material-icons {
390
- margin-right: 10px;
329
+ .AutocompleteSelect {
330
+ display: inline-flex;
331
+ flex-flow: column;
332
+ justify-content: center;
333
+ position: relative;
334
+ min-width: 250px;
335
+ min-height: 36px;
336
+ user-select: none;
391
337
  }
392
338
 
393
- .Button.round {
394
- padding: 0px;
395
- min-width: 36px;
396
- border-radius: 50%;
339
+ @keyframes clockwise {
340
+ 0% {
341
+ -webkit-transform: rotate(-90deg);
342
+ }
343
+ 100% {
344
+ -webkit-transform: translateX(0px);
345
+ }
397
346
  }
398
-
399
- .Button.round > .material-icons {
400
- margin: 0px;
347
+ @keyframes anticlockwise {
348
+ 0% {
349
+ -webkit-transform: rotate(90deg);
350
+ }
351
+ 100% {
352
+ -webkit-transform: translateX(0px);
353
+ }
401
354
  }
402
-
403
- .Button .ripple {
404
- position: absolute;
405
- background: rgba(0, 0, 0, 0.1);
406
- border-radius: 100%;
407
- transform: scale(0);
408
- pointer-events: none;
409
- transition: opacity 0.2s ease-out;
355
+ .AutocompleteSelect > .input {
356
+ width: 100%;
410
357
  }
411
358
 
412
- .Button .ripple.show {
413
- animation: ripple 0.35s ease-out;
359
+ .AutocompleteSelect .Scrollable {
360
+ padding-right: 0;
361
+ min-width: 100%;
414
362
  }
415
363
 
416
- .Button:active .ripple.showed {
417
- opacity: 1;
364
+ .AutocompleteSelect.inline-multiple > .label {
365
+ top: -12px;
418
366
  }
419
367
 
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;
368
+ .AutocompleteSelect.inline-multiple > .selected {
369
+ flex-flow: row wrap;
427
370
  }
428
371
 
429
- .Button .ripple.showed {
430
- transform: scale(2);
431
- opacity: 0;
372
+ .AutocompleteSelect.multiple-mini-inline {
373
+ height: 42px;
432
374
  }
433
375
 
434
- @keyframes ripple {
435
- to {
436
- transform: scale(2);
437
- }
438
- }
439
- @keyframes resize {
440
- to {
441
- transform: scale(0.9);
442
- }
376
+ .AutocompleteSelect.multiple-mini-inline > .label {
377
+ cursor: pointer;
378
+ width: 100%;
379
+ margin-left: -10px;
380
+ padding: 10px;
381
+ box-sizing: border-box;
382
+ top: 0;
443
383
  }
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);
384
+
385
+ .AutocompleteSelect.multiple-mini-inline > .label.active {
386
+ padding: 0 10px;
446
387
  }
447
388
 
448
- .Button.raised:hover {
449
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
389
+ .AutocompleteSelect.multiple-mini-inline > .selected {
390
+ width: 250px;
450
391
  }
451
392
 
452
- .Button.raised:active {
453
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
393
+ .AutocompleteSelect.multiple-mini-inline > .input {
394
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
395
+ position: absolute;
396
+ top: 38px;
397
+ z-index: 2;
398
+ background-color: white;
399
+ min-width: 130%;
454
400
  }
455
401
 
456
- .Button.disabled {
457
- box-shadow: none;
458
- background: #D9D9D9;
459
- color: #999999;
402
+ .AutocompleteSelect.multiple-mini-inline > .input .TextField {
403
+ padding-left: 10px;
404
+ padding-right: 10px;
405
+ width: 100%;
406
+ box-sizing: border-box;
460
407
  }
461
408
 
462
- .Button.disabled:hover {
463
- background-color: #cccccc;
409
+ .AutocompleteSelect.multiple-mini-inline > .input.hidden {
410
+ opacity: 0;
411
+ visibility: hidden;
464
412
  }
465
413
 
466
- .Button::-moz-focus-inner {
467
- border: 0;
414
+ .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
415
+ margin-top: 0;
468
416
  }
469
417
 
470
- .CircleProgress {
471
- width: 48px;
472
- height: 48px;
418
+ .AutocompleteSelect .TextField {
419
+ margin-top: 8px;
473
420
  }
474
421
 
475
- .CircleProgress .line {
476
- stroke-width: 2px;
477
- stroke: black;
478
- stroke-linecap: square;
479
- fill: none;
480
- transition: stroke-dashoffset 0.2s ease;
422
+ .AutocompleteSelect .TextField input {
423
+ font-size: 14px;
481
424
  }
482
425
 
483
- .Checkbox {
484
- position: relative;
485
- white-space: pre;
426
+ .AutocompleteSelect > .label {
427
+ position: absolute;
428
+ transition: all 0.2s ease;
429
+ font-family: Roboto, sans-serif;
430
+ font-size: 14px;
431
+ color: rgba(0, 0, 0, 0.5);
432
+ z-index: 1;
433
+ cursor: text;
434
+ user-select: none;
435
+ left: 4px;
436
+ top: 12px;
486
437
  }
487
438
 
488
- .Checkbox *, .Checkbox *:before, .Checkbox *:after {
489
- box-sizing: border-box;
439
+ .AutocompleteSelect > .label.active {
440
+ font-size: 10px;
441
+ top: 2px;
490
442
  }
491
443
 
492
- .Checkbox label {
493
- font-family: Roboto, sans-serif;
494
- font-size: 14px;
495
- color: #1e252d;
496
- cursor: pointer;
444
+ .AutocompleteSelect > .label.active .arrow {
445
+ border-width: 4px 4px 0 4px;
446
+ margin-bottom: 1px;
497
447
  }
498
448
 
499
- .Checkbox label:before, .Checkbox label:after {
500
- content: "";
501
- position: absolute;
502
- left: 0;
503
- top: 0;
449
+ .AutocompleteSelect > .label .arrow {
450
+ width: 0;
451
+ height: 0;
452
+ border-style: solid;
453
+ border-width: 5px 5px 0 5px;
454
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
455
+ display: inline-block;
456
+ margin-left: 5px;
457
+ margin-bottom: 2px;
458
+ transition: all 0.2s ease;
504
459
  }
505
460
 
506
- .Checkbox label:before {
507
- width: 20px;
508
- height: 20px;
509
- background: #fff;
510
- border: 2px solid #252525;
511
- border-radius: 2px;
461
+ .AutocompleteSelect > .selected {
462
+ margin-top: 8px;
463
+ display: flex;
512
464
  cursor: pointer;
513
- transition: background 0.3s;
514
465
  }
515
466
 
516
- .Checkbox input[type=checkbox] {
517
- outline: 0;
518
- margin-right: 10px;
519
- visibility: hidden;
467
+ .AutocompleteSelect > .selected > .reset {
468
+ min-width: 36px;
469
+ max-width: 36px;
470
+ position: absolute;
471
+ right: 0;
472
+ top: 0;
473
+ background-color: white;
520
474
  }
521
475
 
522
- .Checkbox input[type=checkbox]:checked + label:before {
523
- background: #4AC263;
524
- border: none;
476
+ .AutocompleteSelect > .selected > .reset .material-icons {
477
+ margin: 0;
478
+ color: #BFBFBF;
479
+ font-size: 20px;
525
480
  }
526
481
 
527
- .Checkbox input[type=checkbox]:checked + label:after {
528
- transform: rotate(-45deg);
529
- top: 6px;
530
- left: 4px;
531
- width: 12px;
532
- height: 6px;
533
- border: 2px solid #fff;
534
- border-top-style: none;
535
- border-right-style: none;
482
+ .AutocompleteSelect > .selected.nolabel {
483
+ margin-top: 0px;
484
+ border-bottom: 1px solid #e5e3e3;
536
485
  }
537
486
 
538
- .Checkbox input[type=checkbox]:disabled + label {
539
- color: gray;
487
+ .AutocompleteSelect > .selected.nolabel .DummyChild {
488
+ display: inline-flex;
489
+ align-items: center;
490
+ flex-grow: 1;
491
+ font-size: 16px;
492
+ margin: 0px 10px;
493
+ margin-bottom: 5px;
494
+ height: 19px;
540
495
  }
541
496
 
542
- .Checkbox input[type=checkbox]:disabled + label:before {
543
- border-color: rgba(0, 0, 0, 0.26);
497
+ .AutocompleteSelect > .selected.nolabel .arrow {
498
+ width: 0;
499
+ height: 0;
500
+ border-style: solid;
501
+ border-width: 5px 5px 0 5px;
502
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
503
+ display: inline-block;
504
+ transition: all 0.2s ease;
505
+ margin: 0px 17px 3px 5px;
544
506
  }
545
507
 
546
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
547
- background: rgba(0, 0, 0, 0.26);
508
+ .AutocompleteSelect > .selected.inline {
509
+ font-size: 14px;
510
+ font-family: Roboto, sans-serif;
511
+ color: #1e252d;
512
+ text-overflow: ellipsis;
513
+ white-space: nowrap;
514
+ overflow: hidden;
515
+ display: flex;
516
+ align-items: center;
548
517
  }
549
518
 
550
- .DNDContainer {
551
- position: relative;
519
+ .AutocompleteSelect > .selected.clickable {
520
+ overflow: hidden;
521
+ cursor: pointer;
522
+ padding: 10px;
523
+ margin-left: -10px;
524
+ margin-right: -10px;
552
525
  }
553
526
 
554
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
555
- cursor: pointer;
527
+ .AutocompleteSelect.inlineSelected {
528
+ flex-flow: row wrap;
529
+ justify-content: flex-start;
556
530
  }
557
531
 
558
- .DNDContainer .Draggable.placeholder {
559
- opacity: 0.2;
532
+ .AutocompleteSelect.inlineSelected.hasSelected {
533
+ padding-top: 7px;
560
534
  }
561
535
 
562
- .DNDContainer .Draggable.copy {
563
- position: absolute;
564
- box-sizing: border-box;
565
- will-change: transform;
566
- opacity: 0;
536
+ .AutocompleteSelect.inlineSelected > .label {
537
+ width: 100%;
538
+ height: 100%;
567
539
  }
568
540
 
569
- .DNDContainer .Draggable.dragged {
570
- z-index: 10;
541
+ .AutocompleteSelect.inlineSelected > .label.active {
542
+ z-index: 0;
571
543
  }
572
544
 
573
- .DNDContainer .overlay {
574
- position: absolute;
575
- top: 0;
576
- left: 0;
577
- right: 0;
578
- bottom: 0;
579
- pointer-events: none;
545
+ .AutocompleteSelect.inlineSelected .input {
546
+ width: unset;
547
+ flex-basis: 50px;
548
+ flex-grow: 1;
580
549
  }
581
550
 
582
- .DialogModal {
583
- overflow: hidden;
551
+ .AutocompleteSelect.inlineSelected .input::after {
552
+ content: attr(data-value);
553
+ visibility: hidden;
554
+ white-space: pre;
555
+ font: inherit;
556
+ min-width: 2px;
557
+ border: 0;
558
+ margin: 0;
559
+ outline: 0;
560
+ float: left;
561
+ display: inline-block;
562
+ margin-top: -24px;
563
+ font-size: 14px;
564
+ padding: 2px;
584
565
  }
585
566
 
586
- .DialogModal .content {
587
- top: 20vh;
567
+ .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
568
+ margin-top: 7px;
588
569
  }
589
570
 
590
- .Dialog {
591
- background-color: white;
592
- min-width: 460px;
593
- max-width: 40vw;
594
- padding: 15px;
571
+ .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
572
+ cursor: pointer;
573
+ margin: 5px 10px 5px 0px;
574
+ display: inline-flex;
575
+ flex-flow: row wrap;
576
+ height: 30px;
577
+ align-items: center;
578
+ background-color: #f0f0f0;
579
+ border-radius: 30px;
580
+ position: relative;
581
+ font-family: Roboto, sans-serif;
582
+ font-size: 14px;
583
+ color: #1e252d;
595
584
  }
596
585
 
597
- .Dialog .title {
598
- margin-bottom: 15px;
599
- padding: 20px 50px 0px 30px;
600
- font-size: 1.25rem;
601
- line-height: 2rem;
602
- font-weight: 400;
603
- letter-spacing: 0.0125em;
586
+ .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
587
+ padding-left: 35px;
588
+ padding-right: 10px;
604
589
  }
605
590
 
606
- .Dialog .description {
607
- color: rgba(0, 0, 0, 0.54);
608
- font-size: 1rem;
609
- line-height: 1.5rem;
610
- font-weight: 400;
611
- letter-spacing: 0.03125em;
612
- margin-top: 20px;
613
- padding: 0 24px 24px;
591
+ .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
592
+ cursor: pointer;
593
+ min-width: 30px;
594
+ width: 30px;
595
+ height: 30px;
596
+ opacity: 0;
597
+ position: absolute;
598
+ top: 0px;
599
+ left: 0px;
600
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
601
+ background-color: deepskyblue;
602
+ color: white;
603
+ border-radius: 30px;
604
+ display: flex;
605
+ flex-flow: row;
606
+ justify-content: center;
607
+ align-items: center;
608
+ animation: anticlockwise 0.15s linear;
614
609
  }
615
610
 
616
- .Dialog > div.row {
617
- margin-bottom: 15px;
611
+ .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
612
+ font-size: 22px;
618
613
  }
619
614
 
620
- .Dialog > div.row:last-child {
621
- margin-bottom: 0;
615
+ .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
616
+ width: 30px;
617
+ height: 30px;
618
+ opacity: 1;
619
+ animation: clockwise 0.15s linear;
620
+ overflow: hidden;
621
+ position: absolute;
622
622
  }
623
623
 
624
624
  .DropFileInput {
@@ -708,30 +708,6 @@
708
708
  z-index: 1;
709
709
  }
710
710
 
711
- .Button.FloatingActionButton {
712
- position: absolute;
713
- right: 16px;
714
- bottom: 16px;
715
- width: 56px;
716
- height: 56px;
717
- padding: 16px;
718
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
719
- }
720
-
721
- .Button.FloatingActionButton.raised {
722
- 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);
723
- }
724
-
725
- .Button.FloatingActionButton.mini {
726
- width: 40px;
727
- height: 40px;
728
- padding: 8px;
729
- }
730
-
731
- .Button.FloatingActionButton.hidden {
732
- bottom: -100px;
733
- }
734
-
735
711
  .FilteredList {
736
712
  max-height: 250px;
737
713
  position: relative;
@@ -882,6 +858,30 @@
882
858
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
883
859
  }
884
860
 
861
+ .Button.FloatingActionButton {
862
+ position: absolute;
863
+ right: 16px;
864
+ bottom: 16px;
865
+ width: 56px;
866
+ height: 56px;
867
+ padding: 16px;
868
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
869
+ }
870
+
871
+ .Button.FloatingActionButton.raised {
872
+ 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);
873
+ }
874
+
875
+ .Button.FloatingActionButton.mini {
876
+ width: 40px;
877
+ height: 40px;
878
+ padding: 8px;
879
+ }
880
+
881
+ .Button.FloatingActionButton.hidden {
882
+ bottom: -100px;
883
+ }
884
+
885
885
  .Modal {
886
886
  display: block;
887
887
  position: fixed;
@@ -1400,52 +1400,219 @@
1400
1400
  transition: all 0.3s ease;
1401
1401
  }
1402
1402
 
1403
- .Switch .switch-label:before {
1404
- left: 1px;
1405
- width: 34px;
1406
- height: 14px;
1407
- background-color: #9E9E9E;
1408
- border-radius: 8px;
1403
+ .Switch .switch-label:before {
1404
+ left: 1px;
1405
+ width: 34px;
1406
+ height: 14px;
1407
+ background-color: #9E9E9E;
1408
+ border-radius: 8px;
1409
+ }
1410
+
1411
+ .Switch .switch-label:after {
1412
+ left: 0;
1413
+ width: 20px;
1414
+ height: 20px;
1415
+ background-color: #FAFAFA;
1416
+ border-radius: 50%;
1417
+ 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);
1418
+ }
1419
+
1420
+ .Switch .switch-label .toggle--on {
1421
+ display: none;
1422
+ }
1423
+
1424
+ .Switch .switch-label .toggle--off {
1425
+ display: inline-block;
1426
+ }
1427
+
1428
+ .Switch .switch-label .label {
1429
+ margin-right: 5px;
1430
+ }
1431
+
1432
+ .Switch .switch-input:checked + .switch-label:before {
1433
+ background-color: #A5D6A7;
1434
+ }
1435
+
1436
+ .Switch .switch-input:checked + .switch-label:after {
1437
+ background-color: #4CAF50;
1438
+ transform: translate(80%, -50%);
1439
+ }
1440
+
1441
+ .Switch .switch-input:checked + .switch-label .toggle--on {
1442
+ display: inline-block;
1443
+ }
1444
+
1445
+ .Switch .switch-input:checked + .switch-label .toggle--off {
1446
+ display: none;
1447
+ }
1448
+
1449
+ .Table {
1450
+ font-family: Roboto, sans-serif;
1451
+ font-size: 14px;
1452
+ color: #1e252d;
1453
+ border-spacing: 0;
1454
+ border-collapse: collapse;
1455
+ width: 100%;
1456
+ position: relative;
1457
+ }
1458
+
1459
+ .Table td, .Table th {
1460
+ padding: 5px;
1461
+ font-weight: 500;
1462
+ color: #2e2e2e;
1463
+ }
1464
+
1465
+ .Table td {
1466
+ height: 48px;
1467
+ border-bottom: 1px solid #ebebeb;
1468
+ border-top: 1px solid #ebebeb;
1469
+ }
1470
+
1471
+ .Table td:first-child {
1472
+ padding-left: 45px;
1473
+ }
1474
+
1475
+ .Table td:last-child {
1476
+ padding-right: 45px;
1477
+ }
1478
+
1479
+ .Table th {
1480
+ color: #808080;
1481
+ height: 55px;
1482
+ padding: 0px;
1483
+ }
1484
+
1485
+ .Table th .sortable {
1486
+ cursor: pointer;
1487
+ }
1488
+
1489
+ .Table th .sortable.active {
1490
+ font-weight: bold;
1491
+ }
1492
+
1493
+ .Table th .sortable.active .material-icons {
1494
+ font-size: 16px;
1495
+ }
1496
+
1497
+ .Table th .sortable.false {
1498
+ padding-right: 22px;
1499
+ }
1500
+
1501
+ .Table th:first-child .hidden, .Table th:first-child .fixed {
1502
+ padding-left: 45px;
1503
+ }
1504
+
1505
+ .Table th:last-child .hidden, .Table th:last-child .fixed {
1506
+ padding-right: 45px;
1507
+ }
1508
+
1509
+ .Table th .hidden {
1510
+ color: transparent;
1511
+ height: 0px;
1512
+ padding: 5px;
1513
+ }
1514
+
1515
+ .Table th .fixed {
1516
+ font-weight: normal;
1517
+ display: flex;
1518
+ flex-flow: row;
1519
+ justify-items: center;
1520
+ align-items: center;
1521
+ text-align: left;
1522
+ height: 56px;
1523
+ padding: 0px 5px;
1524
+ background-color: white;
1525
+ position: absolute;
1526
+ top: 0px;
1527
+ z-index: 1;
1528
+ box-sizing: border-box;
1529
+ border-bottom: 1px solid #ebebeb;
1530
+ border-top: 1px solid #ebebeb;
1531
+ }
1532
+
1533
+ .Table tbody tr:hover {
1534
+ background-color: #f2f2f2;
1535
+ }
1536
+
1537
+ .Table tbody tr.disabled td {
1538
+ color: #93a4b7;
1409
1539
  }
1410
1540
 
1411
- .Switch .switch-label:after {
1412
- left: 0;
1413
- width: 20px;
1414
- height: 20px;
1415
- background-color: #FAFAFA;
1416
- border-radius: 50%;
1417
- 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);
1541
+ .Table .ro {
1542
+ color: #47576a;
1418
1543
  }
1419
1544
 
1420
- .Switch .switch-label .toggle--on {
1421
- display: none;
1545
+ .Table .editable {
1546
+ cursor: pointer;
1422
1547
  }
1423
1548
 
1424
- .Switch .switch-label .toggle--off {
1425
- display: inline-block;
1549
+ .Table .editable > .TextField {
1550
+ height: 20px !important;
1551
+ margin: 0px;
1552
+ position: relative;
1553
+ display: block;
1426
1554
  }
1427
1555
 
1428
- .Switch .switch-label .label {
1429
- margin-right: 5px;
1556
+ .Table .editable > .TextField input {
1557
+ width: 100%;
1558
+ height: 20px;
1559
+ padding: 0px;
1560
+ background-color: #f0f0f0;
1430
1561
  }
1431
1562
 
1432
- .Switch .switch-input:checked + .switch-label:before {
1433
- background-color: #A5D6A7;
1563
+ .SpinningProgress {
1564
+ width: 48px;
1565
+ height: 48px;
1566
+ position: relative;
1567
+ margin: 0 auto;
1434
1568
  }
1435
1569
 
1436
- .Switch .switch-input:checked + .switch-label:after {
1437
- background-color: #4CAF50;
1438
- transform: translate(80%, -50%);
1570
+ .SpinningProgress:before {
1571
+ content: "";
1572
+ display: block;
1573
+ padding-top: 100%;
1439
1574
  }
1440
1575
 
1441
- .Switch .switch-input:checked + .switch-label .toggle--on {
1442
- display: inline-block;
1576
+ .SpinningProgress .circular {
1577
+ animation: rotate 2s linear infinite;
1578
+ height: 100%;
1579
+ transform-origin: center center;
1580
+ width: 100%;
1581
+ position: absolute;
1582
+ top: 0;
1583
+ bottom: 0;
1584
+ left: 0;
1585
+ right: 0;
1586
+ margin: auto;
1443
1587
  }
1444
1588
 
1445
- .Switch .switch-input:checked + .switch-label .toggle--off {
1446
- display: none;
1589
+ .SpinningProgress .line {
1590
+ stroke: black;
1591
+ stroke-width: 2px;
1592
+ stroke-dasharray: 1, 96;
1593
+ stroke-dashoffset: 0;
1594
+ animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1447
1595
  }
1448
1596
 
1597
+ @keyframes rotate {
1598
+ 100% {
1599
+ transform: rotate(360deg);
1600
+ }
1601
+ }
1602
+ @keyframes dash {
1603
+ 0% {
1604
+ stroke-dasharray: 1, 96;
1605
+ stroke-dashoffset: 0;
1606
+ }
1607
+ 50% {
1608
+ stroke-dasharray: 43, 96;
1609
+ stroke-dashoffset: -17px;
1610
+ }
1611
+ 100% {
1612
+ stroke-dasharray: 43, 96;
1613
+ stroke-dashoffset: -53px;
1614
+ }
1615
+ }
1449
1616
  .TextField {
1450
1617
  position: relative;
1451
1618
  width: 100%;
@@ -1589,59 +1756,6 @@
1589
1756
  animation-name: shake;
1590
1757
  }
1591
1758
 
1592
- .SpinningProgress {
1593
- width: 48px;
1594
- height: 48px;
1595
- position: relative;
1596
- margin: 0 auto;
1597
- }
1598
-
1599
- .SpinningProgress:before {
1600
- content: "";
1601
- display: block;
1602
- padding-top: 100%;
1603
- }
1604
-
1605
- .SpinningProgress .circular {
1606
- animation: rotate 2s linear infinite;
1607
- height: 100%;
1608
- transform-origin: center center;
1609
- width: 100%;
1610
- position: absolute;
1611
- top: 0;
1612
- bottom: 0;
1613
- left: 0;
1614
- right: 0;
1615
- margin: auto;
1616
- }
1617
-
1618
- .SpinningProgress .line {
1619
- stroke: black;
1620
- stroke-width: 2px;
1621
- stroke-dasharray: 1, 96;
1622
- stroke-dashoffset: 0;
1623
- animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1624
- }
1625
-
1626
- @keyframes rotate {
1627
- 100% {
1628
- transform: rotate(360deg);
1629
- }
1630
- }
1631
- @keyframes dash {
1632
- 0% {
1633
- stroke-dasharray: 1, 96;
1634
- stroke-dashoffset: 0;
1635
- }
1636
- 50% {
1637
- stroke-dasharray: 43, 96;
1638
- stroke-dashoffset: -17px;
1639
- }
1640
- 100% {
1641
- stroke-dasharray: 43, 96;
1642
- stroke-dashoffset: -53px;
1643
- }
1644
- }
1645
1759
  .ScrollableTable .Scrollable .scrollbar {
1646
1760
  top: 56px;
1647
1761
  }
@@ -1666,118 +1780,4 @@
1666
1780
 
1667
1781
  .DNDContainer .DroppableList.resetting .Draggable {
1668
1782
  transition: transform 0.1s ease-in;
1669
- }
1670
-
1671
- .Table {
1672
- font-family: Roboto, sans-serif;
1673
- font-size: 14px;
1674
- color: #1e252d;
1675
- border-spacing: 0;
1676
- border-collapse: collapse;
1677
- width: 100%;
1678
- position: relative;
1679
- }
1680
-
1681
- .Table td, .Table th {
1682
- padding: 5px;
1683
- font-weight: 500;
1684
- color: #2e2e2e;
1685
- }
1686
-
1687
- .Table td {
1688
- height: 48px;
1689
- border-bottom: 1px solid #ebebeb;
1690
- border-top: 1px solid #ebebeb;
1691
- }
1692
-
1693
- .Table td:first-child {
1694
- padding-left: 45px;
1695
- }
1696
-
1697
- .Table td:last-child {
1698
- padding-right: 45px;
1699
- }
1700
-
1701
- .Table th {
1702
- color: #808080;
1703
- height: 55px;
1704
- padding: 0px;
1705
- }
1706
-
1707
- .Table th .sortable {
1708
- cursor: pointer;
1709
- }
1710
-
1711
- .Table th .sortable.active {
1712
- font-weight: bold;
1713
- }
1714
-
1715
- .Table th .sortable.active .material-icons {
1716
- font-size: 16px;
1717
- }
1718
-
1719
- .Table th .sortable.false {
1720
- padding-right: 22px;
1721
- }
1722
-
1723
- .Table th:first-child .hidden, .Table th:first-child .fixed {
1724
- padding-left: 45px;
1725
- }
1726
-
1727
- .Table th:last-child .hidden, .Table th:last-child .fixed {
1728
- padding-right: 45px;
1729
- }
1730
-
1731
- .Table th .hidden {
1732
- color: transparent;
1733
- height: 0px;
1734
- padding: 5px;
1735
- }
1736
-
1737
- .Table th .fixed {
1738
- font-weight: normal;
1739
- display: flex;
1740
- flex-flow: row;
1741
- justify-items: center;
1742
- align-items: center;
1743
- text-align: left;
1744
- height: 56px;
1745
- padding: 0px 5px;
1746
- background-color: white;
1747
- position: absolute;
1748
- top: 0px;
1749
- z-index: 1;
1750
- box-sizing: border-box;
1751
- border-bottom: 1px solid #ebebeb;
1752
- border-top: 1px solid #ebebeb;
1753
- }
1754
-
1755
- .Table tbody tr:hover {
1756
- background-color: #f2f2f2;
1757
- }
1758
-
1759
- .Table tbody tr.disabled td {
1760
- color: #93a4b7;
1761
- }
1762
-
1763
- .Table .ro {
1764
- color: #47576a;
1765
- }
1766
-
1767
- .Table .editable {
1768
- cursor: pointer;
1769
- }
1770
-
1771
- .Table .editable > .TextField {
1772
- height: 20px !important;
1773
- margin: 0px;
1774
- position: relative;
1775
- display: block;
1776
- }
1777
-
1778
- .Table .editable > .TextField input {
1779
- width: 100%;
1780
- height: 20px;
1781
- padding: 0px;
1782
- background-color: #f0f0f0;
1783
1783
  }