@inseefr/lunatic 3.4.6 → 3.4.7-rc.1

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/esm/main.css ADDED
@@ -0,0 +1,1144 @@
1
+ @charset "UTF-8";
2
+ * {
3
+ box-sizing: border-box;
4
+ --color-primary-dark: #2a5885;
5
+ --color-primary-light: #5181b8;
6
+ --color-primary-main: #4a73a4;
7
+ --color-primary-contrast-text: #ffffff;
8
+ --color-secondary-dark: #14202d;
9
+ --color-secondary-light: #f7f8fa;
10
+ --color-secondary-main: #1a293b;
11
+ --color-secondary-contrast-text: #ffffff;
12
+ --color-very-light: #dbe4ef;
13
+ --color-very-very-light: #e6eaee;
14
+ --color-current-item: #0d823e;
15
+ --color-error: #f50c0c;
16
+ --color-disabled: rgb(235, 235, 228);
17
+ --color-prefix: cornflowerblue;
18
+ --color-dropdown-active: rgba(0, 0, 0, 0.04);
19
+ --color-dropdown-selected: rgba(0, 0, 0, 0.08);
20
+ --dropdown-transition-time: 0.5s;
21
+ }
22
+
23
+ .lunatic-component {
24
+ /* refactor proposition */
25
+ /******/
26
+ }
27
+ .lunatic-component .mandatory:after {
28
+ content: " *";
29
+ color: red;
30
+ }
31
+ .lunatic-component .horizontal-options {
32
+ display: inline-block;
33
+ margin-right: 2em;
34
+ }
35
+ .lunatic-component label,
36
+ .lunatic-component legend,
37
+ .lunatic-component .subsequence-lunatic,
38
+ .lunatic-component .lunatic-dropdown-label,
39
+ .lunatic-component .lunatic-dropdown-label focused {
40
+ color: var(--color-primary-dark);
41
+ background-color: var(--color-primary-contrast-text);
42
+ border: 0;
43
+ padding: 0;
44
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
45
+ font-weight: bold;
46
+ margin-bottom: 0.375rem;
47
+ }
48
+ .lunatic-component .lunatic-component-container {
49
+ display: flex;
50
+ }
51
+ .lunatic-component .lunatic-component-container.label-left-ex {
52
+ flex-direction: row;
53
+ align-items: baseline;
54
+ }
55
+ .lunatic-component .lunatic-component-container.label-left-ex .lunatic-label {
56
+ margin-right: 1em;
57
+ }
58
+ .lunatic-component .lunatic-component-container.label-right-ex {
59
+ flex-direction: row-reverse;
60
+ align-items: baseline;
61
+ }
62
+ .lunatic-component .lunatic-component-container.label-right-ex .lunatic-label {
63
+ margin-left: 1em;
64
+ }
65
+ .lunatic-component .lunatic-component-container.label-top-ex {
66
+ flex-direction: column;
67
+ }
68
+ .lunatic-component .lunatic-component-container.label-bottom-ex {
69
+ flex-direction: column-reverse;
70
+ }
71
+ .lunatic-component .label-top {
72
+ display: flex;
73
+ flex-direction: column;
74
+ }
75
+ .lunatic-component .label-bottom {
76
+ display: flex;
77
+ flex-direction: column-reverse;
78
+ }
79
+ .lunatic-component .label-right {
80
+ justify-content: flex-end;
81
+ display: flex;
82
+ flex-direction: row-reverse;
83
+ align-items: baseline;
84
+ }
85
+ .lunatic-component .label-right :first-child {
86
+ margin-right: 1rem;
87
+ }
88
+ .lunatic-component .label-left {
89
+ display: flex;
90
+ flex-direction: row;
91
+ align-items: baseline;
92
+ }
93
+ .lunatic-component .label-left :first-child {
94
+ margin-right: 1rem;
95
+ }
96
+ .lunatic-component .field-container {
97
+ display: flex;
98
+ }
99
+ .lunatic-component .modality-label p {
100
+ display: inline;
101
+ }
102
+ .lunatic-component .field {
103
+ width: 100%;
104
+ position: relative;
105
+ }
106
+ .lunatic-component .link-md {
107
+ border-bottom: dashed 0.1em var(--color-primary-dark);
108
+ }
109
+ .lunatic-component .link-md:hover {
110
+ cursor: help;
111
+ color: var(--color-primary-contrast-text);
112
+ background-color: var(--color-primary-dark);
113
+ }
114
+ .lunatic-component .tooltip-content {
115
+ min-width: 15em;
116
+ max-width: 25em;
117
+ background: var(--color-primary-dark);
118
+ color: var(--color-primary-contrast-text);
119
+ padding: 0.5em;
120
+ border-radius: 6px;
121
+ font-size: 1em;
122
+ }
123
+ .lunatic-component .tooltip-content.place-bottom::before {
124
+ border-bottom: 10px solid var(--color-primary-dark);
125
+ }
126
+ .lunatic-component .tooltip-content.place-bottom::after {
127
+ content: none;
128
+ }
129
+
130
+ .lunatic-component + .lunatic-component {
131
+ margin-top: 1rem;
132
+ }
133
+
134
+ .button-lunatic {
135
+ min-width: 20%;
136
+ color: white;
137
+ border-color: var(--color-primary-dark);
138
+ background-color: var(--color-primary-dark);
139
+ font-size: 1.2em;
140
+ font-weight: bold;
141
+ padding: 0.4em;
142
+ }
143
+ .button-lunatic:hover, .button-lunatic:focus:hover {
144
+ color: var(--color-primary-dark);
145
+ background-color: white;
146
+ border-color: var(--color-primary-dark);
147
+ }
148
+ .button-lunatic:focus {
149
+ outline: none;
150
+ background-color: var(--color-primary-light);
151
+ border-color: var(--color-primary-light);
152
+ }
153
+ .button-lunatic:disabled {
154
+ background: var(--color-disabled);
155
+ color: var(--color-primary-dark);
156
+ }
157
+
158
+ .lunatic-checkbox-group legend .label-description {
159
+ font-weight: lighter;
160
+ display: block;
161
+ }
162
+ .lunatic-checkbox-group .lunatic-checkbox-group-option {
163
+ display: flex;
164
+ flex-direction: column;
165
+ font-size: 13px;
166
+ }
167
+
168
+ .lunatic-checkbox-one legend .label-description {
169
+ font-weight: lighter;
170
+ }
171
+ .lunatic-checkbox-one .lunatic-input-radio {
172
+ display: flex;
173
+ }
174
+ .lunatic-checkbox-one .lunatic-input-radio label {
175
+ display: flex;
176
+ gap: 0.5em;
177
+ align-items: center;
178
+ }
179
+ .lunatic-checkbox-one .lunatic-input-radio label .label-description {
180
+ font-weight: lighter;
181
+ }
182
+
183
+ .lunatic-checkboxes {
184
+ display: flex;
185
+ flex-direction: column;
186
+ }
187
+
188
+ .lunatic-checkboxes--horizontal {
189
+ flex-direction: row;
190
+ gap: 1rem;
191
+ }
192
+
193
+ .lunatic-input-checkbox {
194
+ display: flex;
195
+ align-items: center;
196
+ cursor: pointer;
197
+ gap: 0.5rem;
198
+ padding: 0.3rem 0;
199
+ }
200
+ .lunatic-input-checkbox label {
201
+ display: flex;
202
+ gap: 0.5em;
203
+ cursor: inherit;
204
+ margin: 0;
205
+ font-weight: normal;
206
+ }
207
+
208
+ .lunatic-input-checkbox__icon {
209
+ display: grid;
210
+ place-items: center;
211
+ width: 18px;
212
+ height: 18px;
213
+ flex: none;
214
+ border-radius: 2px;
215
+ color: #FFF;
216
+ border: 2px solid var(--color-primary-dark);
217
+ }
218
+ .lunatic-input-checkbox__icon svg {
219
+ transform: scale(0.9);
220
+ }
221
+
222
+ .lunatic-input-checkbox[aria-checked=true] .lunatic-input-checkbox__icon {
223
+ background-color: var(--color-primary-dark);
224
+ }
225
+
226
+ .lunatic-input-checkbox[aria-disabled=true],
227
+ .lunatic-input-checkbox[aria-readonly=true] {
228
+ cursor: default;
229
+ }
230
+ .lunatic-input-checkbox[aria-disabled=true] .lunatic-input-checkbox__icon,
231
+ .lunatic-input-checkbox[aria-readonly=true] .lunatic-input-checkbox__icon {
232
+ border-color: var(--color-primary-light);
233
+ background-color: var(--color-disabled);
234
+ }
235
+
236
+ .lunatic-input-checkbox[aria-disabled=true][aria-checked=true] .lunatic-input-checkbox__icon,
237
+ .lunatic-input-checkbox[aria-readonly=true][aria-checked=true] .lunatic-input-checkbox__icon {
238
+ color: var(--color-primary-light);
239
+ }
240
+
241
+ .lunatic-input-radio .lunatic-input-checkbox__icon {
242
+ border-radius: 18px;
243
+ }
244
+ .lunatic-input-radio .lunatic-input-checkbox__icon svg {
245
+ display: none;
246
+ }
247
+
248
+ .lunatic-input-radio[aria-checked=true] .lunatic-input-checkbox__icon {
249
+ background: transparent;
250
+ }
251
+
252
+ .lunatic-input-radio[aria-checked=true] .lunatic-input-checkbox__icon::after {
253
+ content: "";
254
+ width: 10px;
255
+ height: 10px;
256
+ border-radius: 10px;
257
+ background-color: var(--color-primary-dark);
258
+ }
259
+
260
+ .lunatic-combo-box-container {
261
+ position: relative;
262
+ width: 100%;
263
+ }
264
+ .lunatic-combo-box-container.default-style {
265
+ --color-combo-box-selected: Cornsilk;
266
+ --color-primary-dark: DarkGreen;
267
+ --color-primary-main: FloralWhite;
268
+ --color-combo-box-background: snow;
269
+ --color-disabled: Gainsboro;
270
+ --color-primary-light: GreenYellow;
271
+ margin-bottom: 10px;
272
+ }
273
+ .lunatic-combo-box-container.default-style .lunatic-combo-box {
274
+ min-height: 30px;
275
+ min-width: 260px;
276
+ width: 100%;
277
+ }
278
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection {
279
+ border-radius: 5px;
280
+ border: 2px solid var(--color-primary-dark);
281
+ background-color: var(--color-combo-box-background);
282
+ }
283
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection:hover {
284
+ border-color: var(--color-primary-main);
285
+ }
286
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-input {
287
+ height: 34px;
288
+ line-height: 34px;
289
+ font-size: 15px;
290
+ padding-left: 4px;
291
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
292
+ }
293
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-input::placeholder {
294
+ color: gray;
295
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
296
+ font-size: 15px;
297
+ line-height: 34px;
298
+ vertical-align: middle;
299
+ font-weight: normal;
300
+ }
301
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-selected {
302
+ line-height: 34px;
303
+ background-color: var(--color-combo-box-background);
304
+ border-radius: 5px;
305
+ padding-left: 4px;
306
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
307
+ outline: none;
308
+ overflow-y: hidden;
309
+ display: block;
310
+ color: gray;
311
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
312
+ font-size: 15px;
313
+ line-height: 34px;
314
+ vertical-align: middle;
315
+ font-weight: normal;
316
+ }
317
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-selected .selection {
318
+ display: inline-block;
319
+ line-height: 1.3;
320
+ font-size: 15px;
321
+ }
322
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-selected.disabled {
323
+ background-color: var(--color-disabled);
324
+ }
325
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-panel {
326
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
327
+ height: 0;
328
+ opacity: 0;
329
+ background-color: var(--color-combo-box-background);
330
+ transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
331
+ }
332
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-panel.expanded {
333
+ display: flex;
334
+ flex-direction: column;
335
+ gap: 0.2rem;
336
+ border: solid 1px var(--color-primary-light);
337
+ opacity: 1;
338
+ min-height: 30px;
339
+ height: max-content;
340
+ box-shadow: 0 2px 2px grey;
341
+ border-radius: 4px;
342
+ }
343
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-panel .lunatic-combo-box-option {
344
+ overflow: hidden;
345
+ margin-bottom: 0.1em;
346
+ line-height: 1.3;
347
+ display: block;
348
+ }
349
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-panel .lunatic-combo-box-option.selected {
350
+ color: var(--color-primary-dark);
351
+ background-color: var(--color-combo-box-selected);
352
+ }
353
+ .lunatic-combo-box-container.default-style .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-panel .lunatic-combo-box-option:hover {
354
+ background-color: var(--color-primary-main);
355
+ color: var(--color-combo-box-background);
356
+ }
357
+ .lunatic-combo-box-container .lunatic-combo-box-fab {
358
+ position: absolute;
359
+ right: 4px;
360
+ top: 8px;
361
+ z-index: 0;
362
+ }
363
+ .lunatic-combo-box-container .lunatic-combo-box-fab.focused {
364
+ z-index: 1;
365
+ }
366
+ .lunatic-combo-box-container .lunatic-combo-box-fab .lunatic-icon svg {
367
+ fill: white;
368
+ width: 16px;
369
+ height: 16px;
370
+ margin: auto;
371
+ }
372
+ .lunatic-combo-box-container .lunatic-combo-box {
373
+ position: relative;
374
+ z-index: 0;
375
+ }
376
+ .lunatic-combo-box-container .lunatic-combo-box:focus {
377
+ outline: none;
378
+ }
379
+ .lunatic-combo-box-container .lunatic-combo-box.focused {
380
+ z-index: 1;
381
+ }
382
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content {
383
+ width: 100%;
384
+ }
385
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection {
386
+ position: relative;
387
+ }
388
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-input {
389
+ border: none;
390
+ margin: 0;
391
+ padding: 0;
392
+ background-color: transparent;
393
+ width: 100%;
394
+ }
395
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-input:focus {
396
+ outline: none;
397
+ }
398
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-selected {
399
+ top: 0;
400
+ overflow-x: hidden;
401
+ width: 100%;
402
+ display: none;
403
+ }
404
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-selection .lunatic-combo-box-selected.displayed {
405
+ display: block;
406
+ }
407
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content ul,
408
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content li,
409
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content div,
410
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content span {
411
+ margin: 0;
412
+ padding: 0;
413
+ border: none;
414
+ list-style: none;
415
+ }
416
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-panel:focus {
417
+ outline: none;
418
+ }
419
+ .lunatic-combo-box-container .lunatic-combo-box .lunatic-combo-box-content .lunatic-combo-box-panel .lunatic-combo-box-option {
420
+ -moz-user-select: -moz-none;
421
+ -khtml-user-select: none;
422
+ -webkit-user-select: none;
423
+ }
424
+
425
+ .lunatic-errors .lunatic-error {
426
+ color: red;
427
+ }
428
+
429
+ .lunaticDatepickerFields {
430
+ display: flex;
431
+ align-items: flex-end;
432
+ gap: 1rem;
433
+ }
434
+
435
+ .lunaticDatepickerField input {
436
+ width: 3.5em;
437
+ }
438
+
439
+ .lunaticDatepickerFieldLarge input {
440
+ width: 4.5em;
441
+ }
442
+
443
+ .lunaticDatepickerHint {
444
+ display: block;
445
+ font-weight: 400;
446
+ font-size: 0.9em;
447
+ }
448
+
449
+ .lunatic-component .lunatic-declarations {
450
+ margin-bottom: 0.4rem;
451
+ }
452
+ .lunatic-component .declaration-instruction {
453
+ font-style: italic;
454
+ font-size: 80%;
455
+ }
456
+ .lunatic-component .declaration-statement {
457
+ font-style: italic;
458
+ font-size: 80%;
459
+ color: blue;
460
+ }
461
+ .lunatic-component .declaration-help {
462
+ font-style: italic;
463
+ font-size: 80%;
464
+ color: green;
465
+ }
466
+ .lunatic-component .CODECARD {
467
+ font-style: bold;
468
+ font-size: 80%;
469
+ color: grey;
470
+ border: solid 1px grey;
471
+ width: fit-content;
472
+ padding: 1em;
473
+ }
474
+ .lunatic-component .CODECARD:before {
475
+ content: "→ ";
476
+ }
477
+ .lunatic-component .declaration-message_filter {
478
+ font-size: 100%;
479
+ color: rgb(73, 66, 66);
480
+ }
481
+ .lunatic-component .declaration-message_filter:before {
482
+ content: "→ ";
483
+ }
484
+
485
+ .lunatic-component .lunatic-dropdown .lunatic-dropdown-option {
486
+ text-overflow: ellipsis;
487
+ white-space: nowrap;
488
+ overflow: hidden;
489
+ margin-bottom: 0.1em;
490
+ line-height: 2rem;
491
+ display: block;
492
+ }
493
+ .lunatic-component .lunatic-dropdown .lunatic-dropdown-option.selected {
494
+ color: var(--color-primary-dark);
495
+ background-color: goldenrod;
496
+ }
497
+ .lunatic-component .lunatic-dropdown .lunatic-dropdown-option:hover {
498
+ background-color: var(--color-primary-main);
499
+ color: white;
500
+ }
501
+ .lunatic-component .lunatic-dropdown .lunatic-dropdown-option .prefix {
502
+ color: red;
503
+ }
504
+
505
+ .duration-fields,
506
+ .duration-field {
507
+ display: flex;
508
+ align-items: center;
509
+ gap: 1rem;
510
+ }
511
+
512
+ .duration-field {
513
+ gap: 0.5rem;
514
+ }
515
+
516
+ fieldset {
517
+ border: 0;
518
+ margin: 0;
519
+ padding: 0;
520
+ }
521
+
522
+ .lunatic-icon {
523
+ display: flex;
524
+ align-items: center;
525
+ }
526
+
527
+ .lunatic-fab {
528
+ width: 32px;
529
+ height: 32px;
530
+ border-radius: 50%;
531
+ margin: 0;
532
+ padding: 0;
533
+ outline: inherit;
534
+ border: none;
535
+ background-color: royalblue;
536
+ box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
537
+ }
538
+ .lunatic-fab:hover {
539
+ cursor: pointer;
540
+ background-color: navy;
541
+ transition: background-color 1s;
542
+ }
543
+ .lunatic-fab.mini {
544
+ width: 18px;
545
+ height: 18px;
546
+ }
547
+ .lunatic-fab:focus {
548
+ border: solid 1px black;
549
+ }
550
+ .lunatic-fab:disabled {
551
+ cursor: default;
552
+ background-color: darkgray;
553
+ }
554
+
555
+ .lunatic-component .lunatic-input label,
556
+ .lunatic-component .lunatic-datepicker label,
557
+ .lunatic-component .lunatic-textarea label,
558
+ .lunatic-component .lunatic-input-number label {
559
+ font-size: 12px;
560
+ }
561
+ .lunatic-component .lunatic-input label .label-description,
562
+ .lunatic-component .lunatic-datepicker label .label-description,
563
+ .lunatic-component .lunatic-textarea label .label-description,
564
+ .lunatic-component .lunatic-input-number label .label-description {
565
+ font-size: 12px;
566
+ font-weight: lighter;
567
+ display: block;
568
+ }
569
+ .lunatic-component .lunatic-input input,
570
+ .lunatic-component .lunatic-datepicker input,
571
+ .lunatic-component .lunatic-textarea input,
572
+ .lunatic-component .lunatic-input-number input {
573
+ font: inherit;
574
+ border: 0;
575
+ border-bottom: 0.125rem double rgba(0, 0, 0, 0.42);
576
+ margin: 0;
577
+ padding: 0.375rem 0 0.375rem 0.4375rem;
578
+ display: inline-block;
579
+ min-width: 0;
580
+ box-sizing: content-box;
581
+ background: none;
582
+ }
583
+ .lunatic-component .lunatic-input input:focus,
584
+ .lunatic-component .lunatic-datepicker input:focus,
585
+ .lunatic-component .lunatic-textarea input:focus,
586
+ .lunatic-component .lunatic-input-number input:focus {
587
+ outline: none;
588
+ border-bottom: 0.125rem solid var(--color-primary-main);
589
+ }
590
+ .lunatic-component .lunatic-input input:hover,
591
+ .lunatic-component .lunatic-datepicker input:hover,
592
+ .lunatic-component .lunatic-textarea input:hover,
593
+ .lunatic-component .lunatic-input-number input:hover {
594
+ border-bottom: 0.125rem solid black;
595
+ }
596
+ .lunatic-component .lunatic-input input:read-only,
597
+ .lunatic-component .lunatic-datepicker input:read-only,
598
+ .lunatic-component .lunatic-textarea input:read-only,
599
+ .lunatic-component .lunatic-input-number input:read-only {
600
+ background-color: var(--color-disabled);
601
+ }
602
+ .lunatic-component .lunatic-input .warning,
603
+ .lunatic-component .lunatic-datepicker .warning,
604
+ .lunatic-component .lunatic-textarea .warning,
605
+ .lunatic-component .lunatic-input-number .warning {
606
+ box-sizing: border-box;
607
+ border: solid 2px var(--color-error);
608
+ background-color: var(--color-error);
609
+ }
610
+
611
+ .lunatic-component .lunatic-input-number {
612
+ display: inline-block;
613
+ }
614
+ .lunatic-component .lunatic-input-number .label-description {
615
+ display: block;
616
+ }
617
+
618
+ .lunatic-label .label-description {
619
+ font-weight: lighter;
620
+ display: block;
621
+ }
622
+
623
+ .missing-buttons {
624
+ margin-top: 1em;
625
+ }
626
+
627
+ .missing-buttons .button-lunatic {
628
+ width: 4em;
629
+ font-size: 1em;
630
+ font-weight: normal;
631
+ }
632
+
633
+ .missing-buttons .button-lunatic {
634
+ background-color: var(--color-very-very-light);
635
+ color: var(--color-primary-dark);
636
+ }
637
+
638
+ .missing-buttons .button-lunatic:not(:disabled):hover {
639
+ background-color: white;
640
+ color: var(--color-primary-main);
641
+ }
642
+
643
+ .missing-buttons .button-lunatic:disabled {
644
+ opacity: 0.5;
645
+ }
646
+
647
+ .missing-button-active .button-lunatic {
648
+ background-color: var(--color-primary-dark);
649
+ color: var(--color-very-very-light);
650
+ }
651
+
652
+ .missing-buttons .missing-button-active .button-lunatic:hover {
653
+ background-color: var(--color-primary-main);
654
+ color: white;
655
+ }
656
+
657
+ .lunatic-modal-controls {
658
+ position: fixed;
659
+ top: 0;
660
+ left: 0;
661
+ width: 100%;
662
+ height: 100%;
663
+ background-color: rgba(50, 50, 50, 0.5);
664
+ z-index: 101;
665
+ }
666
+ .lunatic-modal-controls .modal-content {
667
+ background-color: snow;
668
+ height: fit-content;
669
+ width: 50%;
670
+ margin: auto;
671
+ margin-top: 38vh;
672
+ display: flex;
673
+ flex-direction: column;
674
+ border-radius: 8px;
675
+ overflow-wrap: break-word;
676
+ }
677
+ .lunatic-modal-controls .modal-content .body {
678
+ color: black;
679
+ font-size: 16px;
680
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
681
+ }
682
+ .lunatic-modal-controls .modal-content .modal-buttons {
683
+ align-self: end;
684
+ margin: 0 0.2em 0.2em 0;
685
+ }
686
+ .lunatic-modal-controls .modal-content .modal-buttons :first-child {
687
+ margin-right: 0.5em;
688
+ }
689
+ .lunatic-modal-controls .errors ul,
690
+ .lunatic-modal-controls .errors li,
691
+ .lunatic-modal-controls .errors div,
692
+ .lunatic-modal-controls .errors span {
693
+ border: none;
694
+ list-style: none;
695
+ }
696
+ .lunatic-modal-controls ul {
697
+ margin: 1em;
698
+ padding: 0;
699
+ }
700
+
701
+ .lunatic-table {
702
+ table-layout: fixed;
703
+ border-collapse: collapse;
704
+ margin-top: 0.3em;
705
+ margin-bottom: 0.3em;
706
+ }
707
+ .lunatic-table .lunatic-table-thead .lunatic-table-th {
708
+ border: 0.15em solid var(--color-primary-dark);
709
+ padding: 0.2em;
710
+ }
711
+
712
+ .lunatic-roundabout__items {
713
+ margin-top: 1rem;
714
+ display: flex;
715
+ flex-direction: column;
716
+ }
717
+
718
+ .lunatic-roundabout__item {
719
+ display: grid;
720
+ grid-template-columns: 1fr max-content;
721
+ justify-content: space-between;
722
+ gap: 0.5rem;
723
+ }
724
+
725
+ .lunatic-roundabout__item .lunatic-errors {
726
+ grid-column: 1/-1;
727
+ }
728
+
729
+ .lunatic-roundabout__item + .lunatic-roundabout__item {
730
+ border-top: 1px solid var(--color-secondary-dark);
731
+ padding-top: 0.5rem;
732
+ margin-top: 1rem;
733
+ }
734
+
735
+ .lunatic-roundabout__button-completed,
736
+ .lunatic-roundabout__button-completed:focus {
737
+ background-color: var(--color-current-item);
738
+ }
739
+
740
+ .lunatic-roundabout__button-progress,
741
+ .lunatic-roundabout__button-progress:focus {
742
+ background-color: var(--color-primary-main);
743
+ }
744
+
745
+ .lunatic-component .sequence-lunatic {
746
+ padding: 0;
747
+ font-size: 0.875rem;
748
+ color: var(--color-primary-light);
749
+ background-color: var(--color-secondary-contrast-text);
750
+ border: 0;
751
+ height: 1.875rem;
752
+ }
753
+
754
+ .lunatic-component .lunatic-suggester-message-error {
755
+ border: solid 1px darkred;
756
+ color: darkred;
757
+ background-color: tomato;
758
+ display: inline-block;
759
+ border-radius: 3px;
760
+ padding: 4px 8px;
761
+ margin: 4px 4px;
762
+ }
763
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container {
764
+ margin-bottom: 10px;
765
+ }
766
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester {
767
+ min-height: 30px;
768
+ min-width: 260px;
769
+ width: 100%;
770
+ }
771
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-selection {
772
+ border-radius: 5px;
773
+ border: 2px solid var(--color-primary-dark);
774
+ background-color: white;
775
+ }
776
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-selection:hover {
777
+ border-color: var(--color-primary-main);
778
+ }
779
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-selection .lunatic-suggester-input {
780
+ height: 34px;
781
+ line-height: 34px;
782
+ font-size: 15px;
783
+ padding-left: 4px;
784
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
785
+ }
786
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-selection .lunatic-suggester-input::placeholder {
787
+ color: gray;
788
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
789
+ font-size: 15px;
790
+ line-height: 34px;
791
+ vertical-align: middle;
792
+ font-weight: normal;
793
+ }
794
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-selection .lunatic-suggester-selected {
795
+ height: 34px;
796
+ line-height: 34px;
797
+ background-color: white;
798
+ border-radius: 5px;
799
+ padding-left: 4px;
800
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
801
+ }
802
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-selection .lunatic-suggester-selected .placeholderList {
803
+ display: block;
804
+ color: gray;
805
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
806
+ font-size: 15px;
807
+ line-height: 34px;
808
+ vertical-align: middle;
809
+ font-weight: normal;
810
+ }
811
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-selection .lunatic-suggester-selected .selection {
812
+ display: block;
813
+ line-height: 34px;
814
+ font-size: 15px;
815
+ }
816
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-selection .lunatic-suggester-selected.disabled {
817
+ background-color: var(--color-disabled);
818
+ }
819
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-panel {
820
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
821
+ height: 0;
822
+ opacity: 0;
823
+ background-color: white;
824
+ transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
825
+ }
826
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-panel.expended {
827
+ border: solid 1px var(--color-primary-light);
828
+ opacity: 1;
829
+ min-height: 30px;
830
+ height: max-content;
831
+ box-shadow: 0 2px 2px grey;
832
+ border-radius: 4px;
833
+ }
834
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-panel .lunatic-suggester-option {
835
+ text-overflow: ellipsis;
836
+ white-space: nowrap;
837
+ overflow: hidden;
838
+ margin-bottom: 0.1em;
839
+ line-height: 2rem;
840
+ display: block;
841
+ }
842
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-panel .lunatic-suggester-option.selected {
843
+ color: var(--color-primary-dark);
844
+ background-color: var(--color-dropdown-selected);
845
+ }
846
+ .lunatic-component .lunatic-suggester-default-style.lunatic-suggester-container .lunatic-suggester .lunatic-suggester-content .lunatic-suggester-panel .lunatic-suggester-option:hover {
847
+ background-color: var(--color-primary-main);
848
+ color: white;
849
+ }
850
+ .lunatic-component .lunatic-notification {
851
+ line-height: 34px;
852
+ margin: 2px 2px;
853
+ padding: 1px 1px 1px 60px;
854
+ }
855
+ .lunatic-component .lunatic-notification.info {
856
+ background-color: lightblue;
857
+ }
858
+ .lunatic-component .lunatic-notification.info::before {
859
+ --icon-size: 2rem;
860
+ display: block;
861
+ float: left;
862
+ flex: 0 0 auto;
863
+ background-color: white;
864
+ width: var(--icon-size);
865
+ height: var(--icon-size);
866
+ -webkit-mask-size: 100% 100%;
867
+ mask-size: 100% 100%;
868
+ -webkit-mask-image: url("./icons/wait-icon.svg");
869
+ mask-image: url("./icons/wait-icon.svg");
870
+ content: "";
871
+ margin-left: -48px;
872
+ margin-top: 12px;
873
+ }
874
+ .lunatic-component .lunatic-notification.warn {
875
+ background-color: orange;
876
+ }
877
+ .lunatic-component .lunatic-notification.warn::before {
878
+ --icon-size: 2rem;
879
+ display: block;
880
+ float: left;
881
+ flex: 0 0 auto;
882
+ background-color: white;
883
+ width: var(--icon-size);
884
+ height: var(--icon-size);
885
+ -webkit-mask-size: 100% 100%;
886
+ mask-size: 100% 100%;
887
+ -webkit-mask-image: url("./icons/warn-icon.svg");
888
+ mask-image: url("./icons/warn-icon.svg");
889
+ content: "";
890
+ margin-left: -48px;
891
+ margin-top: 12px;
892
+ }
893
+ .lunatic-component .lunatic-notification.error {
894
+ background-color: crimson;
895
+ }
896
+ .lunatic-component .lunatic-notification.error::before {
897
+ --icon-size: 2rem;
898
+ display: block;
899
+ float: left;
900
+ flex: 0 0 auto;
901
+ background-color: white;
902
+ width: var(--icon-size);
903
+ height: var(--icon-size);
904
+ -webkit-mask-size: 100% 100%;
905
+ mask-size: 100% 100%;
906
+ -webkit-mask-image: url("./icons/alert-icon.svg");
907
+ mask-image: url("./icons/alert-icon.svg");
908
+ content: "";
909
+ margin-left: -48px;
910
+ margin-top: 12px;
911
+ }
912
+ .lunatic-component .lunatic-notification .lunatic-notification-container {
913
+ background-color: white;
914
+ padding: 0 15px;
915
+ }
916
+ .lunatic-component .lunatic-notification .lunatic-notification-container .title {
917
+ font-weight: bold;
918
+ font-size: large;
919
+ margin-bottom: 3px;
920
+ }
921
+
922
+ .lunatic-component .lunatic-table {
923
+ table-layout: fixed;
924
+ border-collapse: collapse;
925
+ margin-top: 0.3em;
926
+ margin-bottom: 0.3em;
927
+ }
928
+ .lunatic-component .lunatic-table thead {
929
+ border-collapse: separate; /* Don't collapse */
930
+ border-spacing: 0;
931
+ }
932
+ .lunatic-component .lunatic-table td,
933
+ .lunatic-component .lunatic-table th {
934
+ border: 0.15em solid var(--color-primary-dark);
935
+ padding: 0.2em;
936
+ font-size: 13px;
937
+ }
938
+ .lunatic-component .lunatic-table th {
939
+ position: sticky;
940
+ top: 0;
941
+ z-index: 2;
942
+ border-collapse: separate;
943
+ background-color: #FFF;
944
+ border-top: none !important;
945
+ box-shadow: inset 0 1px 0 var(--color-primary-dark), inset 0 -1px 0 var(--color-primary-dark);
946
+ }
947
+ .lunatic-component .lunatic-table td .field,
948
+ .lunatic-component .lunatic-table td .field-with-tooltip {
949
+ display: flex;
950
+ justify-content: center;
951
+ align-items: center;
952
+ }
953
+
954
+ .lunatic-component .table-lunatic .tooltip-lunatic img {
955
+ height: 20px;
956
+ width: 20px;
957
+ }
958
+
959
+ .lunatic-component .textarea-lunatic {
960
+ height: 3em;
961
+ width: 100%;
962
+ }
963
+
964
+ .lunatic-component-container-test {
965
+ display: flex;
966
+ /* Tooltip container */
967
+ /* Tooltip text */
968
+ }
969
+ .lunatic-component-container-test .lunatic-component-body {
970
+ width: 80%;
971
+ }
972
+ .lunatic-component-container-test .tooltip-lunatic {
973
+ margin: auto;
974
+ width: 20%;
975
+ position: relative;
976
+ display: block;
977
+ margin-left: auto;
978
+ margin-right: auto;
979
+ }
980
+ .lunatic-component-container-test .tooltip-lunatic .tooltip-text {
981
+ min-width: 10em;
982
+ max-width: 20em;
983
+ background-color: var(--color-primary-dark);
984
+ color: #fff;
985
+ padding: 0.5em;
986
+ border-radius: 6px;
987
+ font-size: 1em;
988
+ }
989
+ .lunatic-component-container-test .tooltip-lunatic .tooltip-text.place-left::before {
990
+ border-left: 10px solid var(--color-primary-dark);
991
+ }
992
+ .lunatic-component-container-test .tooltip-lunatic .tooltip-text.place-left::after {
993
+ content: none;
994
+ }
995
+
996
+ .lunatic-dragger {
997
+ display: inline-block;
998
+ width: 100%;
999
+ height: 100%;
1000
+ -moz-user-select: -moz-none;
1001
+ -khtml-user-select: none;
1002
+ -webkit-user-select: none;
1003
+ }
1004
+
1005
+ .lunatic-suggester-widget-container.absolute {
1006
+ position: fixed;
1007
+ z-index: 1;
1008
+ }
1009
+ .lunatic-suggester-widget-container .lunatic-suggester-widget {
1010
+ position: relative;
1011
+ border: solid darkred 2px;
1012
+ background-color: #e9d0d0;
1013
+ padding: 4px 4px;
1014
+ border: 2px 2px;
1015
+ width: 400px;
1016
+ box-shadow: #320000 0px 3px 8px;
1017
+ }
1018
+ .lunatic-suggester-widget-container .lunatic-suggester-widget.drag {
1019
+ box-shadow: goldenrod 0px 3px 8px;
1020
+ transition: box-shadow 0.5s;
1021
+ }
1022
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row {
1023
+ height: 22px;
1024
+ display: flex;
1025
+ flex-direction: row;
1026
+ margin-bottom: 1px;
1027
+ }
1028
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .store-name {
1029
+ width: 60%;
1030
+ color: darkred;
1031
+ font-size: 18px;
1032
+ white-space: nowrap;
1033
+ overflow-x: hidden;
1034
+ }
1035
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .stats {
1036
+ color: darkred;
1037
+ font-size: 18px;
1038
+ white-space: nowrap;
1039
+ overflow-x: hidden;
1040
+ width: 40%;
1041
+ }
1042
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .widget-button {
1043
+ margin: 0 1px 0 0;
1044
+ padding: 0;
1045
+ border: none;
1046
+ width: 18px;
1047
+ height: 18px;
1048
+ background-color: darkred;
1049
+ }
1050
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .widget-button.disabled {
1051
+ background-color: gray;
1052
+ cursor: default;
1053
+ }
1054
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .widget-button:hover {
1055
+ background-color: #320000;
1056
+ transition: background-color 1s;
1057
+ cursor: pointer;
1058
+ }
1059
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .widget-button .lunatic-suggester-icon svg {
1060
+ width: 18px;
1061
+ height: 18px;
1062
+ fill: #e9d0d0;
1063
+ }
1064
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .lunatic-suggester-loader-progress {
1065
+ height: inherit;
1066
+ border: solid 1px darkred;
1067
+ border-radius: 2px;
1068
+ width: 70%;
1069
+ }
1070
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .lunatic-suggester-loader-progress.done:hover {
1071
+ border-color: #320000;
1072
+ transition: border-color 1s;
1073
+ cursor: pointer;
1074
+ }
1075
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .lunatic-suggester-loader-progress.done:hover .progress {
1076
+ background-color: #320000;
1077
+ transition: background-color 1s;
1078
+ }
1079
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .lunatic-suggester-loader-progress .content {
1080
+ padding: 2px 2px;
1081
+ height: 100%;
1082
+ width: 100%;
1083
+ }
1084
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .widget-row .lunatic-suggester-loader-progress .content .progress {
1085
+ background-color: darkred;
1086
+ height: 100%;
1087
+ }
1088
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .suggester-widget-network {
1089
+ position: absolute;
1090
+ border: solid darkred 2px;
1091
+ left: 6px;
1092
+ background-color: #e9d0d0;
1093
+ border-radius: 50%;
1094
+ padding: 2px 2px;
1095
+ left: -22px;
1096
+ top: -22px;
1097
+ box-shadow: #320000 0px 3px 8px;
1098
+ }
1099
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .suggester-widget-network.online svg {
1100
+ fill: forestgreen;
1101
+ }
1102
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .suggester-widget-network svg {
1103
+ width: 24px;
1104
+ height: 24px;
1105
+ fill: darkred;
1106
+ }
1107
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .suggester-widget-network.drag {
1108
+ box-shadow: goldenrod 0px 3px 8px;
1109
+ transition: box-shadow 0.5s;
1110
+ }
1111
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .lunatic-widget-tools {
1112
+ position: absolute;
1113
+ right: 0;
1114
+ top: -18px;
1115
+ margin-top: -4px;
1116
+ }
1117
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .lunatic-widget-tools .lunatic-action-tool {
1118
+ display: inline-block;
1119
+ height: 18px;
1120
+ width: 18px;
1121
+ background-color: darkred;
1122
+ border-radius: 50%;
1123
+ margin-left: 2px;
1124
+ }
1125
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .lunatic-widget-tools .lunatic-action-tool:hover {
1126
+ box-shadow: #320000 0px 3px 8px;
1127
+ }
1128
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .lunatic-widget-tools .lunatic-action-tool.drag {
1129
+ background-color: goldenrod;
1130
+ transition: background-color 0.5s;
1131
+ }
1132
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .lunatic-widget-tools .lunatic-action-tool .on-drag-icon {
1133
+ cursor: grab;
1134
+ }
1135
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .lunatic-widget-tools .lunatic-action-tool .on-drag-icon.drag {
1136
+ cursor: grabbing;
1137
+ }
1138
+ .lunatic-suggester-widget-container .lunatic-suggester-widget .lunatic-widget-tools .lunatic-action-tool .on-drag-icon svg {
1139
+ width: 16px;
1140
+ height: 16px;
1141
+ fill: #e9d0d0;
1142
+ }
1143
+
1144
+ /*# sourceMappingURL=main.css.map */