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