@citolab/qti-components 6.9.1-beta.6 → 6.9.1-beta.8
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/dist/{chunk-H4VLZ2F7.js → chunk-62FWJYVB.js} +3 -3
- package/dist/chunk-E7TLXHQH.js +2 -0
- package/dist/custom-elements.json +154 -0
- package/dist/index.js +1599 -91
- package/dist/item.css +241 -128
- package/dist/qti-components/index.d.ts +6 -1171
- package/dist/qti-components/index.js +24 -20
- package/dist/qti-item/index.d.ts +19 -0
- package/dist/qti-item/index.js +1506 -0
- package/dist/qti-loader/index.d.ts +5 -0
- package/dist/qti-loader/index.js +2 -0
- package/dist/qti-simple-choice-CafJuhnH.d.ts +1173 -0
- package/dist/qti-transformers/index.js +1 -1
- package/package.json +9 -1
package/dist/item.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
|
|
2
2
|
|
|
3
|
-
:root
|
|
3
|
+
:root,
|
|
4
|
+
:host {
|
|
4
5
|
--qti-primary-light: #ffbebe;
|
|
5
6
|
--qti-primary: #f86d70;
|
|
6
7
|
--qti-primary-dark: #a1616a;
|
|
@@ -9,9 +10,9 @@
|
|
|
9
10
|
--qti-secondary: #6daef8;
|
|
10
11
|
--qti-secondary-dark: #3a449d;
|
|
11
12
|
|
|
12
|
-
--qti-border-thickness:
|
|
13
|
+
--qti-border-thickness: 1.5px;
|
|
13
14
|
--qti-border-style: solid;
|
|
14
|
-
--qti-border-color-gray: #
|
|
15
|
+
--qti-border-color-gray: #c6cad0; /* Corresponding to border-gray-400 */
|
|
15
16
|
--qti-border-radius-md: 0.375rem;
|
|
16
17
|
--qti-border-radius-lg: 0.5rem;
|
|
17
18
|
--qti-border-radius-full: 9999px;
|
|
@@ -31,12 +32,16 @@
|
|
|
31
32
|
--qti-font-weight-semibold: 600;
|
|
32
33
|
|
|
33
34
|
--qti-active: blue;
|
|
34
|
-
--qti-focus-color:
|
|
35
|
+
--qti-focus-color: #bddcff7e;
|
|
36
|
+
--qti-focus-border-width: 5px;
|
|
35
37
|
|
|
36
38
|
--qti-correct: rgb(74 222 128);
|
|
37
39
|
--qti-correct-light: rgb(220 252 231);
|
|
38
40
|
--qti-incorrect: rgb(248 113 113);
|
|
39
41
|
--qti-incorrect-light: rgb(254 226 226);
|
|
42
|
+
|
|
43
|
+
--qti-form-size: 1rem;
|
|
44
|
+
--qti-gap-size: 0.5rem;
|
|
40
45
|
}
|
|
41
46
|
|
|
42
47
|
.chevron {
|
|
@@ -72,8 +77,9 @@
|
|
|
72
77
|
}
|
|
73
78
|
|
|
74
79
|
.form {
|
|
75
|
-
width:
|
|
76
|
-
height:
|
|
80
|
+
width: var(--qti-form-size);
|
|
81
|
+
height: var(--qti-form-size);
|
|
82
|
+
align-self: 1;
|
|
77
83
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
78
84
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
79
85
|
outline: none;
|
|
@@ -87,13 +93,9 @@
|
|
|
87
93
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
88
94
|
outline: none;
|
|
89
95
|
border-radius: var(--qti-border-radius-md);
|
|
90
|
-
padding: var(--qti-padding-
|
|
96
|
+
padding: var(--qti-padding-sm) var(--qti-padding-md); /* Padding shorthand */
|
|
91
97
|
font-weight: var(--qti-font-weight-semibold);
|
|
92
|
-
|
|
93
|
-
/* cursor: pointer; */
|
|
94
|
-
|
|
95
98
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
96
|
-
|
|
97
99
|
outline: none;
|
|
98
100
|
}
|
|
99
101
|
|
|
@@ -114,7 +116,10 @@
|
|
|
114
116
|
outline: none;
|
|
115
117
|
border-radius: 0;
|
|
116
118
|
cursor: text;
|
|
117
|
-
padding: var(--qti-padding-lg); /* Equal padding on all sides */
|
|
119
|
+
padding: var(--qti-padding-lg); /* Equal padding on all sides */
|
|
120
|
+
background: unset;
|
|
121
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
122
|
+
outline: none;
|
|
118
123
|
}
|
|
119
124
|
|
|
120
125
|
.spot {
|
|
@@ -128,8 +133,11 @@
|
|
|
128
133
|
outline: none;
|
|
129
134
|
}
|
|
130
135
|
|
|
136
|
+
/* qti-select-point-interaction */
|
|
137
|
+
|
|
131
138
|
.point {
|
|
132
139
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
140
|
+
border-radius: var(--qti-border-radius-full);
|
|
133
141
|
outline: none;
|
|
134
142
|
width: 1.5rem; /* w-6 */
|
|
135
143
|
height: 1.5rem;
|
|
@@ -180,15 +188,15 @@
|
|
|
180
188
|
}
|
|
181
189
|
|
|
182
190
|
.check-size {
|
|
183
|
-
|
|
184
|
-
|
|
191
|
+
width: calc(var(--qti-form-size) - 4px);
|
|
192
|
+
height: calc(var(--qti-form-size) - 4px);
|
|
185
193
|
}
|
|
186
194
|
|
|
187
195
|
.check {
|
|
188
196
|
/* display: flex; */
|
|
189
197
|
/* align-items: center; */
|
|
190
198
|
gap: 0.5rem;
|
|
191
|
-
padding: var(--qti-padding-
|
|
199
|
+
padding: var(--qti-padding-md) var(--qti-padding-md); /* Padding shorthand */
|
|
192
200
|
outline: none;
|
|
193
201
|
border-radius: var(--qti-border-radius-md);
|
|
194
202
|
cursor: pointer;
|
|
@@ -196,8 +204,9 @@
|
|
|
196
204
|
|
|
197
205
|
.check-radio {
|
|
198
206
|
border-radius: var(--qti-border-radius-full);
|
|
199
|
-
width:
|
|
200
|
-
height:
|
|
207
|
+
width: var(--qti-form-size);
|
|
208
|
+
height: var(--qti-form-size);
|
|
209
|
+
align-self: 1;
|
|
201
210
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
202
211
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
203
212
|
outline: none;
|
|
@@ -210,8 +219,9 @@
|
|
|
210
219
|
|
|
211
220
|
.check-checkbox {
|
|
212
221
|
border-radius: var(--qti-border-radius-md);
|
|
213
|
-
width:
|
|
214
|
-
height:
|
|
222
|
+
width: var(--qti-form-size);
|
|
223
|
+
height: var(--qti-form-size);
|
|
224
|
+
align-self: 1;
|
|
215
225
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
216
226
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
217
227
|
outline: none;
|
|
@@ -228,9 +238,7 @@
|
|
|
228
238
|
}
|
|
229
239
|
|
|
230
240
|
.foc {
|
|
231
|
-
|
|
232
|
-
outline-color: var(--qti-focus-color);
|
|
233
|
-
outline-width: 2px;
|
|
241
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
234
242
|
}
|
|
235
243
|
|
|
236
244
|
.act {
|
|
@@ -356,6 +364,16 @@ qti-response-declaration {
|
|
|
356
364
|
display: block;
|
|
357
365
|
}
|
|
358
366
|
|
|
367
|
+
:host {
|
|
368
|
+
box-sizing: border-box;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
*,
|
|
372
|
+
*:before,
|
|
373
|
+
*:after {
|
|
374
|
+
box-sizing: inherit;
|
|
375
|
+
}
|
|
376
|
+
|
|
359
377
|
[popover] {
|
|
360
378
|
position: fixed;
|
|
361
379
|
inset: 0;
|
|
@@ -378,6 +396,12 @@ qti-response-declaration {
|
|
|
378
396
|
qti-choice-interaction {
|
|
379
397
|
&.qti-input-control-hidden {
|
|
380
398
|
& qti-simple-choice {
|
|
399
|
+
&:hover {
|
|
400
|
+
background-color: var(--qti-bg-gray-50);
|
|
401
|
+
}
|
|
402
|
+
&:focus {
|
|
403
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
404
|
+
}
|
|
381
405
|
&::part(ch) {
|
|
382
406
|
display: none;
|
|
383
407
|
}
|
|
@@ -399,17 +423,20 @@ qti-response-declaration {
|
|
|
399
423
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
400
424
|
outline: none;
|
|
401
425
|
border-radius: var(--qti-border-radius-md);
|
|
402
|
-
padding: var(--qti-padding-
|
|
426
|
+
padding: var(--qti-padding-sm) var(--qti-padding-md);
|
|
403
427
|
font-weight: var(--qti-font-weight-semibold);
|
|
404
428
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
405
|
-
outline: none
|
|
406
|
-
background-color: var(--qti-bg-gray-50);
|
|
407
|
-
outline-color: var(--qti-focus-color);
|
|
408
|
-
outline-width: 2px
|
|
429
|
+
outline: none
|
|
409
430
|
}
|
|
410
431
|
}
|
|
411
432
|
&:not(.qti-input-control-hidden) {
|
|
412
433
|
& qti-simple-choice {
|
|
434
|
+
&:hover {
|
|
435
|
+
background-color: var(--qti-bg-gray-50);
|
|
436
|
+
}
|
|
437
|
+
&:focus {
|
|
438
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
439
|
+
}
|
|
413
440
|
&[aria-checked='true'] {
|
|
414
441
|
border-color: var(--qti-bg-primary);
|
|
415
442
|
}
|
|
@@ -427,13 +454,14 @@ qti-response-declaration {
|
|
|
427
454
|
}
|
|
428
455
|
|
|
429
456
|
&::part(cha) {
|
|
430
|
-
|
|
431
|
-
|
|
457
|
+
width: calc(var(--qti-form-size) - 4px);
|
|
458
|
+
height: calc(var(--qti-form-size) - 4px);
|
|
432
459
|
}
|
|
433
460
|
&[role='radio']::part(ch) {
|
|
434
461
|
border-radius: var(--qti-border-radius-full);
|
|
435
|
-
width:
|
|
436
|
-
height:
|
|
462
|
+
width: var(--qti-form-size);
|
|
463
|
+
height: var(--qti-form-size);
|
|
464
|
+
align-self: 1;
|
|
437
465
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
438
466
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
439
467
|
outline: none;
|
|
@@ -444,8 +472,9 @@ qti-response-declaration {
|
|
|
444
472
|
}
|
|
445
473
|
&[role='checkbox']::part(ch) {
|
|
446
474
|
border-radius: var(--qti-border-radius-md);
|
|
447
|
-
width:
|
|
448
|
-
height:
|
|
475
|
+
width: var(--qti-form-size);
|
|
476
|
+
height: var(--qti-form-size);
|
|
477
|
+
align-self: 1;
|
|
449
478
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
450
479
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
451
480
|
outline: none;
|
|
@@ -458,13 +487,10 @@ qti-response-declaration {
|
|
|
458
487
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
459
488
|
}
|
|
460
489
|
gap: 0.5rem;
|
|
461
|
-
padding: var(--qti-padding-
|
|
490
|
+
padding: var(--qti-padding-md) var(--qti-padding-md);
|
|
462
491
|
outline: none;
|
|
463
492
|
border-radius: var(--qti-border-radius-md);
|
|
464
|
-
cursor: pointer
|
|
465
|
-
background-color: var(--qti-bg-gray-50);
|
|
466
|
-
outline-color: var(--qti-focus-color);
|
|
467
|
-
outline-width: 2px
|
|
493
|
+
cursor: pointer
|
|
468
494
|
}
|
|
469
495
|
}
|
|
470
496
|
& qti-simple-choice {
|
|
@@ -483,17 +509,21 @@ qti-response-declaration {
|
|
|
483
509
|
}
|
|
484
510
|
|
|
485
511
|
qti-text-entry-interaction {
|
|
512
|
+
&:hover {
|
|
513
|
+
background-color: var(--qti-bg-gray-50);
|
|
514
|
+
}
|
|
515
|
+
&:focus-within {
|
|
516
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
517
|
+
}
|
|
486
518
|
&::part(input) {
|
|
487
519
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
488
520
|
outline: none;
|
|
489
521
|
border-radius: 0;
|
|
490
522
|
cursor: text;
|
|
491
523
|
padding: var(--qti-padding-lg);
|
|
524
|
+
background: unset;
|
|
492
525
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
493
526
|
outline: none;
|
|
494
|
-
background-color: var(--qti-bg-gray-50);
|
|
495
|
-
outline-color: var(--qti-focus-color);
|
|
496
|
-
outline-width: 2px;
|
|
497
527
|
}
|
|
498
528
|
}
|
|
499
529
|
|
|
@@ -504,16 +534,27 @@ qti-response-declaration {
|
|
|
504
534
|
border-radius: 0;
|
|
505
535
|
cursor: text;
|
|
506
536
|
padding: var(--qti-padding-lg);
|
|
537
|
+
background: unset;
|
|
507
538
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
508
539
|
outline: none;
|
|
540
|
+
}
|
|
541
|
+
&:hover {
|
|
509
542
|
background-color: var(--qti-bg-gray-50);
|
|
510
|
-
|
|
511
|
-
|
|
543
|
+
}
|
|
544
|
+
&:focus-within {
|
|
545
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
512
546
|
}
|
|
513
547
|
}
|
|
514
548
|
|
|
515
549
|
qti-gap-match-interaction {
|
|
516
550
|
& qti-gap-text {
|
|
551
|
+
|
|
552
|
+
&:hover {
|
|
553
|
+
background-color: var(--qti-bg-gray-50);
|
|
554
|
+
}
|
|
555
|
+
&:focus {
|
|
556
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
557
|
+
}
|
|
517
558
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
518
559
|
outline: none;
|
|
519
560
|
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
|
|
@@ -532,15 +573,13 @@ qti-response-declaration {
|
|
|
532
573
|
);
|
|
533
574
|
background-repeat: repeat-y;
|
|
534
575
|
background-position: left 2px;
|
|
535
|
-
background-size: 14px 8px
|
|
536
|
-
background-color: var(--qti-bg-gray-50);
|
|
537
|
-
outline-color: var(--qti-focus-color);
|
|
538
|
-
outline-width: 2px;
|
|
576
|
+
background-size: 14px 8px
|
|
539
577
|
}
|
|
540
578
|
& qti-gap {
|
|
541
579
|
display: inline-flex;
|
|
542
580
|
width: 8rem; /* w-32 */
|
|
543
581
|
&:empty:after {
|
|
582
|
+
padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
|
|
544
583
|
content: '\0000a0'; /* when empty, put a space in it */
|
|
545
584
|
}
|
|
546
585
|
&:not(:empty) {
|
|
@@ -560,16 +599,19 @@ qti-response-declaration {
|
|
|
560
599
|
background-color: var(--qti-bg-gray-50);
|
|
561
600
|
margin: 1px;
|
|
562
601
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
563
|
-
outline: none
|
|
564
|
-
background-color: var(--qti-bg-gray-50);
|
|
565
|
-
outline-color: var(--qti-focus-color);
|
|
566
|
-
outline-width: 2px
|
|
602
|
+
outline: none
|
|
567
603
|
}
|
|
568
604
|
}
|
|
569
605
|
|
|
570
606
|
qti-hotspot-interaction {
|
|
571
607
|
& qti-hotspot-choice {
|
|
572
608
|
&[shape='circle'] {
|
|
609
|
+
&:hover {
|
|
610
|
+
background-color: var(--qti-bg-gray-50);
|
|
611
|
+
}
|
|
612
|
+
&:focus {
|
|
613
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
614
|
+
}
|
|
573
615
|
&[aria-checked='true'] {
|
|
574
616
|
border-color: var(--qti-bg-primary);
|
|
575
617
|
}
|
|
@@ -592,12 +634,15 @@ qti-response-declaration {
|
|
|
592
634
|
background-color: transparent;
|
|
593
635
|
padding: 0;
|
|
594
636
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
595
|
-
outline: none
|
|
596
|
-
background-color: var(--qti-bg-gray-50);
|
|
597
|
-
outline-color: var(--qti-focus-color);
|
|
598
|
-
outline-width: 2px
|
|
637
|
+
outline: none
|
|
599
638
|
}
|
|
600
639
|
&[shape='rect'] {
|
|
640
|
+
&:hover {
|
|
641
|
+
background-color: var(--qti-bg-gray-50);
|
|
642
|
+
}
|
|
643
|
+
&:focus {
|
|
644
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
645
|
+
}
|
|
601
646
|
&[aria-checked='true'] {
|
|
602
647
|
border-color: var(--qti-bg-primary);
|
|
603
648
|
}
|
|
@@ -620,10 +665,7 @@ qti-response-declaration {
|
|
|
620
665
|
background-color: transparent;
|
|
621
666
|
padding: 0;
|
|
622
667
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
623
|
-
outline: none
|
|
624
|
-
background-color: var(--qti-bg-gray-50);
|
|
625
|
-
outline-color: var(--qti-focus-color);
|
|
626
|
-
outline-width: 2px
|
|
668
|
+
outline: none
|
|
627
669
|
}
|
|
628
670
|
&[shape='poly'] {
|
|
629
671
|
&:hover::after {
|
|
@@ -678,18 +720,26 @@ qti-response-declaration {
|
|
|
678
720
|
qti-hottext-interaction {
|
|
679
721
|
qti-hottext {
|
|
680
722
|
display: inline-flex;
|
|
723
|
+
align-items: center;
|
|
681
724
|
}
|
|
682
725
|
/* &:not(.qti-input-control-hidden),
|
|
683
726
|
&:not(.qti-unselected-hidden) { */
|
|
684
727
|
qti-hottext {
|
|
728
|
+
&:hover {
|
|
729
|
+
background-color: var(--qti-bg-gray-50);
|
|
730
|
+
}
|
|
731
|
+
&:focus {
|
|
732
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
733
|
+
}
|
|
685
734
|
&::part(cha) {
|
|
686
|
-
|
|
687
|
-
|
|
735
|
+
width: calc(var(--qti-form-size) - 4px);
|
|
736
|
+
height: calc(var(--qti-form-size) - 4px);
|
|
688
737
|
}
|
|
689
738
|
&[role='radio']::part(ch) {
|
|
690
739
|
border-radius: var(--qti-border-radius-full);
|
|
691
|
-
width:
|
|
692
|
-
height:
|
|
740
|
+
width: var(--qti-form-size);
|
|
741
|
+
height: var(--qti-form-size);
|
|
742
|
+
align-self: 1;
|
|
693
743
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
694
744
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
695
745
|
outline: none;
|
|
@@ -700,8 +750,9 @@ qti-response-declaration {
|
|
|
700
750
|
}
|
|
701
751
|
&[role='checkbox']::part(ch) {
|
|
702
752
|
border-radius: var(--qti-border-radius-md);
|
|
703
|
-
width:
|
|
704
|
-
height:
|
|
753
|
+
width: var(--qti-form-size);
|
|
754
|
+
height: var(--qti-form-size);
|
|
755
|
+
align-self: 1;
|
|
705
756
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
706
757
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
707
758
|
outline: none;
|
|
@@ -714,18 +765,26 @@ qti-response-declaration {
|
|
|
714
765
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
715
766
|
}
|
|
716
767
|
gap: 0.5rem;
|
|
717
|
-
padding: var(--qti-padding-
|
|
768
|
+
padding: var(--qti-padding-md) var(--qti-padding-md);
|
|
718
769
|
outline: none;
|
|
719
770
|
border-radius: var(--qti-border-radius-md);
|
|
720
|
-
cursor: pointer
|
|
721
|
-
background-color: var(--qti-bg-gray-50);
|
|
722
|
-
outline-color: var(--qti-focus-color);
|
|
723
|
-
outline-width: 2px
|
|
771
|
+
cursor: pointer
|
|
724
772
|
}
|
|
725
773
|
/* } */
|
|
726
774
|
|
|
727
775
|
&.qti-input-control-hidden {
|
|
728
776
|
qti-hottext {
|
|
777
|
+
/* --qti-padding-md: 0.1rem;
|
|
778
|
+
--qti-padding-lg: 0.2rem;
|
|
779
|
+
--qti-border-radius-md: 0.3rem;
|
|
780
|
+
--qti-border-thickness: 1px;
|
|
781
|
+
--qti-font-weight-semibold: 400; */
|
|
782
|
+
&:hover {
|
|
783
|
+
background-color: var(--qti-bg-gray-50);
|
|
784
|
+
}
|
|
785
|
+
&:focus {
|
|
786
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
787
|
+
}
|
|
729
788
|
/* @layer qti-variants { */
|
|
730
789
|
&::part(ch) {
|
|
731
790
|
display: none;
|
|
@@ -748,19 +807,22 @@ qti-response-declaration {
|
|
|
748
807
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
749
808
|
outline: none;
|
|
750
809
|
border-radius: var(--qti-border-radius-md);
|
|
751
|
-
padding: var(--qti-padding-
|
|
810
|
+
padding: var(--qti-padding-sm) var(--qti-padding-md);
|
|
752
811
|
font-weight: var(--qti-font-weight-semibold);
|
|
753
812
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
754
|
-
outline: none
|
|
755
|
-
background-color: var(--qti-bg-gray-50);
|
|
756
|
-
outline-color: var(--qti-focus-color);
|
|
757
|
-
outline-width: 2px
|
|
813
|
+
outline: none
|
|
758
814
|
}
|
|
759
815
|
/* } */
|
|
760
816
|
}
|
|
761
817
|
|
|
762
818
|
&.qti-unselected-hidden {
|
|
763
819
|
qti-hottext {
|
|
820
|
+
&:hover {
|
|
821
|
+
background-color: var(--qti-bg-gray-50);
|
|
822
|
+
}
|
|
823
|
+
&:focus {
|
|
824
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
825
|
+
}
|
|
764
826
|
cursor: pointer;
|
|
765
827
|
&::part(ch) {
|
|
766
828
|
display: none;
|
|
@@ -780,15 +842,18 @@ qti-response-declaration {
|
|
|
780
842
|
color: var(--qti-text-gray-500);
|
|
781
843
|
border-color: var(--qti-border-color-gray);
|
|
782
844
|
}
|
|
783
|
-
background-color: var(--qti-bg-gray-50);
|
|
784
|
-
outline-color: var(--qti-focus-color);
|
|
785
|
-
outline-width: 2px
|
|
786
845
|
}
|
|
787
846
|
}
|
|
788
847
|
}
|
|
789
848
|
|
|
790
849
|
qti-inline-choice-interaction {
|
|
791
850
|
&::part(select) {
|
|
851
|
+
&:hover {
|
|
852
|
+
background-color: var(--qti-bg-gray-50);
|
|
853
|
+
}
|
|
854
|
+
&:focus {
|
|
855
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
856
|
+
}
|
|
792
857
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
793
858
|
outline: none;
|
|
794
859
|
border-radius: var(--qti-border-radius-md);
|
|
@@ -800,10 +865,7 @@ qti-response-declaration {
|
|
|
800
865
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
801
866
|
outline: none;
|
|
802
867
|
background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
|
|
803
|
-
no-repeat center right 6px
|
|
804
|
-
background-color: var(--qti-bg-gray-50);
|
|
805
|
-
outline-color: var(--qti-focus-color);
|
|
806
|
-
outline-width: 2px;
|
|
868
|
+
no-repeat center right 6px
|
|
807
869
|
}
|
|
808
870
|
}
|
|
809
871
|
|
|
@@ -811,10 +873,16 @@ qti-response-declaration {
|
|
|
811
873
|
& qti-simple-match-set:first-of-type {
|
|
812
874
|
display: flex;
|
|
813
875
|
flex-wrap: wrap;
|
|
814
|
-
gap:
|
|
876
|
+
gap: var(--qti-gap-size); /* gap-2 */
|
|
815
877
|
padding-bottom: 1rem; /* pb-4 */
|
|
816
878
|
|
|
817
879
|
& qti-simple-associable-choice {
|
|
880
|
+
&:hover {
|
|
881
|
+
background-color: var(--qti-bg-gray-50);
|
|
882
|
+
}
|
|
883
|
+
&:focus {
|
|
884
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
885
|
+
}
|
|
818
886
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
819
887
|
outline: none;
|
|
820
888
|
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
|
|
@@ -833,10 +901,7 @@ qti-response-declaration {
|
|
|
833
901
|
);
|
|
834
902
|
background-repeat: repeat-y;
|
|
835
903
|
background-position: left 2px;
|
|
836
|
-
background-size: 14px 8px
|
|
837
|
-
background-color: var(--qti-bg-gray-50);
|
|
838
|
-
outline-color: var(--qti-focus-color);
|
|
839
|
-
outline-width: 2px;
|
|
904
|
+
background-size: 14px 8px
|
|
840
905
|
}
|
|
841
906
|
}
|
|
842
907
|
|
|
@@ -844,13 +909,32 @@ qti-response-declaration {
|
|
|
844
909
|
display: grid;
|
|
845
910
|
grid-auto-columns: 1fr; /* auto-cols-fr */
|
|
846
911
|
grid-auto-flow: column; /* grid-flow-col */
|
|
847
|
-
gap:
|
|
912
|
+
gap: var(--qti-gap-size); /* gap-2 */
|
|
848
913
|
width: 100%; /* w-full */
|
|
849
914
|
|
|
850
915
|
& qti-simple-associable-choice {
|
|
851
916
|
display: flex;
|
|
852
917
|
flex-direction: column;
|
|
853
|
-
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
& qti-simple-associable-choice[enabled] {
|
|
921
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
& qti-simple-associable-choice[active] {
|
|
925
|
+
border-color: var(--qti-bg-primary);
|
|
926
|
+
}
|
|
927
|
+
|
|
928
|
+
& qti-simple-associable-choice::part(dropslot) {
|
|
929
|
+
&:hover {
|
|
930
|
+
background-color: var(--qti-bg-gray-50);
|
|
931
|
+
}
|
|
932
|
+
&:focus {
|
|
933
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
934
|
+
}
|
|
935
|
+
display: flex;
|
|
936
|
+
flex-direction: column;
|
|
937
|
+
min-height: 6rem;
|
|
854
938
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
855
939
|
outline: none;
|
|
856
940
|
border-radius: var(--qti-border-radius-lg);
|
|
@@ -859,18 +943,10 @@ qti-response-declaration {
|
|
|
859
943
|
margin: 1px;
|
|
860
944
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
861
945
|
outline: none;
|
|
862
|
-
background-color: var(--qti-bg-gray-50);
|
|
863
|
-
outline-color: var(--qti-focus-color);
|
|
864
|
-
outline-width: 2px;
|
|
865
|
-
}
|
|
866
|
-
|
|
867
|
-
& qti-simple-associable-choice[enabled] {
|
|
868
|
-
outline-color: var(--qti-focus-color);
|
|
869
|
-
outline-width: 2px;
|
|
870
946
|
}
|
|
871
947
|
|
|
872
|
-
& qti-simple-associable-choice
|
|
873
|
-
|
|
948
|
+
& qti-simple-associable-choice > qti-simple-associable-choice::part(dropslot) {
|
|
949
|
+
display: none;
|
|
874
950
|
}
|
|
875
951
|
|
|
876
952
|
& qti-simple-associable-choice > *:not(qti-simple-associable-choice) {
|
|
@@ -878,6 +954,12 @@ qti-response-declaration {
|
|
|
878
954
|
}
|
|
879
955
|
|
|
880
956
|
& qti-simple-associable-choice > qti-simple-associable-choice {
|
|
957
|
+
&:hover {
|
|
958
|
+
background-color: var(--qti-bg-gray-50);
|
|
959
|
+
}
|
|
960
|
+
&:focus {
|
|
961
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
962
|
+
}
|
|
881
963
|
flex-basis: fit-content;
|
|
882
964
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
883
965
|
outline: none;
|
|
@@ -898,9 +980,6 @@ qti-response-declaration {
|
|
|
898
980
|
background-repeat: repeat-y;
|
|
899
981
|
background-position: left 2px;
|
|
900
982
|
background-size: 14px 8px;
|
|
901
|
-
background-color: var(--qti-bg-gray-50);
|
|
902
|
-
outline-color: var(--qti-focus-color);
|
|
903
|
-
outline-width: 2px;
|
|
904
983
|
}
|
|
905
984
|
}
|
|
906
985
|
}
|
|
@@ -908,6 +987,12 @@ qti-response-declaration {
|
|
|
908
987
|
qti-order-interaction {
|
|
909
988
|
&::part(qti-simple-choice),
|
|
910
989
|
& qti-simple-choice {
|
|
990
|
+
&:hover {
|
|
991
|
+
background-color: var(--qti-bg-gray-50);
|
|
992
|
+
}
|
|
993
|
+
&:focus {
|
|
994
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
995
|
+
}
|
|
911
996
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
912
997
|
outline: none;
|
|
913
998
|
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
|
|
@@ -926,10 +1011,7 @@ qti-response-declaration {
|
|
|
926
1011
|
);
|
|
927
1012
|
background-repeat: repeat-y;
|
|
928
1013
|
background-position: left 2px;
|
|
929
|
-
background-size: 14px 8px
|
|
930
|
-
background-color: var(--qti-bg-gray-50);
|
|
931
|
-
outline-color: var(--qti-focus-color);
|
|
932
|
-
outline-width: 2px;
|
|
1014
|
+
background-size: 14px 8px
|
|
933
1015
|
}
|
|
934
1016
|
&::part(qti-simple-choice) {
|
|
935
1017
|
display: flex;
|
|
@@ -945,6 +1027,12 @@ qti-response-declaration {
|
|
|
945
1027
|
gap: 0.5rem; /* gap-2 */
|
|
946
1028
|
}
|
|
947
1029
|
&::part(drop-list) {
|
|
1030
|
+
&:hover {
|
|
1031
|
+
background-color: var(--qti-bg-gray-50);
|
|
1032
|
+
}
|
|
1033
|
+
&:focus {
|
|
1034
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1035
|
+
}
|
|
948
1036
|
display: flex;
|
|
949
1037
|
min-height: 4rem;
|
|
950
1038
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
@@ -955,9 +1043,6 @@ qti-response-declaration {
|
|
|
955
1043
|
margin: 1px;
|
|
956
1044
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
957
1045
|
outline: none;
|
|
958
|
-
background-color: var(--qti-bg-gray-50);
|
|
959
|
-
outline-color: var(--qti-focus-color);
|
|
960
|
-
outline-width: 2px;
|
|
961
1046
|
}
|
|
962
1047
|
&::part(active) {
|
|
963
1048
|
border-color: var(--qti-bg-primary);
|
|
@@ -967,6 +1052,7 @@ qti-response-declaration {
|
|
|
967
1052
|
qti-associate-interaction {
|
|
968
1053
|
&::part(qti-simple-associable-choice),
|
|
969
1054
|
& qti-simple-associable-choice {
|
|
1055
|
+
/* drags in drops */
|
|
970
1056
|
display: flex;
|
|
971
1057
|
overflow: hidden;
|
|
972
1058
|
align-items: center;
|
|
@@ -992,29 +1078,49 @@ qti-response-declaration {
|
|
|
992
1078
|
background-size: 14px 8px;
|
|
993
1079
|
}
|
|
994
1080
|
&::part(associables-container) {
|
|
995
|
-
margin: 0.5rem 0; /* my-2 */
|
|
996
1081
|
display: flex;
|
|
997
|
-
width: 100%;
|
|
998
1082
|
justify-content: space-between;
|
|
999
1083
|
background: linear-gradient(
|
|
1000
1084
|
180deg,
|
|
1001
1085
|
rgb(0 0 0 / 0%) calc(50% - 1px),
|
|
1002
|
-
|
|
1086
|
+
var(--qti-border-color-gray) calc(50%),
|
|
1003
1087
|
rgb(0 0 0 / 0%) calc(50% + 1px)
|
|
1004
1088
|
);
|
|
1005
1089
|
}
|
|
1006
1090
|
&::part(active) {
|
|
1007
1091
|
border-color: var(--qti-bg-primary);
|
|
1008
1092
|
}
|
|
1093
|
+
&::part(drop-container) {
|
|
1094
|
+
display: flex;
|
|
1095
|
+
flex-direction: column;
|
|
1096
|
+
gap: var(--qti-gap-size);
|
|
1097
|
+
}
|
|
1009
1098
|
&::part(drop-list) {
|
|
1099
|
+
&:focus {
|
|
1100
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1101
|
+
}
|
|
1010
1102
|
display: grid;
|
|
1011
1103
|
height: 3rem;
|
|
1012
|
-
width:
|
|
1104
|
+
min-width: 10rem;
|
|
1105
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1106
|
+
outline: none;
|
|
1107
|
+
border-radius: var(--qti-border-radius-lg);
|
|
1108
|
+
position: relative;
|
|
1109
|
+
background-color: var(--qti-bg-gray-50);
|
|
1110
|
+
margin: 1px;
|
|
1111
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1112
|
+
outline: none;
|
|
1013
1113
|
}
|
|
1014
1114
|
}
|
|
1015
1115
|
|
|
1016
1116
|
qti-graphic-order-interaction {
|
|
1017
1117
|
& qti-hotspot-choice {
|
|
1118
|
+
&:hover {
|
|
1119
|
+
background-color: var(--qti-bg-gray-50);
|
|
1120
|
+
}
|
|
1121
|
+
&:focus {
|
|
1122
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1123
|
+
}
|
|
1018
1124
|
&[aria-checked='true'] {
|
|
1019
1125
|
border-color: var(--qti-bg-primary);
|
|
1020
1126
|
}
|
|
@@ -1050,10 +1156,7 @@ qti-response-declaration {
|
|
|
1050
1156
|
background-color: transparent;
|
|
1051
1157
|
padding: 0;
|
|
1052
1158
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1053
|
-
outline: none
|
|
1054
|
-
background-color: var(--qti-bg-gray-50);
|
|
1055
|
-
outline-color: var(--qti-focus-color);
|
|
1056
|
-
outline-width: 2px
|
|
1159
|
+
outline: none
|
|
1057
1160
|
}
|
|
1058
1161
|
}
|
|
1059
1162
|
|
|
@@ -1063,6 +1166,12 @@ qti-response-declaration {
|
|
|
1063
1166
|
|
|
1064
1167
|
& qti-associable-hotspot {
|
|
1065
1168
|
&[shape='circle'] {
|
|
1169
|
+
&:hover {
|
|
1170
|
+
background-color: var(--qti-bg-gray-50);
|
|
1171
|
+
}
|
|
1172
|
+
&:focus {
|
|
1173
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1174
|
+
}
|
|
1066
1175
|
&[aria-checked='true'] {
|
|
1067
1176
|
border-color: var(--qti-bg-primary);
|
|
1068
1177
|
}
|
|
@@ -1085,13 +1194,16 @@ qti-response-declaration {
|
|
|
1085
1194
|
background-color: transparent;
|
|
1086
1195
|
padding: 0;
|
|
1087
1196
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1088
|
-
outline: none
|
|
1089
|
-
background-color: var(--qti-bg-gray-50);
|
|
1090
|
-
outline-color: var(--qti-focus-color);
|
|
1091
|
-
outline-width: 2px
|
|
1197
|
+
outline: none
|
|
1092
1198
|
}
|
|
1093
1199
|
|
|
1094
1200
|
&[shape='square'] {
|
|
1201
|
+
&:hover {
|
|
1202
|
+
background-color: var(--qti-bg-gray-50);
|
|
1203
|
+
}
|
|
1204
|
+
&:focus {
|
|
1205
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1206
|
+
}
|
|
1095
1207
|
&[aria-checked='true'] {
|
|
1096
1208
|
border-color: var(--qti-bg-primary);
|
|
1097
1209
|
}
|
|
@@ -1114,10 +1226,7 @@ qti-response-declaration {
|
|
|
1114
1226
|
background-color: transparent;
|
|
1115
1227
|
padding: 0;
|
|
1116
1228
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1117
|
-
outline: none
|
|
1118
|
-
background-color: var(--qti-bg-gray-50);
|
|
1119
|
-
outline-color: var(--qti-focus-color);
|
|
1120
|
-
outline-width: 2px
|
|
1229
|
+
outline: none
|
|
1121
1230
|
}
|
|
1122
1231
|
}
|
|
1123
1232
|
}
|
|
@@ -1203,7 +1312,14 @@ qti-response-declaration {
|
|
|
1203
1312
|
|
|
1204
1313
|
qti-select-point-interaction {
|
|
1205
1314
|
&::part(point) {
|
|
1315
|
+
&:hover {
|
|
1316
|
+
background-color: var(--qti-bg-gray-50);
|
|
1317
|
+
}
|
|
1318
|
+
&:focus {
|
|
1319
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1320
|
+
}
|
|
1206
1321
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1322
|
+
border-radius: var(--qti-border-radius-full);
|
|
1207
1323
|
outline: none;
|
|
1208
1324
|
width: 1.5rem;
|
|
1209
1325
|
height: 1.5rem;
|
|
@@ -1211,9 +1327,6 @@ qti-response-declaration {
|
|
|
1211
1327
|
padding: 0;
|
|
1212
1328
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1213
1329
|
outline: none;
|
|
1214
|
-
background-color: var(--qti-bg-gray-50);
|
|
1215
|
-
outline-color: var(--qti-focus-color);
|
|
1216
|
-
outline-width: 2px;
|
|
1217
1330
|
}
|
|
1218
1331
|
}
|
|
1219
1332
|
|