react-ui-basics 0.0.138 → 0.0.139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/bundle.css CHANGED
@@ -7,618 +7,618 @@
7
7
  opacity: 1;
8
8
  }
9
9
 
10
- .Button {
11
- position: relative;
12
- min-width: 64px;
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;
10
+ .AutocompleteSelect {
25
11
  display: inline-flex;
12
+ flex-flow: column;
26
13
  justify-content: center;
27
- align-items: center;
28
- cursor: pointer;
29
- overflow: hidden;
14
+ position: relative;
15
+ min-width: 250px;
16
+ min-height: 36px;
30
17
  user-select: none;
31
- border-radius: 3px;
32
- transition: all 0.2s ease;
33
18
  }
34
19
 
35
- .Button.flat {
36
- background-color: transparent;
20
+ @keyframes clockwise {
21
+ 0% {
22
+ -webkit-transform: rotate(-90deg);
23
+ }
24
+ 100% {
25
+ -webkit-transform: translateX(0px);
26
+ }
37
27
  }
38
-
39
- .Button.flat:hover {
40
- background-color: rgba(0, 0, 0, 0.05);
28
+ @keyframes anticlockwise {
29
+ 0% {
30
+ -webkit-transform: rotate(90deg);
31
+ }
32
+ 100% {
33
+ -webkit-transform: translateX(0px);
34
+ }
41
35
  }
42
-
43
- .Button.green {
44
- background-color: #43a047;
45
- color: white;
36
+ .AutocompleteSelect > .input {
37
+ width: 100%;
46
38
  }
47
39
 
48
- .Button.green:hover {
49
- background-color: #3b8e3f;
40
+ .AutocompleteSelect .Scrollable {
41
+ padding-right: 0;
42
+ min-width: 100%;
50
43
  }
51
44
 
52
- .Button.blue {
53
- background-color: #039be5;
54
- color: white;
45
+ .AutocompleteSelect.inline-multiple > .label {
46
+ top: -12px;
55
47
  }
56
48
 
57
- .Button.blue:hover {
58
- background-color: #038acc;
49
+ .AutocompleteSelect.inline-multiple > .selected {
50
+ flex-flow: row wrap;
59
51
  }
60
52
 
61
- .Button.red {
62
- background-color: #e53935;
63
- color: white;
53
+ .AutocompleteSelect.multiple-mini-inline {
54
+ height: 42px;
64
55
  }
65
56
 
66
- .Button.red:hover {
67
- background-color: #e2231e;
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
64
  }
69
65
 
70
- .Button.black {
71
- background-color: #1e252d;
72
- color: white;
66
+ .AutocompleteSelect.multiple-mini-inline > .label.active {
67
+ padding: 0 10px;
73
68
  }
74
69
 
75
- .Button.black:hover {
76
- background-color: #14181e;
70
+ .AutocompleteSelect.multiple-mini-inline > .selected {
71
+ width: 250px;
77
72
  }
78
73
 
79
- .Button.gray {
80
- background: #D9D9D9;
81
- color: #999999;
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%;
82
81
  }
83
82
 
84
- .Button.gray:hover {
85
- background-color: #cccccc;
83
+ .AutocompleteSelect.multiple-mini-inline > .input .TextField {
84
+ padding-left: 10px;
85
+ padding-right: 10px;
86
+ width: 100%;
87
+ box-sizing: border-box;
86
88
  }
87
89
 
88
- .Button.small {
89
- padding: 0px 8px;
90
- min-height: 16px;
91
- min-width: 16px;
90
+ .AutocompleteSelect.multiple-mini-inline > .input.hidden {
91
+ opacity: 0;
92
+ visibility: hidden;
92
93
  }
93
94
 
94
- .Button > .material-icons {
95
- margin-right: 10px;
95
+ .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
96
+ margin-top: 0;
96
97
  }
97
98
 
98
- .Button.round {
99
- padding: 0px;
100
- min-width: 36px;
101
- border-radius: 50%;
99
+ .AutocompleteSelect .TextField {
100
+ margin-top: 8px;
102
101
  }
103
102
 
104
- .Button.round > .material-icons {
105
- margin: 0px;
103
+ .AutocompleteSelect .TextField input {
104
+ font-size: 14px;
106
105
  }
107
106
 
108
- .Button .ripple {
107
+ .AutocompleteSelect > .label {
109
108
  position: absolute;
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;
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;
115
118
  }
116
119
 
117
- .Button .ripple.show {
118
- animation: ripple 0.35s ease-out;
120
+ .AutocompleteSelect > .label.active {
121
+ font-size: 10px;
122
+ top: 2px;
119
123
  }
120
124
 
121
- .Button:active .ripple.showed {
122
- opacity: 1;
125
+ .AutocompleteSelect > .label.active .arrow {
126
+ border-width: 4px 4px 0 4px;
127
+ margin-bottom: 1px;
123
128
  }
124
129
 
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;
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;
132
140
  }
133
141
 
134
- .Button .ripple.showed {
135
- transform: scale(2);
136
- opacity: 0;
142
+ .AutocompleteSelect > .selected {
143
+ margin-top: 8px;
144
+ display: flex;
145
+ cursor: pointer;
137
146
  }
138
147
 
139
- @keyframes ripple {
140
- to {
141
- transform: scale(2);
142
- }
143
- }
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);
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;
151
155
  }
152
156
 
153
- .Button.raised:hover {
154
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
157
+ .AutocompleteSelect > .selected > .reset .material-icons {
158
+ margin: 0;
159
+ color: #BFBFBF;
160
+ font-size: 20px;
155
161
  }
156
162
 
157
- .Button.raised:active {
158
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
163
+ .AutocompleteSelect > .selected.nolabel {
164
+ margin-top: 0px;
165
+ border-bottom: 1px solid #e5e3e3;
159
166
  }
160
167
 
161
- .Button.disabled {
162
- box-shadow: none;
163
- background: #D9D9D9;
164
- color: #999999;
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;
165
176
  }
166
177
 
167
- .Button.disabled:hover {
168
- background-color: #cccccc;
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;
169
187
  }
170
188
 
171
- .Button::-moz-focus-inner {
172
- border: 0;
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;
173
198
  }
174
199
 
175
- .Checkbox {
176
- position: relative;
177
- white-space: pre;
200
+ .AutocompleteSelect > .selected.clickable {
201
+ overflow: hidden;
202
+ cursor: pointer;
203
+ padding: 10px;
204
+ margin-left: -10px;
205
+ margin-right: -10px;
178
206
  }
179
207
 
180
- .Checkbox *, .Checkbox *:before, .Checkbox *:after {
181
- box-sizing: border-box;
208
+ .AutocompleteSelect.inlineSelected {
209
+ flex-flow: row wrap;
210
+ justify-content: flex-start;
182
211
  }
183
212
 
184
- .Checkbox label {
185
- font-family: Roboto, sans-serif;
186
- font-size: 14px;
187
- color: #1e252d;
188
- cursor: pointer;
213
+ .AutocompleteSelect.inlineSelected.hasSelected {
214
+ padding-top: 7px;
189
215
  }
190
216
 
191
- .Checkbox label:before, .Checkbox label:after {
192
- content: "";
193
- position: absolute;
194
- left: 0;
195
- top: 0;
217
+ .AutocompleteSelect.inlineSelected > .label {
218
+ width: 100%;
219
+ height: 100%;
196
220
  }
197
221
 
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;
222
+ .AutocompleteSelect.inlineSelected > .label.active {
223
+ z-index: 0;
206
224
  }
207
225
 
208
- .Checkbox input[type=checkbox] {
209
- outline: 0;
210
- margin-right: 10px;
211
- visibility: hidden;
226
+ .AutocompleteSelect.inlineSelected .input {
227
+ width: unset;
228
+ flex-basis: 50px;
229
+ flex-grow: 1;
212
230
  }
213
231
 
214
- .Checkbox input[type=checkbox]:checked + label:before {
215
- background: #4AC263;
216
- border: none;
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;
217
246
  }
218
247
 
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;
248
+ .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
249
+ margin-top: 7px;
228
250
  }
229
251
 
230
- .Checkbox input[type=checkbox]:disabled + label {
231
- color: gray;
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;
232
265
  }
233
266
 
234
- .Checkbox input[type=checkbox]:disabled + label:before {
235
- border-color: rgba(0, 0, 0, 0.26);
267
+ .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
268
+ padding-left: 35px;
269
+ padding-right: 10px;
236
270
  }
237
271
 
238
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
239
- background: rgba(0, 0, 0, 0.26);
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;
240
290
  }
241
291
 
242
- .CircleProgress {
243
- width: 48px;
244
- height: 48px;
292
+ .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
293
+ font-size: 22px;
245
294
  }
246
295
 
247
- .CircleProgress .line {
248
- stroke-width: 2px;
249
- stroke: black;
250
- stroke-linecap: square;
251
- fill: none;
252
- transition: stroke-dashoffset 0.2s ease;
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;
253
303
  }
254
304
 
255
- .DialogModal {
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;
256
324
  overflow: hidden;
325
+ user-select: none;
326
+ border-radius: 3px;
327
+ transition: all 0.2s ease;
257
328
  }
258
329
 
259
- .DialogModal .content {
260
- top: 20vh;
330
+ .Button.flat {
331
+ background-color: transparent;
261
332
  }
262
333
 
263
- .Dialog {
264
- background-color: white;
265
- min-width: 460px;
266
- max-width: 40vw;
267
- padding: 15px;
334
+ .Button.flat:hover {
335
+ background-color: rgba(0, 0, 0, 0.05);
268
336
  }
269
337
 
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;
338
+ .Button.green {
339
+ background-color: #43a047;
340
+ color: white;
277
341
  }
278
342
 
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;
343
+ .Button.green:hover {
344
+ background-color: #3b8e3f;
287
345
  }
288
346
 
289
- .Dialog > div.row {
290
- margin-bottom: 15px;
347
+ .Button.blue {
348
+ background-color: #039be5;
349
+ color: white;
291
350
  }
292
351
 
293
- .Dialog > div.row:last-child {
294
- margin-bottom: 0;
352
+ .Button.blue:hover {
353
+ background-color: #038acc;
295
354
  }
296
355
 
297
- .DNDContainer {
298
- position: relative;
356
+ .Button.red {
357
+ background-color: #e53935;
358
+ color: white;
299
359
  }
300
360
 
301
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
302
- cursor: pointer;
361
+ .Button.red:hover {
362
+ background-color: #e2231e;
303
363
  }
304
364
 
305
- .DNDContainer .Draggable.placeholder {
306
- opacity: 0.2;
365
+ .Button.black {
366
+ background-color: #1e252d;
367
+ color: white;
307
368
  }
308
369
 
309
- .DNDContainer .Draggable.copy {
310
- position: absolute;
311
- box-sizing: border-box;
312
- will-change: transform;
313
- opacity: 0;
370
+ .Button.black:hover {
371
+ background-color: #14181e;
314
372
  }
315
373
 
316
- .DNDContainer .Draggable.dragged {
317
- z-index: 10;
374
+ .Button.gray {
375
+ background: #D9D9D9;
376
+ color: #999999;
318
377
  }
319
378
 
320
- .DNDContainer .overlay {
321
- position: absolute;
322
- top: 0;
323
- left: 0;
324
- right: 0;
325
- bottom: 0;
326
- pointer-events: none;
379
+ .Button.gray:hover {
380
+ background-color: #cccccc;
327
381
  }
328
382
 
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;
383
+ .Button.small {
384
+ padding: 0px 8px;
385
+ min-height: 16px;
386
+ min-width: 16px;
337
387
  }
338
388
 
339
- @keyframes clockwise {
340
- 0% {
341
- -webkit-transform: rotate(-90deg);
342
- }
343
- 100% {
344
- -webkit-transform: translateX(0px);
345
- }
346
- }
347
- @keyframes anticlockwise {
348
- 0% {
349
- -webkit-transform: rotate(90deg);
350
- }
351
- 100% {
352
- -webkit-transform: translateX(0px);
353
- }
354
- }
355
- .AutocompleteSelect > .input {
356
- width: 100%;
389
+ .Button > .material-icons {
390
+ margin-right: 10px;
357
391
  }
358
392
 
359
- .AutocompleteSelect .Scrollable {
360
- padding-right: 0;
361
- min-width: 100%;
393
+ .Button.round {
394
+ padding: 0px;
395
+ min-width: 36px;
396
+ border-radius: 50%;
362
397
  }
363
398
 
364
- .AutocompleteSelect.inline-multiple > .label {
365
- top: -12px;
399
+ .Button.round > .material-icons {
400
+ margin: 0px;
366
401
  }
367
402
 
368
- .AutocompleteSelect.inline-multiple > .selected {
369
- flex-flow: row wrap;
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;
370
410
  }
371
411
 
372
- .AutocompleteSelect.multiple-mini-inline {
373
- height: 42px;
412
+ .Button .ripple.show {
413
+ animation: ripple 0.35s ease-out;
374
414
  }
375
415
 
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;
416
+ .Button:active .ripple.showed {
417
+ opacity: 1;
383
418
  }
384
419
 
385
- .AutocompleteSelect.multiple-mini-inline > .label.active {
386
- padding: 0 10px;
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;
387
427
  }
388
428
 
389
- .AutocompleteSelect.multiple-mini-inline > .selected {
390
- width: 250px;
429
+ .Button .ripple.showed {
430
+ transform: scale(2);
431
+ opacity: 0;
391
432
  }
392
433
 
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%;
434
+ @keyframes ripple {
435
+ to {
436
+ transform: scale(2);
437
+ }
438
+ }
439
+ @keyframes resize {
440
+ to {
441
+ transform: scale(0.9);
442
+ }
443
+ }
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);
400
446
  }
401
447
 
402
- .AutocompleteSelect.multiple-mini-inline > .input .TextField {
403
- padding-left: 10px;
404
- padding-right: 10px;
405
- width: 100%;
406
- box-sizing: border-box;
448
+ .Button.raised:hover {
449
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
407
450
  }
408
451
 
409
- .AutocompleteSelect.multiple-mini-inline > .input.hidden {
410
- opacity: 0;
411
- visibility: hidden;
452
+ .Button.raised:active {
453
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
412
454
  }
413
455
 
414
- .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
415
- margin-top: 0;
456
+ .Button.disabled {
457
+ box-shadow: none;
458
+ background: #D9D9D9;
459
+ color: #999999;
416
460
  }
417
461
 
418
- .AutocompleteSelect .TextField {
419
- margin-top: 8px;
462
+ .Button.disabled:hover {
463
+ background-color: #cccccc;
420
464
  }
421
465
 
422
- .AutocompleteSelect .TextField input {
423
- font-size: 14px;
466
+ .Button::-moz-focus-inner {
467
+ border: 0;
424
468
  }
425
469
 
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;
470
+ .CircleProgress {
471
+ width: 48px;
472
+ height: 48px;
437
473
  }
438
474
 
439
- .AutocompleteSelect > .label.active {
440
- font-size: 10px;
441
- top: 2px;
475
+ .CircleProgress .line {
476
+ stroke-width: 2px;
477
+ stroke: black;
478
+ stroke-linecap: square;
479
+ fill: none;
480
+ transition: stroke-dashoffset 0.2s ease;
442
481
  }
443
482
 
444
- .AutocompleteSelect > .label.active .arrow {
445
- border-width: 4px 4px 0 4px;
446
- margin-bottom: 1px;
483
+ .Checkbox {
484
+ position: relative;
485
+ white-space: pre;
447
486
  }
448
487
 
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;
488
+ .Checkbox *, .Checkbox *:before, .Checkbox *:after {
489
+ box-sizing: border-box;
459
490
  }
460
491
 
461
- .AutocompleteSelect > .selected {
462
- margin-top: 8px;
463
- display: flex;
492
+ .Checkbox label {
493
+ font-family: Roboto, sans-serif;
494
+ font-size: 14px;
495
+ color: #1e252d;
464
496
  cursor: pointer;
465
497
  }
466
498
 
467
- .AutocompleteSelect > .selected > .reset {
468
- min-width: 36px;
469
- max-width: 36px;
499
+ .Checkbox label:before, .Checkbox label:after {
500
+ content: "";
470
501
  position: absolute;
471
- right: 0;
502
+ left: 0;
472
503
  top: 0;
473
- background-color: white;
474
504
  }
475
505
 
476
- .AutocompleteSelect > .selected > .reset .material-icons {
477
- margin: 0;
478
- color: #BFBFBF;
479
- font-size: 20px;
506
+ .Checkbox label:before {
507
+ width: 20px;
508
+ height: 20px;
509
+ background: #fff;
510
+ border: 2px solid #252525;
511
+ border-radius: 2px;
512
+ cursor: pointer;
513
+ transition: background 0.3s;
480
514
  }
481
515
 
482
- .AutocompleteSelect > .selected.nolabel {
483
- margin-top: 0px;
484
- border-bottom: 1px solid #e5e3e3;
516
+ .Checkbox input[type=checkbox] {
517
+ outline: 0;
518
+ margin-right: 10px;
519
+ visibility: hidden;
485
520
  }
486
521
 
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;
522
+ .Checkbox input[type=checkbox]:checked + label:before {
523
+ background: #4AC263;
524
+ border: none;
495
525
  }
496
526
 
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;
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;
506
536
  }
507
537
 
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;
538
+ .Checkbox input[type=checkbox]:disabled + label {
539
+ color: gray;
517
540
  }
518
541
 
519
- .AutocompleteSelect > .selected.clickable {
520
- overflow: hidden;
521
- cursor: pointer;
522
- padding: 10px;
523
- margin-left: -10px;
524
- margin-right: -10px;
542
+ .Checkbox input[type=checkbox]:disabled + label:before {
543
+ border-color: rgba(0, 0, 0, 0.26);
525
544
  }
526
545
 
527
- .AutocompleteSelect.inlineSelected {
528
- flex-flow: row wrap;
529
- justify-content: flex-start;
546
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
547
+ background: rgba(0, 0, 0, 0.26);
530
548
  }
531
549
 
532
- .AutocompleteSelect.inlineSelected.hasSelected {
533
- padding-top: 7px;
550
+ .DNDContainer {
551
+ position: relative;
534
552
  }
535
553
 
536
- .AutocompleteSelect.inlineSelected > .label {
537
- width: 100%;
538
- height: 100%;
554
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
555
+ cursor: pointer;
539
556
  }
540
557
 
541
- .AutocompleteSelect.inlineSelected > .label.active {
542
- z-index: 0;
558
+ .DNDContainer .Draggable.placeholder {
559
+ opacity: 0.2;
543
560
  }
544
561
 
545
- .AutocompleteSelect.inlineSelected .input {
546
- width: unset;
547
- flex-basis: 50px;
548
- flex-grow: 1;
562
+ .DNDContainer .Draggable.copy {
563
+ position: absolute;
564
+ box-sizing: border-box;
565
+ will-change: transform;
566
+ opacity: 0;
549
567
  }
550
568
 
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;
569
+ .DNDContainer .Draggable.dragged {
570
+ z-index: 10;
565
571
  }
566
572
 
567
- .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
568
- margin-top: 7px;
573
+ .DNDContainer .overlay {
574
+ position: absolute;
575
+ top: 0;
576
+ left: 0;
577
+ right: 0;
578
+ bottom: 0;
579
+ pointer-events: none;
569
580
  }
570
581
 
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;
582
+ .DialogModal {
583
+ overflow: hidden;
584
584
  }
585
585
 
586
- .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
587
- padding-left: 35px;
588
- padding-right: 10px;
586
+ .DialogModal .content {
587
+ top: 20vh;
589
588
  }
590
589
 
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;
590
+ .Dialog {
591
+ background-color: white;
592
+ min-width: 460px;
593
+ max-width: 40vw;
594
+ padding: 15px;
609
595
  }
610
596
 
611
- .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
612
- font-size: 22px;
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;
613
604
  }
614
605
 
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;
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;
614
+ }
615
+
616
+ .Dialog > div.row {
617
+ margin-bottom: 15px;
618
+ }
619
+
620
+ .Dialog > div.row:last-child {
621
+ margin-bottom: 0;
622
622
  }
623
623
 
624
624
  .DropFileInput {
@@ -708,6 +708,30 @@
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
+
711
735
  .FilteredList {
712
736
  max-height: 250px;
713
737
  position: relative;
@@ -858,30 +882,6 @@
858
882
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
859
883
  }
860
884
 
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;
@@ -1364,59 +1364,6 @@
1364
1364
  color: #bf3727;
1365
1365
  }
1366
1366
 
1367
- .SpinningProgress {
1368
- width: 48px;
1369
- height: 48px;
1370
- position: relative;
1371
- margin: 0 auto;
1372
- }
1373
-
1374
- .SpinningProgress:before {
1375
- content: "";
1376
- display: block;
1377
- padding-top: 100%;
1378
- }
1379
-
1380
- .SpinningProgress .circular {
1381
- animation: rotate 2s linear infinite;
1382
- height: 100%;
1383
- transform-origin: center center;
1384
- width: 100%;
1385
- position: absolute;
1386
- top: 0;
1387
- bottom: 0;
1388
- left: 0;
1389
- right: 0;
1390
- margin: auto;
1391
- }
1392
-
1393
- .SpinningProgress .line {
1394
- stroke: black;
1395
- stroke-width: 2px;
1396
- stroke-dasharray: 1, 96;
1397
- stroke-dashoffset: 0;
1398
- animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1399
- }
1400
-
1401
- @keyframes rotate {
1402
- 100% {
1403
- transform: rotate(360deg);
1404
- }
1405
- }
1406
- @keyframes dash {
1407
- 0% {
1408
- stroke-dasharray: 1, 96;
1409
- stroke-dashoffset: 0;
1410
- }
1411
- 50% {
1412
- stroke-dasharray: 43, 96;
1413
- stroke-dashoffset: -17px;
1414
- }
1415
- 100% {
1416
- stroke-dasharray: 43, 96;
1417
- stroke-dashoffset: -53px;
1418
- }
1419
- }
1420
1367
  .Switch {
1421
1368
  display: inline-flex;
1422
1369
  padding-top: 5px;
@@ -1642,6 +1589,67 @@
1642
1589
  animation-name: shake;
1643
1590
  }
1644
1591
 
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
+ .ScrollableTable .Scrollable .scrollbar {
1646
+ top: 56px;
1647
+ }
1648
+
1649
+ .ScrollableTable .Table {
1650
+ position: static;
1651
+ }
1652
+
1645
1653
  .DNDContainer .DroppableList .Draggable {
1646
1654
  transform: unset;
1647
1655
  transition: unset;
@@ -1772,12 +1780,4 @@
1772
1780
  height: 20px;
1773
1781
  padding: 0px;
1774
1782
  background-color: #f0f0f0;
1775
- }
1776
-
1777
- .ScrollableTable .Scrollable .scrollbar {
1778
- top: 56px;
1779
- }
1780
-
1781
- .ScrollableTable .Table {
1782
- position: static;
1783
1783
  }