@citolab/qti-components 7.15.1 → 7.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/base.js +2 -49
  2. package/dist/base.js.map +1 -1
  3. package/dist/elements.js +2 -41
  4. package/dist/elements.js.map +1 -1
  5. package/dist/index.js +9 -327
  6. package/dist/index.js.map +1 -1
  7. package/dist/interactions.js +2 -71
  8. package/dist/interactions.js.map +1 -1
  9. package/dist/item.js +2 -22
  10. package/dist/item.js.map +1 -1
  11. package/dist/loader.js +2 -10
  12. package/dist/loader.js.map +1 -1
  13. package/dist/processing.js +2 -102
  14. package/dist/processing.js.map +1 -1
  15. package/dist/test.js +2 -60
  16. package/dist/test.js.map +1 -1
  17. package/dist/transformers.js +2 -11
  18. package/dist/transformers.js.map +1 -1
  19. package/package.json +5 -3
  20. package/dist/chunk-2DOYPVF5.js +0 -481
  21. package/dist/chunk-2DOYPVF5.js.map +0 -1
  22. package/dist/chunk-2ZEJ3RR5.js +0 -89
  23. package/dist/chunk-2ZEJ3RR5.js.map +0 -1
  24. package/dist/chunk-352OTVTY.js +0 -3330
  25. package/dist/chunk-352OTVTY.js.map +0 -1
  26. package/dist/chunk-C2HQFI2C.js +0 -5927
  27. package/dist/chunk-C2HQFI2C.js.map +0 -1
  28. package/dist/chunk-DWIRLYDS.js +0 -20
  29. package/dist/chunk-DWIRLYDS.js.map +0 -1
  30. package/dist/chunk-EUXUH3YW.js +0 -15
  31. package/dist/chunk-EUXUH3YW.js.map +0 -1
  32. package/dist/chunk-F44CI35W.js +0 -145
  33. package/dist/chunk-F44CI35W.js.map +0 -1
  34. package/dist/chunk-INKI27D5.js +0 -493
  35. package/dist/chunk-INKI27D5.js.map +0 -1
  36. package/dist/chunk-JEUY3MYB.js +0 -2010
  37. package/dist/chunk-JEUY3MYB.js.map +0 -1
  38. package/dist/chunk-O4XIWHTF.js +0 -1139
  39. package/dist/chunk-O4XIWHTF.js.map +0 -1
  40. package/dist/chunk-RI47B4ZT.js +0 -1753
  41. package/dist/chunk-RI47B4ZT.js.map +0 -1
  42. package/dist/chunk-VEV4DGPH.js +0 -31
  43. package/dist/chunk-VEV4DGPH.js.map +0 -1
  44. package/dist/chunk-W4SQRNWO.js +0 -3844
  45. package/dist/chunk-W4SQRNWO.js.map +0 -1
