@citolab/qti-components 6.9.1-beta.10 → 6.9.1-beta.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +409 -317
- package/dist/index.js +2298 -603
- package/dist/item.css +2067 -421
- package/dist/qti-components/index.d.ts +2 -2
- package/dist/qti-components/index.js +185 -136
- package/dist/qti-item/index.d.ts +1 -1
- package/dist/qti-item/index.js +2070 -424
- package/dist/{qti-simple-choice-CafJuhnH.d.ts → qti-simple-choice-bOvnZAEz.d.ts} +33 -50
- package/package.json +6 -2
package/dist/item.css
CHANGED
|
@@ -1,15 +1,37 @@
|
|
|
1
1
|
@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
|
|
2
2
|
|
|
3
|
+
/*
|
|
4
|
+
Base variables on PNP
|
|
5
|
+
https://www.imsglobal.org/spec/qti/v3p0/impl#h.x51afjl5r8gl
|
|
6
|
+
font-face
|
|
7
|
+
https://www.imsglobal.org/spec/qti/v3p0/impl#h.r3hufj74r1do
|
|
8
|
+
line-spacing
|
|
9
|
+
https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
|
|
10
|
+
*/
|
|
11
|
+
|
|
3
12
|
:root,
|
|
4
13
|
:host {
|
|
5
|
-
|
|
14
|
+
/* Primary colors */
|
|
15
|
+
--qti-primary-light: #ffeaea;
|
|
6
16
|
--qti-primary: #f86d70;
|
|
7
17
|
--qti-primary-dark: #a1616a;
|
|
8
18
|
|
|
19
|
+
/* Secondary colors */
|
|
9
20
|
--qti-secondary-light: #bed4ff;
|
|
10
21
|
--qti-secondary: #6daef8;
|
|
11
22
|
--qti-secondary-dark: #3a449d;
|
|
12
23
|
|
|
24
|
+
/* Background colors */
|
|
25
|
+
--qti-bg-gray-50: #f9fafb;
|
|
26
|
+
--qti-bg-gray-100: #f3f4f6;
|
|
27
|
+
--qti-bg-white: white;
|
|
28
|
+
--qti-bg-primary: var(--qti-primary);
|
|
29
|
+
|
|
30
|
+
/* Text colors */
|
|
31
|
+
--qti-text-gray-500: #6b7280;
|
|
32
|
+
--qti-text-white: white;
|
|
33
|
+
|
|
34
|
+
/* Border properties */
|
|
13
35
|
--qti-border-thickness: 1.5px;
|
|
14
36
|
--qti-border-style: solid;
|
|
15
37
|
--qti-border-color-gray: #c6cad0; /* Corresponding to border-gray-400 */
|
|
@@ -17,31 +39,39 @@
|
|
|
17
39
|
--qti-border-radius-lg: 0.5rem;
|
|
18
40
|
--qti-border-radius-full: 9999px;
|
|
19
41
|
|
|
20
|
-
|
|
21
|
-
--qti-bg-primary: var(--qti-primary);
|
|
22
|
-
--qti-bg-gray-100: #f3f4f6;
|
|
23
|
-
|
|
24
|
-
--qti-text-gray-500: #6b7280;
|
|
25
|
-
--qti-text-white: white;
|
|
26
|
-
|
|
42
|
+
/* Padding */
|
|
27
43
|
--qti-padding-sm: 0.125rem; /* py-0.5 */
|
|
28
44
|
--qti-padding-md: 0.5rem; /* py-2 */
|
|
29
45
|
--qti-padding-lg: 0.75rem; /* p-3 */
|
|
30
46
|
--qti-padding-xl: 1rem; /* pl-4 */
|
|
31
47
|
|
|
48
|
+
/* Form & layout */
|
|
49
|
+
--qti-form-size: 1rem;
|
|
50
|
+
--qti-gap-size: 0.5rem;
|
|
51
|
+
|
|
52
|
+
/* Typography */
|
|
32
53
|
--qti-font-weight-semibold: 600;
|
|
54
|
+
--qti-line-height: 2.5;
|
|
33
55
|
|
|
56
|
+
/* Focus & active states */
|
|
34
57
|
--qti-active: blue;
|
|
35
58
|
--qti-focus-color: #bddcff7e;
|
|
36
59
|
--qti-focus-border-width: 5px;
|
|
37
60
|
|
|
61
|
+
/* Correct/Incorrect feedback */
|
|
38
62
|
--qti-correct: rgb(74 222 128);
|
|
39
63
|
--qti-correct-light: rgb(220 252 231);
|
|
40
64
|
--qti-incorrect: rgb(248 113 113);
|
|
41
65
|
--qti-incorrect-light: rgb(254 226 226);
|
|
42
66
|
|
|
43
|
-
|
|
44
|
-
--
|
|
67
|
+
/* ---- */
|
|
68
|
+
--box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);
|
|
69
|
+
--box-shadow-lg: 0 0.5rem 1rem rgb(0 0 0 / 15%);
|
|
70
|
+
--table-border-color: var(--qti-border-color-gray);
|
|
71
|
+
--foreground: var(--qti-bg-gray-50);
|
|
72
|
+
--well-bg: var(--qti-bg-gray-50);
|
|
73
|
+
--well-border: var(--qti-border-color-gray);
|
|
74
|
+
--well-box-shadow: var(--box-shadow);
|
|
45
75
|
}
|
|
46
76
|
|
|
47
77
|
.chevron {
|
|
@@ -52,13 +82,13 @@
|
|
|
52
82
|
.handle {
|
|
53
83
|
background-image: radial-gradient(
|
|
54
84
|
circle at center,
|
|
55
|
-
|
|
56
|
-
rgb(0
|
|
57
|
-
|
|
58
|
-
|
|
85
|
+
rgb(0 0 0 / 10%) 0,
|
|
86
|
+
rgb(0 0 0 / 20%) 2px,
|
|
87
|
+
rgb(255 255 255 / 0%) 2px,
|
|
88
|
+
rgb(255 255 255 / 0%) 100%
|
|
59
89
|
);
|
|
60
90
|
background-repeat: repeat-y;
|
|
61
|
-
background-position: left
|
|
91
|
+
background-position: left center;
|
|
62
92
|
background-size: 14px 8px;
|
|
63
93
|
}
|
|
64
94
|
|
|
@@ -77,11 +107,11 @@
|
|
|
77
107
|
}
|
|
78
108
|
|
|
79
109
|
.form {
|
|
110
|
+
|
|
80
111
|
width: var(--qti-form-size);
|
|
81
112
|
height: var(--qti-form-size);
|
|
82
113
|
align-self: 1;
|
|
83
114
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
84
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
85
115
|
outline: none;
|
|
86
116
|
}
|
|
87
117
|
|
|
@@ -90,18 +120,16 @@
|
|
|
90
120
|
}
|
|
91
121
|
|
|
92
122
|
.button {
|
|
93
|
-
|
|
94
|
-
outline: none;
|
|
123
|
+
|
|
95
124
|
border-radius: var(--qti-border-radius-md);
|
|
96
|
-
padding: var(--qti-padding-
|
|
125
|
+
padding: var(--qti-padding-md) var(--qti-padding-md);
|
|
97
126
|
font-weight: var(--qti-font-weight-semibold);
|
|
98
127
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
99
128
|
outline: none;
|
|
100
129
|
}
|
|
101
130
|
|
|
102
131
|
.select {
|
|
103
|
-
|
|
104
|
-
outline: none;
|
|
132
|
+
|
|
105
133
|
border-radius: var(--qti-border-radius-md);
|
|
106
134
|
position: relative;
|
|
107
135
|
-webkit-appearance: none;
|
|
@@ -112,8 +140,7 @@
|
|
|
112
140
|
}
|
|
113
141
|
|
|
114
142
|
.text {
|
|
115
|
-
|
|
116
|
-
outline: none;
|
|
143
|
+
|
|
117
144
|
border-radius: 0;
|
|
118
145
|
cursor: text;
|
|
119
146
|
padding: var(--qti-padding-lg); /* Equal padding on all sides */
|
|
@@ -123,8 +150,7 @@
|
|
|
123
150
|
}
|
|
124
151
|
|
|
125
152
|
.spot {
|
|
126
|
-
|
|
127
|
-
outline: none;
|
|
153
|
+
|
|
128
154
|
width: 100%;
|
|
129
155
|
height: 100%;
|
|
130
156
|
background-color: transparent;
|
|
@@ -136,9 +162,8 @@
|
|
|
136
162
|
/* qti-select-point-interaction */
|
|
137
163
|
|
|
138
164
|
.point {
|
|
139
|
-
|
|
165
|
+
|
|
140
166
|
border-radius: var(--qti-border-radius-full);
|
|
141
|
-
outline: none;
|
|
142
167
|
width: 1.5rem; /* w-6 */
|
|
143
168
|
height: 1.5rem;
|
|
144
169
|
background-color: transparent;
|
|
@@ -148,11 +173,13 @@
|
|
|
148
173
|
}
|
|
149
174
|
|
|
150
175
|
.drag {
|
|
151
|
-
|
|
152
|
-
|
|
176
|
+
|
|
177
|
+
transition:
|
|
178
|
+
transform 200ms ease-out,
|
|
179
|
+
box-shadow 200ms ease-out,
|
|
180
|
+
rotate 200ms ease-out;
|
|
153
181
|
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl); /* Padding shorthand */
|
|
154
182
|
border-radius: var(--qti-border-radius-md);
|
|
155
|
-
|
|
156
183
|
cursor: grab;
|
|
157
184
|
background-color: white;
|
|
158
185
|
font-weight: var(--qti-font-weight-semibold);
|
|
@@ -160,23 +187,37 @@
|
|
|
160
187
|
outline: none;
|
|
161
188
|
background-image: radial-gradient(
|
|
162
189
|
circle at center,
|
|
163
|
-
|
|
164
|
-
rgb(0
|
|
165
|
-
|
|
166
|
-
|
|
190
|
+
rgb(0 0 0 / 10%) 0,
|
|
191
|
+
rgb(0 0 0 / 20%) 2px,
|
|
192
|
+
rgb(255 255 255 / 0%) 2px,
|
|
193
|
+
rgb(255 255 255 / 0%) 100%
|
|
167
194
|
);
|
|
168
195
|
background-repeat: repeat-y;
|
|
169
|
-
background-position: left
|
|
196
|
+
background-position: left center;
|
|
170
197
|
background-size: 14px 8px;
|
|
171
198
|
}
|
|
172
199
|
|
|
200
|
+
.dragging {
|
|
201
|
+
pointer-events: none;
|
|
202
|
+
rotate: -2deg;
|
|
203
|
+
box-shadow:
|
|
204
|
+
0 8px 12px rgb(0 0 0 / 20%),
|
|
205
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
206
|
+
}
|
|
207
|
+
|
|
173
208
|
.drop {
|
|
174
|
-
|
|
175
|
-
|
|
209
|
+
|
|
210
|
+
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>')
|
|
211
|
+
center no-repeat;
|
|
176
212
|
border-radius: var(--qti-border-radius-lg);
|
|
177
213
|
position: relative;
|
|
178
|
-
background-color: var(--qti-bg-
|
|
179
|
-
|
|
214
|
+
background-color: var(--qti-bg-white);
|
|
215
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
216
|
+
outline: none;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.dropping {
|
|
220
|
+
background-color: var(--qti-primary-light);
|
|
180
221
|
}
|
|
181
222
|
|
|
182
223
|
.order {
|
|
@@ -187,79 +228,1550 @@
|
|
|
187
228
|
color: var(--qti-text-white);
|
|
188
229
|
}
|
|
189
230
|
|
|
190
|
-
.check-size {
|
|
191
|
-
width: calc(var(--qti-form-size) - 4px);
|
|
192
|
-
height: calc(var(--qti-form-size) - 4px);
|
|
231
|
+
.check-size {
|
|
232
|
+
width: calc(var(--qti-form-size) - 4px);
|
|
233
|
+
height: calc(var(--qti-form-size) - 4px);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.check {
|
|
237
|
+
/* display: flex; */
|
|
238
|
+
|
|
239
|
+
/* align-items: center; */
|
|
240
|
+
gap: 0.5rem;
|
|
241
|
+
padding: var(--qti-padding-md) var(--qti-padding-md); /* Padding shorthand */
|
|
242
|
+
outline: none;
|
|
243
|
+
border-radius: var(--qti-border-radius-md);
|
|
244
|
+
cursor: pointer;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.check-radio {
|
|
248
|
+
|
|
249
|
+
border-radius: var(--qti-border-radius-full);
|
|
250
|
+
|
|
251
|
+
width: var(--qti-form-size);
|
|
252
|
+
|
|
253
|
+
height: var(--qti-form-size);
|
|
254
|
+
|
|
255
|
+
align-self: 1;
|
|
256
|
+
|
|
257
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
258
|
+
|
|
259
|
+
outline: none;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.check-radio-checked {
|
|
263
|
+
background-color: var(--qti-bg-primary);
|
|
264
|
+
border-radius: var(--qti-border-radius-full);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.check-checkbox {
|
|
268
|
+
|
|
269
|
+
border-radius: var(--qti-border-radius-md);
|
|
270
|
+
|
|
271
|
+
width: var(--qti-form-size);
|
|
272
|
+
|
|
273
|
+
height: var(--qti-form-size);
|
|
274
|
+
|
|
275
|
+
align-self: 1;
|
|
276
|
+
|
|
277
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
278
|
+
|
|
279
|
+
outline: none;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.check-checkbox-checked {
|
|
283
|
+
|
|
284
|
+
background-color: var(--qti-bg-primary);
|
|
285
|
+
-webkit-mask-image: var(--check-mask);
|
|
286
|
+
mask-image: var(--check-mask); /* check-mask */ -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"); 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");
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.hov {
|
|
290
|
+
/* background-color: var(--qti-bg-gray-50); */
|
|
291
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.foc {
|
|
295
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.act {
|
|
299
|
+
border-color: var(--qti-bg-primary); /* border-primary */
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.rdo {
|
|
303
|
+
cursor: pointer;
|
|
304
|
+
background-color: white;
|
|
305
|
+
outline: 0;
|
|
306
|
+
border: none;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.dis {
|
|
310
|
+
cursor: not-allowed;
|
|
311
|
+
background-color: var(--qti-bg-gray-100);
|
|
312
|
+
color: var(--qti-text-gray-500);
|
|
313
|
+
border-color: var(--qti-border-color-gray);
|
|
314
|
+
|
|
315
|
+
/* outline: 2px solid var(--qti-bg-gray-100); */
|
|
316
|
+
|
|
317
|
+
/* outline-color: var(--qti-text-gray-50); */
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* base */
|
|
321
|
+
|
|
322
|
+
/* ============================
|
|
323
|
+
QTI 3 shared css
|
|
324
|
+
1. Display
|
|
325
|
+
2. Special Flex styles
|
|
326
|
+
3. Margin
|
|
327
|
+
4. Padding
|
|
328
|
+
5. Horizontal Alignment styles
|
|
329
|
+
6. Vertical Alignment styles
|
|
330
|
+
7. Height
|
|
331
|
+
8. Width
|
|
332
|
+
9. Text-Indent
|
|
333
|
+
10. List Style
|
|
334
|
+
11. Layout
|
|
335
|
+
12. Other QTI 3 presentation utilities
|
|
336
|
+
============================ */
|
|
337
|
+
|
|
338
|
+
/* ==========
|
|
339
|
+
Display css
|
|
340
|
+
=========== */
|
|
341
|
+
|
|
342
|
+
.qti-display-inline {
|
|
343
|
+
display: inline;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.qti-display-inline-block {
|
|
347
|
+
display: inline-block;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.qti-display-block {
|
|
351
|
+
display: block;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.qti-display-flex {
|
|
355
|
+
display: flexbox;
|
|
356
|
+
display: flex;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.qti-display-inline-flex {
|
|
360
|
+
display: inline-flex;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.qti-display-grid {
|
|
364
|
+
display: grid;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.qti-display-inline-grid {
|
|
368
|
+
display: inline-grid;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.qti-display-table {
|
|
372
|
+
display: table;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.qti-display-table-cell {
|
|
376
|
+
display: table-cell;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.qti-display-table-row {
|
|
380
|
+
display: table-row;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.qti-display-list-item {
|
|
384
|
+
display: list-item;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.qti-display-inherit {
|
|
388
|
+
display: inherit;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
/*
|
|
392
|
+
* hidden to screen readers and sighted
|
|
393
|
+
*/
|
|
394
|
+
|
|
395
|
+
.qti-hidden {
|
|
396
|
+
display: none;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/*
|
|
400
|
+
* visible to screen readers, hidden to sighted
|
|
401
|
+
*/
|
|
402
|
+
|
|
403
|
+
.qti-visually-hidden {
|
|
404
|
+
position: fixed !important;
|
|
405
|
+
overflow: hidden;
|
|
406
|
+
clip: rect(1px 1px 1px 1px);
|
|
407
|
+
height: 1px;
|
|
408
|
+
width: 1px;
|
|
409
|
+
border: 0;
|
|
410
|
+
margin: -1px;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* =============================
|
|
414
|
+
Special flex styles
|
|
415
|
+
============================= */
|
|
416
|
+
|
|
417
|
+
.qti-flex-direction-column {
|
|
418
|
+
flex-direction: column;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.qti-flex-direction-row {
|
|
422
|
+
flex-direction: row;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.qti-flex-grow-1 {
|
|
426
|
+
flex-grow: 1;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.qti-flex-grow-0 {
|
|
430
|
+
flex-grow: 0;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
/* =========
|
|
434
|
+
Margin css
|
|
435
|
+
========== */
|
|
436
|
+
|
|
437
|
+
/**
|
|
438
|
+
* For margin Top and Bottom and Left and Right
|
|
439
|
+
*/
|
|
440
|
+
|
|
441
|
+
.qti-margin-0 {
|
|
442
|
+
margin: 0 !important;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.qti-margin-1 {
|
|
446
|
+
margin: 0.25rem !important;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.qti-margin-2 {
|
|
450
|
+
margin: 0.5rem !important;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.qti-margin-3 {
|
|
454
|
+
margin: 1rem !important;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.qti-margin-4 {
|
|
458
|
+
margin: 1.5rem !important;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.qti-margin-5 {
|
|
462
|
+
margin: 3rem !important;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.qti-margin-auto {
|
|
466
|
+
margin: auto !important;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/*
|
|
470
|
+
For margin Left and Right
|
|
471
|
+
*/
|
|
472
|
+
|
|
473
|
+
.qti-margin-x-0 {
|
|
474
|
+
margin-right: 0 !important;
|
|
475
|
+
margin-left: 0 !important;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
.qti-margin-x-1 {
|
|
479
|
+
margin-right: 0.25rem !important;
|
|
480
|
+
margin-left: 0.25rem !important;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.qti-margin-x-2 {
|
|
484
|
+
margin-right: 0.5rem !important;
|
|
485
|
+
margin-left: 0.5rem !important;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.qti-margin-x-3 {
|
|
489
|
+
margin-right: 1rem !important;
|
|
490
|
+
margin-left: 1rem !important;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.qti-margin-x-4 {
|
|
494
|
+
margin-right: 1.5rem !important;
|
|
495
|
+
margin-left: 1.5rem !important;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.qti-margin-x-5 {
|
|
499
|
+
margin-right: 3rem !important;
|
|
500
|
+
margin-left: 3rem !important;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.qti-margin-x-auto {
|
|
504
|
+
margin-right: auto !important;
|
|
505
|
+
margin-left: auto !important;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
/*
|
|
509
|
+
For margin Top and Bottom
|
|
510
|
+
*/
|
|
511
|
+
|
|
512
|
+
.qti-margin-y-0 {
|
|
513
|
+
margin-top: 0 !important;
|
|
514
|
+
margin-bottom: 0 !important;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.qti-margin-y-1 {
|
|
518
|
+
margin-top: 0.25rem !important;
|
|
519
|
+
margin-bottom: 0.25rem !important;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.qti-margin-y-2 {
|
|
523
|
+
margin-top: 0.5rem !important;
|
|
524
|
+
margin-bottom: 0.5rem !important;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.qti-margin-y-3 {
|
|
528
|
+
margin-top: 1rem !important;
|
|
529
|
+
margin-bottom: 1rem !important;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.qti-margin-y-4 {
|
|
533
|
+
margin-top: 1.5rem !important;
|
|
534
|
+
margin-bottom: 1.5rem !important;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.qti-margin-y-5 {
|
|
538
|
+
margin-top: 3rem !important;
|
|
539
|
+
margin-bottom: 3rem !important;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
.qti-margin-y-auto {
|
|
543
|
+
margin-top: auto !important;
|
|
544
|
+
margin-bottom: auto !important;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
/*
|
|
548
|
+
For margin Top
|
|
549
|
+
*/
|
|
550
|
+
|
|
551
|
+
.qti-margin-t-0 {
|
|
552
|
+
margin-top: 0 !important;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.qti-margin-t-1 {
|
|
556
|
+
margin-top: 0.25rem !important;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
.qti-margin-t-2 {
|
|
560
|
+
margin-top: 0.5rem !important;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.qti-margin-t-3 {
|
|
564
|
+
margin-top: 1rem !important;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.qti-margin-t-4 {
|
|
568
|
+
margin-top: 1.5rem !important;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.qti-margin-t-5 {
|
|
572
|
+
margin-top: 3rem !important;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.qti-margin-t-auto {
|
|
576
|
+
margin-top: auto !important;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
/*
|
|
580
|
+
For margin Bottom
|
|
581
|
+
*/
|
|
582
|
+
|
|
583
|
+
.qti-margin-b-0 {
|
|
584
|
+
margin-bottom: 0 !important;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.qti-margin-b-1 {
|
|
588
|
+
margin-bottom: 0.25rem !important;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.qti-margin-b-2 {
|
|
592
|
+
margin-bottom: 0.5rem !important;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.qti-margin-b-3 {
|
|
596
|
+
margin-bottom: 1rem !important;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.qti-margin-b-4 {
|
|
600
|
+
margin-bottom: 1.5rem !important;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
.qti-margin-b-5 {
|
|
604
|
+
margin-bottom: 3rem !important;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.qti-margin-b-auto {
|
|
608
|
+
margin-bottom: auto !important;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
/*
|
|
612
|
+
For margin Start LTR
|
|
613
|
+
*/
|
|
614
|
+
|
|
615
|
+
.qti-margin-s-0 {
|
|
616
|
+
margin-left: 0 !important;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.qti-margin-s-1 {
|
|
620
|
+
margin-left: 0.25rem !important;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.qti-margin-s-2 {
|
|
624
|
+
margin-left: 0.5rem !important;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.qti-margin-s-3 {
|
|
628
|
+
margin-left: 1rem !important;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.qti-margin-s-4 {
|
|
632
|
+
margin-left: 1.5rem !important;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.qti-margin-s-5 {
|
|
636
|
+
margin-left: 3rem !important;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.qti-margin-s-auto {
|
|
640
|
+
margin-left: auto !important;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
/*
|
|
644
|
+
For margin End LTR
|
|
645
|
+
*/
|
|
646
|
+
|
|
647
|
+
.qti-margin-e-0 {
|
|
648
|
+
margin-right: 0 !important;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
.qti-margin-e-1 {
|
|
652
|
+
margin-right: 0.25rem !important;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.qti-margin-e-2 {
|
|
656
|
+
margin-right: 0.5rem !important;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
.qti-margin-e-3 {
|
|
660
|
+
margin-right: 1rem !important;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
.qti-margin-e-4 {
|
|
664
|
+
margin-right: 1.5rem !important;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.qti-margin-e-5 {
|
|
668
|
+
margin-right: 3rem !important;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
.qti-margin-e-auto {
|
|
672
|
+
margin-right: auto !important;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
/* =========
|
|
676
|
+
Padding css
|
|
677
|
+
========== */
|
|
678
|
+
|
|
679
|
+
/*
|
|
680
|
+
For padding Top and Bottom and Left and Right
|
|
681
|
+
*/
|
|
682
|
+
|
|
683
|
+
.qti-padding-0 {
|
|
684
|
+
padding: 0 !important;
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
.qti-padding-1 {
|
|
688
|
+
padding: 0.25rem !important;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.qti-padding-2 {
|
|
692
|
+
padding: 0.5rem !important;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.qti-padding-3 {
|
|
696
|
+
padding: 1rem !important;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.qti-padding-4 {
|
|
700
|
+
padding: 1.5rem !important;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.qti-padding-5 {
|
|
704
|
+
padding: 3rem !important;
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
/*
|
|
708
|
+
For padding Left and Right
|
|
709
|
+
*/
|
|
710
|
+
|
|
711
|
+
.qti-padding-x-0 {
|
|
712
|
+
padding-right: 0 !important;
|
|
713
|
+
padding-left: 0 !important;
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
.qti-padding-x-1 {
|
|
717
|
+
padding-right: 0.25rem !important;
|
|
718
|
+
padding-left: 0.25rem !important;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.qti-padding-x-2 {
|
|
722
|
+
padding-right: 0.5rem !important;
|
|
723
|
+
padding-left: 0.5rem !important;
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
.qti-padding-x-3 {
|
|
727
|
+
padding-right: 1rem !important;
|
|
728
|
+
padding-left: 1rem !important;
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.qti-padding-x-4 {
|
|
732
|
+
padding-right: 1.5rem !important;
|
|
733
|
+
padding-left: 1.5rem !important;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
.qti-padding-x-5 {
|
|
737
|
+
padding-right: 3rem !important;
|
|
738
|
+
padding-left: 3rem !important;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
/*
|
|
742
|
+
For padding Top and Bottom
|
|
743
|
+
*/
|
|
744
|
+
|
|
745
|
+
.qti-padding-y-0 {
|
|
746
|
+
padding-top: 0 !important;
|
|
747
|
+
padding-bottom: 0 !important;
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
.qti-padding-y-1 {
|
|
751
|
+
padding-top: 0.25rem !important;
|
|
752
|
+
padding-bottom: 0.25rem !important;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
.qti-padding-y-2 {
|
|
756
|
+
padding-top: 0.5rem !important;
|
|
757
|
+
padding-bottom: 0.5rem !important;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
.qti-padding-y-3 {
|
|
761
|
+
padding-top: 1rem !important;
|
|
762
|
+
padding-bottom: 1rem !important;
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.qti-padding-y-4 {
|
|
766
|
+
padding-top: 1.5rem !important;
|
|
767
|
+
padding-bottom: 1.5rem !important;
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
.qti-padding-y-5 {
|
|
771
|
+
padding-top: 3rem !important;
|
|
772
|
+
padding-bottom: 3rem !important;
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
/*
|
|
776
|
+
For padding Top
|
|
777
|
+
*/
|
|
778
|
+
|
|
779
|
+
.qti-padding-t-0 {
|
|
780
|
+
padding-top: 0 !important;
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.qti-padding-t-1 {
|
|
784
|
+
padding-top: 0.25rem !important;
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
.qti-padding-t-2 {
|
|
788
|
+
padding-top: 0.5rem !important;
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
.qti-padding-t-3 {
|
|
792
|
+
padding-top: 1rem !important;
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
.qti-padding-t-4 {
|
|
796
|
+
padding-top: 1.5rem !important;
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
.qti-padding-t-5 {
|
|
800
|
+
padding-top: 3rem !important;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
/*
|
|
804
|
+
For padding Bottom
|
|
805
|
+
*/
|
|
806
|
+
|
|
807
|
+
.qti-padding-b-0 {
|
|
808
|
+
padding-bottom: 0 !important;
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.qti-padding-b-1 {
|
|
812
|
+
padding-bottom: 0.25rem !important;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.qti-padding-b-2 {
|
|
816
|
+
padding-bottom: 0.5rem !important;
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
.qti-padding-b-3 {
|
|
820
|
+
padding-bottom: 1rem !important;
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
.qti-padding-b-4 {
|
|
824
|
+
padding-bottom: 1.5rem !important;
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
.qti-padding-b-5 {
|
|
828
|
+
padding-bottom: 3rem !important;
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
/*
|
|
832
|
+
For padding Start LTR
|
|
833
|
+
*/
|
|
834
|
+
|
|
835
|
+
.qti-padding-s-0 {
|
|
836
|
+
padding-left: 0 !important;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.qti-padding-s-1 {
|
|
840
|
+
padding-left: 0.25rem !important;
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
.qti-padding-s-2 {
|
|
844
|
+
padding-left: 0.5rem !important;
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
.qti-padding-s-3 {
|
|
848
|
+
padding-left: 1rem !important;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
.qti-padding-s-4 {
|
|
852
|
+
padding-left: 1.5rem !important;
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.qti-padding-s-5 {
|
|
856
|
+
padding-left: 3rem !important;
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
/*
|
|
860
|
+
For padding End LTR
|
|
861
|
+
*/
|
|
862
|
+
|
|
863
|
+
.qti-padding-e-0 {
|
|
864
|
+
padding-right: 0 !important;
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
.qti-padding-e-1 {
|
|
868
|
+
padding-right: 0.25rem !important;
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
.qti-padding-e-2 {
|
|
872
|
+
padding-right: 0.5rem !important;
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
.qti-padding-e-3 {
|
|
876
|
+
padding-right: 1rem !important;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
.qti-padding-e-4 {
|
|
880
|
+
padding-right: 1.5rem !important;
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
.qti-padding-e-5 {
|
|
884
|
+
padding-right: 3rem !important;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
/* ====================
|
|
888
|
+
Horizontal alignment
|
|
889
|
+
==================== */
|
|
890
|
+
|
|
891
|
+
.qti-align-left {
|
|
892
|
+
text-align: left;
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
.qti-align-center {
|
|
896
|
+
text-align: center;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.qti-align-right {
|
|
900
|
+
text-align: right;
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
/* ==================
|
|
904
|
+
Vertical alignment
|
|
905
|
+
================== */
|
|
906
|
+
|
|
907
|
+
.qti-valign-top {
|
|
908
|
+
vertical-align: top;
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
.qti-valign-middle {
|
|
912
|
+
vertical-align: middle;
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
.qti-valign-baseline {
|
|
916
|
+
vertical-align: baseline;
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.qti-valign-bottom {
|
|
920
|
+
vertical-align: bottom;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
/* =============
|
|
924
|
+
Height styles
|
|
925
|
+
============= */
|
|
926
|
+
|
|
927
|
+
.qti-height-0 {
|
|
928
|
+
height: 0;
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.qti-height-px {
|
|
932
|
+
height: 1px;
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
.qti-height-0p5 {
|
|
936
|
+
height: 0.125rem;
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
.qti-height-1 {
|
|
940
|
+
height: 0.25rem;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.qti-height-1p5 {
|
|
944
|
+
height: 0.375rem;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.qti-height-2 {
|
|
948
|
+
height: 0.5rem;
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
.qti-height-2p5 {
|
|
952
|
+
height: 0.625rem;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
.qti-height-3 {
|
|
956
|
+
height: 0.75rem;
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
.qti-height-3p5 {
|
|
960
|
+
height: 0.875rem;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
.qti-height-4 {
|
|
964
|
+
height: 1rem;
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.qti-height-5 {
|
|
968
|
+
height: 1.25rem;
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
.qti-height-6 {
|
|
972
|
+
height: 1.5rem;
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
.qti-height-7 {
|
|
976
|
+
height: 1.75rem;
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
.qti-height-8 {
|
|
980
|
+
height: 2rem;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
.qti-height-9 {
|
|
984
|
+
height: 2.25rem;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
.qti-height-10 {
|
|
988
|
+
height: 2.5rem;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
.qti-height-11 {
|
|
992
|
+
height: 2.75rem;
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
.qti-height-12 {
|
|
996
|
+
height: 3rem;
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
.qti-height-14 {
|
|
1000
|
+
height: 3.5rem;
|
|
1001
|
+
}
|
|
1002
|
+
|
|
1003
|
+
.qti-height-16 {
|
|
1004
|
+
height: 4rem;
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
.qti-height-20 {
|
|
1008
|
+
height: 5rem;
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
.qti-height-24 {
|
|
1012
|
+
height: 6rem;
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
.qti-height-28 {
|
|
1016
|
+
height: 7rem;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
.qti-height-32 {
|
|
1020
|
+
height: 8rem;
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
.qti-height-36 {
|
|
1024
|
+
height: 9rem;
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
.qti-height-40 {
|
|
1028
|
+
height: 10rem;
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
.qti-height-44 {
|
|
1032
|
+
height: 11rem;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
.qti-height-48 {
|
|
1036
|
+
height: 12rem;
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
.qti-height-52 {
|
|
1040
|
+
height: 13rem;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
.qti-height-56 {
|
|
1044
|
+
height: 14rem;
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
.qti-height-60 {
|
|
1048
|
+
height: 15rem;
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
.qti-height-64 {
|
|
1052
|
+
height: 16rem;
|
|
1053
|
+
}
|
|
1054
|
+
|
|
1055
|
+
.qti-height-72 {
|
|
1056
|
+
height: 18rem;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.qti-height-80 {
|
|
1060
|
+
height: 20rem;
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
.qti-height-96 {
|
|
1064
|
+
height: 24rem;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
.qti-height-1-2 {
|
|
1068
|
+
height: 50%;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
.qti-height-1-3 {
|
|
1072
|
+
height: 33.333333%;
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
.qti-height-2-3 {
|
|
1076
|
+
height: 66.666667%;
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
.qti-height-1-4 {
|
|
1080
|
+
height: 25%;
|
|
1081
|
+
}
|
|
1082
|
+
|
|
1083
|
+
.qti-height-2-4 {
|
|
1084
|
+
height: 50%;
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
.qti-height-3-4 {
|
|
1088
|
+
height: 75%;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
.qti-height-1-5 {
|
|
1092
|
+
height: 20%;
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
.qti-height-2-5 {
|
|
1096
|
+
height: 40%;
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
.qti-height-3-5 {
|
|
1100
|
+
height: 60%;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
.qti-height-4-5 {
|
|
1104
|
+
height: 80%;
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
.qti-height-1-6 {
|
|
1108
|
+
height: 16.666667%;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.qti-height-2-6 {
|
|
1112
|
+
height: 33.333333%;
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1115
|
+
.qti-height-3-6 {
|
|
1116
|
+
height: 50%;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.qti-height-4-6 {
|
|
1120
|
+
height: 66.666667%;
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
.qti-height-5-6 {
|
|
1124
|
+
height: 83.333333%;
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.qti-height-auto {
|
|
1128
|
+
height: auto;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
.qti-height-full {
|
|
1132
|
+
height: 100%;
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1135
|
+
/* ============
|
|
1136
|
+
Width styles
|
|
1137
|
+
============ */
|
|
1138
|
+
|
|
1139
|
+
.qti-width-0 {
|
|
1140
|
+
width: 0;
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
.qti-width-px {
|
|
1144
|
+
width: 1px;
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
.qti-width-0p5 {
|
|
1148
|
+
width: 0.125rem;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.qti-width-1 {
|
|
1152
|
+
width: 0.25rem;
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
.qti-width-1p5 {
|
|
1156
|
+
width: 0.375rem;
|
|
1157
|
+
}
|
|
1158
|
+
|
|
1159
|
+
.qti-width-2 {
|
|
1160
|
+
width: 0.5rem;
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
.qti-width-2p5 {
|
|
1164
|
+
width: 0.625rem;
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1167
|
+
.qti-width-3 {
|
|
1168
|
+
width: 0.75rem;
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
.qti-width-3p5 {
|
|
1172
|
+
width: 0.875rem;
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
.qti-width-4 {
|
|
1176
|
+
width: 1rem;
|
|
1177
|
+
}
|
|
1178
|
+
|
|
1179
|
+
.qti-width-5 {
|
|
1180
|
+
width: 1.25rem;
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.qti-width-6 {
|
|
1184
|
+
width: 1.5rem;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.qti-width-7 {
|
|
1188
|
+
width: 1.75rem;
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
.qti-width-8 {
|
|
1192
|
+
width: 2rem;
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
.qti-width-9 {
|
|
1196
|
+
width: 2.25rem;
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
.qti-width-10 {
|
|
1200
|
+
width: 2.5rem;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
.qti-width-11 {
|
|
1204
|
+
width: 2.75rem;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
.qti-width-12 {
|
|
1208
|
+
width: 3rem;
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
.qti-width-14 {
|
|
1212
|
+
width: 3.5rem;
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1215
|
+
.qti-width-16 {
|
|
1216
|
+
width: 4rem;
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
.qti-width-20 {
|
|
1220
|
+
width: 5rem;
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
.qti-width-24 {
|
|
1224
|
+
width: 6rem;
|
|
1225
|
+
}
|
|
1226
|
+
|
|
1227
|
+
.qti-width-28 {
|
|
1228
|
+
width: 7rem;
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.qti-width-32 {
|
|
1232
|
+
width: 8rem;
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
.qti-width-36 {
|
|
1236
|
+
width: 9rem;
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
.qti-width-40 {
|
|
1240
|
+
width: 10rem;
|
|
1241
|
+
}
|
|
1242
|
+
|
|
1243
|
+
.qti-width-44 {
|
|
1244
|
+
width: 11rem;
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
.qti-width-48 {
|
|
1248
|
+
width: 12rem;
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1251
|
+
.qti-width-52 {
|
|
1252
|
+
width: 13rem;
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
.qti-width-56 {
|
|
1256
|
+
width: 14rem;
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1259
|
+
.qti-width-60 {
|
|
1260
|
+
width: 15rem;
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
.qti-width-64 {
|
|
1264
|
+
width: 16rem;
|
|
1265
|
+
}
|
|
1266
|
+
|
|
1267
|
+
.qti-width-72 {
|
|
1268
|
+
width: 18rem;
|
|
1269
|
+
}
|
|
1270
|
+
|
|
1271
|
+
.qti-width-80 {
|
|
1272
|
+
width: 20rem;
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
.qti-width-96 {
|
|
1276
|
+
width: 24rem;
|
|
1277
|
+
}
|
|
1278
|
+
|
|
1279
|
+
.qti-width-auto {
|
|
1280
|
+
width: auto;
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.qti-width-1-2 {
|
|
1284
|
+
width: 50%;
|
|
1285
|
+
}
|
|
1286
|
+
|
|
1287
|
+
.qti-width-1-3 {
|
|
1288
|
+
width: 33.333333%;
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
.qti-width-2-3 {
|
|
1292
|
+
width: 66.666667%;
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
.qti-width-1-4 {
|
|
1296
|
+
width: 25%;
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1299
|
+
.qti-width-2-4 {
|
|
1300
|
+
width: 50%;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
.qti-width-3-4 {
|
|
1304
|
+
width: 75%;
|
|
1305
|
+
}
|
|
1306
|
+
|
|
1307
|
+
.qti-width-1-5 {
|
|
1308
|
+
width: 20%;
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
.qti-width-2-5 {
|
|
1312
|
+
width: 40%;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
.qti-width-3-5 {
|
|
1316
|
+
width: 60%;
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
.qti-width-4-5 {
|
|
1320
|
+
width: 80%;
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
.qti-width-1-6 {
|
|
1324
|
+
width: 16.666667%;
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1327
|
+
.qti-width-2-6 {
|
|
1328
|
+
width: 33.333333%;
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
.qti-width-3-6 {
|
|
1332
|
+
width: 50%;
|
|
1333
|
+
}
|
|
1334
|
+
|
|
1335
|
+
.qti-width-4-6 {
|
|
1336
|
+
width: 66.666667%;
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
.qti-width-5-6 {
|
|
1340
|
+
width: 83.333333%;
|
|
1341
|
+
}
|
|
1342
|
+
|
|
1343
|
+
.qti-width-1-12 {
|
|
1344
|
+
width: 8.333333%;
|
|
1345
|
+
}
|
|
1346
|
+
|
|
1347
|
+
.qti-width-2-12 {
|
|
1348
|
+
width: 16.666667%;
|
|
1349
|
+
}
|
|
1350
|
+
|
|
1351
|
+
.qti-width-3-12 {
|
|
1352
|
+
width: 25%;
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
.qti-width-4-12 {
|
|
1356
|
+
width: 33.333333%;
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
.qti-width-5-12 {
|
|
1360
|
+
width: 41.666667%;
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
.qti-width-6-12 {
|
|
1364
|
+
width: 50%;
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
.qti-width-7-12 {
|
|
1368
|
+
width: 58.333333%;
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
.qti-width-8-12 {
|
|
1372
|
+
width: 66.666667%;
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
.qti-width-9-12 {
|
|
1376
|
+
width: 75%;
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
.qti-width-10-12 {
|
|
1380
|
+
width: 83.333333%;
|
|
1381
|
+
}
|
|
1382
|
+
|
|
1383
|
+
.qti-width-11-12 {
|
|
1384
|
+
width: 91.666667%;
|
|
1385
|
+
}
|
|
1386
|
+
|
|
1387
|
+
.qti-width-full,
|
|
1388
|
+
.qti-fullwidth {
|
|
1389
|
+
width: 100%;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
/* ==================
|
|
1393
|
+
Text Indent styles
|
|
1394
|
+
================== */
|
|
1395
|
+
|
|
1396
|
+
.qti-text-indent-0 {
|
|
1397
|
+
text-indent: 0;
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
.qti-text-indent-px {
|
|
1401
|
+
text-indent: 1px;
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
.qti-text-indent-0p5 {
|
|
1405
|
+
text-indent: 0.125rem;
|
|
1406
|
+
}
|
|
1407
|
+
|
|
1408
|
+
.qti-text-indent-1 {
|
|
1409
|
+
text-indent: 0.25rem;
|
|
1410
|
+
}
|
|
1411
|
+
|
|
1412
|
+
.qti-text-indent-1p5 {
|
|
1413
|
+
text-indent: 0.375rem;
|
|
1414
|
+
}
|
|
1415
|
+
|
|
1416
|
+
.qti-text-indent-2 {
|
|
1417
|
+
text-indent: 0.5rem;
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
.qti-text-indent-2p5 {
|
|
1421
|
+
text-indent: 0.625rem;
|
|
1422
|
+
}
|
|
1423
|
+
|
|
1424
|
+
.qti-text-indent-3 {
|
|
1425
|
+
text-indent: 0.75rem;
|
|
1426
|
+
}
|
|
1427
|
+
|
|
1428
|
+
.qti-text-indent-3p5 {
|
|
1429
|
+
text-indent: 0.875rem;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
.qti-text-indent-4 {
|
|
1433
|
+
text-indent: 1rem;
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
.qti-text-indent-5 {
|
|
1437
|
+
text-indent: 1.25rem;
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
.qti-text-indent-6 {
|
|
1441
|
+
text-indent: 1.5rem;
|
|
1442
|
+
}
|
|
1443
|
+
|
|
1444
|
+
.qti-text-indent-7 {
|
|
1445
|
+
text-indent: 1.75rem;
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
.qti-text-indent-8 {
|
|
1449
|
+
text-indent: 2rem;
|
|
1450
|
+
}
|
|
1451
|
+
|
|
1452
|
+
.qti-text-indent-12 {
|
|
1453
|
+
text-indent: 3rem;
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
.qti-text-indent-16 {
|
|
1457
|
+
text-indent: 4rem;
|
|
1458
|
+
}
|
|
1459
|
+
|
|
1460
|
+
.qti-text-indent-20 {
|
|
1461
|
+
text-indent: 5rem;
|
|
1462
|
+
}
|
|
1463
|
+
|
|
1464
|
+
.qti-text-indent-24 {
|
|
1465
|
+
text-indent: 6rem;
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
.qti-text-indent-28 {
|
|
1469
|
+
text-indent: 7rem;
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
.qti-text-indent-32 {
|
|
1473
|
+
text-indent: 8rem;
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
/* =================
|
|
1477
|
+
List Style styles
|
|
1478
|
+
================= */
|
|
1479
|
+
|
|
1480
|
+
.qti-list-style-type-none {
|
|
1481
|
+
list-style-type: none;
|
|
1482
|
+
}
|
|
1483
|
+
|
|
1484
|
+
.qti-list-style-type-disc {
|
|
1485
|
+
list-style-type: disc;
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
.qti-list-style-type-circle {
|
|
1489
|
+
list-style-type: circle;
|
|
1490
|
+
}
|
|
1491
|
+
|
|
1492
|
+
.qti-list-style-type-square {
|
|
1493
|
+
list-style-type: square;
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
.qti-list-style-type-decimal {
|
|
1497
|
+
list-style-type: decimal;
|
|
1498
|
+
}
|
|
1499
|
+
|
|
1500
|
+
.qti-list-style-type-decimal-leading-zero {
|
|
1501
|
+
list-style-type: decimal-leading-zero;
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
.qti-list-style-type-lower-alpha {
|
|
1505
|
+
list-style-type: lower-alpha;
|
|
1506
|
+
}
|
|
1507
|
+
|
|
1508
|
+
.qti-list-style-type-upper-alpha {
|
|
1509
|
+
list-style-type: upper-alpha;
|
|
1510
|
+
}
|
|
1511
|
+
|
|
1512
|
+
.qti-list-style-type-lower-roman {
|
|
1513
|
+
list-style-type: lower-roman;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
.qti-list-style-type-upper-roman {
|
|
1517
|
+
list-style-type: upper-roman;
|
|
1518
|
+
}
|
|
1519
|
+
|
|
1520
|
+
.qti-list-style-type-lower-latin {
|
|
1521
|
+
list-style-type: lower-latin;
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
.qti-list-style-type-upper-latin {
|
|
1525
|
+
list-style-type: upper-latin;
|
|
1526
|
+
}
|
|
1527
|
+
|
|
1528
|
+
.qti-list-style-type-lower-greek {
|
|
1529
|
+
list-style-type: lower-greek;
|
|
1530
|
+
}
|
|
1531
|
+
|
|
1532
|
+
.qti-list-style-type-arabic-indic {
|
|
1533
|
+
list-style-type: arabic-indic;
|
|
1534
|
+
}
|
|
1535
|
+
|
|
1536
|
+
.qti-list-style-type-armenian {
|
|
1537
|
+
list-style-type: armenian;
|
|
1538
|
+
}
|
|
1539
|
+
|
|
1540
|
+
.qti-list-style-type-lower-armenian {
|
|
1541
|
+
list-style-type: lower-armenian;
|
|
1542
|
+
}
|
|
1543
|
+
|
|
1544
|
+
.qti-list-style-type-upper-armenian {
|
|
1545
|
+
list-style-type: upper-armenian;
|
|
1546
|
+
}
|
|
1547
|
+
|
|
1548
|
+
.qti-list-style-type-bengali {
|
|
1549
|
+
list-style-type: bengali;
|
|
1550
|
+
}
|
|
1551
|
+
|
|
1552
|
+
.qti-list-style-type-cambodian {
|
|
1553
|
+
list-style-type: cambodian;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
.qti-list-style-type-simp-chinese-formal {
|
|
1557
|
+
list-style-type: simp-chinese-formal;
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
.qti-list-style-type-simp-chinese-informal {
|
|
1561
|
+
list-style-type: simp-chinese-informal;
|
|
1562
|
+
}
|
|
1563
|
+
|
|
1564
|
+
.qti-list-style-type-trad-chinese-formal {
|
|
1565
|
+
list-style-type: trad-chinese-formal;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
.qti-list-style-type-trad-chinese-informal {
|
|
1569
|
+
list-style-type: trad-chinese-informal;
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
.qti-list-style-type-cjk-ideographic {
|
|
1573
|
+
list-style-type: cjk-ideographic;
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1576
|
+
.qti-list-style-type-cjk-heavenly-stem {
|
|
1577
|
+
list-style-type: cjk-heavenly-stem;
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
.qti-list-style-type-cjk-earthly-branch {
|
|
1581
|
+
list-style-type: cjk-earthly-branch;
|
|
1582
|
+
}
|
|
1583
|
+
|
|
1584
|
+
.qti-list-style-type-devanagari {
|
|
1585
|
+
list-style-type: devanagari;
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
.qti-list-style-type-ethiopic-halehame-ti-er {
|
|
1589
|
+
list-style-type: ethiopic-halehame-ti-er;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
.qti-list-style-type-ethiopic-halehame-ti-et {
|
|
1593
|
+
list-style-type: ethiopic-halehame-ti-et;
|
|
1594
|
+
}
|
|
1595
|
+
|
|
1596
|
+
.qti-list-style-type-ethiopic-halehame-am {
|
|
1597
|
+
list-style-type: ethiopic-halehame-am;
|
|
1598
|
+
}
|
|
1599
|
+
|
|
1600
|
+
.qti-list-style-type-ethiopic-halehame {
|
|
1601
|
+
list-style-type: ethiopic-halehame;
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1604
|
+
.qti-list-style-type-georgian {
|
|
1605
|
+
list-style-type: georgian;
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1608
|
+
.qti-list-style-type-gujarati {
|
|
1609
|
+
list-style-type: gujarati;
|
|
1610
|
+
}
|
|
1611
|
+
|
|
1612
|
+
.qti-list-style-type-gurmukhi {
|
|
1613
|
+
list-style-type: gurmukhi;
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1616
|
+
.qti-list-style-type-hangul {
|
|
1617
|
+
list-style-type: hangul;
|
|
1618
|
+
}
|
|
1619
|
+
|
|
1620
|
+
.qti-list-style-type-hangul-consonant {
|
|
1621
|
+
list-style-type: hangul-consonant;
|
|
1622
|
+
}
|
|
1623
|
+
|
|
1624
|
+
.qti-list-style-type-hebrew {
|
|
1625
|
+
list-style-type: hebrew;
|
|
1626
|
+
}
|
|
1627
|
+
|
|
1628
|
+
.qti-list-style-type-hiragana {
|
|
1629
|
+
list-style-type: hiragana;
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
.qti-list-style-type-hiragana-iroha {
|
|
1633
|
+
list-style-type: hiragana-iroha;
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1636
|
+
.qti-list-style-type-khmer {
|
|
1637
|
+
list-style-type: khmer;
|
|
1638
|
+
}
|
|
1639
|
+
|
|
1640
|
+
.qti-list-style-type-korean-hangul-formal {
|
|
1641
|
+
list-style-type: korean-hangul-formal;
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
.qti-list-style-type-korean-hanja-formal {
|
|
1645
|
+
list-style-type: korean-hanja-formal;
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1648
|
+
.qti-list-style-type-korean-hanja-informal {
|
|
1649
|
+
list-style-type: korean-hanja-informal;
|
|
1650
|
+
}
|
|
1651
|
+
|
|
1652
|
+
.qti-list-style-type-lao {
|
|
1653
|
+
list-style-type: lao;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
.qti-list-style-type-malayalam {
|
|
1657
|
+
list-style-type: malayalam;
|
|
1658
|
+
}
|
|
1659
|
+
|
|
1660
|
+
.qti-list-style-type-mongolian {
|
|
1661
|
+
list-style-type: mongolian;
|
|
1662
|
+
}
|
|
1663
|
+
|
|
1664
|
+
.qti-list-style-type-myanmar {
|
|
1665
|
+
list-style-type: myanmar;
|
|
1666
|
+
}
|
|
1667
|
+
|
|
1668
|
+
.qti-list-style-type-oriya {
|
|
1669
|
+
list-style-type: oriya;
|
|
1670
|
+
}
|
|
1671
|
+
|
|
1672
|
+
.qti-list-style-type-persian {
|
|
1673
|
+
list-style-type: persian;
|
|
1674
|
+
}
|
|
1675
|
+
|
|
1676
|
+
.qti-list-style-type-thai {
|
|
1677
|
+
list-style-type: thai;
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
.qti-list-style-type-tibetan {
|
|
1681
|
+
list-style-type: tibetan;
|
|
1682
|
+
}
|
|
1683
|
+
|
|
1684
|
+
.qti-list-style-type-telugu {
|
|
1685
|
+
list-style-type: telugu;
|
|
1686
|
+
}
|
|
1687
|
+
|
|
1688
|
+
.qti-list-style-type-urdu {
|
|
1689
|
+
list-style-type: urdu;
|
|
1690
|
+
}
|
|
1691
|
+
|
|
1692
|
+
/* =========================
|
|
1693
|
+
Other QTI 3 Presentation Utilities
|
|
1694
|
+
========================= */
|
|
1695
|
+
|
|
1696
|
+
.qti-bordered {
|
|
1697
|
+
border: 1px solid var(--table-border-color);
|
|
193
1698
|
}
|
|
194
1699
|
|
|
195
|
-
.
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
gap: 0.5rem;
|
|
199
|
-
padding: var(--qti-padding-md) var(--qti-padding-md); /* Padding shorthand */
|
|
200
|
-
outline: none;
|
|
201
|
-
border-radius: var(--qti-border-radius-md);
|
|
202
|
-
cursor: pointer;
|
|
1700
|
+
.qti-underline {
|
|
1701
|
+
text-decoration: underline;
|
|
1702
|
+
text-decoration-color: var(--foreground);
|
|
203
1703
|
}
|
|
204
1704
|
|
|
205
|
-
.
|
|
206
|
-
|
|
207
|
-
width: var(--qti-form-size);
|
|
208
|
-
height: var(--qti-form-size);
|
|
209
|
-
align-self: 1;
|
|
210
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
211
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
212
|
-
outline: none;
|
|
1705
|
+
.qti-italic {
|
|
1706
|
+
font-style: italic;
|
|
213
1707
|
}
|
|
214
1708
|
|
|
215
|
-
.
|
|
216
|
-
|
|
217
|
-
|
|
1709
|
+
.qti-well {
|
|
1710
|
+
min-height: 20px;
|
|
1711
|
+
padding: 19px;
|
|
1712
|
+
margin-bottom: 20px;
|
|
1713
|
+
background-color: var(--well-bg);
|
|
1714
|
+
border: var(--well-border);
|
|
1715
|
+
border-radius: 4px;
|
|
1716
|
+
box-shadow: var(--well-box-shadow);
|
|
218
1717
|
}
|
|
219
1718
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
226
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
227
|
-
outline: none;
|
|
1719
|
+
/* Set writing-mode to vertical-rl
|
|
1720
|
+
Typical for CJK vertical text */
|
|
1721
|
+
|
|
1722
|
+
.qti-writing-mode-vertical-rl {
|
|
1723
|
+
writing-mode: vertical-rl;
|
|
228
1724
|
}
|
|
229
1725
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
1726
|
+
/* Set writing-mode to vertical-lr
|
|
1727
|
+
Typical for Mongolian vertical text */
|
|
1728
|
+
|
|
1729
|
+
.qti-writing-mode-vertical-lr {
|
|
1730
|
+
writing-mode: vertical-lr;
|
|
234
1731
|
}
|
|
235
1732
|
|
|
236
|
-
|
|
237
|
-
|
|
1733
|
+
/* Set writing-mode to horizontal-tb
|
|
1734
|
+
Browser default */
|
|
1735
|
+
|
|
1736
|
+
.qti-writing-mode-horizontal-tb {
|
|
1737
|
+
writing-mode: horizontal-tb;
|
|
238
1738
|
}
|
|
239
1739
|
|
|
240
|
-
|
|
241
|
-
|
|
1740
|
+
/* Float an element left */
|
|
1741
|
+
|
|
1742
|
+
.qti-float-left {
|
|
1743
|
+
float: left;
|
|
242
1744
|
}
|
|
243
1745
|
|
|
244
|
-
|
|
245
|
-
|
|
1746
|
+
/* Float an element right */
|
|
1747
|
+
|
|
1748
|
+
.qti-float-right {
|
|
1749
|
+
float: right;
|
|
246
1750
|
}
|
|
247
1751
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
border: none;
|
|
1752
|
+
/* Remove a float */
|
|
1753
|
+
|
|
1754
|
+
.qti-float-none {
|
|
1755
|
+
float: none;
|
|
253
1756
|
}
|
|
254
1757
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
1758
|
+
/* Clearfix Hack to apply to a container of
|
|
1759
|
+
floated content that overflows the container. */
|
|
1760
|
+
|
|
1761
|
+
.qti-float-clearfix::after {
|
|
1762
|
+
content: '';
|
|
1763
|
+
clear: both;
|
|
1764
|
+
display: table;
|
|
260
1765
|
}
|
|
261
1766
|
|
|
262
|
-
|
|
1767
|
+
.qti-float-clear-left
|
|
1768
|
+
.qti-float-clear-right
|
|
1769
|
+
.qti-float-clear-both
|
|
1770
|
+
|
|
1771
|
+
/* Set text-orientation to upright */
|
|
1772
|
+
.qti-text-orientation-upright {
|
|
1773
|
+
text-orientation: upright;
|
|
1774
|
+
}
|
|
263
1775
|
|
|
264
1776
|
@layer qti-base {
|
|
265
1777
|
.qti-layout-row {
|
|
@@ -276,36 +1788,47 @@
|
|
|
276
1788
|
.qti-layout-col1 {
|
|
277
1789
|
width: 6.3829787234%;
|
|
278
1790
|
}
|
|
1791
|
+
|
|
279
1792
|
.qti-layout-col2 {
|
|
280
1793
|
width: 14.8936170213%;
|
|
281
1794
|
}
|
|
1795
|
+
|
|
282
1796
|
.qti-layout-col3 {
|
|
283
1797
|
width: 23.4042553191%;
|
|
284
1798
|
}
|
|
1799
|
+
|
|
285
1800
|
.qti-layout-col4 {
|
|
286
1801
|
width: 31.914893617%;
|
|
287
1802
|
}
|
|
1803
|
+
|
|
288
1804
|
.qti-layout-col5 {
|
|
289
1805
|
width: 40.4255319149%;
|
|
290
1806
|
}
|
|
1807
|
+
|
|
291
1808
|
.qti-layout-col6 {
|
|
292
1809
|
width: 48.9361702128%;
|
|
293
1810
|
}
|
|
1811
|
+
|
|
294
1812
|
.qti-layout-col7 {
|
|
295
1813
|
width: 57.4468085106%;
|
|
296
1814
|
}
|
|
1815
|
+
|
|
297
1816
|
.qti-layout-col8 {
|
|
298
1817
|
width: 65.9574468085%;
|
|
299
1818
|
}
|
|
1819
|
+
|
|
300
1820
|
.qti-layout-col9 {
|
|
301
1821
|
width: 74.4680851064%;
|
|
302
1822
|
}
|
|
1823
|
+
|
|
303
1824
|
.qti-layout-col10 {
|
|
304
1825
|
width: 82.9787234043%;
|
|
305
1826
|
}
|
|
1827
|
+
|
|
306
1828
|
.qti-layout-col11 {
|
|
307
1829
|
width: 91.4893617021%;
|
|
308
1830
|
}
|
|
1831
|
+
|
|
309
1832
|
.qti-layout-col12 {
|
|
310
1833
|
width: 100%;
|
|
311
1834
|
}
|
|
@@ -313,41 +1836,52 @@
|
|
|
313
1836
|
.qti-layout-offset1 {
|
|
314
1837
|
margin-left: 8.5106382979%;
|
|
315
1838
|
}
|
|
1839
|
+
|
|
316
1840
|
.qti-layout-offset2 {
|
|
317
1841
|
margin-left: 17.0212765957%;
|
|
318
1842
|
}
|
|
1843
|
+
|
|
319
1844
|
.qti-layout-offset3 {
|
|
320
1845
|
margin-left: 25.5319148936%;
|
|
321
1846
|
}
|
|
1847
|
+
|
|
322
1848
|
.qti-layout-offset4 {
|
|
323
1849
|
margin-left: 34.0425531915%;
|
|
324
1850
|
}
|
|
1851
|
+
|
|
325
1852
|
.qti-layout-offset5 {
|
|
326
1853
|
margin-left: 42.5531914894%;
|
|
327
1854
|
}
|
|
1855
|
+
|
|
328
1856
|
.qti-layout-offset6 {
|
|
329
1857
|
margin-left: 51.0638297872%;
|
|
330
1858
|
}
|
|
1859
|
+
|
|
331
1860
|
.qti-layout-offset7 {
|
|
332
1861
|
margin-left: 59.5744680851%;
|
|
333
1862
|
}
|
|
1863
|
+
|
|
334
1864
|
.qti-layout-offset8 {
|
|
335
1865
|
margin-left: 68.085106383%;
|
|
336
1866
|
}
|
|
1867
|
+
|
|
337
1868
|
.qti-layout-offset9 {
|
|
338
1869
|
margin-left: 76.5957446809%;
|
|
339
1870
|
}
|
|
1871
|
+
|
|
340
1872
|
.qti-layout-offset10 {
|
|
341
1873
|
margin-left: 85.1063829787%;
|
|
342
1874
|
}
|
|
1875
|
+
|
|
343
1876
|
.qti-layout-offset11 {
|
|
344
1877
|
margin-left: 93.6170212766%;
|
|
345
1878
|
}
|
|
1879
|
+
|
|
346
1880
|
.qti-layout-offset12 {
|
|
347
1881
|
margin-left: 102.1276595745%;
|
|
348
1882
|
}
|
|
349
1883
|
|
|
350
|
-
@media (
|
|
1884
|
+
@media (width <= 767px) {
|
|
351
1885
|
[class*='qti-layout-col'] {
|
|
352
1886
|
width: 100%;
|
|
353
1887
|
}
|
|
@@ -369,8 +1903,8 @@ qti-response-declaration {
|
|
|
369
1903
|
}
|
|
370
1904
|
|
|
371
1905
|
*,
|
|
372
|
-
|
|
373
|
-
|
|
1906
|
+
*::before,
|
|
1907
|
+
*::after {
|
|
374
1908
|
box-sizing: inherit;
|
|
375
1909
|
}
|
|
376
1910
|
|
|
@@ -396,56 +1930,71 @@ qti-response-declaration {
|
|
|
396
1930
|
qti-choice-interaction {
|
|
397
1931
|
&.qti-input-control-hidden {
|
|
398
1932
|
& qti-simple-choice {
|
|
1933
|
+
|
|
399
1934
|
&:hover {
|
|
400
|
-
|
|
1935
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
401
1936
|
}
|
|
1937
|
+
|
|
402
1938
|
&:focus {
|
|
403
1939
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
404
1940
|
}
|
|
1941
|
+
|
|
405
1942
|
&::part(ch) {
|
|
406
1943
|
display: none;
|
|
407
1944
|
}
|
|
1945
|
+
|
|
408
1946
|
&[aria-checked='true'] {
|
|
409
1947
|
border-color: var(--qti-bg-primary);
|
|
410
1948
|
}
|
|
1949
|
+
|
|
411
1950
|
&[aria-readonly='true'] {
|
|
412
1951
|
cursor: pointer;
|
|
413
1952
|
background-color: white;
|
|
414
1953
|
outline: 0;
|
|
415
1954
|
border: none;
|
|
416
1955
|
}
|
|
1956
|
+
|
|
417
1957
|
&[aria-disabled='true'] {
|
|
418
1958
|
cursor: not-allowed;
|
|
419
1959
|
background-color: var(--qti-bg-gray-100);
|
|
420
1960
|
color: var(--qti-text-gray-500);
|
|
421
1961
|
border-color: var(--qti-border-color-gray);
|
|
422
1962
|
}
|
|
423
|
-
|
|
424
|
-
outline: none;
|
|
1963
|
+
|
|
425
1964
|
border-radius: var(--qti-border-radius-md);
|
|
426
|
-
|
|
1965
|
+
|
|
1966
|
+
padding: var(--qti-padding-md) var(--qti-padding-md);
|
|
1967
|
+
|
|
427
1968
|
font-weight: var(--qti-font-weight-semibold);
|
|
1969
|
+
|
|
428
1970
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1971
|
+
|
|
429
1972
|
outline: none
|
|
430
1973
|
}
|
|
431
1974
|
}
|
|
1975
|
+
|
|
432
1976
|
&:not(.qti-input-control-hidden) {
|
|
433
1977
|
& qti-simple-choice {
|
|
434
|
-
|
|
435
|
-
|
|
1978
|
+
|
|
1979
|
+
&:not([aria-disabled='true'], [aria-readonly='true']):hover {
|
|
1980
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
436
1981
|
}
|
|
1982
|
+
|
|
437
1983
|
&:focus {
|
|
438
1984
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
439
1985
|
}
|
|
1986
|
+
|
|
440
1987
|
&[aria-checked='true'] {
|
|
441
1988
|
border-color: var(--qti-bg-primary);
|
|
442
1989
|
}
|
|
1990
|
+
|
|
443
1991
|
&[aria-readonly='true'] {
|
|
444
1992
|
cursor: pointer;
|
|
445
1993
|
background-color: white;
|
|
446
1994
|
outline: 0;
|
|
447
1995
|
border: none;
|
|
448
1996
|
}
|
|
1997
|
+
|
|
449
1998
|
&[aria-disabled='true'] {
|
|
450
1999
|
cursor: not-allowed;
|
|
451
2000
|
background-color: var(--qti-bg-gray-100);
|
|
@@ -457,28 +2006,30 @@ qti-response-declaration {
|
|
|
457
2006
|
width: calc(var(--qti-form-size) - 4px);
|
|
458
2007
|
height: calc(var(--qti-form-size) - 4px);
|
|
459
2008
|
}
|
|
2009
|
+
|
|
460
2010
|
&[role='radio']::part(ch) {
|
|
461
2011
|
border-radius: var(--qti-border-radius-full);
|
|
462
2012
|
width: var(--qti-form-size);
|
|
463
2013
|
height: var(--qti-form-size);
|
|
464
2014
|
align-self: 1;
|
|
465
2015
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
466
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
467
2016
|
outline: none;
|
|
468
2017
|
}
|
|
2018
|
+
|
|
469
2019
|
&[role='radio'][aria-checked='true']::part(cha) {
|
|
470
2020
|
background-color: var(--qti-bg-primary);
|
|
471
2021
|
border-radius: var(--qti-border-radius-full);
|
|
472
2022
|
}
|
|
2023
|
+
|
|
473
2024
|
&[role='checkbox']::part(ch) {
|
|
474
2025
|
border-radius: var(--qti-border-radius-md);
|
|
475
2026
|
width: var(--qti-form-size);
|
|
476
2027
|
height: var(--qti-form-size);
|
|
477
2028
|
align-self: 1;
|
|
478
2029
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
479
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
480
2030
|
outline: none;
|
|
481
2031
|
}
|
|
2032
|
+
|
|
482
2033
|
&[role='checkbox'][aria-checked='true']::part(cha) {
|
|
483
2034
|
background-color: var(--qti-bg-primary);
|
|
484
2035
|
-webkit-mask-image: var(--check-mask);
|
|
@@ -486,13 +2037,19 @@ qti-response-declaration {
|
|
|
486
2037
|
-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");
|
|
487
2038
|
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");
|
|
488
2039
|
}
|
|
2040
|
+
|
|
489
2041
|
gap: 0.5rem;
|
|
2042
|
+
|
|
490
2043
|
padding: var(--qti-padding-md) var(--qti-padding-md);
|
|
2044
|
+
|
|
491
2045
|
outline: none;
|
|
2046
|
+
|
|
492
2047
|
border-radius: var(--qti-border-radius-md);
|
|
2048
|
+
|
|
493
2049
|
cursor: pointer
|
|
494
2050
|
}
|
|
495
2051
|
}
|
|
2052
|
+
|
|
496
2053
|
& qti-simple-choice {
|
|
497
2054
|
&[data-correct-response='true'] {
|
|
498
2055
|
&::after {
|
|
@@ -510,14 +2067,14 @@ qti-response-declaration {
|
|
|
510
2067
|
|
|
511
2068
|
qti-text-entry-interaction {
|
|
512
2069
|
&:hover {
|
|
513
|
-
|
|
2070
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
514
2071
|
}
|
|
2072
|
+
|
|
515
2073
|
&:focus-within {
|
|
516
2074
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
517
2075
|
}
|
|
2076
|
+
|
|
518
2077
|
&::part(input) {
|
|
519
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
520
|
-
outline: none;
|
|
521
2078
|
border-radius: 0;
|
|
522
2079
|
cursor: text;
|
|
523
2080
|
padding: var(--qti-padding-lg);
|
|
@@ -529,8 +2086,6 @@ qti-response-declaration {
|
|
|
529
2086
|
|
|
530
2087
|
qti-extended-text-interaction {
|
|
531
2088
|
&::part(textarea) {
|
|
532
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
533
|
-
outline: none;
|
|
534
2089
|
border-radius: 0;
|
|
535
2090
|
cursor: text;
|
|
536
2091
|
padding: var(--qti-padding-lg);
|
|
@@ -538,9 +2093,11 @@ qti-response-declaration {
|
|
|
538
2093
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
539
2094
|
outline: none;
|
|
540
2095
|
}
|
|
2096
|
+
|
|
541
2097
|
&:hover {
|
|
542
|
-
|
|
2098
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
543
2099
|
}
|
|
2100
|
+
|
|
544
2101
|
&:focus-within {
|
|
545
2102
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
546
2103
|
}
|
|
@@ -550,55 +2107,78 @@ qti-response-declaration {
|
|
|
550
2107
|
& qti-gap-text {
|
|
551
2108
|
|
|
552
2109
|
&:hover {
|
|
553
|
-
|
|
2110
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
554
2111
|
}
|
|
2112
|
+
|
|
555
2113
|
&:focus {
|
|
556
2114
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
557
2115
|
}
|
|
558
|
-
|
|
559
|
-
|
|
2116
|
+
|
|
2117
|
+
transition: transform 200ms ease-out,
|
|
2118
|
+
box-shadow 200ms ease-out,
|
|
2119
|
+
rotate 200ms ease-out;
|
|
2120
|
+
|
|
560
2121
|
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
|
|
2122
|
+
|
|
561
2123
|
border-radius: var(--qti-border-radius-md);
|
|
2124
|
+
|
|
562
2125
|
cursor: grab;
|
|
2126
|
+
|
|
563
2127
|
background-color: white;
|
|
2128
|
+
|
|
564
2129
|
font-weight: var(--qti-font-weight-semibold);
|
|
2130
|
+
|
|
565
2131
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2132
|
+
|
|
566
2133
|
outline: none;
|
|
2134
|
+
|
|
567
2135
|
background-image: radial-gradient(
|
|
568
2136
|
circle at center,
|
|
569
|
-
|
|
570
|
-
rgb(0
|
|
571
|
-
|
|
572
|
-
|
|
2137
|
+
rgb(0 0 0 / 10%) 0,
|
|
2138
|
+
rgb(0 0 0 / 20%) 2px,
|
|
2139
|
+
rgb(255 255 255 / 0%) 2px,
|
|
2140
|
+
rgb(255 255 255 / 0%) 100%
|
|
573
2141
|
);
|
|
2142
|
+
|
|
574
2143
|
background-repeat: repeat-y;
|
|
575
|
-
|
|
2144
|
+
|
|
2145
|
+
background-position: left center;
|
|
2146
|
+
|
|
576
2147
|
background-size: 14px 8px
|
|
577
2148
|
}
|
|
2149
|
+
|
|
578
2150
|
& qti-gap {
|
|
2151
|
+
|
|
579
2152
|
display: inline-flex;
|
|
580
2153
|
width: 8rem; /* w-32 */
|
|
581
|
-
&:empty
|
|
2154
|
+
&:empty::after {
|
|
582
2155
|
padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
|
|
583
2156
|
content: '\0000a0'; /* when empty, put a space in it */
|
|
584
2157
|
}
|
|
2158
|
+
|
|
585
2159
|
&:not(:empty) {
|
|
586
2160
|
display: inline-flex;
|
|
587
2161
|
padding: 0;
|
|
588
2162
|
width: auto;
|
|
589
2163
|
}
|
|
2164
|
+
|
|
590
2165
|
&:not(:empty) > * {
|
|
591
2166
|
flex: 1;
|
|
592
2167
|
transform: rotate(0); /* rotate-0 */
|
|
593
2168
|
box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
|
|
594
2169
|
}
|
|
595
|
-
|
|
596
|
-
|
|
2170
|
+
|
|
2171
|
+
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>')
|
|
2172
|
+
center no-repeat;
|
|
2173
|
+
|
|
597
2174
|
border-radius: var(--qti-border-radius-lg);
|
|
2175
|
+
|
|
598
2176
|
position: relative;
|
|
599
|
-
|
|
600
|
-
|
|
2177
|
+
|
|
2178
|
+
background-color: var(--qti-bg-white);
|
|
2179
|
+
|
|
601
2180
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2181
|
+
|
|
602
2182
|
outline: none
|
|
603
2183
|
}
|
|
604
2184
|
}
|
|
@@ -606,69 +2186,90 @@ qti-response-declaration {
|
|
|
606
2186
|
qti-hotspot-interaction {
|
|
607
2187
|
& qti-hotspot-choice {
|
|
608
2188
|
&[shape='circle'] {
|
|
2189
|
+
|
|
609
2190
|
&:hover {
|
|
610
|
-
|
|
2191
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
611
2192
|
}
|
|
2193
|
+
|
|
612
2194
|
&:focus {
|
|
613
2195
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
614
2196
|
}
|
|
2197
|
+
|
|
615
2198
|
&[aria-checked='true'] {
|
|
616
2199
|
border-color: var(--qti-bg-primary);
|
|
617
2200
|
}
|
|
2201
|
+
|
|
618
2202
|
&[aria-readonly='true'] {
|
|
619
2203
|
cursor: pointer;
|
|
620
2204
|
background-color: white;
|
|
621
2205
|
outline: 0;
|
|
622
2206
|
border: none;
|
|
623
2207
|
}
|
|
2208
|
+
|
|
624
2209
|
&[aria-disabled='true'] {
|
|
625
2210
|
cursor: not-allowed;
|
|
626
2211
|
background-color: var(--qti-bg-gray-100);
|
|
627
2212
|
color: var(--qti-text-gray-500);
|
|
628
2213
|
border-color: var(--qti-border-color-gray);
|
|
629
2214
|
}
|
|
630
|
-
|
|
631
|
-
outline: none;
|
|
2215
|
+
|
|
632
2216
|
width: 100%;
|
|
2217
|
+
|
|
633
2218
|
height: 100%;
|
|
2219
|
+
|
|
634
2220
|
background-color: transparent;
|
|
2221
|
+
|
|
635
2222
|
padding: 0;
|
|
2223
|
+
|
|
636
2224
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2225
|
+
|
|
637
2226
|
outline: none
|
|
638
2227
|
}
|
|
2228
|
+
|
|
639
2229
|
&[shape='rect'] {
|
|
2230
|
+
|
|
640
2231
|
&:hover {
|
|
641
|
-
|
|
2232
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
642
2233
|
}
|
|
2234
|
+
|
|
643
2235
|
&:focus {
|
|
644
2236
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
645
2237
|
}
|
|
2238
|
+
|
|
646
2239
|
&[aria-checked='true'] {
|
|
647
2240
|
border-color: var(--qti-bg-primary);
|
|
648
2241
|
}
|
|
2242
|
+
|
|
649
2243
|
&[aria-readonly='true'] {
|
|
650
2244
|
cursor: pointer;
|
|
651
2245
|
background-color: white;
|
|
652
2246
|
outline: 0;
|
|
653
2247
|
border: none;
|
|
654
2248
|
}
|
|
2249
|
+
|
|
655
2250
|
&[aria-disabled='true'] {
|
|
656
2251
|
cursor: not-allowed;
|
|
657
2252
|
background-color: var(--qti-bg-gray-100);
|
|
658
2253
|
color: var(--qti-text-gray-500);
|
|
659
2254
|
border-color: var(--qti-border-color-gray);
|
|
660
2255
|
}
|
|
661
|
-
|
|
662
|
-
outline: none;
|
|
2256
|
+
|
|
663
2257
|
width: 100%;
|
|
2258
|
+
|
|
664
2259
|
height: 100%;
|
|
2260
|
+
|
|
665
2261
|
background-color: transparent;
|
|
2262
|
+
|
|
666
2263
|
padding: 0;
|
|
2264
|
+
|
|
667
2265
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2266
|
+
|
|
668
2267
|
outline: none
|
|
669
2268
|
}
|
|
2269
|
+
|
|
670
2270
|
&[shape='poly'] {
|
|
671
2271
|
&:hover::after {
|
|
2272
|
+
|
|
672
2273
|
content: '';
|
|
673
2274
|
width: 100%;
|
|
674
2275
|
height: 100%;
|
|
@@ -683,7 +2284,8 @@ qti-response-declaration {
|
|
|
683
2284
|
border-color: var(--qti-bg-primary);
|
|
684
2285
|
}
|
|
685
2286
|
|
|
686
|
-
&[aria-checked='true']
|
|
2287
|
+
&[aria-checked='true']::after {
|
|
2288
|
+
|
|
687
2289
|
content: '';
|
|
688
2290
|
width: 100%;
|
|
689
2291
|
height: 100%;
|
|
@@ -701,12 +2303,14 @@ qti-response-declaration {
|
|
|
701
2303
|
&[aria-checked='true'] {
|
|
702
2304
|
border-color: var(--qti-bg-primary);
|
|
703
2305
|
}
|
|
2306
|
+
|
|
704
2307
|
&[aria-readonly='true'] {
|
|
705
2308
|
cursor: pointer;
|
|
706
2309
|
background-color: white;
|
|
707
2310
|
outline: 0;
|
|
708
2311
|
border: none;
|
|
709
2312
|
}
|
|
2313
|
+
|
|
710
2314
|
&[aria-disabled='true'] {
|
|
711
2315
|
cursor: not-allowed;
|
|
712
2316
|
background-color: var(--qti-bg-gray-100);
|
|
@@ -718,45 +2322,48 @@ qti-response-declaration {
|
|
|
718
2322
|
}
|
|
719
2323
|
|
|
720
2324
|
qti-hottext-interaction {
|
|
721
|
-
qti-hottext {
|
|
722
|
-
display: inline-flex;
|
|
723
|
-
align-items: center;
|
|
724
|
-
}
|
|
725
2325
|
/* &:not(.qti-input-control-hidden),
|
|
726
2326
|
&:not(.qti-unselected-hidden) { */
|
|
727
2327
|
qti-hottext {
|
|
2328
|
+
display: inline-flex;
|
|
2329
|
+
align-items: center;
|
|
2330
|
+
|
|
728
2331
|
&:hover {
|
|
729
|
-
|
|
2332
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
730
2333
|
}
|
|
2334
|
+
|
|
731
2335
|
&:focus {
|
|
732
2336
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
733
2337
|
}
|
|
2338
|
+
|
|
734
2339
|
&::part(cha) {
|
|
735
2340
|
width: calc(var(--qti-form-size) - 4px);
|
|
736
2341
|
height: calc(var(--qti-form-size) - 4px);
|
|
737
2342
|
}
|
|
2343
|
+
|
|
738
2344
|
&[role='radio']::part(ch) {
|
|
739
2345
|
border-radius: var(--qti-border-radius-full);
|
|
740
2346
|
width: var(--qti-form-size);
|
|
741
2347
|
height: var(--qti-form-size);
|
|
742
2348
|
align-self: 1;
|
|
743
2349
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
744
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
745
2350
|
outline: none;
|
|
746
2351
|
}
|
|
2352
|
+
|
|
747
2353
|
&[role='radio'][aria-checked='true']::part(cha) {
|
|
748
2354
|
background-color: var(--qti-bg-primary);
|
|
749
2355
|
border-radius: var(--qti-border-radius-full);
|
|
750
2356
|
}
|
|
2357
|
+
|
|
751
2358
|
&[role='checkbox']::part(ch) {
|
|
752
2359
|
border-radius: var(--qti-border-radius-md);
|
|
753
2360
|
width: var(--qti-form-size);
|
|
754
2361
|
height: var(--qti-form-size);
|
|
755
2362
|
align-self: 1;
|
|
756
2363
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
757
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
758
2364
|
outline: none;
|
|
759
2365
|
}
|
|
2366
|
+
|
|
760
2367
|
&[role='checkbox'][aria-checked='true']::part(cha) {
|
|
761
2368
|
background-color: var(--qti-bg-primary);
|
|
762
2369
|
-webkit-mask-image: var(--check-mask);
|
|
@@ -764,12 +2371,18 @@ qti-response-declaration {
|
|
|
764
2371
|
-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");
|
|
765
2372
|
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");
|
|
766
2373
|
}
|
|
2374
|
+
|
|
767
2375
|
gap: 0.5rem;
|
|
2376
|
+
|
|
768
2377
|
padding: var(--qti-padding-md) var(--qti-padding-md);
|
|
2378
|
+
|
|
769
2379
|
outline: none;
|
|
2380
|
+
|
|
770
2381
|
border-radius: var(--qti-border-radius-md);
|
|
2382
|
+
|
|
771
2383
|
cursor: pointer
|
|
772
2384
|
}
|
|
2385
|
+
|
|
773
2386
|
/* } */
|
|
774
2387
|
|
|
775
2388
|
&.qti-input-control-hidden {
|
|
@@ -779,63 +2392,79 @@ qti-response-declaration {
|
|
|
779
2392
|
--qti-border-radius-md: 0.3rem;
|
|
780
2393
|
--qti-border-thickness: 1px;
|
|
781
2394
|
--qti-font-weight-semibold: 400; */
|
|
2395
|
+
|
|
782
2396
|
&:hover {
|
|
783
|
-
|
|
2397
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
784
2398
|
}
|
|
2399
|
+
|
|
785
2400
|
&:focus {
|
|
786
2401
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
787
2402
|
}
|
|
2403
|
+
|
|
788
2404
|
/* @layer qti-variants { */
|
|
789
2405
|
&::part(ch) {
|
|
790
2406
|
display: none;
|
|
791
2407
|
}
|
|
2408
|
+
|
|
792
2409
|
&[aria-checked='true'] {
|
|
793
2410
|
border-color: var(--qti-bg-primary);
|
|
794
2411
|
}
|
|
2412
|
+
|
|
795
2413
|
&[aria-readonly='true'] {
|
|
796
2414
|
cursor: pointer;
|
|
797
2415
|
background-color: white;
|
|
798
2416
|
outline: 0;
|
|
799
2417
|
border: none;
|
|
800
2418
|
}
|
|
2419
|
+
|
|
801
2420
|
&[aria-disabled='true'] {
|
|
802
2421
|
cursor: not-allowed;
|
|
803
2422
|
background-color: var(--qti-bg-gray-100);
|
|
804
2423
|
color: var(--qti-text-gray-500);
|
|
805
2424
|
border-color: var(--qti-border-color-gray);
|
|
806
2425
|
}
|
|
807
|
-
|
|
808
|
-
outline: none;
|
|
2426
|
+
|
|
809
2427
|
border-radius: var(--qti-border-radius-md);
|
|
810
|
-
|
|
2428
|
+
|
|
2429
|
+
padding: var(--qti-padding-md) var(--qti-padding-md);
|
|
2430
|
+
|
|
811
2431
|
font-weight: var(--qti-font-weight-semibold);
|
|
2432
|
+
|
|
812
2433
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2434
|
+
|
|
813
2435
|
outline: none
|
|
814
2436
|
}
|
|
2437
|
+
|
|
815
2438
|
/* } */
|
|
816
2439
|
}
|
|
817
2440
|
|
|
818
2441
|
&.qti-unselected-hidden {
|
|
819
2442
|
qti-hottext {
|
|
820
2443
|
&:hover {
|
|
821
|
-
|
|
2444
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
822
2445
|
}
|
|
2446
|
+
|
|
823
2447
|
&:focus {
|
|
824
2448
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
825
2449
|
}
|
|
2450
|
+
|
|
826
2451
|
cursor: pointer;
|
|
2452
|
+
|
|
827
2453
|
&::part(ch) {
|
|
828
2454
|
display: none;
|
|
829
2455
|
}
|
|
2456
|
+
|
|
830
2457
|
&[aria-checked='true'] {
|
|
831
2458
|
background-color: var(--qti-primary-light); /* bg-blue-200 */
|
|
832
2459
|
}
|
|
2460
|
+
|
|
833
2461
|
&[aria-readonly='true'] {
|
|
834
2462
|
cursor: pointer;
|
|
835
2463
|
background-color: white;
|
|
836
2464
|
outline: 0;
|
|
837
2465
|
border: none;
|
|
838
2466
|
}
|
|
2467
|
+
|
|
839
2468
|
&[aria-disabled='true'] {
|
|
840
2469
|
cursor: not-allowed;
|
|
841
2470
|
background-color: var(--qti-bg-gray-100);
|
|
@@ -848,63 +2477,96 @@ qti-response-declaration {
|
|
|
848
2477
|
|
|
849
2478
|
qti-inline-choice-interaction {
|
|
850
2479
|
&::part(select) {
|
|
2480
|
+
|
|
851
2481
|
&:hover {
|
|
852
|
-
|
|
2482
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
853
2483
|
}
|
|
2484
|
+
|
|
854
2485
|
&:focus {
|
|
855
2486
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
856
2487
|
}
|
|
857
|
-
|
|
858
|
-
outline: none;
|
|
2488
|
+
|
|
859
2489
|
border-radius: var(--qti-border-radius-md);
|
|
2490
|
+
|
|
860
2491
|
position: relative;
|
|
2492
|
+
|
|
861
2493
|
-webkit-appearance: none;
|
|
2494
|
+
|
|
862
2495
|
-moz-appearance: none;
|
|
2496
|
+
|
|
863
2497
|
appearance: none;
|
|
2498
|
+
|
|
864
2499
|
padding: var(--qti-padding-md) 1.75rem var(--qti-padding-md) var(--qti-padding-lg);
|
|
2500
|
+
|
|
865
2501
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2502
|
+
|
|
866
2503
|
outline: none;
|
|
2504
|
+
|
|
867
2505
|
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")
|
|
868
2506
|
no-repeat center right 6px
|
|
869
2507
|
}
|
|
870
2508
|
}
|
|
871
2509
|
|
|
872
2510
|
qti-match-interaction:not(.qti-match-tabular) {
|
|
2511
|
+
/* The draggables */
|
|
873
2512
|
& qti-simple-match-set:first-of-type {
|
|
874
2513
|
display: flex;
|
|
875
2514
|
flex-wrap: wrap;
|
|
876
|
-
|
|
877
|
-
|
|
2515
|
+
align-items: flex-start; /* Prevents children from stretching */
|
|
2516
|
+
gap: var(--qti-gap-size);
|
|
878
2517
|
|
|
879
2518
|
& qti-simple-associable-choice {
|
|
2519
|
+
|
|
2520
|
+
&[dragging] {
|
|
2521
|
+
pointer-events: none;
|
|
2522
|
+
rotate: -2deg;
|
|
2523
|
+
box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
|
|
2524
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
2525
|
+
}
|
|
2526
|
+
|
|
880
2527
|
&:hover {
|
|
881
|
-
|
|
2528
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
882
2529
|
}
|
|
2530
|
+
|
|
883
2531
|
&:focus {
|
|
884
2532
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
885
2533
|
}
|
|
886
|
-
|
|
887
|
-
|
|
2534
|
+
|
|
2535
|
+
transition: transform 200ms ease-out,
|
|
2536
|
+
box-shadow 200ms ease-out,
|
|
2537
|
+
rotate 200ms ease-out;
|
|
2538
|
+
|
|
888
2539
|
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
|
|
2540
|
+
|
|
889
2541
|
border-radius: var(--qti-border-radius-md);
|
|
2542
|
+
|
|
890
2543
|
cursor: grab;
|
|
2544
|
+
|
|
891
2545
|
background-color: white;
|
|
2546
|
+
|
|
892
2547
|
font-weight: var(--qti-font-weight-semibold);
|
|
2548
|
+
|
|
893
2549
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2550
|
+
|
|
894
2551
|
outline: none;
|
|
2552
|
+
|
|
895
2553
|
background-image: radial-gradient(
|
|
896
2554
|
circle at center,
|
|
897
|
-
|
|
898
|
-
rgb(0
|
|
899
|
-
|
|
900
|
-
|
|
2555
|
+
rgb(0 0 0 / 10%) 0,
|
|
2556
|
+
rgb(0 0 0 / 20%) 2px,
|
|
2557
|
+
rgb(255 255 255 / 0%) 2px,
|
|
2558
|
+
rgb(255 255 255 / 0%) 100%
|
|
901
2559
|
);
|
|
2560
|
+
|
|
902
2561
|
background-repeat: repeat-y;
|
|
903
|
-
|
|
2562
|
+
|
|
2563
|
+
background-position: left center;
|
|
2564
|
+
|
|
904
2565
|
background-size: 14px 8px
|
|
905
2566
|
}
|
|
906
2567
|
}
|
|
907
2568
|
|
|
2569
|
+
/* The droppables */
|
|
908
2570
|
& qti-simple-match-set:last-of-type {
|
|
909
2571
|
display: grid;
|
|
910
2572
|
grid-auto-columns: 1fr; /* auto-cols-fr */
|
|
@@ -917,69 +2579,116 @@ qti-response-declaration {
|
|
|
917
2579
|
flex-direction: column;
|
|
918
2580
|
}
|
|
919
2581
|
|
|
920
|
-
& qti-simple-associable-choice
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
}
|
|
2582
|
+
& > qti-simple-associable-choice {
|
|
2583
|
+
/* a droppable qti-simple-associable-choice */
|
|
2584
|
+
box-sizing: border-box;
|
|
2585
|
+
display: grid;
|
|
2586
|
+
grid-row: 2 / 4;
|
|
2587
|
+
grid-template-rows: subgrid;
|
|
927
2588
|
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
2589
|
+
& img {
|
|
2590
|
+
max-width: 100%;
|
|
2591
|
+
height: auto;
|
|
931
2592
|
}
|
|
932
|
-
|
|
933
|
-
|
|
2593
|
+
|
|
2594
|
+
&[enabled] {
|
|
2595
|
+
&::part(dropslot) {
|
|
2596
|
+
background-color: var(--qti-primary-light);
|
|
2597
|
+
}
|
|
934
2598
|
}
|
|
935
|
-
display: flex;
|
|
936
|
-
flex-direction: column;
|
|
937
|
-
min-height: 6rem;
|
|
938
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
939
|
-
outline: none;
|
|
940
|
-
border-radius: var(--qti-border-radius-lg);
|
|
941
|
-
position: relative;
|
|
942
|
-
background-color: var(--qti-bg-gray-50);
|
|
943
|
-
margin: 1px;
|
|
944
|
-
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
945
|
-
outline: none;
|
|
946
|
-
}
|
|
947
2599
|
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
2600
|
+
&[disabled] {
|
|
2601
|
+
&::part(dropslot) {
|
|
2602
|
+
background-color: red;
|
|
2603
|
+
}
|
|
2604
|
+
}
|
|
951
2605
|
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
2606
|
+
&[active] {
|
|
2607
|
+
&::part(dropslot) {
|
|
2608
|
+
border-color: var(--qti-bg-primary);
|
|
2609
|
+
}
|
|
2610
|
+
}
|
|
955
2611
|
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
2612
|
+
&::part(dropslot) {
|
|
2613
|
+
|
|
2614
|
+
&[dragging] {
|
|
2615
|
+
pointer-events: none;
|
|
2616
|
+
rotate: -2deg;
|
|
2617
|
+
box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
|
|
2618
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
2619
|
+
}
|
|
2620
|
+
|
|
2621
|
+
&:focus {
|
|
2622
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
2623
|
+
}
|
|
2624
|
+
|
|
2625
|
+
min-height: 6rem;
|
|
2626
|
+
gap: var(--qti-gap-size);
|
|
2627
|
+
box-sizing: border-box;
|
|
2628
|
+
display: flex;
|
|
2629
|
+
justify-content: center;
|
|
2630
|
+
align-items: center;
|
|
2631
|
+
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>')
|
|
2632
|
+
center no-repeat;
|
|
2633
|
+
border-radius: var(--qti-border-radius-lg);
|
|
2634
|
+
position: relative;
|
|
2635
|
+
background-color: var(--qti-bg-white);
|
|
2636
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2637
|
+
outline: none;
|
|
959
2638
|
}
|
|
960
|
-
|
|
961
|
-
|
|
2639
|
+
|
|
2640
|
+
& > *:not(qti-simple-associable-choice) {
|
|
2641
|
+
pointer-events: none;
|
|
962
2642
|
}
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
2643
|
+
|
|
2644
|
+
& > qti-simple-associable-choice {
|
|
2645
|
+
|
|
2646
|
+
&::part(dropslot) {
|
|
2647
|
+
display: none;
|
|
2648
|
+
}
|
|
2649
|
+
|
|
2650
|
+
&:hover {
|
|
2651
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
2652
|
+
}
|
|
2653
|
+
|
|
2654
|
+
&:focus {
|
|
2655
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
2656
|
+
}
|
|
2657
|
+
|
|
2658
|
+
flex-basis: fit-content;
|
|
2659
|
+
|
|
2660
|
+
transition: transform 200ms ease-out,
|
|
2661
|
+
box-shadow 200ms ease-out,
|
|
2662
|
+
rotate 200ms ease-out;
|
|
2663
|
+
|
|
2664
|
+
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
|
|
2665
|
+
|
|
2666
|
+
border-radius: var(--qti-border-radius-md);
|
|
2667
|
+
|
|
2668
|
+
cursor: grab;
|
|
2669
|
+
|
|
2670
|
+
background-color: white;
|
|
2671
|
+
|
|
2672
|
+
font-weight: var(--qti-font-weight-semibold);
|
|
2673
|
+
|
|
2674
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2675
|
+
|
|
2676
|
+
outline: none;
|
|
2677
|
+
|
|
2678
|
+
background-image: radial-gradient(
|
|
974
2679
|
circle at center,
|
|
975
|
-
|
|
976
|
-
rgb(0
|
|
977
|
-
|
|
978
|
-
|
|
2680
|
+
rgb(0 0 0 / 10%) 0,
|
|
2681
|
+
rgb(0 0 0 / 20%) 2px,
|
|
2682
|
+
rgb(255 255 255 / 0%) 2px,
|
|
2683
|
+
rgb(255 255 255 / 0%) 100%
|
|
979
2684
|
);
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
2685
|
+
|
|
2686
|
+
background-repeat: repeat-y;
|
|
2687
|
+
|
|
2688
|
+
background-position: left center;
|
|
2689
|
+
|
|
2690
|
+
background-size: 14px 8px;
|
|
2691
|
+
}
|
|
983
2692
|
}
|
|
984
2693
|
}
|
|
985
2694
|
}
|
|
@@ -987,32 +2696,48 @@ qti-response-declaration {
|
|
|
987
2696
|
qti-order-interaction {
|
|
988
2697
|
&::part(qti-simple-choice),
|
|
989
2698
|
& qti-simple-choice {
|
|
2699
|
+
|
|
990
2700
|
&:hover {
|
|
991
|
-
|
|
2701
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
992
2702
|
}
|
|
2703
|
+
|
|
993
2704
|
&:focus {
|
|
994
2705
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
995
2706
|
}
|
|
996
|
-
|
|
997
|
-
|
|
2707
|
+
|
|
2708
|
+
transition: transform 200ms ease-out,
|
|
2709
|
+
box-shadow 200ms ease-out,
|
|
2710
|
+
rotate 200ms ease-out;
|
|
2711
|
+
|
|
998
2712
|
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
|
|
2713
|
+
|
|
999
2714
|
border-radius: var(--qti-border-radius-md);
|
|
2715
|
+
|
|
1000
2716
|
cursor: grab;
|
|
2717
|
+
|
|
1001
2718
|
background-color: white;
|
|
2719
|
+
|
|
1002
2720
|
font-weight: var(--qti-font-weight-semibold);
|
|
2721
|
+
|
|
1003
2722
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2723
|
+
|
|
1004
2724
|
outline: none;
|
|
2725
|
+
|
|
1005
2726
|
background-image: radial-gradient(
|
|
1006
2727
|
circle at center,
|
|
1007
|
-
|
|
1008
|
-
rgb(0
|
|
1009
|
-
|
|
1010
|
-
|
|
2728
|
+
rgb(0 0 0 / 10%) 0,
|
|
2729
|
+
rgb(0 0 0 / 20%) 2px,
|
|
2730
|
+
rgb(255 255 255 / 0%) 2px,
|
|
2731
|
+
rgb(255 255 255 / 0%) 100%
|
|
1011
2732
|
);
|
|
2733
|
+
|
|
1012
2734
|
background-repeat: repeat-y;
|
|
1013
|
-
|
|
2735
|
+
|
|
2736
|
+
background-position: left center;
|
|
2737
|
+
|
|
1014
2738
|
background-size: 14px 8px
|
|
1015
2739
|
}
|
|
2740
|
+
|
|
1016
2741
|
&::part(qti-simple-choice) {
|
|
1017
2742
|
display: flex;
|
|
1018
2743
|
overflow: hidden;
|
|
@@ -1020,123 +2745,161 @@ qti-response-declaration {
|
|
|
1020
2745
|
width: 100%;
|
|
1021
2746
|
text-overflow: ellipsis;
|
|
1022
2747
|
}
|
|
2748
|
+
|
|
1023
2749
|
&::part(drops) {
|
|
1024
2750
|
gap: 0.5rem; /* gap-2 */
|
|
1025
2751
|
}
|
|
2752
|
+
|
|
1026
2753
|
&::part(drags) {
|
|
1027
2754
|
gap: 0.5rem; /* gap-2 */
|
|
1028
2755
|
}
|
|
2756
|
+
|
|
1029
2757
|
&::part(drop-list) {
|
|
2758
|
+
|
|
1030
2759
|
&:hover {
|
|
1031
|
-
|
|
2760
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
1032
2761
|
}
|
|
2762
|
+
|
|
1033
2763
|
&:focus {
|
|
1034
2764
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1035
2765
|
}
|
|
2766
|
+
|
|
1036
2767
|
display: flex;
|
|
1037
2768
|
min-height: 4rem;
|
|
1038
|
-
|
|
1039
|
-
|
|
2769
|
+
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>')
|
|
2770
|
+
center no-repeat;
|
|
1040
2771
|
border-radius: var(--qti-border-radius-lg);
|
|
1041
2772
|
position: relative;
|
|
1042
|
-
background-color: var(--qti-bg-
|
|
1043
|
-
margin: 1px;
|
|
2773
|
+
background-color: var(--qti-bg-white);
|
|
1044
2774
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1045
2775
|
outline: none;
|
|
1046
2776
|
}
|
|
2777
|
+
|
|
1047
2778
|
&::part(active) {
|
|
1048
2779
|
border-color: var(--qti-bg-primary);
|
|
1049
2780
|
}
|
|
1050
2781
|
}
|
|
1051
2782
|
|
|
1052
2783
|
qti-associate-interaction {
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
2784
|
+
& qti-simple-associable-choice, /* drags when in lightdom */
|
|
2785
|
+
&::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
|
|
2786
|
+
|
|
2787
|
+
&:hover {
|
|
2788
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
2789
|
+
}
|
|
2790
|
+
|
|
2791
|
+
&:focus {
|
|
2792
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
2793
|
+
}
|
|
2794
|
+
|
|
2795
|
+
&[dragging] {
|
|
2796
|
+
pointer-events: none;
|
|
2797
|
+
rotate: -2deg;
|
|
2798
|
+
box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
|
|
2799
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
2800
|
+
}
|
|
2801
|
+
|
|
2802
|
+
transition: transform 200ms ease-out,
|
|
2803
|
+
box-shadow 200ms ease-out,
|
|
2804
|
+
rotate 200ms ease-out;
|
|
2805
|
+
|
|
1062
2806
|
padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
|
|
2807
|
+
|
|
1063
2808
|
border-radius: var(--qti-border-radius-md);
|
|
2809
|
+
|
|
1064
2810
|
cursor: grab;
|
|
2811
|
+
|
|
1065
2812
|
background-color: white;
|
|
2813
|
+
|
|
1066
2814
|
font-weight: var(--qti-font-weight-semibold);
|
|
2815
|
+
|
|
1067
2816
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2817
|
+
|
|
1068
2818
|
outline: none;
|
|
2819
|
+
|
|
1069
2820
|
background-image: radial-gradient(
|
|
1070
2821
|
circle at center,
|
|
1071
|
-
|
|
1072
|
-
rgb(0
|
|
1073
|
-
|
|
1074
|
-
|
|
2822
|
+
rgb(0 0 0 / 10%) 0,
|
|
2823
|
+
rgb(0 0 0 / 20%) 2px,
|
|
2824
|
+
rgb(255 255 255 / 0%) 2px,
|
|
2825
|
+
rgb(255 255 255 / 0%) 100%
|
|
1075
2826
|
);
|
|
2827
|
+
|
|
1076
2828
|
background-repeat: repeat-y;
|
|
1077
|
-
|
|
1078
|
-
background-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
display: flex;
|
|
1082
|
-
justify-content: space-between;
|
|
1083
|
-
background: linear-gradient(
|
|
1084
|
-
180deg,
|
|
1085
|
-
rgb(0 0 0 / 0%) calc(50% - 1px),
|
|
1086
|
-
var(--qti-border-color-gray) calc(50%),
|
|
1087
|
-
rgb(0 0 0 / 0%) calc(50% + 1px)
|
|
1088
|
-
);
|
|
1089
|
-
}
|
|
1090
|
-
&::part(active) {
|
|
1091
|
-
border-color: var(--qti-bg-primary);
|
|
2829
|
+
|
|
2830
|
+
background-position: left center;
|
|
2831
|
+
|
|
2832
|
+
background-size: 14px 8px
|
|
1092
2833
|
}
|
|
1093
|
-
|
|
2834
|
+
|
|
2835
|
+
/* display: flex;
|
|
2836
|
+
overflow: hidden;
|
|
2837
|
+
align-items: center; */
|
|
2838
|
+
|
|
2839
|
+
/* &::part(drop-container) {
|
|
1094
2840
|
display: flex;
|
|
1095
2841
|
flex-direction: column;
|
|
1096
2842
|
gap: var(--qti-gap-size);
|
|
1097
|
-
}
|
|
2843
|
+
} */
|
|
2844
|
+
|
|
1098
2845
|
&::part(drop-list) {
|
|
1099
|
-
|
|
1100
|
-
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1101
|
-
}
|
|
2846
|
+
|
|
1102
2847
|
display: grid;
|
|
1103
2848
|
height: 3rem;
|
|
1104
2849
|
min-width: 10rem;
|
|
1105
|
-
|
|
1106
|
-
|
|
2850
|
+
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>')
|
|
2851
|
+
center no-repeat;
|
|
1107
2852
|
border-radius: var(--qti-border-radius-lg);
|
|
1108
2853
|
position: relative;
|
|
1109
|
-
background-color: var(--qti-bg-
|
|
1110
|
-
margin: 1px;
|
|
2854
|
+
background-color: var(--qti-bg-white);
|
|
1111
2855
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
1112
2856
|
outline: none;
|
|
1113
2857
|
}
|
|
2858
|
+
|
|
2859
|
+
&::part(drop-list):focus {
|
|
2860
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
2861
|
+
}
|
|
2862
|
+
|
|
2863
|
+
&::part(drop-list)[dragging] {
|
|
2864
|
+
border-color: var(--qti-bg-primary);
|
|
2865
|
+
}
|
|
2866
|
+
|
|
2867
|
+
/* &::part(drop-list) {
|
|
2868
|
+
@apply act;
|
|
2869
|
+
} */
|
|
1114
2870
|
}
|
|
1115
2871
|
|
|
1116
2872
|
qti-graphic-order-interaction {
|
|
1117
2873
|
& qti-hotspot-choice {
|
|
2874
|
+
|
|
1118
2875
|
&:hover {
|
|
1119
|
-
|
|
2876
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
1120
2877
|
}
|
|
2878
|
+
|
|
1121
2879
|
&:focus {
|
|
1122
2880
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1123
2881
|
}
|
|
2882
|
+
|
|
1124
2883
|
&[aria-checked='true'] {
|
|
1125
2884
|
border-color: var(--qti-bg-primary);
|
|
1126
2885
|
}
|
|
2886
|
+
|
|
1127
2887
|
&[aria-readonly='true'] {
|
|
1128
2888
|
cursor: pointer;
|
|
1129
2889
|
background-color: white;
|
|
1130
2890
|
outline: 0;
|
|
1131
2891
|
border: none;
|
|
1132
2892
|
}
|
|
2893
|
+
|
|
1133
2894
|
&[aria-disabled='true'] {
|
|
1134
2895
|
cursor: not-allowed;
|
|
1135
2896
|
background-color: var(--qti-bg-gray-100);
|
|
1136
2897
|
color: var(--qti-text-gray-500);
|
|
1137
2898
|
border-color: var(--qti-border-color-gray);
|
|
1138
2899
|
}
|
|
2900
|
+
|
|
1139
2901
|
&[aria-ordervalue] {
|
|
2902
|
+
|
|
1140
2903
|
display: flex;
|
|
1141
2904
|
justify-content: center;
|
|
1142
2905
|
align-items: center;
|
|
@@ -1146,16 +2909,21 @@ qti-response-declaration {
|
|
|
1146
2909
|
height: 1.5rem;
|
|
1147
2910
|
color: var(--qti-text-white);
|
|
1148
2911
|
}
|
|
2912
|
+
|
|
1149
2913
|
&[aria-ordervalue]::after {
|
|
1150
2914
|
content: attr(aria-ordervalue) !important;
|
|
1151
2915
|
}
|
|
1152
|
-
|
|
1153
|
-
outline: none;
|
|
2916
|
+
|
|
1154
2917
|
width: 100%;
|
|
2918
|
+
|
|
1155
2919
|
height: 100%;
|
|
2920
|
+
|
|
1156
2921
|
background-color: transparent;
|
|
2922
|
+
|
|
1157
2923
|
padding: 0;
|
|
2924
|
+
|
|
1158
2925
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2926
|
+
|
|
1159
2927
|
outline: none
|
|
1160
2928
|
}
|
|
1161
2929
|
}
|
|
@@ -1166,66 +2934,84 @@ qti-response-declaration {
|
|
|
1166
2934
|
|
|
1167
2935
|
& qti-associable-hotspot {
|
|
1168
2936
|
&[shape='circle'] {
|
|
2937
|
+
|
|
1169
2938
|
&:hover {
|
|
1170
|
-
|
|
2939
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
1171
2940
|
}
|
|
2941
|
+
|
|
1172
2942
|
&:focus {
|
|
1173
2943
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1174
2944
|
}
|
|
2945
|
+
|
|
1175
2946
|
&[aria-checked='true'] {
|
|
1176
2947
|
border-color: var(--qti-bg-primary);
|
|
1177
2948
|
}
|
|
2949
|
+
|
|
1178
2950
|
&[aria-readonly='true'] {
|
|
1179
2951
|
cursor: pointer;
|
|
1180
2952
|
background-color: white;
|
|
1181
2953
|
outline: 0;
|
|
1182
2954
|
border: none;
|
|
1183
2955
|
}
|
|
2956
|
+
|
|
1184
2957
|
&[aria-disabled='true'] {
|
|
1185
2958
|
cursor: not-allowed;
|
|
1186
2959
|
background-color: var(--qti-bg-gray-100);
|
|
1187
2960
|
color: var(--qti-text-gray-500);
|
|
1188
2961
|
border-color: var(--qti-border-color-gray);
|
|
1189
2962
|
}
|
|
1190
|
-
|
|
1191
|
-
outline: none;
|
|
2963
|
+
|
|
1192
2964
|
width: 100%;
|
|
2965
|
+
|
|
1193
2966
|
height: 100%;
|
|
2967
|
+
|
|
1194
2968
|
background-color: transparent;
|
|
2969
|
+
|
|
1195
2970
|
padding: 0;
|
|
2971
|
+
|
|
1196
2972
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
2973
|
+
|
|
1197
2974
|
outline: none
|
|
1198
2975
|
}
|
|
1199
2976
|
|
|
1200
2977
|
&[shape='square'] {
|
|
2978
|
+
|
|
1201
2979
|
&:hover {
|
|
1202
|
-
|
|
2980
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
1203
2981
|
}
|
|
2982
|
+
|
|
1204
2983
|
&:focus {
|
|
1205
2984
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1206
2985
|
}
|
|
2986
|
+
|
|
1207
2987
|
&[aria-checked='true'] {
|
|
1208
2988
|
border-color: var(--qti-bg-primary);
|
|
1209
2989
|
}
|
|
2990
|
+
|
|
1210
2991
|
&[aria-readonly='true'] {
|
|
1211
2992
|
cursor: pointer;
|
|
1212
2993
|
background-color: white;
|
|
1213
2994
|
outline: 0;
|
|
1214
2995
|
border: none;
|
|
1215
2996
|
}
|
|
2997
|
+
|
|
1216
2998
|
&[aria-disabled='true'] {
|
|
1217
2999
|
cursor: not-allowed;
|
|
1218
3000
|
background-color: var(--qti-bg-gray-100);
|
|
1219
3001
|
color: var(--qti-text-gray-500);
|
|
1220
3002
|
border-color: var(--qti-border-color-gray);
|
|
1221
3003
|
}
|
|
1222
|
-
|
|
1223
|
-
outline: none;
|
|
3004
|
+
|
|
1224
3005
|
width: 100%;
|
|
3006
|
+
|
|
1225
3007
|
height: 100%;
|
|
3008
|
+
|
|
1226
3009
|
background-color: transparent;
|
|
3010
|
+
|
|
1227
3011
|
padding: 0;
|
|
3012
|
+
|
|
1228
3013
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
3014
|
+
|
|
1229
3015
|
outline: none
|
|
1230
3016
|
}
|
|
1231
3017
|
}
|
|
@@ -1233,6 +3019,7 @@ qti-response-declaration {
|
|
|
1233
3019
|
|
|
1234
3020
|
qti-graphic-gap-match-interaction {
|
|
1235
3021
|
position: relative;
|
|
3022
|
+
|
|
1236
3023
|
& img {
|
|
1237
3024
|
margin: 0;
|
|
1238
3025
|
padding: 0;
|
|
@@ -1242,7 +3029,7 @@ qti-response-declaration {
|
|
|
1242
3029
|
qti-slider-interaction {
|
|
1243
3030
|
display: block;
|
|
1244
3031
|
|
|
1245
|
-
--qti-tick-color: rgb(229 231 235 /
|
|
3032
|
+
--qti-tick-color: rgb(229 231 235 / 100%);
|
|
1246
3033
|
--qti-tick-width: 1px;
|
|
1247
3034
|
|
|
1248
3035
|
&::part(slider) {
|
|
@@ -1253,6 +3040,7 @@ qti-response-declaration {
|
|
|
1253
3040
|
}
|
|
1254
3041
|
|
|
1255
3042
|
--show-bounds: true;
|
|
3043
|
+
|
|
1256
3044
|
&::part(bounds) {
|
|
1257
3045
|
display: flex;
|
|
1258
3046
|
width: 100%;
|
|
@@ -1261,6 +3049,7 @@ qti-response-declaration {
|
|
|
1261
3049
|
}
|
|
1262
3050
|
|
|
1263
3051
|
--show-ticks: true;
|
|
3052
|
+
|
|
1264
3053
|
&::part(ticks) {
|
|
1265
3054
|
margin-left: 0.125rem; /* mx-0.5 */
|
|
1266
3055
|
margin-right: 0.125rem;
|
|
@@ -1296,6 +3085,7 @@ qti-response-declaration {
|
|
|
1296
3085
|
}
|
|
1297
3086
|
|
|
1298
3087
|
--show-value: true;
|
|
3088
|
+
|
|
1299
3089
|
&::part(value) {
|
|
1300
3090
|
position: absolute;
|
|
1301
3091
|
bottom: 2rem; /* bottom-8 */
|
|
@@ -1313,19 +3103,25 @@ qti-response-declaration {
|
|
|
1313
3103
|
qti-select-point-interaction {
|
|
1314
3104
|
&::part(point) {
|
|
1315
3105
|
&:hover {
|
|
1316
|
-
|
|
3106
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
|
1317
3107
|
}
|
|
3108
|
+
|
|
1318
3109
|
&:focus {
|
|
1319
3110
|
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
1320
3111
|
}
|
|
1321
|
-
|
|
3112
|
+
|
|
1322
3113
|
border-radius: var(--qti-border-radius-full);
|
|
1323
|
-
|
|
3114
|
+
|
|
1324
3115
|
width: 1.5rem;
|
|
3116
|
+
|
|
1325
3117
|
height: 1.5rem;
|
|
3118
|
+
|
|
1326
3119
|
background-color: transparent;
|
|
3120
|
+
|
|
1327
3121
|
padding: 0;
|
|
3122
|
+
|
|
1328
3123
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
|
|
3124
|
+
|
|
1329
3125
|
outline: none;
|
|
1330
3126
|
}
|
|
1331
3127
|
}
|
|
@@ -1345,160 +3141,10 @@ qti-response-declaration {
|
|
|
1345
3141
|
|
|
1346
3142
|
/* utilities */
|
|
1347
3143
|
|
|
1348
|
-
@
|
|
1349
|
-
.qti-underline {
|
|
1350
|
-
text-decoration: underline;
|
|
1351
|
-
}
|
|
1352
|
-
|
|
1353
|
-
.qti-align-left {
|
|
1354
|
-
text-align: left;
|
|
1355
|
-
}
|
|
1356
|
-
|
|
1357
|
-
.qti-align-center {
|
|
1358
|
-
text-align: center;
|
|
1359
|
-
}
|
|
1360
|
-
|
|
1361
|
-
.qti-align-right {
|
|
1362
|
-
text-align: right;
|
|
1363
|
-
}
|
|
1364
|
-
|
|
1365
|
-
.qti-valign-top {
|
|
1366
|
-
vertical-align: top;
|
|
1367
|
-
}
|
|
1368
|
-
|
|
1369
|
-
.qti-valign-middle {
|
|
1370
|
-
vertical-align: middle;
|
|
1371
|
-
}
|
|
1372
|
-
|
|
1373
|
-
.qti-valign-baseline {
|
|
1374
|
-
vertical-align: baseline;
|
|
1375
|
-
}
|
|
1376
|
-
|
|
1377
|
-
.qti-valign-bottom {
|
|
1378
|
-
vertical-align: bottom;
|
|
1379
|
-
}
|
|
1380
|
-
|
|
1381
|
-
.qti-fullwidth {
|
|
1382
|
-
width: 100%;
|
|
1383
|
-
}
|
|
1384
|
-
|
|
1385
|
-
.qti-hidden {
|
|
1386
|
-
display: none;
|
|
1387
|
-
}
|
|
1388
|
-
|
|
1389
|
-
.qti-visually-hidden {
|
|
1390
|
-
position: fixed !important;
|
|
1391
|
-
overflow: hidden;
|
|
1392
|
-
width: 1px;
|
|
1393
|
-
height: 1px;
|
|
1394
|
-
border: 0;
|
|
1395
|
-
margin: -1px;
|
|
1396
|
-
clip: rect(1px 1px 1px 1px);
|
|
1397
|
-
}
|
|
1398
|
-
|
|
1399
|
-
.qti-bordered {
|
|
1400
|
-
padding: 2px;
|
|
1401
|
-
border: 1px solid #888;
|
|
1402
|
-
}
|
|
1403
|
-
|
|
1404
|
-
.qti-well {
|
|
1405
|
-
display: inline-block;
|
|
1406
|
-
padding-top: 0.5rem;
|
|
1407
|
-
padding-bottom: 0.5rem;
|
|
1408
|
-
padding-left: 0.75rem;
|
|
1409
|
-
padding-right: 0.75rem;
|
|
1410
|
-
border-radius: 0.25rem;
|
|
1411
|
-
border-width: 1px;
|
|
1412
|
-
border-color: #d1d5db;
|
|
1413
|
-
color: #4b5563;
|
|
1414
|
-
background-color: #f3f4f6;
|
|
1415
|
-
}
|
|
1416
|
-
}
|
|
3144
|
+
/* @import './styles/qti-utilities/qti-styles'; */
|
|
1417
3145
|
|
|
1418
3146
|
/* variants */
|
|
1419
3147
|
|
|
1420
|
-
@
|
|
1421
|
-
.qti-input-width-1 {
|
|
1422
|
-
width: 1ch;
|
|
1423
|
-
min-width: 1ch;
|
|
1424
|
-
}
|
|
1425
|
-
.qti-input-width-2 {
|
|
1426
|
-
width: 2ch;
|
|
1427
|
-
min-width: 2ch;
|
|
1428
|
-
}
|
|
1429
|
-
.qti-input-width-3 {
|
|
1430
|
-
width: 3ch;
|
|
1431
|
-
min-width: 3ch;
|
|
1432
|
-
}
|
|
1433
|
-
.qti-input-width-4 {
|
|
1434
|
-
width: 4ch;
|
|
1435
|
-
min-width: 4ch;
|
|
1436
|
-
}
|
|
1437
|
-
.qti-input-width-6 {
|
|
1438
|
-
width: 6ch;
|
|
1439
|
-
min-width: 6ch;
|
|
1440
|
-
}
|
|
1441
|
-
.qti-input-width-10 {
|
|
1442
|
-
width: 10ch;
|
|
1443
|
-
min-width: 10ch;
|
|
1444
|
-
}
|
|
1445
|
-
.qti-input-width-15 {
|
|
1446
|
-
width: 15ch;
|
|
1447
|
-
min-width: 15ch;
|
|
1448
|
-
}
|
|
1449
|
-
.qti-input-width-20 {
|
|
1450
|
-
width: 20ch;
|
|
1451
|
-
min-width: 20ch;
|
|
1452
|
-
}
|
|
1453
|
-
.qti-input-width-72 {
|
|
1454
|
-
width: 72ch;
|
|
1455
|
-
min-width: 72ch;
|
|
1456
|
-
}
|
|
1457
|
-
}
|
|
3148
|
+
/* @import './styles/qti-variants/qti-input-width'; */
|
|
1458
3149
|
|
|
1459
|
-
@
|
|
1460
|
-
qti-choice-interaction {
|
|
1461
|
-
&.qti-choices-stacking-2 {
|
|
1462
|
-
.grid {
|
|
1463
|
-
display: grid; /* grid */
|
|
1464
|
-
}
|
|
1465
|
-
grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
|
|
1466
|
-
qti-prompt {
|
|
1467
|
-
grid-column: span 2 / span 2; /* col-span-2 */
|
|
1468
|
-
}
|
|
1469
|
-
}
|
|
1470
|
-
&.qti-choices-stacking-3 {
|
|
1471
|
-
.grid {
|
|
1472
|
-
display: grid;
|
|
1473
|
-
}
|
|
1474
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1475
|
-
qti-prompt {
|
|
1476
|
-
grid-column: span 3 / span 3;
|
|
1477
|
-
}
|
|
1478
|
-
}
|
|
1479
|
-
&.qti-choices-stacking-4 {
|
|
1480
|
-
.grid {
|
|
1481
|
-
display: grid;
|
|
1482
|
-
}
|
|
1483
|
-
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
1484
|
-
qti-prompt {
|
|
1485
|
-
grid-column: span 4 / span 4;
|
|
1486
|
-
}
|
|
1487
|
-
}
|
|
1488
|
-
&.qti-choices-stacking-5 {
|
|
1489
|
-
.grid {
|
|
1490
|
-
display: grid;
|
|
1491
|
-
}
|
|
1492
|
-
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
1493
|
-
qti-prompt {
|
|
1494
|
-
grid-column: span 5 / span 5;
|
|
1495
|
-
}
|
|
1496
|
-
}
|
|
1497
|
-
&.qti-orientation-horizontal {
|
|
1498
|
-
/* is the default layout */
|
|
1499
|
-
}
|
|
1500
|
-
&[orientation='horizontal'] {
|
|
1501
|
-
flex-direction: row;
|
|
1502
|
-
}
|
|
1503
|
-
}
|
|
1504
|
-
}
|
|
3150
|
+
/* @import './styles/qti-variants/qti-interactions'; */
|