@citolab/qti-components 6.7.1-39 → 6.7.1-40
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/item.css +310 -139
- package/package.json +1 -1
package/dist/item.css
CHANGED
|
@@ -2,112 +2,323 @@
|
|
|
2
2
|
|
|
3
3
|
/* base */
|
|
4
4
|
|
|
5
|
-
/*
|
|
5
|
+
/* Document
|
|
6
|
+
* ========================================================================== */
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* 1. Correct the line height in all browsers.
|
|
10
|
+
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
:where(html) {
|
|
14
|
+
line-height: 1.15; /* 1 */
|
|
15
|
+
-webkit-text-size-adjust: 100%; /* 2 */
|
|
16
|
+
-moz-text-size-adjust: 100%;
|
|
17
|
+
text-size-adjust: 100%; /* 2 */
|
|
18
|
+
}
|
|
6
19
|
|
|
7
|
-
/*
|
|
20
|
+
/* Sections
|
|
21
|
+
* ========================================================================== */
|
|
8
22
|
|
|
9
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Correct the font size and margin on `h1` elements within `section` and
|
|
25
|
+
* `article` contexts in Chrome, Edge, Firefox, and Safari.
|
|
26
|
+
*/
|
|
10
27
|
|
|
11
|
-
|
|
28
|
+
:where(h1) {
|
|
29
|
+
font-size: 2em;
|
|
30
|
+
margin-block-end: 0.67em;
|
|
31
|
+
margin-block-start: 0.67em;
|
|
32
|
+
}
|
|
12
33
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
::before,
|
|
16
|
-
::after {
|
|
17
|
-
box-sizing: border-box;
|
|
18
|
-
}
|
|
34
|
+
/* Grouping content
|
|
35
|
+
* ========================================================================== */
|
|
19
36
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
37
|
+
/**
|
|
38
|
+
* Remove the margin on nested lists in Chrome, Edge, and Safari.
|
|
39
|
+
*/
|
|
24
40
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
position: relative;
|
|
30
|
-
vertical-align: baseline;
|
|
31
|
-
}
|
|
41
|
+
:where(dl, ol, ul) :where(dl, ol, ul) {
|
|
42
|
+
margin-block-end: 0;
|
|
43
|
+
margin-block-start: 0;
|
|
44
|
+
}
|
|
32
45
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
46
|
+
/**
|
|
47
|
+
* 1. Add the correct box sizing in Firefox.
|
|
48
|
+
* 2. Correct the inheritance of border color in Firefox.
|
|
49
|
+
*/
|
|
36
50
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
51
|
+
:where(hr) {
|
|
52
|
+
box-sizing: content-box; /* 1 */
|
|
53
|
+
color: inherit; /* 2 */
|
|
54
|
+
height: 0; /* 1 */
|
|
55
|
+
}
|
|
40
56
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
border-color: inherit; /* 2 */
|
|
44
|
-
}
|
|
57
|
+
/* Text-level semantics
|
|
58
|
+
* ========================================================================== */
|
|
45
59
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
select,
|
|
50
|
-
textarea {
|
|
51
|
-
font-family: inherit; /* 1 */
|
|
52
|
-
font-size: 100%; /* 1 */
|
|
53
|
-
line-height: inherit; /* 1 */
|
|
54
|
-
margin: 0; /* 2 */
|
|
55
|
-
}
|
|
60
|
+
/**
|
|
61
|
+
* Add the correct text decoration in Safari.
|
|
62
|
+
*/
|
|
56
63
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
64
|
+
:where(abbr[title]) {
|
|
65
|
+
text-decoration: underline;
|
|
66
|
+
-webkit-text-decoration: underline dotted;
|
|
67
|
+
text-decoration: underline dotted;
|
|
68
|
+
}
|
|
61
69
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
[type='submit'] {
|
|
66
|
-
-webkit-appearance: button;
|
|
67
|
-
}
|
|
70
|
+
/**
|
|
71
|
+
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
72
|
+
*/
|
|
68
73
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
74
|
+
:where(b, strong) {
|
|
75
|
+
font-weight: bolder;
|
|
76
|
+
}
|
|
73
77
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
/**
|
|
79
|
+
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
80
|
+
* 2. Correct the odd `em` font sizing in all browsers.
|
|
81
|
+
*/
|
|
77
82
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
83
|
+
:where(code, kbd, pre, samp) {
|
|
84
|
+
font-family: monospace, monospace; /* 1 */
|
|
85
|
+
font-size: 1em; /* 2 */
|
|
86
|
+
}
|
|
81
87
|
|
|
82
|
-
|
|
83
|
-
|
|
88
|
+
/**
|
|
89
|
+
* Add the correct font size in all browsers.
|
|
90
|
+
*/
|
|
91
|
+
|
|
92
|
+
:where(small) {
|
|
93
|
+
font-size: 80%;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Tabular data
|
|
97
|
+
* ========================================================================== */
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* 1. Correct table border color in Chrome, Edge, and Safari.
|
|
101
|
+
* 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
|
|
102
|
+
*/
|
|
103
|
+
|
|
104
|
+
:where(table) {
|
|
105
|
+
border-color: currentColor; /* 1 */
|
|
106
|
+
text-indent: 0; /* 2 */
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Forms
|
|
110
|
+
* ========================================================================== */
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* Remove the margin on controls in Safari.
|
|
114
|
+
*/
|
|
115
|
+
|
|
116
|
+
:where(button, input, select) {
|
|
117
|
+
margin: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Remove the inheritance of text transform in Firefox.
|
|
122
|
+
*/
|
|
123
|
+
|
|
124
|
+
:where(button) {
|
|
125
|
+
text-transform: none;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* Correct the inability to style buttons in iOS and Safari.
|
|
130
|
+
*/
|
|
131
|
+
|
|
132
|
+
:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
|
|
133
|
+
-webkit-appearance: button;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Add the correct vertical alignment in Chrome, Edge, and Firefox.
|
|
138
|
+
*/
|
|
139
|
+
|
|
140
|
+
:where(progress) {
|
|
141
|
+
vertical-align: baseline;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* Remove the inheritance of text transform in Firefox.
|
|
146
|
+
*/
|
|
147
|
+
|
|
148
|
+
:where(select) {
|
|
149
|
+
text-transform: none;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* Remove the margin in Firefox and Safari.
|
|
154
|
+
*/
|
|
155
|
+
|
|
156
|
+
:where(textarea) {
|
|
157
|
+
margin: 0;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/**
|
|
161
|
+
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
|
162
|
+
* 2. Correct the outline style in Safari.
|
|
163
|
+
*/
|
|
164
|
+
|
|
165
|
+
:where(input[type="search" i]) {
|
|
166
|
+
-webkit-appearance: textfield; /* 1 */
|
|
167
|
+
outline-offset: -2px; /* 2 */
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* Correct the cursor style of increment and decrement buttons in Safari.
|
|
172
|
+
*/
|
|
173
|
+
|
|
174
|
+
::-webkit-inner-spin-button,
|
|
175
|
+
::-webkit-outer-spin-button {
|
|
176
|
+
height: auto;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/**
|
|
180
|
+
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
|
181
|
+
*/
|
|
182
|
+
|
|
183
|
+
::-webkit-input-placeholder {
|
|
184
|
+
color: inherit;
|
|
185
|
+
opacity: 0.54;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
|
190
|
+
*/
|
|
191
|
+
|
|
192
|
+
::-webkit-search-decoration {
|
|
193
|
+
-webkit-appearance: none;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/**
|
|
197
|
+
* 1. Correct the inability to style upload buttons in iOS and Safari.
|
|
198
|
+
* 2. Change font properties to `inherit` in Safari.
|
|
199
|
+
*/
|
|
200
|
+
|
|
201
|
+
::-webkit-file-upload-button {
|
|
202
|
+
-webkit-appearance: button; /* 1 */
|
|
203
|
+
font: inherit; /* 2 */
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/**
|
|
207
|
+
* Remove the inner border and padding of focus outlines in Firefox.
|
|
208
|
+
*/
|
|
209
|
+
|
|
210
|
+
:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
|
|
211
|
+
border-style: none;
|
|
212
|
+
padding: 0;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/**
|
|
216
|
+
* Restore the focus outline styles unset by the previous rule in Firefox.
|
|
217
|
+
*/
|
|
218
|
+
|
|
219
|
+
:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
|
|
220
|
+
outline: 1px dotted ButtonText;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Remove the additional :invalid styles in Firefox.
|
|
225
|
+
*/
|
|
226
|
+
|
|
227
|
+
:where(:-moz-ui-invalid) {
|
|
228
|
+
box-shadow: none;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* Interactive
|
|
232
|
+
* ========================================================================== */
|
|
233
|
+
|
|
234
|
+
/*
|
|
235
|
+
* Add the correct styles in Safari.
|
|
236
|
+
*/
|
|
237
|
+
|
|
238
|
+
:where(dialog) {
|
|
239
|
+
background-color: white;
|
|
240
|
+
border: solid;
|
|
241
|
+
color: black;
|
|
242
|
+
height: -moz-fit-content;
|
|
243
|
+
height: fit-content;
|
|
244
|
+
left: 0;
|
|
245
|
+
margin: auto;
|
|
246
|
+
padding: 1em;
|
|
247
|
+
position: absolute;
|
|
248
|
+
right: 0;
|
|
249
|
+
width: -moz-fit-content;
|
|
250
|
+
width: fit-content;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
:where(dialog:not([open])) {
|
|
254
|
+
display: none;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/*
|
|
258
|
+
* Add the correct display in all browsers.
|
|
259
|
+
*/
|
|
260
|
+
|
|
261
|
+
:where(summary) {
|
|
262
|
+
display: list-item;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
@layer qti-base {
|
|
266
|
+
abbr[title] {
|
|
267
|
+
-webkit-text-decoration: underline dotted;
|
|
268
|
+
text-decoration: underline dotted;
|
|
269
|
+
}
|
|
270
|
+
b,
|
|
271
|
+
strong {
|
|
272
|
+
font-weight: bolder;
|
|
273
|
+
}
|
|
274
|
+
code,
|
|
275
|
+
kbd,
|
|
276
|
+
samp,
|
|
277
|
+
pre {
|
|
278
|
+
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
|
|
279
|
+
font-size: 1em; /* 2 */
|
|
280
|
+
}
|
|
281
|
+
small {
|
|
282
|
+
font-size: 80%;
|
|
84
283
|
}
|
|
85
284
|
|
|
86
|
-
|
|
87
|
-
|
|
285
|
+
table {
|
|
286
|
+
width: 100%;
|
|
287
|
+
border-collapse: collapse;
|
|
88
288
|
}
|
|
89
289
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
290
|
+
/* Set table borders */
|
|
291
|
+
table,
|
|
292
|
+
th,
|
|
293
|
+
td {
|
|
294
|
+
border-bottom: 1px solid #eee;
|
|
295
|
+
}
|
|
296
|
+
td {
|
|
297
|
+
padding: 0.5rem 0 0.5rem 0;
|
|
93
298
|
}
|
|
94
299
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
300
|
+
td > p {
|
|
301
|
+
padding: 0;
|
|
302
|
+
margin: 0;
|
|
98
303
|
}
|
|
99
304
|
|
|
100
|
-
|
|
101
|
-
-
|
|
305
|
+
th {
|
|
306
|
+
text-align: left;
|
|
307
|
+
}
|
|
308
|
+
/* Style table header */
|
|
309
|
+
th {
|
|
310
|
+
font-weight: bold;
|
|
311
|
+
/* background-color: #f2f2f2; */
|
|
102
312
|
}
|
|
103
313
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
314
|
+
/* Style alternating rows */
|
|
315
|
+
tr:nth-child(even) {
|
|
316
|
+
/* background-color: #f9f9f9; */
|
|
107
317
|
}
|
|
108
318
|
|
|
109
|
-
|
|
110
|
-
|
|
319
|
+
/* Add hover effect to rows */
|
|
320
|
+
tr:hover {
|
|
321
|
+
/* background-color: #e6e6e6; */
|
|
111
322
|
}
|
|
112
323
|
}
|
|
113
324
|
|
|
@@ -214,66 +425,6 @@ qti-response-declaration {
|
|
|
214
425
|
display: block;
|
|
215
426
|
}
|
|
216
427
|
|
|
217
|
-
@layer qti-base {
|
|
218
|
-
abbr[title] {
|
|
219
|
-
-webkit-text-decoration: underline dotted;
|
|
220
|
-
text-decoration: underline dotted;
|
|
221
|
-
}
|
|
222
|
-
b,
|
|
223
|
-
strong {
|
|
224
|
-
font-weight: bolder;
|
|
225
|
-
}
|
|
226
|
-
code,
|
|
227
|
-
kbd,
|
|
228
|
-
samp,
|
|
229
|
-
pre {
|
|
230
|
-
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
|
|
231
|
-
font-size: 1em; /* 2 */
|
|
232
|
-
}
|
|
233
|
-
small {
|
|
234
|
-
font-size: 80%;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
table {
|
|
238
|
-
width: 100%;
|
|
239
|
-
border-collapse: collapse;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
/* Set table borders */
|
|
243
|
-
table,
|
|
244
|
-
th,
|
|
245
|
-
td {
|
|
246
|
-
border-bottom: 1px solid #eee;
|
|
247
|
-
}
|
|
248
|
-
td {
|
|
249
|
-
padding: 0.5rem 0 0.5rem 0;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
td > p {
|
|
253
|
-
padding: 0;
|
|
254
|
-
margin: 0;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
th {
|
|
258
|
-
text-align: left;
|
|
259
|
-
}
|
|
260
|
-
/* Style table header */
|
|
261
|
-
th {
|
|
262
|
-
font-weight: bold;
|
|
263
|
-
/* background-color: #f2f2f2; */
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
/* Style alternating rows */
|
|
267
|
-
tr:nth-child(even) {
|
|
268
|
-
/* background-color: #f9f9f9; */
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
/* Add hover effect to rows */
|
|
272
|
-
tr:hover {
|
|
273
|
-
/* background-color: #e6e6e6; */
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
|
|
277
428
|
/* components */
|
|
278
429
|
|
|
279
430
|
@layer qti-components {
|
|
@@ -416,7 +567,8 @@ qti-response-declaration {
|
|
|
416
567
|
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
417
568
|
}
|
|
418
569
|
|
|
419
|
-
&:not(.qti-input-control-hidden)
|
|
570
|
+
&:not(.qti-input-control-hidden),
|
|
571
|
+
&:not(.qti-unselected-hidden) {
|
|
420
572
|
qti-hottext {
|
|
421
573
|
&::part(cha) {
|
|
422
574
|
/* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
|
|
@@ -433,6 +585,21 @@ qti-response-declaration {
|
|
|
433
585
|
qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
434
586
|
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
435
587
|
}
|
|
588
|
+
|
|
589
|
+
&.qti-unselected-hidden {
|
|
590
|
+
qti-hottext {
|
|
591
|
+
&::part(ch) {display:none !important;
|
|
592
|
+
}
|
|
593
|
+
&[aria-checked='true'] {--qti-bg-opacity:1;background-color:rgb(191 219 254 / var(--qti-bg-opacity));
|
|
594
|
+
}
|
|
595
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
596
|
+
}
|
|
597
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
598
|
+
}border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;outline:2px solid transparent;outline-offset:2px;border-color:transparent;display:inline-flex;cursor:pointer
|
|
599
|
+
}
|
|
600
|
+
qti-hottext:hover{border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;outline:2px solid transparent;outline-offset:2px;}
|
|
601
|
+
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
602
|
+
}
|
|
436
603
|
}
|
|
437
604
|
|
|
438
605
|
qti-inline-choice-interaction {
|
|
@@ -813,6 +980,8 @@ qti-response-declaration {
|
|
|
813
980
|
|
|
814
981
|
.act{--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));}
|
|
815
982
|
|
|
983
|
+
.borderinvisible{border-color:transparent;}
|
|
984
|
+
|
|
816
985
|
.foc{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
817
986
|
|
|
818
987
|
/* layer: default */
|
|
@@ -907,6 +1076,8 @@ qti-response-declaration {
|
|
|
907
1076
|
|
|
908
1077
|
.border-primary{--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));}
|
|
909
1078
|
|
|
1079
|
+
.border-transparent{border-color:transparent;}
|
|
1080
|
+
|
|
910
1081
|
.rounded{border-radius:0.25rem;}
|
|
911
1082
|
|
|
912
1083
|
.rounded-full{border-radius:9999px;}
|