package/dist/chunk-W4SQRNWO.js DELETED
@@ -1,3844 +0,0 @@
1
- import {
2
- e,
3
- f,
4
- i
5
- } from "./chunk-F44CI35W.js";
6
- import {
7
- w
8
- } from "./chunk-JEUY3MYB.js";
9
-
10
- // ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/node/directives/private-async-helpers.js
11
- var s = class {
12
- constructor(t) {
13
- this.G = t;
14
- }
15
- disconnect() {
16
- this.G = void 0;
17
- }
18
- reconnect(t) {
19
- this.G = t;
20
- }
21
- deref() {
22
- return this.G;
23
- }
24
- };
25
- var i2 = class {
26
- constructor() {
27
- this.Y = void 0, this.Z = void 0;
28
- }
29
- get() {
30
- return this.Y;
31
- }
32
- pause() {
33
- this.Y ??= new Promise(((t) => this.Z = t));
34
- }
35
- resume() {
36
- this.Z?.(), this.Y = this.Z = void 0;
37
- }
38
- };
39
-
40
- // ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/node/directives/until.js
41
- var n = (t) => !i(t) && "function" == typeof t.then;
42
- var h = 1073741823;
43
- var c = class extends f {
44
- constructor() {
45
- super(...arguments), this._$Cwt = h, this._$Cbt = [], this._$CK = new s(this), this._$CX = new i2();
46
- }
47
- render(...s2) {
48
- return s2.find(((t) => !n(t))) ?? w;
49
- }
50
- update(s2, i3) {
51
- const e2 = this._$Cbt;
52
- let r = e2.length;
53
- this._$Cbt = i3;
54
- const o = this._$CK, c2 = this._$CX;
55
- this.isConnected || this.disconnected();
56
- for (let t = 0; t < i3.length && !(t > this._$Cwt); t++) {
57
- const s3 = i3[t];
58
- if (!n(s3)) return this._$Cwt = t, s3;
59
- t < r && s3 === e2[t] || (this._$Cwt = h, r = 0, Promise.resolve(s3).then((async (t2) => {
60
- for (; c2.get(); ) await c2.get();
61
- const i4 = o.deref();
62
- if (void 0 !== i4) {
63
- const e3 = i4._$Cbt.indexOf(s3);
64
- e3 > -1 && e3 < i4._$Cwt && (i4._$Cwt = e3, i4.setValue(t2));
65
- }
66
- })));
67
- }
68
- return w;
69
- }
70
- disconnected() {
71
- this._$CK.disconnect(), this._$CX.pause();
72
- }
73
- reconnected() {
74
- this._$CK.reconnect(this), this._$CX.resume();
75
- }
76
- };
77
- var m = e(c);
78
-
79
- // inline:@qti-components/theme/src/item.css?inline
80
- var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
81
-
82
- :root,
83
- :host {
84
- /* Active colors */
85
- --qti-bg-active: #ffecec;
86
- --qti-border-active: #f86d70;
87
-
88
- /* Correct colors */
89
- --qti-correct-light: #c8e6c9;
90
- --qti-correct: #66bb6a;
91
-
92
- /** Partially correct colors */
93
- --qti-partially-correct-light: #fff3e0;
94
- --qti-partially-correct: #ffeb3b;
95
-
96
- /* Incorrect colors */
97
- --qti-incorrect-light: #ef9a9a;
98
- --qti-incorrect: #ef5350;
99
-
100
- /* Validation colors */
101
- --qti-validation-error-bg: #fffbeb;
102
- --qti-validation-text: #92400e;
103
-
104
- /* Gap size */
105
- --qti-gap-size: 1rem;
106
-
107
- /* Background colors */
108
- --qti-bg: white;
109
- --qti-hover-bg: #f9fafb;
110
-
111
- /* Light theme colors */
112
- --qti-light-bg-active: #f0f0f0; /* Light gray */
113
- --qti-light-border-active: #d0d0d0; /* Medium gray */
114
-
115
- /* Dark theme colors */
116
- --qti-dark-bg-active: #1f2937; /* Dark gray */
117
- --qti-dark-border-active: #64748b; /* Medium gray */
118
-
119
- /* Disabled colors */
120
- --qti-disabled-bg: #f3f4f6;
121
- --qti-disabled-color: #45484f;
122
-
123
- /* Border properties */
124
- --qti-border-thickness: 2px;
125
- --qti-border-style: solid;
126
- --qti-border-color: #c6cad0;
127
- --qti-border-radius: 0.3rem;
128
- --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
129
-
130
- /* Focus & active states */
131
- --qti-focus-border-width: 5px;
132
- --qti-focus-color: #bddcff7e;
133
-
134
- /* Class-specific variables */
135
-
136
- /* Form elements */
137
- --qti-form-size: 1rem;
138
-
139
- /* Order buttons */
140
- --qti-order-size: 2rem;
141
-
142
- /* Generic padding for all elements */
143
- --qti-padding-vertical: 0.5rem; /* py-2 */
144
- --qti-padding-horizontal: 0.5rem; /* px-2 */
145
-
146
- /* Dropzones */
147
- --qti-dropzone-padding: 0rem;
148
- }
149
-
150
- /* SVG masks and backgrounds */
151
-
152
- .chevron {
153
- 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")
154
- no-repeat center right 6px;
155
- }
156
-
157
- .handle {
158
- background-image: radial-gradient(
159
- circle at center,
160
- rgb(0 0 0 / 10%) 0,
161
- rgb(0 0 0 / 20%) 2px,
162
- rgb(255 255 255 / 0%) 2px,
163
- rgb(255 255 255 / 0%) 100%
164
- );
165
- background-repeat: repeat-y;
166
- background-position: left center;
167
- background-size: 14px 8px;
168
- }
169
-
170
- .check-mask {
171
- -webkit-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");
172
- 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");
173
- }
174
-
175
- /*
176
- Following are classes that can be applied to elements and element states, so they are not used directly
177
- The @apply directive is used to apply these classes to elements
178
- */
179
-
180
- /* Apply .bordered to an element */
181
-
182
- .bordered {
183
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
184
- outline: none;
185
- }
186
-
187
- /* Apply .form rules for checkbox and radiobutton */
188
-
189
- .form {
190
-
191
- /* background-color: var(--qti-bg); */
192
- display: grid;
193
- place-content: center;
194
- width: var(--qti-form-size);
195
- height: var(--qti-form-size);
196
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
197
- outline: none;
198
- }
199
-
200
- /* Apply .button rules for button-like elements, such as drags and buttons */
201
-
202
- .button {
203
-
204
- border-radius: var(--qti-border-radius);
205
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
206
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
207
- outline: none;
208
- }
209
-
210
- /* Apply .select for the select dropdown element */
211
-
212
- .select {
213
-
214
- border-radius: var(--qti-border-radius);
215
- position: relative;
216
- -webkit-appearance: none;
217
- -moz-appearance: none;
218
- appearance: none;
219
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
220
- padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; 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")
221
- no-repeat center right 6px;
222
- }
223
-
224
- /* Apply .text for the input text and textarea */
225
-
226
- .text {
227
-
228
- border-radius: 0;
229
- cursor: text;
230
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
231
- background: var(--qti-bg);
232
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
233
- outline: none;
234
- }
235
-
236
- /* Apply .spot for hotspot shapes */
237
-
238
- .spot {
239
-
240
- width: 100%;
241
- height: 100%;
242
- background-color: transparent;
243
- margin: 0 !important;
244
- padding: 0 !important;
245
- border: 0 !important;
246
- box-sizing: border-box !important;
247
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
248
- outline: none;
249
- }
250
-
251
- /* Apply .point for circular small hotspots */
252
-
253
- .point {
254
-
255
- box-sizing: border-box;
256
- border-radius: 100%;
257
- border: 1px solid white;
258
- background-color: black;
259
- opacity: 0.5;
260
- padding: 0;
261
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
262
- outline: none;
263
- }
264
-
265
- /* Apply .drag for draggable elements */
266
-
267
- .drag {
268
-
269
- box-sizing: border-box;
270
- transition:
271
- transform 200ms ease-out,
272
- box-shadow 200ms ease-out,
273
- rotate 200ms ease-out;
274
- cursor: grab;
275
- background-color: var(--qti-bg);
276
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
277
- border-radius: var(--qti-border-radius);
278
-
279
- /* padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; */
280
-
281
- /* 1.5rem for the drag */
282
-
283
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
284
-
285
- outline: none;
286
- }
287
-
288
- /* Apply .dragging for the dragging state of a draggable element */
289
-
290
- .dragging {
291
- pointer-events: none;
292
- rotate: -2deg;
293
- box-shadow:
294
- 0 8px 12px rgb(0 0 0 / 20%),
295
- 0 4px 8px rgb(0 0 0 / 10%);
296
- }
297
-
298
- /* Apply .drop for an element where you can drop the draggable */
299
-
300
- .drop {
301
- /* @apply bordered; */
302
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
303
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
304
- center no-repeat;
305
- border-radius: var(--qti-border-radius);
306
- position: relative;
307
- background-color: var(--qti-bg);
308
- }
309
-
310
- /* Apply .dropping for an indicator where you can drop the draggable */
311
-
312
- .dropping {
313
- background-color: var(--qti-bg-active);
314
- }
315
-
316
- /* Apply .order for a small circular button */
317
-
318
- .order {
319
-
320
- display: grid;
321
- place-content: center;
322
-
323
- /* background-color: var(--qti-bg-active); */
324
- box-sizing: border-box;
325
- border-radius: 100%;
326
- width: var(--qti-order-size);
327
- height: var(--qti-order-size);
328
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
329
- outline: none;
330
- }
331
-
332
- /* Apply .check-size for radio and checkbox size */
333
-
334
- .check-size {
335
- width: calc(var(--qti-form-size) - 6px);
336
- height: calc(var(--qti-form-size) - 6px);
337
- }
338
-
339
- /* Apply .check for checkbox */
340
-
341
- .check {
342
- gap: 0.5rem;
343
- background-color: var(--qti-bg);
344
- border-radius: var(--qti-border-radius);
345
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
346
- outline: none;
347
- cursor: pointer;
348
- }
349
-
350
- /* Apply .check-radio for outer circle of the radio buttons */
351
-
352
- .check-radio {
353
-
354
- border-radius: 100%;
355
-
356
- display: grid;
357
-
358
- place-content: center;
359
-
360
- width: var(--qti-form-size);
361
-
362
- height: var(--qti-form-size);
363
-
364
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
365
-
366
- outline: none;
367
- }
368
-
369
- /* Apply .check-radio-checked for the inner checked radio */
370
-
371
- .check-radio-checked {
372
- background-color: var(--qti-border-active);
373
- border-radius: 100%;
374
- }
375
-
376
- /* Apply .check-checkbox for outer square of the checkbox */
377
-
378
- .check-checkbox {
379
-
380
- display: flex;
381
- place-items: center;
382
- border-radius: var(--qti-border-radius);
383
- display: grid;
384
- place-content: center;
385
- width: var(--qti-form-size);
386
- height: var(--qti-form-size);
387
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
388
- outline: none;
389
- }
390
-
391
- /* Apply .check-checkbox-checked for the inner checkmark */
392
-
393
- .check-checkbox-checked {
394
- background-color: var(--qti-border-active);
395
- -webkit-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");
396
- 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");
397
- }
398
-
399
- /* Apply .hov for hover state */
400
-
401
- .hov {
402
- /* background-color: var(--qti-hover-bg); */
403
- }
404
-
405
- /* Apply .foc for focus state */
406
-
407
- .foc {
408
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
409
- }
410
-
411
- /* Apply .act for active state */
412
-
413
- .act {
414
- border-color: var(--qti-border-active);
415
- background-color: var(--qti-bg-active);
416
- }
417
-
418
- .act-bg {
419
- background-color: var(--qti-bg-active);
420
- }
421
-
422
- .act-bor {
423
- border-color: var(--qti-border-active);
424
- }
425
-
426
- /* Apply .rdo for readonly state */
427
-
428
- .rdo {
429
- cursor: pointer;
430
- background-color: var(--qti-bg);
431
- outline: 0;
432
- border: none;
433
- }
434
-
435
- /* Apply .dis for disabled state */
436
-
437
- .dis {
438
- cursor: not-allowed;
439
- background-color: var(--qti-disabled-bg);
440
- color: var(--qti-disabled-color);
441
- border-color: var(--qti-border-color);
442
- outline: 4px solid var(--qti-disabled-bg);
443
- }
444
-
445
- /* base */
446
-
447
- /* ============================
448
- QTI 3 shared css
449
- 1. Display
450
- 2. Special Flex styles
451
- 3. Margin
452
- 4. Padding
453
- 5. Horizontal Alignment styles
454
- 6. Vertical Alignment styles
455
- 7. Height
456
- 8. Width
457
- 9. Text-Indent
458
- 10. List Style
459
- 11. Layout
460
- 12. Other QTI 3 presentation utilities
461
- ============================ */
462
-
463
- /* ==========
464
- Display css
465
- =========== */
466
-
467
- .qti-display-inline {
468
- display: inline;
469
- }
470
-
471
- .qti-display-inline-block {
472
- display: inline-block;
473
- }
474
-
475
- .qti-display-block {
476
- display: block;
477
- }
478
-
479
- .qti-display-flex {
480
- display: flex;
481
- }
482
-
483
- .qti-display-inline-flex {
484
- display: inline-flex;
485
- }
486
-
487
- .qti-display-grid {
488
- display: grid;
489
- }
490
-
491
- .qti-display-inline-grid {
492
- display: inline-grid;
493
- }
494
-
495
- .qti-display-table {
496
- display: table;
497
- }
498
-
499
- .qti-display-table-cell {
500
- display: table-cell;
501
- }
502
-
503
- .qti-display-table-row {
504
- display: table-row;
505
- }
506
-
507
- .qti-display-list-item {
508
- display: list-item;
509
- }
510
-
511
- .qti-display-inherit {
512
- display: inherit;
513
- }
514
-
515
- /*
516
- * hidden to screen readers and sighted
517
- */
518
-
519
- .qti-hidden {
520
- display: none;
521
- }
522
-
523
- /*
524
- * visible to screen readers, hidden to sighted
525
- */
526
-
527
- .qti-visually-hidden {
528
- position: fixed !important;
529
- overflow: hidden;
530
- clip: rect(1px 1px 1px 1px);
531
- height: 1px;
532
- width: 1px;
533
- border: 0;
534
- margin: -1px;
535
- }
536
-
537
- /* =============================
538
- Special flex styles
539
- ============================= */
540
-
541
- .qti-flex-direction-column {
542
- flex-direction: column;
543
- }
544
-
545
- .qti-flex-direction-row {
546
- flex-direction: row;
547
- }
548
-
549
- .qti-flex-grow-1 {
550
- flex-grow: 1;
551
- }
552
-
553
- .qti-flex-grow-0 {
554
- flex-grow: 0;
555
- }
556
-
557
- /* =========
558
- Margin css
559
- ========== */
560
-
561
- /**
562
- * For margin Top and Bottom and Left and Right
563
- */
564
-
565
- .qti-margin-0 {
566
- margin: 0 !important;
567
- }
568
-
569
- .qti-margin-1 {
570
- margin: 0.25rem !important;
571
- }
572
-
573
- .qti-margin-2 {
574
- margin: 0.5rem !important;
575
- }
576
-
577
- .qti-margin-3 {
578
- margin: 1rem !important;
579
- }
580
-
581
- .qti-margin-4 {
582
- margin: 1.5rem !important;
583
- }
584
-
585
- .qti-margin-5 {
586
- margin: 3rem !important;
587
- }
588
-
589
- .qti-margin-auto {
590
- margin: auto !important;
591
- }
592
-
593
- /*
594
- For margin Left and Right
595
- */
596
-
597
- .qti-margin-x-0 {
598
- margin-right: 0 !important;
599
- margin-left: 0 !important;
600
- }
601
-
602
- .qti-margin-x-1 {
603
- margin-right: 0.25rem !important;
604
- margin-left: 0.25rem !important;
605
- }
606
-
607
- .qti-margin-x-2 {
608
- margin-right: 0.5rem !important;
609
- margin-left: 0.5rem !important;
610
- }
611
-
612
- .qti-margin-x-3 {
613
- margin-right: 1rem !important;
614
- margin-left: 1rem !important;
615
- }
616
-
617
- .qti-margin-x-4 {
618
- margin-right: 1.5rem !important;
619
- margin-left: 1.5rem !important;
620
- }
621
-
622
- .qti-margin-x-5 {
623
- margin-right: 3rem !important;
624
- margin-left: 3rem !important;
625
- }
626
-
627
- .qti-margin-x-auto {
628
- margin-right: auto !important;
629
- margin-left: auto !important;
630
- }
631
-
632
- /*
633
- For margin Top and Bottom
634
- */
635
-
636
- .qti-margin-y-0 {
637
- margin-top: 0 !important;
638
- margin-bottom: 0 !important;
639
- }
640
-
641
- .qti-margin-y-1 {
642
- margin-top: 0.25rem !important;
643
- margin-bottom: 0.25rem !important;
644
- }
645
-
646
- .qti-margin-y-2 {
647
- margin-top: 0.5rem !important;
648
- margin-bottom: 0.5rem !important;
649
- }
650
-
651
- .qti-margin-y-3 {
652
- margin-top: 1rem !important;
653
- margin-bottom: 1rem !important;
654
- }
655
-
656
- .qti-margin-y-4 {
657
- margin-top: 1.5rem !important;
658
- margin-bottom: 1.5rem !important;
659
- }
660
-
661
- .qti-margin-y-5 {
662
- margin-top: 3rem !important;
663
- margin-bottom: 3rem !important;
664
- }
665
-
666
- .qti-margin-y-auto {
667
- margin-top: auto !important;
668
- margin-bottom: auto !important;
669
- }
670
-
671
- /*
672
- For margin Top
673
- */
674
-
675
- .qti-margin-t-0 {
676
- margin-top: 0 !important;
677
- }
678
-
679
- .qti-margin-t-1 {
680
- margin-top: 0.25rem !important;
681
- }
682
-
683
- .qti-margin-t-2 {
684
- margin-top: 0.5rem !important;
685
- }
686
-
687
- .qti-margin-t-3 {
688
- margin-top: 1rem !important;
689
- }
690
-
691
- .qti-margin-t-4 {
692
- margin-top: 1.5rem !important;
693
- }
694
-
695
- .qti-margin-t-5 {
696
- margin-top: 3rem !important;
697
- }
698
-
699
- .qti-margin-t-auto {
700
- margin-top: auto !important;
701
- }
702
-
703
- /*
704
- For margin Bottom
705
- */
706
-
707
- .qti-margin-b-0 {
708
- margin-bottom: 0 !important;
709
- }
710
-
711
- .qti-margin-b-1 {
712
- margin-bottom: 0.25rem !important;
713
- }
714
-
715
- .qti-margin-b-2 {
716
- margin-bottom: 0.5rem !important;
717
- }
718
-
719
- .qti-margin-b-3 {
720
- margin-bottom: 1rem !important;
721
- }
722
-
723
- .qti-margin-b-4 {
724
- margin-bottom: 1.5rem !important;
725
- }
726
-
727
- .qti-margin-b-5 {
728
- margin-bottom: 3rem !important;
729
- }
730
-
731
- .qti-margin-b-auto {
732
- margin-bottom: auto !important;
733
- }
734
-
735
- /*
736
- For margin Start LTR
737
- */
738
-
739
- .qti-margin-s-0 {
740
- margin-left: 0 !important;
741
- }
742
-
743
- .qti-margin-s-1 {
744
- margin-left: 0.25rem !important;
745
- }
746
-
747
- .qti-margin-s-2 {
748
- margin-left: 0.5rem !important;
749
- }
750
-
751
- .qti-margin-s-3 {
752
- margin-left: 1rem !important;
753
- }
754
-
755
- .qti-margin-s-4 {
756
- margin-left: 1.5rem !important;
757
- }
758
-
759
- .qti-margin-s-5 {
760
- margin-left: 3rem !important;
761
- }
762
-
763
- .qti-margin-s-auto {
764
- margin-left: auto !important;
765
- }
766
-
767
- /*
768
- For margin End LTR
769
- */
770
-
771
- .qti-margin-e-0 {
772
- margin-right: 0 !important;
773
- }
774
-
775
- .qti-margin-e-1 {
776
- margin-right: 0.25rem !important;
777
- }
778
-
779
- .qti-margin-e-2 {
780
- margin-right: 0.5rem !important;
781
- }
782
-
783
- .qti-margin-e-3 {
784
- margin-right: 1rem !important;
785
- }
786
-
787
- .qti-margin-e-4 {
788
- margin-right: 1.5rem !important;
789
- }
790
-
791
- .qti-margin-e-5 {
792
- margin-right: 3rem !important;
793
- }
794
-
795
- .qti-margin-e-auto {
796
- margin-right: auto !important;
797
- }
798
-
799
- /* =========
800
- Padding css
801
- ========== */
802
-
803
- /*
804
- For padding Top and Bottom and Left and Right
805
- */
806
-
807
- .qti-padding-0 {
808
- padding: 0 !important;
809
- }
810
-
811
- .qti-padding-1 {
812
- padding: 0.25rem !important;
813
- }
814
-
815
- .qti-padding-2 {
816
- padding: 0.5rem !important;
817
- }
818
-
819
- .qti-padding-3 {
820
- padding: 1rem !important;
821
- }
822
-
823
- .qti-padding-4 {
824
- padding: 1.5rem !important;
825
- }
826
-
827
- .qti-padding-5 {
828
- padding: 3rem !important;
829
- }
830
-
831
- /*
832
- For padding Left and Right
833
- */
834
-
835
- .qti-padding-x-0 {
836
- padding-right: 0 !important;
837
- padding-left: 0 !important;
838
- }
839
-
840
- .qti-padding-x-1 {
841
- padding-right: 0.25rem !important;
842
- padding-left: 0.25rem !important;
843
- }
844
-
845
- .qti-padding-x-2 {
846
- padding-right: 0.5rem !important;
847
- padding-left: 0.5rem !important;
848
- }
849
-
850
- .qti-padding-x-3 {
851
- padding-right: 1rem !important;
852
- padding-left: 1rem !important;
853
- }
854
-
855
- .qti-padding-x-4 {
856
- padding-right: 1.5rem !important;
857
- padding-left: 1.5rem !important;
858
- }
859
-
860
- .qti-padding-x-5 {
861
- padding-right: 3rem !important;
862
- padding-left: 3rem !important;
863
- }
864
-
865
- /*
866
- For padding Top and Bottom
867
- */
868
-
869
- .qti-padding-y-0 {
870
- padding-top: 0 !important;
871
- padding-bottom: 0 !important;
872
- }
873
-
874
- .qti-padding-y-1 {
875
- padding-top: 0.25rem !important;
876
- padding-bottom: 0.25rem !important;
877
- }
878
-
879
- .qti-padding-y-2 {
880
- padding-top: 0.5rem !important;
881
- padding-bottom: 0.5rem !important;
882
- }
883
-
884
- .qti-padding-y-3 {
885
- padding-top: 1rem !important;
886
- padding-bottom: 1rem !important;
887
- }
888
-
889
- .qti-padding-y-4 {
890
- padding-top: 1.5rem !important;
891
- padding-bottom: 1.5rem !important;
892
- }
893
-
894
- .qti-padding-y-5 {
895
- padding-top: 3rem !important;
896
- padding-bottom: 3rem !important;
897
- }
898
-
899
- /*
900
- For padding Top
901
- */
902
-
903
- .qti-padding-t-0 {
904
- padding-top: 0 !important;
905
- }
906
-
907
- .qti-padding-t-1 {
908
- padding-top: 0.25rem !important;
909
- }
910
-
911
- .qti-padding-t-2 {
912
- padding-top: 0.5rem !important;
913
- }
914
-
915
- .qti-padding-t-3 {
916
- padding-top: 1rem !important;
917
- }
918
-
919
- .qti-padding-t-4 {
920
- padding-top: 1.5rem !important;
921
- }
922
-
923
- .qti-padding-t-5 {
924
- padding-top: 3rem !important;
925
- }
926
-
927
- /*
928
- For padding Bottom
929
- */
930
-
931
- .qti-padding-b-0 {
932
- padding-bottom: 0 !important;
933
- }
934
-
935
- .qti-padding-b-1 {
936
- padding-bottom: 0.25rem !important;
937
- }
938
-
939
- .qti-padding-b-2 {
940
- padding-bottom: 0.5rem !important;
941
- }
942
-
943
- .qti-padding-b-3 {
944
- padding-bottom: 1rem !important;
945
- }
946
-
947
- .qti-padding-b-4 {
948
- padding-bottom: 1.5rem !important;
949
- }
950
-
951
- .qti-padding-b-5 {
952
- padding-bottom: 3rem !important;
953
- }
954
-
955
- /*
956
- For padding Start LTR
957
- */
958
-
959
- .qti-padding-s-0 {
960
- padding-left: 0 !important;
961
- }
962
-
963
- .qti-padding-s-1 {
964
- padding-left: 0.25rem !important;
965
- }
966
-
967
- .qti-padding-s-2 {
968
- padding-left: 0.5rem !important;
969
- }
970
-
971
- .qti-padding-s-3 {
972
- padding-left: 1rem !important;
973
- }
974
-
975
- .qti-padding-s-4 {
976
- padding-left: 1.5rem !important;
977
- }
978
-
979
- .qti-padding-s-5 {
980
- padding-left: 3rem !important;
981
- }
982
-
983
- /*
984
- For padding End LTR
985
- */
986
-
987
- .qti-padding-e-0 {
988
- padding-right: 0 !important;
989
- }
990
-
991
- .qti-padding-e-1 {
992
- padding-right: 0.25rem !important;
993
- }
994
-
995
- .qti-padding-e-2 {
996
- padding-right: 0.5rem !important;
997
- }
998
-
999
- .qti-padding-e-3 {
1000
- padding-right: 1rem !important;
1001
- }
1002
-
1003
- .qti-padding-e-4 {
1004
- padding-right: 1.5rem !important;
1005
- }
1006
-
1007
- .qti-padding-e-5 {
1008
- padding-right: 3rem !important;
1009
- }
1010
-
1011
- /* ====================
1012
- Horizontal alignment
1013
- ==================== */
1014
-
1015
- .qti-align-left {
1016
- text-align: left;
1017
- }
1018
-
1019
- .qti-align-center {
1020
- text-align: center;
1021
- }
1022
-
1023
- .qti-align-right {
1024
- text-align: right;
1025
- }
1026
-
1027
- /* ==================
1028
- Vertical alignment
1029
- ================== */
1030
-
1031
- .qti-valign-top {
1032
- vertical-align: top;
1033
- }
1034
-
1035
- .qti-valign-middle {
1036
- vertical-align: middle;
1037
- }
1038
-
1039
- .qti-valign-baseline {
1040
- vertical-align: baseline;
1041
- }
1042
-
1043
- .qti-valign-bottom {
1044
- vertical-align: bottom;
1045
- }
1046
-
1047
- /* =============
1048
- Height styles
1049
- ============= */
1050
-
1051
- .qti-height-0 {
1052
- height: 0;
1053
- }
1054
-
1055
- .qti-height-px {
1056
- height: 1px;
1057
- }
1058
-
1059
- .qti-height-0p5 {
1060
- height: 0.125rem;
1061
- }
1062
-
1063
- .qti-height-1 {
1064
- height: 0.25rem;
1065
- }
1066
-
1067
- .qti-height-1p5 {
1068
- height: 0.375rem;
1069
- }
1070
-
1071
- .qti-height-2 {
1072
- height: 0.5rem;
1073
- }
1074
-
1075
- .qti-height-2p5 {
1076
- height: 0.625rem;
1077
- }
1078
-
1079
- .qti-height-3 {
1080
- height: 0.75rem;
1081
- }
1082
-
1083
- .qti-height-3p5 {
1084
- height: 0.875rem;
1085
- }
1086
-
1087
- .qti-height-4 {
1088
- height: 1rem;
1089
- }
1090
-
1091
- .qti-height-5 {
1092
- height: 1.25rem;
1093
- }
1094
-
1095
- .qti-height-6 {
1096
- height: 1.5rem;
1097
- }
1098
-
1099
- .qti-height-7 {
1100
- height: 1.75rem;
1101
- }
1102
-
1103
- .qti-height-8 {
1104
- height: 2rem;
1105
- }
1106
-
1107
- .qti-height-9 {
1108
- height: 2.25rem;
1109
- }
1110
-
1111
- .qti-height-10 {
1112
- height: 2.5rem;
1113
- }
1114
-
1115
- .qti-height-11 {
1116
- height: 2.75rem;
1117
- }
1118
-
1119
- .qti-height-12 {
1120
- height: 3rem;
1121
- }
1122
-
1123
- .qti-height-14 {
1124
- height: 3.5rem;
1125
- }
1126
-
1127
- .qti-height-16 {
1128
- height: 4rem;
1129
- }
1130
-
1131
- .qti-height-20 {
1132
- height: 5rem;
1133
- }
1134
-
1135
- .qti-height-24 {
1136
- height: 6rem;
1137
- }
1138
-
1139
- .qti-height-28 {
1140
- height: 7rem;
1141
- }
1142
-
1143
- .qti-height-32 {
1144
- height: 8rem;
1145
- }
1146
-
1147
- .qti-height-36 {
1148
- height: 9rem;
1149
- }
1150
-
1151
- .qti-height-40 {
1152
- height: 10rem;
1153
- }
1154
-
1155
- .qti-height-44 {
1156
- height: 11rem;
1157
- }
1158
-
1159
- .qti-height-48 {
1160
- height: 12rem;
1161
- }
1162
-
1163
- .qti-height-52 {
1164
- height: 13rem;
1165
- }
1166
-
1167
- .qti-height-56 {
1168
- height: 14rem;
1169
- }
1170
-
1171
- .qti-height-60 {
1172
- height: 15rem;
1173
- }
1174
-
1175
- .qti-height-64 {
1176
- height: 16rem;
1177
- }
1178
-
1179
- .qti-height-72 {
1180
- height: 18rem;
1181
- }
1182
-
1183
- .qti-height-80 {
1184
- height: 20rem;
1185
- }
1186
-
1187
- .qti-height-96 {
1188
- height: 24rem;
1189
- }
1190
-
1191
- .qti-height-1-2 {
1192
- height: 50%;
1193
- }
1194
-
1195
- .qti-height-1-3 {
1196
- height: 33.3333%;
1197
- }
1198
-
1199
- .qti-height-2-3 {
1200
- height: 66.6667%;
1201
- }
1202
-
1203
- .qti-height-1-4 {
1204
- height: 25%;
1205
- }
1206
-
1207
- .qti-height-2-4 {
1208
- height: 50%;
1209
- }
1210
-
1211
- .qti-height-3-4 {
1212
- height: 75%;
1213
- }
1214
-
1215
- .qti-height-1-5 {
1216
- height: 20%;
1217
- }
1218
-
1219
- .qti-height-2-5 {
1220
- height: 40%;
1221
- }
1222
-
1223
- .qti-height-3-5 {
1224
- height: 60%;
1225
- }
1226
-
1227
- .qti-height-4-5 {
1228
- height: 80%;
1229
- }
1230
-
1231
- .qti-height-1-6 {
1232
- height: 16.6667%;
1233
- }
1234
-
1235
- .qti-height-2-6 {
1236
- height: 33.3333%;
1237
- }
1238
-
1239
- .qti-height-3-6 {
1240
- height: 50%;
1241
- }
1242
-
1243
- .qti-height-4-6 {
1244
- height: 66.6667%;
1245
- }
1246
-
1247
- .qti-height-5-6 {
1248
- height: 83.3333%;
1249
- }
1250
-
1251
- .qti-height-auto {
1252
- height: auto;
1253
- }
1254
-
1255
- .qti-height-full {
1256
- height: 100%;
1257
- }
1258
-
1259
- /* ============
1260
- Width styles
1261
- ============ */
1262
-
1263
- .qti-width-0 {
1264
- width: 0;
1265
- }
1266
-
1267
- .qti-width-px {
1268
- width: 1px;
1269
- }
1270
-
1271
- .qti-width-0p5 {
1272
- width: 0.125rem;
1273
- }
1274
-
1275
- .qti-width-1 {
1276
- width: 0.25rem;
1277
- }
1278
-
1279
- .qti-width-1p5 {
1280
- width: 0.375rem;
1281
- }
1282
-
1283
- .qti-width-2 {
1284
- width: 0.5rem;
1285
- }
1286
-
1287
- .qti-width-2p5 {
1288
- width: 0.625rem;
1289
- }
1290
-
1291
- .qti-width-3 {
1292
- width: 0.75rem;
1293
- }
1294
-
1295
- .qti-width-3p5 {
1296
- width: 0.875rem;
1297
- }
1298
-
1299
- .qti-width-4 {
1300
- width: 1rem;
1301
- }
1302
-
1303
- .qti-width-5 {
1304
- width: 1.25rem;
1305
- }
1306
-
1307
- .qti-width-6 {
1308
- width: 1.5rem;
1309
- }
1310
-
1311
- .qti-width-7 {
1312
- width: 1.75rem;
1313
- }
1314
-
1315
- .qti-width-8 {
1316
- width: 2rem;
1317
- }
1318
-
1319
- .qti-width-9 {
1320
- width: 2.25rem;
1321
- }
1322
-
1323
- .qti-width-10 {
1324
- width: 2.5rem;
1325
- }
1326
-
1327
- .qti-width-11 {
1328
- width: 2.75rem;
1329
- }
1330
-
1331
- .qti-width-12 {
1332
- width: 3rem;
1333
- }
1334
-
1335
- .qti-width-14 {
1336
- width: 3.5rem;
1337
- }
1338
-
1339
- .qti-width-16 {
1340
- width: 4rem;
1341
- }
1342
-
1343
- .qti-width-20 {
1344
- width: 5rem;
1345
- }
1346
-
1347
- .qti-width-24 {
1348
- width: 6rem;
1349
- }
1350
-
1351
- .qti-width-28 {
1352
- width: 7rem;
1353
- }
1354
-
1355
- .qti-width-32 {
1356
- width: 8rem;
1357
- }
1358
-
1359
- .qti-width-36 {
1360
- width: 9rem;
1361
- }
1362
-
1363
- .qti-width-40 {
1364
- width: 10rem;
1365
- }
1366
-
1367
- .qti-width-44 {
1368
- width: 11rem;
1369
- }
1370
-
1371
- .qti-width-48 {
1372
- width: 12rem;
1373
- }
1374
-
1375
- .qti-width-52 {
1376
- width: 13rem;
1377
- }
1378
-
1379
- .qti-width-56 {
1380
- width: 14rem;
1381
- }
1382
-
1383
- .qti-width-60 {
1384
- width: 15rem;
1385
- }
1386
-
1387
- .qti-width-64 {
1388
- width: 16rem;
1389
- }
1390
-
1391
- .qti-width-72 {
1392
- width: 18rem;
1393
- }
1394
-
1395
- .qti-width-80 {
1396
- width: 20rem;
1397
- }
1398
-
1399
- .qti-width-96 {
1400
- width: 24rem;
1401
- }
1402
-
1403
- .qti-width-auto {
1404
- width: auto;
1405
- }
1406
-
1407
- .qti-width-1-2 {
1408
- width: 50%;
1409
- }
1410
-
1411
- .qti-width-1-3 {
1412
- width: 33.3333%;
1413
- }
1414
-
1415
- .qti-width-2-3 {
1416
- width: 66.6667%;
1417
- }
1418
-
1419
- .qti-width-1-4 {
1420
- width: 25%;
1421
- }
1422
-
1423
- .qti-width-2-4 {
1424
- width: 50%;
1425
- }
1426
-
1427
- .qti-width-3-4 {
1428
- width: 75%;
1429
- }
1430
-
1431
- .qti-width-1-5 {
1432
- width: 20%;
1433
- }
1434
-
1435
- .qti-width-2-5 {
1436
- width: 40%;
1437
- }
1438
-
1439
- .qti-width-3-5 {
1440
- width: 60%;
1441
- }
1442
-
1443
- .qti-width-4-5 {
1444
- width: 80%;
1445
- }
1446
-
1447
- .qti-width-1-6 {
1448
- width: 16.6667%;
1449
- }
1450
-
1451
- .qti-width-2-6 {
1452
- width: 33.3333%;
1453
- }
1454
-
1455
- .qti-width-3-6 {
1456
- width: 50%;
1457
- }
1458
-
1459
- .qti-width-4-6 {
1460
- width: 66.6667%;
1461
- }
1462
-
1463
- .qti-width-5-6 {
1464
- width: 83.3333%;
1465
- }
1466
-
1467
- .qti-width-1-12 {
1468
- width: 8.3333%;
1469
- }
1470
-
1471
- .qti-width-2-12 {
1472
- width: 16.6667%;
1473
- }
1474
-
1475
- .qti-width-3-12 {
1476
- width: 25%;
1477
- }
1478
-
1479
- .qti-width-4-12 {
1480
- width: 33.3333%;
1481
- }
1482
-
1483
- .qti-width-5-12 {
1484
- width: 41.6667%;
1485
- }
1486
-
1487
- .qti-width-6-12 {
1488
- width: 50%;
1489
- }
1490
-
1491
- .qti-width-7-12 {
1492
- width: 58.3333%;
1493
- }
1494
-
1495
- .qti-width-8-12 {
1496
- width: 66.6667%;
1497
- }
1498
-
1499
- .qti-width-9-12 {
1500
- width: 75%;
1501
- }
1502
-
1503
- .qti-width-10-12 {
1504
- width: 83.3333%;
1505
- }
1506
-
1507
- .qti-width-11-12 {
1508
- width: 91.6667%;
1509
- }
1510
-
1511
- .qti-width-full,
1512
- .qti-fullwidth {
1513
- width: 100%;
1514
- }
1515
-
1516
- /* ==================
1517
- Text Indent styles
1518
- ================== */
1519
-
1520
- .qti-text-indent-0 {
1521
- text-indent: 0;
1522
- }
1523
-
1524
- .qti-text-indent-px {
1525
- text-indent: 1px;
1526
- }
1527
-
1528
- .qti-text-indent-0p5 {
1529
- text-indent: 0.125rem;
1530
- }
1531
-
1532
- .qti-text-indent-1 {
1533
- text-indent: 0.25rem;
1534
- }
1535
-
1536
- .qti-text-indent-1p5 {
1537
- text-indent: 0.375rem;
1538
- }
1539
-
1540
- .qti-text-indent-2 {
1541
- text-indent: 0.5rem;
1542
- }
1543
-
1544
- .qti-text-indent-2p5 {
1545
- text-indent: 0.625rem;
1546
- }
1547
-
1548
- .qti-text-indent-3 {
1549
- text-indent: 0.75rem;
1550
- }
1551
-
1552
- .qti-text-indent-3p5 {
1553
- text-indent: 0.875rem;
1554
- }
1555
-
1556
- .qti-text-indent-4 {
1557
- text-indent: 1rem;
1558
- }
1559
-
1560
- .qti-text-indent-5 {
1561
- text-indent: 1.25rem;
1562
- }
1563
-
1564
- .qti-text-indent-6 {
1565
- text-indent: 1.5rem;
1566
- }
1567
-
1568
- .qti-text-indent-7 {
1569
- text-indent: 1.75rem;
1570
- }
1571
-
1572
- .qti-text-indent-8 {
1573
- text-indent: 2rem;
1574
- }
1575
-
1576
- .qti-text-indent-12 {
1577
- text-indent: 3rem;
1578
- }
1579
-
1580
- .qti-text-indent-16 {
1581
- text-indent: 4rem;
1582
- }
1583
-
1584
- .qti-text-indent-20 {
1585
- text-indent: 5rem;
1586
- }
1587
-
1588
- .qti-text-indent-24 {
1589
- text-indent: 6rem;
1590
- }
1591
-
1592
- .qti-text-indent-28 {
1593
- text-indent: 7rem;
1594
- }
1595
-
1596
- .qti-text-indent-32 {
1597
- text-indent: 8rem;
1598
- }
1599
-
1600
- /* =================
1601
- List Style styles
1602
- ================= */
1603
-
1604
- .qti-list-style-type-none {
1605
- list-style-type: none;
1606
- }
1607
-
1608
- .qti-list-style-type-disc {
1609
- list-style-type: disc;
1610
- }
1611
-
1612
- .qti-list-style-type-circle {
1613
- list-style-type: circle;
1614
- }
1615
-
1616
- .qti-list-style-type-square {
1617
- list-style-type: square;
1618
- }
1619
-
1620
- .qti-list-style-type-decimal {
1621
- list-style-type: decimal;
1622
- }
1623
-
1624
- .qti-list-style-type-decimal-leading-zero {
1625
- list-style-type: decimal-leading-zero;
1626
- }
1627
-
1628
- .qti-list-style-type-lower-alpha {
1629
- list-style-type: lower-alpha;
1630
- }
1631
-
1632
- .qti-list-style-type-upper-alpha {
1633
- list-style-type: upper-alpha;
1634
- }
1635
-
1636
- .qti-list-style-type-lower-roman {
1637
- list-style-type: lower-roman;
1638
- }
1639
-
1640
- .qti-list-style-type-upper-roman {
1641
- list-style-type: upper-roman;
1642
- }
1643
-
1644
- .qti-list-style-type-lower-latin {
1645
- list-style-type: lower-latin;
1646
- }
1647
-
1648
- .qti-list-style-type-upper-latin {
1649
- list-style-type: upper-latin;
1650
- }
1651
-
1652
- .qti-list-style-type-lower-greek {
1653
- list-style-type: lower-greek;
1654
- }
1655
-
1656
- .qti-list-style-type-arabic-indic {
1657
- list-style-type: arabic-indic;
1658
- }
1659
-
1660
- .qti-list-style-type-armenian {
1661
- list-style-type: armenian;
1662
- }
1663
-
1664
- .qti-list-style-type-lower-armenian {
1665
- list-style-type: lower-armenian;
1666
- }
1667
-
1668
- .qti-list-style-type-upper-armenian {
1669
- list-style-type: upper-armenian;
1670
- }
1671
-
1672
- .qti-list-style-type-bengali {
1673
- list-style-type: bengali;
1674
- }
1675
-
1676
- .qti-list-style-type-cambodian {
1677
- list-style-type: cambodian;
1678
- }
1679
-
1680
- .qti-list-style-type-simp-chinese-formal {
1681
- list-style-type: simp-chinese-formal;
1682
- }
1683
-
1684
- .qti-list-style-type-simp-chinese-informal {
1685
- list-style-type: simp-chinese-informal;
1686
- }
1687
-
1688
- .qti-list-style-type-trad-chinese-formal {
1689
- list-style-type: trad-chinese-formal;
1690
- }
1691
-
1692
- .qti-list-style-type-trad-chinese-informal {
1693
- list-style-type: trad-chinese-informal;
1694
- }
1695
-
1696
- .qti-list-style-type-cjk-ideographic {
1697
- list-style-type: cjk-ideographic;
1698
- }
1699
-
1700
- .qti-list-style-type-cjk-heavenly-stem {
1701
- list-style-type: cjk-heavenly-stem;
1702
- }
1703
-
1704
- .qti-list-style-type-cjk-earthly-branch {
1705
- list-style-type: cjk-earthly-branch;
1706
- }
1707
-
1708
- .qti-list-style-type-devanagari {
1709
- list-style-type: devanagari;
1710
- }
1711
-
1712
- .qti-list-style-type-ethiopic-halehame-ti-er {
1713
- list-style-type: ethiopic-halehame-ti-er;
1714
- }
1715
-
1716
- .qti-list-style-type-ethiopic-halehame-ti-et {
1717
- list-style-type: ethiopic-halehame-ti-et;
1718
- }
1719
-
1720
- .qti-list-style-type-ethiopic-halehame-am {
1721
- list-style-type: ethiopic-halehame-am;
1722
- }
1723
-
1724
- .qti-list-style-type-ethiopic-halehame {
1725
- list-style-type: ethiopic-halehame;
1726
- }
1727
-
1728
- .qti-list-style-type-georgian {
1729
- list-style-type: georgian;
1730
- }
1731
-
1732
- .qti-list-style-type-gujarati {
1733
- list-style-type: gujarati;
1734
- }
1735
-
1736
- .qti-list-style-type-gurmukhi {
1737
- list-style-type: gurmukhi;
1738
- }
1739
-
1740
- .qti-list-style-type-hangul {
1741
- list-style-type: hangul;
1742
- }
1743
-
1744
- .qti-list-style-type-hangul-consonant {
1745
- list-style-type: hangul-consonant;
1746
- }
1747
-
1748
- .qti-list-style-type-hebrew {
1749
- list-style-type: hebrew;
1750
- }
1751
-
1752
- .qti-list-style-type-hiragana {
1753
- list-style-type: hiragana;
1754
- }
1755
-
1756
- .qti-list-style-type-hiragana-iroha {
1757
- list-style-type: hiragana-iroha;
1758
- }
1759
-
1760
- .qti-list-style-type-khmer {
1761
- list-style-type: khmer;
1762
- }
1763
-
1764
- .qti-list-style-type-korean-hangul-formal {
1765
- list-style-type: korean-hangul-formal;
1766
- }
1767
-
1768
- .qti-list-style-type-korean-hanja-formal {
1769
- list-style-type: korean-hanja-formal;
1770
- }
1771
-
1772
- .qti-list-style-type-korean-hanja-informal {
1773
- list-style-type: korean-hanja-informal;
1774
- }
1775
-
1776
- .qti-list-style-type-lao {
1777
- list-style-type: lao;
1778
- }
1779
-
1780
- .qti-list-style-type-malayalam {
1781
- list-style-type: malayalam;
1782
- }
1783
-
1784
- .qti-list-style-type-mongolian {
1785
- list-style-type: mongolian;
1786
- }
1787
-
1788
- .qti-list-style-type-myanmar {
1789
- list-style-type: myanmar;
1790
- }
1791
-
1792
- .qti-list-style-type-oriya {
1793
- list-style-type: oriya;
1794
- }
1795
-
1796
- .qti-list-style-type-persian {
1797
- list-style-type: persian;
1798
- }
1799
-
1800
- .qti-list-style-type-thai {
1801
- list-style-type: thai;
1802
- }
1803
-
1804
- .qti-list-style-type-tibetan {
1805
- list-style-type: tibetan;
1806
- }
1807
-
1808
- .qti-list-style-type-telugu {
1809
- list-style-type: telugu;
1810
- }
1811
-
1812
- .qti-list-style-type-urdu {
1813
- list-style-type: urdu;
1814
- }
1815
-
1816
- /* =========================
1817
- Other QTI 3 Presentation Utilities
1818
- ========================= */
1819
-
1820
- .qti-bordered {
1821
- border: 1px solid var(--table-border-color);
1822
- }
1823
-
1824
- .qti-underline {
1825
- text-decoration: underline;
1826
- text-decoration-color: var(--foreground);
1827
- }
1828
-
1829
- .qti-italic {
1830
- font-style: italic;
1831
- }
1832
-
1833
- .qti-well {
1834
- min-height: 20px;
1835
- padding: 19px;
1836
- margin-bottom: 20px;
1837
- background-color: var(--well-bg);
1838
- border: var(--well-border);
1839
- border-radius: 4px;
1840
- box-shadow: var(--well-box-shadow);
1841
- }
1842
-
1843
- /* Set writing-mode to vertical-rl
1844
- Typical for CJK vertical text */
1845
-
1846
- .qti-writing-mode-vertical-rl {
1847
- writing-mode: vertical-rl;
1848
- }
1849
-
1850
- /* Set writing-mode to vertical-lr
1851
- Typical for Mongolian vertical text */
1852
-
1853
- .qti-writing-mode-vertical-lr {
1854
- writing-mode: vertical-lr;
1855
- }
1856
-
1857
- /* Set writing-mode to horizontal-tb
1858
- Browser default */
1859
-
1860
- .qti-writing-mode-horizontal-tb {
1861
- writing-mode: horizontal-tb;
1862
- }
1863
-
1864
- /* Float an element left */
1865
-
1866
- .qti-float-left {
1867
- float: left;
1868
- }
1869
-
1870
- /* Float an element right */
1871
-
1872
- .qti-float-right {
1873
- float: right;
1874
- }
1875
-
1876
- /* Remove a float */
1877
-
1878
- .qti-float-none {
1879
- float: none;
1880
- }
1881
-
1882
- /* Clearfix Hack to apply to a container of
1883
- floated content that overflows the container. */
1884
-
1885
- .qti-float-clearfix::after {
1886
- content: '';
1887
- clear: both;
1888
- display: table;
1889
- }
1890
-
1891
- .qti-float-clear-left
1892
- .qti-float-clear-right
1893
- .qti-float-clear-both
1894
-
1895
- /* Set text-orientation to upright */
1896
- .qti-text-orientation-upright {
1897
- text-orientation: upright;
1898
- }
1899
-
1900
- /* stylelint-disable number-max-precision */
1901
-
1902
- @layer qti-base {
1903
- .qti-layout-row {
1904
- display: flex;
1905
- flex-wrap: wrap;
1906
- width: 100%;
1907
- gap: 2.1276595745%;
1908
- }
1909
-
1910
- .qti-layout-row [class*='qti-layout-col']:not(:empty) {
1911
- box-sizing: border-box;
1912
- }
1913
-
1914
- .qti-layout-row [class*='qti-layout-col']:empty {
1915
- width: 0;
1916
- overflow: hidden; /* to fully collapse if there\u2019s padding or borders */
1917
- }
1918
-
1919
- .qti-layout-col1 {
1920
- width: 6.3829787234%;
1921
- }
1922
-
1923
- .qti-layout-col2 {
1924
- width: 14.8936170213%;
1925
- }
1926
-
1927
- .qti-layout-col3 {
1928
- width: 23.4042553191%;
1929
- }
1930
-
1931
- .qti-layout-col4 {
1932
- width: 31.914893617%;
1933
- }
1934
-
1935
- .qti-layout-col5 {
1936
- width: 40.4255319149%;
1937
- }
1938
-
1939
- .qti-layout-col6 {
1940
- width: 48.9361702128%;
1941
- }
1942
-
1943
- .qti-layout-col7 {
1944
- width: 57.4468085106%;
1945
- }
1946
-
1947
- .qti-layout-col8 {
1948
- width: 65.9574468085%;
1949
- }
1950
-
1951
- .qti-layout-col9 {
1952
- width: 74.4680851064%;
1953
- }
1954
-
1955
- .qti-layout-col10 {
1956
- width: 82.9787234043%;
1957
- }
1958
-
1959
- .qti-layout-col11 {
1960
- width: 91.4893617021%;
1961
- }
1962
-
1963
- .qti-layout-col12 {
1964
- width: 100%;
1965
- }
1966
-
1967
- .qti-layout-offset1 {
1968
- margin-left: 8.5106382979%;
1969
- }
1970
-
1971
- .qti-layout-offset2 {
1972
- margin-left: 17.0212765957%;
1973
- }
1974
-
1975
- .qti-layout-offset3 {
1976
- margin-left: 25.5319148936%;
1977
- }
1978
-
1979
- .qti-layout-offset4 {
1980
- margin-left: 34.0425531915%;
1981
- }
1982
-
1983
- .qti-layout-offset5 {
1984
- margin-left: 42.5531914894%;
1985
- }
1986
-
1987
- .qti-layout-offset6 {
1988
- margin-left: 51.0638297872%;
1989
- }
1990
-
1991
- .qti-layout-offset7 {
1992
- margin-left: 59.5744680851%;
1993
- }
1994
-
1995
- .qti-layout-offset8 {
1996
- margin-left: 68.085106383%;
1997
- }
1998
-
1999
- .qti-layout-offset9 {
2000
- margin-left: 76.5957446809%;
2001
- }
2002
-
2003
- .qti-layout-offset10 {
2004
- margin-left: 85.1063829787%;
2005
- }
2006
-
2007
- .qti-layout-offset11 {
2008
- margin-left: 93.6170212766%;
2009
- }
2010
-
2011
- .qti-layout-offset12 {
2012
- margin-left: 102.1276595745%;
2013
- }
2014
-
2015
- @media (width <= 767px) {
2016
- [class*='qti-layout-col'] {
2017
- width: 100%;
2018
- }
2019
- }
2020
- }
2021
-
2022
- [view],
2023
- qti-outcome-declaration,
2024
- qti-response-declaration {
2025
- display: none;
2026
- }
2027
-
2028
- [view].show {
2029
- display: block;
2030
- }
2031
-
2032
- :host {
2033
- box-sizing: border-box;
2034
- }
2035
-
2036
- /* components */
2037
-
2038
- @layer qti-components {
2039
- qti-choice-interaction {
2040
- &.qti-input-control-hidden {
2041
- & qti-simple-choice {
2042
- position: relative; /* Add position relative here instead of a separate rule */
2043
-
2044
- &:hover {
2045
- }
2046
-
2047
- &:focus {
2048
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2049
- }
2050
-
2051
- &::part(ch) {
2052
- display: none;
2053
- }
2054
-
2055
- &:state(--checked),
2056
- &[aria-checked='true'] {
2057
- border-color: var(--qti-border-active);
2058
- background-color: var(--qti-bg-active);
2059
- }
2060
-
2061
- &:state(readonly),
2062
- &[aria-readonly='true'] {
2063
- cursor: pointer;
2064
- background-color: var(--qti-bg);
2065
- outline: 0;
2066
- border: none;
2067
- }
2068
-
2069
- &:state(disabled),
2070
- &[aria-disabled='true'] {
2071
- cursor: not-allowed;
2072
- background-color: var(--qti-disabled-bg);
2073
- color: var(--qti-disabled-color);
2074
- border-color: var(--qti-border-color);
2075
- outline: 4px solid var(--qti-disabled-bg);
2076
- }
2077
-
2078
- /* Add styling for correct responses with border instead of checkmark */
2079
- &:state(correct-response),
2080
- &[data-correct-response='true'] {
2081
- border: 3px solid var(--qti-correct) !important;
2082
- padding-right: 30px;
2083
-
2084
- &::after {
2085
- content: '\\02714';
2086
- color: var(--qti-correct);
2087
- position: absolute;
2088
- top: 5px;
2089
- right: 5px;
2090
- font-size: 1.2em;
2091
- font-weight: bold;
2092
- }
2093
- }
2094
- border-radius: var(--qti-border-radius);
2095
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2096
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2097
- outline: none
2098
- }
2099
- }
2100
-
2101
- &:not(.qti-input-control-hidden) {
2102
- & qti-simple-choice {
2103
-
2104
- &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
2105
- }
2106
-
2107
- &:focus {
2108
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2109
- }
2110
-
2111
- &:state(--checked),
2112
- &[aria-checked='true'] {
2113
- border-color: var(--qti-border-active);
2114
- background-color: var(--qti-bg-active);
2115
- }
2116
-
2117
- &:state(candidate-correct) {
2118
- background-color: var(--qti-correct);
2119
- }
2120
-
2121
- &:state(candidate-incorrect) {
2122
- background-color: var(--qti-incorrect);
2123
- }
2124
-
2125
- &:state(readonly),
2126
- &[aria-readonly='true'] {
2127
- cursor: pointer;
2128
- background-color: var(--qti-bg);
2129
- outline: 0;
2130
- border: none;
2131
- }
2132
-
2133
- &:state(disabled),
2134
- &[aria-disabled='true'] {
2135
- cursor: not-allowed;
2136
- background-color: var(--qti-disabled-bg);
2137
- color: var(--qti-disabled-color);
2138
- border-color: var(--qti-border-color);
2139
- outline: 4px solid var(--qti-disabled-bg);
2140
- }
2141
-
2142
- &::part(cha) {
2143
- width: calc(var(--qti-form-size) - 6px);
2144
- height: calc(var(--qti-form-size) - 6px);
2145
- }
2146
-
2147
- &:state(radio)::part(ch) {
2148
- border-radius: 100%;
2149
- display: grid;
2150
- place-content: center;
2151
- width: var(--qti-form-size);
2152
- height: var(--qti-form-size);
2153
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2154
- outline: none;
2155
- }
2156
-
2157
- &:state(radio):state(--checked)::part(cha) {
2158
- background-color: var(--qti-border-active);
2159
- border-radius: 100%;
2160
- }
2161
-
2162
- &:state(checkbox)::part(ch) {
2163
- display: flex;
2164
- place-items: center;
2165
- border-radius: var(--qti-border-radius);
2166
- display: grid;
2167
- place-content: center;
2168
- width: var(--qti-form-size);
2169
- height: var(--qti-form-size);
2170
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2171
- outline: none;
2172
- }
2173
-
2174
- &:state(checkbox):state(--checked)::part(cha) {
2175
- background-color: var(--qti-border-active);
2176
- -webkit-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");
2177
- 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");
2178
- }
2179
-
2180
- gap: 0.5rem;
2181
-
2182
- background-color: var(--qti-bg);
2183
-
2184
- border-radius: var(--qti-border-radius);
2185
-
2186
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2187
-
2188
- outline: none;
2189
-
2190
- cursor: pointer
2191
- }
2192
- }
2193
-
2194
- /* stylelint-disable-next-line no-descending-specificity */
2195
- & qti-simple-choice {
2196
- width: -moz-fit-content;
2197
- width: fit-content;
2198
- cursor: pointer;
2199
-
2200
- /* Keep the checkmark for non-hidden input controls */
2201
- &:state(correct-response),
2202
- &[data-correct-response='true'] {
2203
- /* stylelint-disable-next-line no-descending-specificity */
2204
- &::after {
2205
- content: '\\02714';
2206
- color: var(--qti-correct);
2207
- }
2208
- }
2209
- }
2210
-
2211
- & qti-simple-choice > p {
2212
- margin: 0 !important;
2213
- padding: 0 !important;
2214
- }
2215
- }
2216
-
2217
- .hover-border {
2218
- border: 2px solid #000; /* Adjust the border style and color as needed */
2219
- }
2220
-
2221
- qti-graphic-gap-match-interaction {
2222
- position: relative;
2223
-
2224
- &.qti-selections-light {
2225
- &:state(--dragzone-active)::part(drags) {
2226
- background-color: var(--qti-light-bg-active);
2227
- border-color: var(--qti-light-border-active);
2228
- }
2229
-
2230
- &:state(--dragzone-enabled)::part(drags) {
2231
- background-color: var(--qti-light-bg-active);
2232
- }
2233
- }
2234
-
2235
- &.qti-selections-dark {
2236
- &:state(--dragzone-active)::part(drags) {
2237
- background-color: var(--qti-dark-bg-active);
2238
- border-color: var(--qti-dark-border-active);
2239
- }
2240
-
2241
- &:state(--dragzone-enabled)::part(drags) {
2242
- background-color: var(--qti-dark-bg-active);
2243
- }
2244
- }
2245
-
2246
- /* General styles for active and enabled states */
2247
- &:state(--dragzone-active)::part(drags) {
2248
- border-color: var(--qti-border-active);
2249
- background-color: var(--qti-bg-active);
2250
- }
2251
-
2252
- &:state(--dragzone-enabled)::part(drags) {
2253
- background-color: var(--qti-bg-active);
2254
- }
2255
-
2256
- & qti-gap-img,
2257
- qti-gap-text {
2258
- display: flex;
2259
- justify-content: center;
2260
- align-items: center;
2261
- cursor: grab;
2262
- }
2263
-
2264
- & qti-associable-hotspot {
2265
- display: flex;
2266
- justify-content: center;
2267
- align-items: center;
2268
- border: 2px solid transparent;
2269
-
2270
- &[enabled] {
2271
-
2272
- /* Light theme override */
2273
- .qti-selections-light {
2274
- background-color: var(--qti-light-bg-active);
2275
- }
2276
-
2277
- /* Dark theme override */
2278
- .qti-selections-dark {
2279
- background-color: var(--qti-dark-bg-active);
2280
- }
2281
- background-color: var(--qti-bg-active)
2282
- }
2283
-
2284
- &[active] {
2285
-
2286
- /* Light theme override */
2287
- .qti-selections-light {
2288
- background-color: var(--qti-light-bg-active);
2289
- border-color: var(--qti-light-border-active);
2290
- }
2291
-
2292
- /* Dark theme override */
2293
- .qti-selections-dark {
2294
- background-color: var(--qti-dark-bg-active);
2295
- border-color: var(--qti-dark-border-active);
2296
- }
2297
- border-color: var(--qti-border-active);
2298
- background-color: var(--qti-bg-active)
2299
- }
2300
-
2301
- &[disabled] {
2302
-
2303
- &:not(:empty) {
2304
- cursor: default !important;
2305
- }
2306
-
2307
- cursor: not-allowed;
2308
-
2309
- background-color: var(--qti-disabled-bg);
2310
-
2311
- color: var(--qti-disabled-color);
2312
-
2313
- border-color: var(--qti-border-color);
2314
-
2315
- outline: 4px solid var(--qti-disabled-bg)
2316
- }
2317
-
2318
- &:empty::after {
2319
- padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
2320
- content: '\\0000a0'; /* when empty, put a space in it */
2321
- }
2322
-
2323
- &:not(:empty) {
2324
- padding: 0;
2325
- width: auto;
2326
- }
2327
-
2328
- &:not(:empty) > * {
2329
- flex: 1;
2330
- transform: rotate(0); /* rotate-0 */
2331
- box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
2332
- }
2333
- }
2334
-
2335
- & img {
2336
- margin: 0;
2337
- padding: 0;
2338
- }
2339
- }
2340
-
2341
- qti-text-entry-interaction {
2342
- &:state(candidate-correct) {
2343
- &::part(input) {
2344
- background-color: var(--qti-correct);
2345
- }
2346
- }
2347
-
2348
- &:state(candidate-partially-correct) {
2349
- &::part(input) {
2350
- background-color: var(--qti-partially-correct);
2351
- }
2352
- }
2353
-
2354
- &:state(candidate-incorrect) {
2355
- &::part(input) {
2356
- background-color: var(--qti-incorrect);
2357
- }
2358
- }
2359
-
2360
- &::part(input) {
2361
- border-radius: 0;
2362
- cursor: text;
2363
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2364
- background: var(--qti-bg);
2365
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2366
- outline: none;
2367
- }
2368
-
2369
- &:hover {
2370
- }
2371
-
2372
- &:focus-within {
2373
- &::part(input) {
2374
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2375
- border-color: var(--qti-border-active);
2376
- }
2377
- }
2378
- }
2379
-
2380
- qti-extended-text-interaction {
2381
- &::part(textarea) {
2382
- border-radius: 0;
2383
- cursor: text;
2384
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2385
- background: var(--qti-bg);
2386
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2387
- outline: none;
2388
- }
2389
-
2390
- &:hover {
2391
- }
2392
-
2393
- &:focus-within {
2394
- &::part(textarea) {
2395
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2396
- border-color: var(--qti-border-active);
2397
- }
2398
- }
2399
- }
2400
-
2401
- qti-gap-match-interaction {
2402
- &.qti-selections-light {
2403
- &:state(--dragzone-active)::part(drags) {
2404
- background-color: var(--qti-light-bg-active);
2405
- border-color: var(--qti-light-border-active);
2406
- }
2407
-
2408
- &:state(--dragzone-enabled)::part(drags) {
2409
- background-color: var(--qti-light-bg-active);
2410
- }
2411
- }
2412
-
2413
- &.qti-selections-dark {
2414
- &:state(--dragzone-active)::part(drags) {
2415
- background-color: var(--qti-dark-bg-active);
2416
- border-color: var(--qti-dark-border-active);
2417
- }
2418
-
2419
- &:state(--dragzone-enabled)::part(drags) {
2420
- background-color: var(--qti-dark-bg-active);
2421
- }
2422
- }
2423
-
2424
- /* General styles for active and enabled states */
2425
- &:state(--dragzone-active)::part(drags) {
2426
- border-color: var(--qti-border-active);
2427
- background-color: var(--qti-bg-active);
2428
- }
2429
-
2430
- &:state(--dragzone-enabled)::part(drags) {
2431
- background-color: var(--qti-bg-active);
2432
- }
2433
-
2434
- & qti-gap-text {
2435
-
2436
- &[dragging] {
2437
- pointer-events: none;
2438
- rotate: -2deg;
2439
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
2440
- 0 4px 8px rgb(0 0 0 / 10%);
2441
- }
2442
-
2443
- &:hover {
2444
- }
2445
-
2446
- &:focus {
2447
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2448
- }
2449
-
2450
- &:state(candidate-correct) {
2451
- background-color: var(--qti-correct);
2452
- }
2453
-
2454
- &:state(candidate-incorrect) {
2455
- background-color: var(--qti-incorrect);
2456
- }
2457
-
2458
- box-sizing: border-box;
2459
-
2460
- transition: transform 200ms ease-out,
2461
- box-shadow 200ms ease-out,
2462
- rotate 200ms ease-out;
2463
-
2464
- cursor: grab;
2465
-
2466
- background-color: var(--qti-bg);
2467
-
2468
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2469
-
2470
- border-radius: var(--qti-border-radius);
2471
-
2472
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2473
-
2474
- outline: none
2475
- }
2476
-
2477
- & qti-gap {
2478
-
2479
- &[disabled] {
2480
-
2481
- &:not(:empty) {
2482
- cursor: default !important;
2483
- }
2484
-
2485
- cursor: not-allowed;
2486
-
2487
- background-color: var(--qti-disabled-bg);
2488
-
2489
- color: var(--qti-disabled-color);
2490
-
2491
- border-color: var(--qti-border-color);
2492
-
2493
- outline: 4px solid var(--qti-disabled-bg)
2494
- }
2495
-
2496
- &[enabled] {
2497
-
2498
- /* Light theme override */
2499
- .qti-selections-light {
2500
- border-color: var(--qti-light-border-active);
2501
- }
2502
-
2503
- /* Dark theme override */
2504
- .qti-selections-dark {
2505
- border-color: var(--qti-dark-border-active);
2506
- }
2507
- background-color: var(--qti-bg-active)
2508
- }
2509
-
2510
- &[active] {
2511
-
2512
- /* Light theme override */
2513
- .qti-selections-light {
2514
- background-color: var(--qti-light-bg-active);
2515
- border-color: var(--qti-light-border-active);
2516
- }
2517
-
2518
- /* Dark theme override */
2519
- .qti-selections-dark {
2520
- background-color: var(--qti-dark-bg-active);
2521
- border-color: var(--qti-dark-border-active);
2522
- }
2523
- border-color: var(--qti-border-active);
2524
- background-color: var(--qti-bg-active)
2525
- }
2526
-
2527
- display: inline-flex;
2528
- align-items: center;
2529
-
2530
- &:empty::after {
2531
- padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
2532
- content: '\\0000a0'; /* when empty, put a space in it */
2533
- }
2534
-
2535
- &:not(:empty) {
2536
- display: inline-flex;
2537
- padding: 0;
2538
- width: auto;
2539
- }
2540
-
2541
- &:not(:empty) > * {
2542
- flex: 1;
2543
- transform: rotate(0); /* rotate-0 */
2544
- box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
2545
- }
2546
-
2547
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
2548
-
2549
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
2550
- center no-repeat;
2551
-
2552
- border-radius: var(--qti-border-radius);
2553
-
2554
- position: relative;
2555
-
2556
- background-color: var(--qti-bg)
2557
- }
2558
- }
2559
-
2560
- qti-hotspot-interaction {
2561
- & qti-hotspot-choice {
2562
- &[shape='circle'] {
2563
-
2564
- &:hover {
2565
- }
2566
-
2567
- &:focus {
2568
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2569
- }
2570
-
2571
- &:state(--checked),
2572
- &[aria-checked='true'] {
2573
- border-color: var(--qti-border-active);
2574
- }
2575
-
2576
- &:state(--readonly),
2577
- &[aria-readonly='true'] {
2578
- cursor: pointer;
2579
- background-color: var(--qti-bg);
2580
- outline: 0;
2581
- border: none;
2582
- }
2583
-
2584
- &:state(--disabled),
2585
- &[aria-disabled='true'] {
2586
- cursor: not-allowed;
2587
- background-color: var(--qti-disabled-bg);
2588
- color: var(--qti-disabled-color);
2589
- border-color: var(--qti-border-color);
2590
- outline: 4px solid var(--qti-disabled-bg);
2591
- }
2592
-
2593
- width: 100%;
2594
-
2595
- height: 100%;
2596
-
2597
- background-color: transparent;
2598
-
2599
- margin: 0;
2600
-
2601
- padding: 0;
2602
-
2603
- border: 0;
2604
-
2605
- box-sizing: border-box;
2606
-
2607
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2608
-
2609
- outline: none
2610
- }
2611
-
2612
- &[shape='rect'] {
2613
-
2614
- /* &:hover {
2615
- @apply hov;
2616
- } */
2617
-
2618
- &:focus {
2619
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2620
- }
2621
-
2622
- &:state(--checked),
2623
- &[aria-checked='true'] {
2624
- border-color: var(--qti-border-active);
2625
- }
2626
-
2627
- &[aria-readonly='true'] {
2628
- cursor: pointer;
2629
- background-color: var(--qti-bg);
2630
- outline: 0;
2631
- border: none;
2632
- }
2633
-
2634
- &[aria-disabled='true'] {
2635
- cursor: not-allowed;
2636
- background-color: var(--qti-disabled-bg);
2637
- color: var(--qti-disabled-color);
2638
- border-color: var(--qti-border-color);
2639
- outline: 4px solid var(--qti-disabled-bg);
2640
- }
2641
-
2642
- width: 100%;
2643
-
2644
- height: 100%;
2645
-
2646
- background-color: transparent;
2647
-
2648
- margin: 0;
2649
-
2650
- padding: 0;
2651
-
2652
- border: 0;
2653
-
2654
- box-sizing: border-box;
2655
-
2656
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2657
-
2658
- outline: none
2659
- }
2660
-
2661
- &[shape='poly'] {
2662
- &:hover::after {
2663
- content: '';
2664
- width: 100%;
2665
- height: 100%;
2666
- background: repeating-linear-gradient(
2667
- 45deg,
2668
- var(--qti-border-active),
2669
- var(--qti-border-active) 5px,
2670
- transparent 5px,
2671
- transparent 10px
2672
- );
2673
- display: block;
2674
- }
2675
-
2676
- &:state(--checked)::after,
2677
- &[aria-checked='true']::after {
2678
- content: '';
2679
- width: 100%;
2680
- height: 100%;
2681
- background: repeating-linear-gradient(
2682
- 45deg,
2683
- transparent,
2684
- transparent 5px,
2685
- var(--qti-border-active) 5px,
2686
- var(--qti-border-active) 10px
2687
- );
2688
- display: block;
2689
- }
2690
-
2691
- &[aria-readonly='true'] {
2692
- cursor: pointer;
2693
- background-color: var(--qti-bg);
2694
- outline: 0;
2695
- border: none;
2696
- }
2697
-
2698
- &[aria-disabled='true'] {
2699
- cursor: not-allowed;
2700
- background-color: var(--qti-disabled-bg);
2701
- color: var(--qti-disabled-color);
2702
- border-color: var(--qti-border-color);
2703
- outline: 4px solid var(--qti-disabled-bg);
2704
- }
2705
- }
2706
- }
2707
- }
2708
-
2709
- qti-hottext-interaction {
2710
- /* &:not(.qti-input-control-hidden),
2711
- &:not(.qti-unselected-hidden) { */
2712
- qti-hottext {
2713
- display: inline-flex;
2714
- align-items: center;
2715
-
2716
- &:hover {
2717
- }
2718
-
2719
- &:focus {
2720
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2721
- }
2722
-
2723
- &::part(cha) {
2724
- width: calc(var(--qti-form-size) - 6px);
2725
- height: calc(var(--qti-form-size) - 6px);
2726
- }
2727
-
2728
- &:state(radio)::part(ch) {
2729
- border-radius: 100%;
2730
- display: grid;
2731
- place-content: center;
2732
- width: var(--qti-form-size);
2733
- height: var(--qti-form-size);
2734
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2735
- outline: none;
2736
- }
2737
-
2738
- &:state(radio):state(--checked)::part(cha) {
2739
- background-color: var(--qti-border-active);
2740
- border-radius: 100%;
2741
- }
2742
-
2743
- &:state(checkbox)::part(ch) {
2744
- display: flex;
2745
- place-items: center;
2746
- border-radius: var(--qti-border-radius);
2747
- display: grid;
2748
- place-content: center;
2749
- width: var(--qti-form-size);
2750
- height: var(--qti-form-size);
2751
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2752
- outline: none;
2753
- }
2754
-
2755
- &:state(checkbox):state(--checked)::part(cha) {
2756
- background-color: var(--qti-border-active);
2757
- -webkit-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");
2758
- 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");
2759
- }
2760
-
2761
- &:state(correct-response),
2762
- &[data-correct-response='true'] {
2763
- &::after {
2764
- content: '\\02714';
2765
- color: #16a34a; /* text-green-600 */
2766
- }
2767
- }
2768
-
2769
- gap: 0.5rem;
2770
-
2771
- background-color: var(--qti-bg);
2772
-
2773
- border-radius: var(--qti-border-radius);
2774
-
2775
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2776
-
2777
- outline: none;
2778
-
2779
- cursor: pointer
2780
- }
2781
-
2782
- &.qti-input-control-hidden {
2783
- qti-hottext {
2784
- /* --qti-padding-md: 0.1rem;
2785
- --qti-padding-lg: 0.2rem;
2786
- --qti-border-radius-md: 0.3rem;
2787
- --qti-border-thickness: 1px;
2788
- --qti-font-weight-semibold: 400; */
2789
-
2790
- &:hover {
2791
- }
2792
-
2793
- &:focus {
2794
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2795
- }
2796
-
2797
- /* @layer qti-variants { */
2798
- &::part(ch) {
2799
- display: none;
2800
- }
2801
-
2802
- &:state(--checked) {
2803
- border-color: var(--qti-border-active);
2804
- background-color: var(--qti-bg-active);
2805
- }
2806
-
2807
- &[aria-readonly='true'] {
2808
- cursor: pointer;
2809
- background-color: var(--qti-bg);
2810
- outline: 0;
2811
- border: none;
2812
- }
2813
-
2814
- &[aria-disabled='true'] {
2815
- cursor: not-allowed;
2816
- background-color: var(--qti-disabled-bg);
2817
- color: var(--qti-disabled-color);
2818
- border-color: var(--qti-border-color);
2819
- outline: 4px solid var(--qti-disabled-bg);
2820
- }
2821
-
2822
- border-radius: var(--qti-border-radius);
2823
-
2824
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2825
-
2826
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2827
-
2828
- outline: none
2829
- }
2830
-
2831
- /* } */
2832
- }
2833
-
2834
- &.qti-unselected-hidden {
2835
- qti-hottext {
2836
- &:hover {
2837
- }
2838
-
2839
- &:focus {
2840
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2841
- }
2842
-
2843
- cursor: pointer;
2844
-
2845
- &::part(ch) {
2846
- display: none;
2847
- }
2848
-
2849
- &:state(--checked) {
2850
- background-color: var(--qti-bg-active);
2851
- }
2852
-
2853
- &[aria-readonly='true'] {
2854
- cursor: pointer;
2855
- background-color: var(--qti-bg);
2856
- outline: 0;
2857
- border: none;
2858
- }
2859
-
2860
- &[aria-disabled='true'] {
2861
- cursor: not-allowed;
2862
- background-color: var(--qti-disabled-bg);
2863
- color: var(--qti-disabled-color);
2864
- border-color: var(--qti-border-color);
2865
- outline: 4px solid var(--qti-disabled-bg);
2866
- }
2867
- }
2868
- }
2869
- }
2870
-
2871
- qti-inline-choice-interaction {
2872
- &:state(candidate-correct) {
2873
- background-color: var(--qti-correct);
2874
- }
2875
-
2876
- &:state(candidate-incorrect) {
2877
- background-color: var(--qti-incorrect);
2878
- }
2879
-
2880
- &::part(select) {
2881
-
2882
- &:hover {
2883
- }
2884
-
2885
- &:focus {
2886
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2887
- }
2888
-
2889
- border-radius: var(--qti-border-radius);
2890
-
2891
- position: relative;
2892
-
2893
- -webkit-appearance: none;
2894
-
2895
- -moz-appearance: none;
2896
-
2897
- appearance: none;
2898
-
2899
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2900
-
2901
- padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
2902
-
2903
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2904
-
2905
- outline: none;
2906
-
2907
- 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")
2908
- no-repeat center right 6px
2909
- }
2910
- }
2911
-
2912
- qti-match-interaction.qti-match-tabular {
2913
- /* Table element */
2914
- &::part(table) {
2915
- border-collapse: collapse;
2916
- width: 100%;
2917
- }
2918
-
2919
- /* Row headers - take up remaining space */
2920
- &::part(r-header) {
2921
- background-color: var(--qti-bg-active, #f8f8f8);
2922
- font-weight: 500;
2923
- text-align: center;
2924
- padding: 8px 15px;
2925
- border: 1px solid #ddd;
2926
- width: auto; /* Let it expand naturally */
2927
- word-wrap: break-word; /* Allow long words to break */
2928
- white-space: wrap; /* Allow text to wrap to multiple lines */
2929
- min-width: 4rem; /* Allow column to shrink below content width */
2930
- }
2931
-
2932
- /* Column headers - minimal width */
2933
- &::part(c-header) {
2934
- background-color: var(--qti-bg-active, #f8f8f8);
2935
- font-weight: 500;
2936
- text-align: left;
2937
- padding: 8px;
2938
- border: 1px solid #ddd;
2939
- width: 8rem; /* Force minimal width */
2940
- white-space: normal; /* Prevent wrapping */
2941
- }
2942
-
2943
- /* Table rows */
2944
- &::part(row) {
2945
- border-bottom: 1px solid #ddd;
2946
- }
2947
-
2948
- /* Input cells - minimal width */
2949
- &::part(input-cell) {
2950
- text-align: center;
2951
- vertical-align: middle;
2952
- height: 48px;
2953
- border: 1px solid #ddd;
2954
- padding: 8px;
2955
- width: 1%; /* Force minimal width */
2956
- }
2957
-
2958
- /* Radio button styling */
2959
- &::part(rb) {
2960
- -webkit-appearance: none;
2961
- -moz-appearance: none;
2962
- appearance: none;
2963
- width: 24px;
2964
- height: 24px;
2965
- border-radius: 50%;
2966
- border: 2px solid var(--qti-border-active, #2196f3);
2967
- background-color: transparent !important;
2968
- margin: 0 auto;
2969
- cursor: pointer;
2970
- display: block;
2971
- }
2972
-
2973
- /* Radio button checked state */
2974
- &::part(rb-checked) {
2975
- box-shadow: inset 0 0 0 6px var(--qti-border-active, #2196f3);
2976
- }
2977
-
2978
- /* Checkbox styling */
2979
- &::part(cb) {
2980
- -webkit-appearance: none;
2981
- -moz-appearance: none;
2982
- appearance: none;
2983
- width: 24px;
2984
- height: 24px;
2985
- border-radius: 3px;
2986
- border: 2px solid var(--qti-border-active, #2196f3);
2987
- background-color: transparent !important;
2988
- margin: 0 auto;
2989
- cursor: pointer;
2990
- display: block;
2991
- }
2992
-
2993
- /* Checkbox checked state - only change border if we're adding an SVG checkmark */
2994
- &::part(cb-checked) {
2995
- background-color: var(--qti-border-active, #2196f3) !important;
2996
- }
2997
-
2998
- &::part(checkmark) {
2999
- position: absolute;
3000
- width: 18px;
3001
- height: 18px;
3002
- top: 3px;
3003
- left: 3px;
3004
- pointer-events: none;
3005
- }
3006
-
3007
- /* Correct answers for both types */
3008
- &::part(rb-correct) {
3009
- border-color: var(--qti-correct, #4caf50);
3010
- }
3011
-
3012
- &::part(rb-checked rb-correct) {
3013
- box-shadow: inset 0 0 0 6px var(--qti-correct, #4caf50);
3014
- }
3015
-
3016
- &::part(cb-correct) {
3017
- border-color: var(--qti-correct, #4caf50);
3018
- }
3019
-
3020
- &::part(cb-checked cb-correct) {
3021
- background-color: var(--qti-correct, #4caf50) !important;
3022
- }
3023
-
3024
- /* Incorrect answers for both types */
3025
- &::part(rb-incorrect) {
3026
- border-color: var(--qti-incorrect, #f44336);
3027
- }
3028
-
3029
- &::part(rb-checked rb-incorrect) {
3030
- box-shadow: inset 0 0 0 6px var(--qti-incorrect, #f44336);
3031
- }
3032
-
3033
- &::part(cb-incorrect) {
3034
- border-color: var(--qti-incorrect, #f44336);
3035
- }
3036
-
3037
- &::part(cb-checked cb-incorrect) {
3038
- background-color: var(--qti-incorrect, #f44336) !important;
3039
- }
3040
- }
3041
-
3042
- qti-match-interaction:not(.qti-match-tabular) {
3043
- &:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
3044
- background-color: var(--qti-bg-active);
3045
- }
3046
-
3047
- &:state(--dragzone-active) qti-simple-match-set:first-of-type {
3048
- border-color: var(--qti-border-active);
3049
- background-color: var(--qti-bg-active);
3050
- }
3051
-
3052
- /* The draggables */
3053
- & qti-simple-match-set:first-of-type {
3054
- display: flex;
3055
- flex-wrap: wrap;
3056
- align-items: flex-start; /* Prevents children from stretching */
3057
- gap: var(--qti-gap-size);
3058
- border: 2px solid transparent;
3059
-
3060
- & qti-simple-associable-choice {
3061
-
3062
- &[dragging] {
3063
- pointer-events: none;
3064
- rotate: -2deg;
3065
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
3066
- 0 4px 8px rgb(0 0 0 / 10%);
3067
- }
3068
-
3069
- &:hover {
3070
- }
3071
-
3072
- &:focus {
3073
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3074
- }
3075
-
3076
- box-sizing: border-box;
3077
-
3078
- transition: transform 200ms ease-out,
3079
- box-shadow 200ms ease-out,
3080
- rotate 200ms ease-out;
3081
-
3082
- cursor: grab;
3083
-
3084
- background-color: var(--qti-bg);
3085
-
3086
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3087
-
3088
- border-radius: var(--qti-border-radius);
3089
-
3090
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3091
-
3092
- outline: none
3093
- }
3094
- }
3095
-
3096
- /* The droppables */
3097
- & qti-simple-match-set:last-of-type {
3098
- display: grid;
3099
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
3100
- grid-auto-flow: unset;
3101
- grid-auto-columns: unset;
3102
- gap: var(--qti-gap-size);
3103
-
3104
- & > qti-simple-associable-choice {
3105
- /* a droppable qti-simple-associable-choice */
3106
- display: flex;
3107
- flex-direction: column;
3108
- justify-content: space-between;
3109
- grid-row: unset;
3110
- box-sizing: border-box;
3111
-
3112
- & img {
3113
- max-width: 100%;
3114
- height: auto;
3115
- }
3116
-
3117
- &[enabled] {
3118
- &::part(dropslot) {
3119
- background-color: var(--qti-bg-active);
3120
- }
3121
- }
3122
-
3123
- &[disabled] {
3124
- &::part(dropslot) {
3125
- cursor: not-allowed;
3126
- background-color: var(--qti-disabled-bg);
3127
- color: var(--qti-disabled-color);
3128
- border-color: var(--qti-border-color);
3129
- outline: 4px solid var(--qti-disabled-bg);
3130
- }
3131
- }
3132
-
3133
- &[active] {
3134
- &::part(dropslot) {
3135
- border-color: var(--qti-border-active);
3136
- background-color: var(--qti-bg-active);
3137
- }
3138
- }
3139
-
3140
- &::part(dropslot) {
3141
-
3142
- &[dragging] {
3143
- pointer-events: none;
3144
- rotate: -2deg;
3145
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
3146
- 0 4px 8px rgb(0 0 0 / 10%);
3147
- }
3148
-
3149
- &:focus {
3150
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3151
- }
3152
-
3153
- padding: var(--qti-dropzone-padding);
3154
- margin-top: 0.5rem;
3155
- gap: 0.5rem;
3156
- display: flex;
3157
- flex-wrap: wrap;
3158
- justify-content: center;
3159
- align-items: center;
3160
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
3161
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
3162
- center no-repeat;
3163
- border-radius: var(--qti-border-radius);
3164
- position: relative;
3165
- background-color: var(--qti-bg);
3166
- }
3167
-
3168
- & > *:not(qti-simple-associable-choice) {
3169
- pointer-events: none;
3170
- }
3171
-
3172
- & > qti-simple-associable-choice {
3173
-
3174
- &:state(candidate-correct) {
3175
- background-color: var(--qti-correct);
3176
- }
3177
-
3178
- &:state(candidate-incorrect) {
3179
- background-color: var(--qti-incorrect);
3180
- }
3181
-
3182
- &::part(dropslot) {
3183
- display: none;
3184
- }
3185
-
3186
- &:hover {
3187
- }
3188
-
3189
- &:focus {
3190
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3191
- }
3192
-
3193
- flex-basis: fit-content;
3194
-
3195
- box-sizing: border-box;
3196
-
3197
- transition: transform 200ms ease-out,
3198
- box-shadow 200ms ease-out,
3199
- rotate 200ms ease-out;
3200
-
3201
- cursor: grab;
3202
-
3203
- background-color: var(--qti-bg);
3204
-
3205
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3206
-
3207
- border-radius: var(--qti-border-radius);
3208
-
3209
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3210
-
3211
- outline: none;
3212
- }
3213
- }
3214
- }
3215
- }
3216
-
3217
- qti-order-interaction {
3218
- &:state(--dragzone-active)::part(drags) {
3219
- border-color: var(--qti-border-active);
3220
- background-color: var(--qti-bg-active);
3221
- }
3222
-
3223
- &:state(--dragzone-enabled)::part(drags) {
3224
- background-color: var(--qti-bg-active);
3225
- }
3226
-
3227
- &::part(qti-simple-choice),
3228
- & qti-simple-choice {
3229
-
3230
- &[dragging] {
3231
- pointer-events: none;
3232
- rotate: -2deg;
3233
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
3234
- 0 4px 8px rgb(0 0 0 / 10%);
3235
- }
3236
-
3237
- &:hover {
3238
- }
3239
-
3240
- &:focus {
3241
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3242
- }
3243
-
3244
- box-sizing: border-box;
3245
-
3246
- transition: transform 200ms ease-out,
3247
- box-shadow 200ms ease-out,
3248
- rotate 200ms ease-out;
3249
-
3250
- cursor: grab;
3251
-
3252
- background-color: var(--qti-bg);
3253
-
3254
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3255
-
3256
- border-radius: var(--qti-border-radius);
3257
-
3258
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3259
-
3260
- outline: none
3261
- }
3262
-
3263
- &::part(qti-simple-choice) {
3264
- display: flex;
3265
- overflow: hidden;
3266
- align-items: center;
3267
- width: 100%;
3268
- text-overflow: ellipsis;
3269
- }
3270
-
3271
- &::part(drops) {
3272
- gap: 0.5rem; /* gap-2 */
3273
- }
3274
-
3275
- &::part(drags) {
3276
- gap: 0.5rem; /* gap-2 */
3277
- }
3278
-
3279
- &::part(drop-list) {
3280
-
3281
- &[enabled] {
3282
-
3283
- /* Light theme override */
3284
- .qti-selections-light {
3285
- border-color: var(--qti-light-border-active);
3286
- }
3287
-
3288
- /* Dark theme override */
3289
- .qti-selections-dark {
3290
- border-color: var(--qti-dark-border-active);
3291
- }
3292
- background-color: var(--qti-bg-active)
3293
- }
3294
-
3295
- &:hover {
3296
- }
3297
-
3298
- &:focus {
3299
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3300
- }
3301
-
3302
- display: flex;
3303
- min-height: 4rem;
3304
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
3305
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
3306
- center no-repeat;
3307
- border-radius: var(--qti-border-radius);
3308
- position: relative;
3309
- background-color: var(--qti-bg);
3310
- }
3311
-
3312
- &::part(active) {
3313
- border-color: var(--qti-border-active);
3314
- background-color: var(--qti-bg-active);
3315
- }
3316
-
3317
- & drop-list {
3318
- &[shape='circle'] {
3319
-
3320
- &:hover {
3321
- }
3322
-
3323
- &:focus {
3324
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3325
- }
3326
-
3327
- &[aria-checked='true'] {
3328
- border-color: var(--qti-border-active);
3329
- background-color: var(--qti-bg-active);
3330
- }
3331
-
3332
- &[aria-readonly='true'] {
3333
- cursor: pointer;
3334
- background-color: var(--qti-bg);
3335
- outline: 0;
3336
- border: none;
3337
- }
3338
-
3339
- &[aria-disabled='true'] {
3340
- cursor: not-allowed;
3341
- background-color: var(--qti-disabled-bg);
3342
- color: var(--qti-disabled-color);
3343
- border-color: var(--qti-border-color);
3344
- outline: 4px solid var(--qti-disabled-bg);
3345
- }
3346
-
3347
- width: 100%;
3348
-
3349
- height: 100%;
3350
-
3351
- background-color: transparent;
3352
-
3353
- margin: 0;
3354
-
3355
- padding: 0;
3356
-
3357
- border: 0;
3358
-
3359
- box-sizing: border-box;
3360
-
3361
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3362
-
3363
- outline: none
3364
- }
3365
-
3366
- &[shape='square'] {
3367
-
3368
- &:hover {
3369
- }
3370
-
3371
- &:focus {
3372
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3373
- }
3374
-
3375
- &[aria-checked='true'] {
3376
- border-color: var(--qti-border-active);
3377
- background-color: var(--qti-bg-active);
3378
- }
3379
-
3380
- &[aria-readonly='true'] {
3381
- cursor: pointer;
3382
- background-color: var(--qti-bg);
3383
- outline: 0;
3384
- border: none;
3385
- }
3386
-
3387
- &[aria-disabled='true'] {
3388
- cursor: not-allowed;
3389
- background-color: var(--qti-disabled-bg);
3390
- color: var(--qti-disabled-color);
3391
- border-color: var(--qti-border-color);
3392
- outline: 4px solid var(--qti-disabled-bg);
3393
- }
3394
-
3395
- width: 100%;
3396
-
3397
- height: 100%;
3398
-
3399
- background-color: transparent;
3400
-
3401
- margin: 0;
3402
-
3403
- padding: 0;
3404
-
3405
- border: 0;
3406
-
3407
- box-sizing: border-box;
3408
-
3409
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3410
-
3411
- outline: none
3412
- }
3413
- }
3414
- }
3415
-
3416
- qti-associate-interaction {
3417
- /* General styles for active and enabled states */
3418
- &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
3419
- border-color: var(--qti-border-active);
3420
- background-color: var(--qti-bg-active);
3421
- }
3422
-
3423
- &:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {
3424
- background-color: var(--qti-bg-active);
3425
- }
3426
-
3427
- & qti-simple-associable-choice, /* drags when in lightdom */
3428
- &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
3429
-
3430
- &:hover {
3431
- }
3432
-
3433
- &:focus {
3434
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3435
- }
3436
-
3437
- &[dragging] {
3438
- pointer-events: none;
3439
- rotate: -2deg;
3440
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
3441
- 0 4px 8px rgb(0 0 0 / 10%);
3442
- }
3443
-
3444
- box-sizing: border-box;
3445
-
3446
- transition: transform 200ms ease-out,
3447
- box-shadow 200ms ease-out,
3448
- rotate 200ms ease-out;
3449
-
3450
- cursor: grab;
3451
-
3452
- background-color: var(--qti-bg);
3453
-
3454
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3455
-
3456
- border-radius: var(--qti-border-radius);
3457
-
3458
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3459
-
3460
- outline: none
3461
- }
3462
-
3463
- /* display: flex;
3464
- overflow: hidden;
3465
- align-items: center; */
3466
-
3467
- /* &::part(drop-container) {
3468
- display: flex;
3469
- flex-direction: column;
3470
- gap: var(--qti-gap-size);
3471
- } */
3472
-
3473
- &::part(drop-list) {
3474
-
3475
- display: grid;
3476
- height: 3rem;
3477
- min-width: 10rem;
3478
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
3479
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
3480
- center no-repeat;
3481
- border-radius: var(--qti-border-radius);
3482
- position: relative;
3483
- background-color: var(--qti-bg);
3484
- }
3485
-
3486
- &::part(drop-list):focus {
3487
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3488
- }
3489
-
3490
- &::part(drop-list)[dragging] {
3491
- border-color: var(--qti-border-active);
3492
- background-color: var(--qti-bg-active);
3493
- }
3494
-
3495
- /* &::part(drop-list) {
3496
- @apply act;
3497
- } */
3498
- }
3499
-
3500
- qti-graphic-order-interaction {
3501
- & qti-hotspot-choice {
3502
- width: 100%;
3503
- height: 100%;
3504
- background-color: rgb(128 128 128 / 30%);
3505
- padding: 0;
3506
-
3507
- &:hover {
3508
- background-color: rgb(128 128 128 / 70%);
3509
- }
3510
-
3511
- &:focus {
3512
- background-color: rgb(128 128 128 / 70%);
3513
- }
3514
-
3515
- &:state(--checked),
3516
- &[aria-checked='true'] {
3517
- background-color: rgb(128 128 128 / 70%);
3518
- }
3519
-
3520
- &[aria-readonly='true'] {
3521
- cursor: pointer;
3522
- background-color: var(--qti-bg);
3523
- outline: 0;
3524
- border: none;
3525
- }
3526
-
3527
- &[aria-disabled='true'] {
3528
- cursor: not-allowed;
3529
- background-color: var(--qti-disabled-bg);
3530
- color: var(--qti-disabled-color);
3531
- border-color: var(--qti-border-color);
3532
- outline: 4px solid var(--qti-disabled-bg);
3533
- }
3534
-
3535
- &[aria-ordervalue] {
3536
- display: grid;
3537
- place-content: center;
3538
- }
3539
-
3540
- &[aria-ordervalue]::after {
3541
- content: attr(aria-ordervalue) !important;
3542
- }
3543
-
3544
- &[aria-ordercorrectvalue] {
3545
- display: grid;
3546
- place-content: center;
3547
- }
3548
-
3549
- /* When both attributes are present */
3550
- &[aria-ordercorrectvalue][aria-ordervalue]::after {
3551
- content: 'C=' attr(aria-ordercorrectvalue) ' R=' attr(aria-ordervalue) !important;
3552
- color: var(--qti-correct);
3553
- }
3554
-
3555
- /* When only aria-ordercorrectvalue is present */
3556
- &[aria-ordercorrectvalue]:not([aria-ordervalue])::after {
3557
- content: 'C=' attr(aria-ordercorrectvalue) !important;
3558
- color: var(--qti-correct);
3559
- }
3560
- }
3561
-
3562
- &.qti-selections-light {
3563
- &:state(--dragzone-active)::part(drags) {
3564
- background-color: var(--qti-light-bg-active);
3565
- border-color: var(--qti-light-border-active);
3566
- }
3567
-
3568
- &:state(--dragzone-enabled)::part(drags) {
3569
- background-color: var(--qti-light-bg-active);
3570
- }
3571
- }
3572
-
3573
- &.qti-selections-dark {
3574
- &:state(--dragzone-active)::part(drags) {
3575
- background-color: var(--qti-dark-bg-active);
3576
- border-color: var(--qti-dark-border-active);
3577
- }
3578
-
3579
- &:state(--dragzone-enabled)::part(drags) {
3580
- background-color: var(--qti-dark-bg-active);
3581
- }
3582
- }
3583
-
3584
- /* General styles for active and enabled states */
3585
- &:state(--dragzone-active)::part(drags) {
3586
- border-color: var(--qti-border-active);
3587
- background-color: var(--qti-bg-active);
3588
- }
3589
-
3590
- &:state(--dragzone-enabled)::part(drags) {
3591
- background-color: var(--qti-bg-active);
3592
- }
3593
- }
3594
-
3595
- qti-graphic-associate-interaction {
3596
- position: relative;
3597
- display: block;
3598
-
3599
- & qti-associable-hotspot {
3600
- &[shape='circle'] {
3601
-
3602
- &:hover {
3603
- }
3604
-
3605
- &:focus {
3606
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3607
- }
3608
-
3609
- &[aria-checked='true'] {
3610
- border-color: var(--qti-border-active);
3611
- background-color: var(--qti-bg-active);
3612
- }
3613
-
3614
- &[aria-readonly='true'] {
3615
- cursor: pointer;
3616
- background-color: var(--qti-bg);
3617
- outline: 0;
3618
- border: none;
3619
- }
3620
-
3621
- &[aria-disabled='true'] {
3622
- cursor: not-allowed;
3623
- background-color: var(--qti-disabled-bg);
3624
- color: var(--qti-disabled-color);
3625
- border-color: var(--qti-border-color);
3626
- outline: 4px solid var(--qti-disabled-bg);
3627
- }
3628
-
3629
- width: 100%;
3630
-
3631
- height: 100%;
3632
-
3633
- background-color: transparent;
3634
-
3635
- margin: 0;
3636
-
3637
- padding: 0;
3638
-
3639
- border: 0;
3640
-
3641
- box-sizing: border-box;
3642
-
3643
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3644
-
3645
- outline: none
3646
- }
3647
-
3648
- &[shape='square'] {
3649
-
3650
- &:hover {
3651
- }
3652
-
3653
- &:focus {
3654
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3655
- }
3656
-
3657
- &[aria-checked='true'] {
3658
- border-color: var(--qti-border-active);
3659
- background-color: var(--qti-bg-active);
3660
- }
3661
-
3662
- &[aria-readonly='true'] {
3663
- cursor: pointer;
3664
- background-color: var(--qti-bg);
3665
- outline: 0;
3666
- border: none;
3667
- }
3668
-
3669
- &[aria-disabled='true'] {
3670
- cursor: not-allowed;
3671
- background-color: var(--qti-disabled-bg);
3672
- color: var(--qti-disabled-color);
3673
- border-color: var(--qti-border-color);
3674
- outline: 4px solid var(--qti-disabled-bg);
3675
- }
3676
-
3677
- width: 100%;
3678
-
3679
- height: 100%;
3680
-
3681
- background-color: transparent;
3682
-
3683
- margin: 0;
3684
-
3685
- padding: 0;
3686
-
3687
- border: 0;
3688
-
3689
- box-sizing: border-box;
3690
-
3691
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3692
-
3693
- outline: none
3694
- }
3695
- }
3696
-
3697
- &.qti-selections-light {
3698
- &:state(--dragzone-active)::part(drags) {
3699
- background-color: var(--qti-light-bg-active);
3700
- border-color: var(--qti-light-border-active);
3701
- }
3702
-
3703
- &:state(--dragzone-enabled)::part(drags) {
3704
- background-color: var(--qti-light-bg-active);
3705
- }
3706
- }
3707
-
3708
- &.qti-selections-dark {
3709
- &:state(--dragzone-active)::part(drags) {
3710
- background-color: var(--qti-dark-bg-active);
3711
- border-color: var(--qti-dark-border-active);
3712
- }
3713
-
3714
- &:state(--dragzone-enabled)::part(drags) {
3715
- background-color: var(--qti-dark-bg-active);
3716
- }
3717
- }
3718
-
3719
- /* General styles for active and enabled states */
3720
- &:state(--dragzone-active)::part(drags) {
3721
- border-color: var(--qti-border-active);
3722
- background-color: var(--qti-bg-active);
3723
- }
3724
-
3725
- &:state(--dragzone-enabled)::part(drags) {
3726
- background-color: var(--qti-bg-active);
3727
- }
3728
- }
3729
-
3730
- qti-slider-interaction {
3731
- --qti-tick-color: rgb(229 231 235 / 100%);
3732
- --qti-tick-width: 1px;
3733
- }
3734
-
3735
- qti-select-point-interaction {
3736
- &::part(point) {
3737
- &:hover {
3738
- }
3739
-
3740
- &:focus {
3741
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3742
- }
3743
-
3744
- box-sizing: border-box;
3745
-
3746
- border-radius: 100%;
3747
-
3748
- border: 1px solid white;
3749
-
3750
- background-color: black;
3751
-
3752
- opacity: 0.5;
3753
-
3754
- padding: 0;
3755
-
3756
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3757
-
3758
- outline: none;
3759
- }
3760
-
3761
- &::part(correct) {
3762
- background-color: var(--qti-correct);
3763
- }
3764
-
3765
- &::part(incorrect) {
3766
- background-color: var(--qti-incorrect);
3767
- }
3768
- }
3769
-
3770
- qti-position-object-stage {
3771
- & qti-position-object-interaction {
3772
- /* no styles necessary, only layout styles, defined in the component */
3773
- }
3774
- }
3775
-
3776
- qti-prompt {
3777
- margin: 0.5rem 0; /* my-2 */
3778
- display: block;
3779
- width: 100%;
3780
- }
3781
- }
3782
-
3783
- qti-test-part:not(:has(qti-assessment-item)),
3784
- qti-assessment-section:not(:has(qti-assessment-item)),
3785
- qti-assessment-item-ref:not(:has(qti-assessment-item)) {
3786
- display: none;
3787
- }
3788
-
3789
- qti-hottext-interaction::part(message),
3790
- qti-choice-interaction::part(message),
3791
- qti-association-interaction::part(message),
3792
- qti-graphic-association-interaction::part(message),
3793
- qti-graphic-gap-match-interaction::part(message),
3794
- qti-graphic-order-interaction::part(message),
3795
- qti-math-interaction::part(message) {
3796
- display: none;
3797
- color: var(--qti-validation-text, #000);
3798
- background-color: var(--qti-validation-error-bg, #fff);
3799
- padding: 10px;
3800
- border: 3px solid var(--qti-validation-text, #000);
3801
- border-radius: 4px;
3802
- margin-top: 8px;
3803
- }
3804
-
3805
- div.full-correct-response {
3806
- border: 1px solid #39a7c0;
3807
- background-color: #d9e8ee;
3808
- }
3809
-
3810
- div.full-correct-response-block {
3811
- display: block;
3812
- margin-top: var(--qti-padding-vertical);
3813
- padding: 0.5rem;
3814
- }
3815
-
3816
- div.full-correct-response-inline {
3817
- display: inline-block;
3818
- margin-left: var(--qti-padding-horizontal);
3819
- margin-right: var(--qti-padding-horizontal);
3820
- padding: 0.2rem;
3821
- }
3822
- `;
3823
-
3824
- export {
3825
- m,
3826
- item_default
3827
- };
3828
- /*! Bundled license information:
3829
-
3830
- lit-html/node/directives/private-async-helpers.js:
3831
- (**
3832
- * @license
3833
- * Copyright 2021 Google LLC
3834
- * SPDX-License-Identifier: BSD-3-Clause
3835
- *)
3836
-
3837
- lit-html/node/directives/until.js:
3838
- (**
3839
- * @license
3840
- * Copyright 2017 Google LLC
3841
- * SPDX-License-Identifier: BSD-3-Clause
3842
- *)
3843
- */
3844
- //# sourceMappingURL=chunk-W4SQRNWO.js.map