@citolab/qti-components 6.0.2-0 → 6.0.2-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-M3YT56HW.js +1437 -0
- package/dist/custom-elements.json +149 -142
- package/dist/index.js +61 -112
- package/dist/qti-assessment-item-219cef9e.d.ts +102 -0
- package/dist/qti-components/index.d.ts +4 -2
- package/dist/qti-item/index.d.ts +2 -16
- package/dist/qti-item/index.js +1 -1437
- package/dist/qti-item-react/index.d.ts +22 -0
- package/dist/qti-item-react/index.js +1 -0
- package/dist/{qti-rule-05fc5382.d.ts → qti-rule-5c200a1b.d.ts} +3 -99
- package/package.json +4 -1
|
@@ -0,0 +1,1437 @@
|
|
|
1
|
+
import{a as c,b as m}from"./chunk-DLLHO3W2.js";import{c as i}from"./chunk-NMCIOGD2.js";import{css as g,html as v,LitElement as y}from"lit";import{property as d}from"lit/decorators.js";var p=(q,h)=>{class t extends q{constructor(){super(...arguments);this.scale=1;this.ro=new ResizeObserver(a=>{for(let r of a)this.fitToParent(r.contentRect.width)})}connectedCallback(){super.connectedCallback(),this.ro.observe(this),this.fitToParent()}set scales(a){let r=this._scales;this.requestUpdate("prop",r),this.fitToParent()}get scales(){return this._scales}fitToParent(a=this.clientWidth){let r=this.shadowRoot.querySelector(h);if(r){let l=a/r.clientWidth;this.scale=l;let u=-r.clientHeight*(1-l)+"px",f=-r.clientWidth*(1-l)+"px";requestAnimationFrame(()=>{r.style.transform=`scale(${this.scale})`,r.style.margin=`0 ${f} ${u} 0`})}}}return i([d({type:Number,reflect:!0})],t.prototype,"scale",2),i([d({type:Boolean,attribute:!1})],t.prototype,"scales",1),t};import{property as n}from"lit/decorators.js";import{unsafeHTML as x}from"lit/directives/unsafe-html.js";import{ContextProvider as w}from"@lit-labs/context";var b=`
|
|
2
|
+
@charset "UTF-8";
|
|
3
|
+
.qti-underline {
|
|
4
|
+
text-decoration: underline;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.qti-align-left {
|
|
8
|
+
text-align: left;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.qti-align-center {
|
|
12
|
+
text-align: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.qti-align-right {
|
|
16
|
+
text-align: right;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.qti-valign-top {
|
|
20
|
+
vertical-align: top;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.qti-valign-middle {
|
|
24
|
+
vertical-align: middle;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.qti-valign-baseline {
|
|
28
|
+
vertical-align: baseline;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.qti-valign-bottom {
|
|
32
|
+
vertical-align: bottom;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.qti-fullwidth {
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.qti-hidden {
|
|
40
|
+
display: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.qti-visually-hidden {
|
|
44
|
+
position: fixed !important;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
width: 1px;
|
|
47
|
+
height: 1px;
|
|
48
|
+
border: 0;
|
|
49
|
+
margin: -1px;
|
|
50
|
+
clip: rect(1px 1px 1px 1px);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.qti-bordered {
|
|
54
|
+
padding: 2px;
|
|
55
|
+
border: 1px solid #888;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.qti-well {
|
|
59
|
+
min-height: 20px;
|
|
60
|
+
padding: 19px;
|
|
61
|
+
border: 1px solid #e3e3e3;
|
|
62
|
+
border-radius: 4px;
|
|
63
|
+
margin-bottom: 20px;
|
|
64
|
+
background-color: #f5f5f5;
|
|
65
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.qti-layout-row {
|
|
69
|
+
display: flow-root;
|
|
70
|
+
width: 100%;
|
|
71
|
+
}
|
|
72
|
+
.qti-layout-row [class*=qti-layout-col] {
|
|
73
|
+
margin-left: 2.1276595745%;
|
|
74
|
+
float: left;
|
|
75
|
+
}
|
|
76
|
+
.qti-layout-row [class*=qti-layout-col]:first-child {
|
|
77
|
+
margin-left: 0;
|
|
78
|
+
}
|
|
79
|
+
.qti-layout-row .qti-layout-col12 {
|
|
80
|
+
width: 100%;
|
|
81
|
+
}
|
|
82
|
+
.qti-layout-row .qti-layout-offset12 {
|
|
83
|
+
margin-left: 104.2553191489%;
|
|
84
|
+
}
|
|
85
|
+
.qti-layout-row .qti-layout-offset12:first-child {
|
|
86
|
+
margin-left: 102.1276595745%;
|
|
87
|
+
}
|
|
88
|
+
.qti-layout-row .qti-layout-col11 {
|
|
89
|
+
width: 91.4893617021%;
|
|
90
|
+
}
|
|
91
|
+
.qti-layout-row .qti-layout-offset11 {
|
|
92
|
+
margin-left: 95.7446808511%;
|
|
93
|
+
}
|
|
94
|
+
.qti-layout-row .qti-layout-offset11:first-child {
|
|
95
|
+
margin-left: 93.6170212766%;
|
|
96
|
+
}
|
|
97
|
+
.qti-layout-row .qti-layout-col10 {
|
|
98
|
+
width: 82.9787234043%;
|
|
99
|
+
}
|
|
100
|
+
.qti-layout-row .qti-layout-offset10 {
|
|
101
|
+
margin-left: 87.2340425532%;
|
|
102
|
+
}
|
|
103
|
+
.qti-layout-row .qti-layout-offset10:first-child {
|
|
104
|
+
margin-left: 85.1063829787%;
|
|
105
|
+
}
|
|
106
|
+
.qti-layout-row .qti-layout-col9 {
|
|
107
|
+
width: 74.4680851064%;
|
|
108
|
+
}
|
|
109
|
+
.qti-layout-row .qti-layout-offset9 {
|
|
110
|
+
margin-left: 78.7234042553%;
|
|
111
|
+
}
|
|
112
|
+
.qti-layout-row .qti-layout-offset9:first-child {
|
|
113
|
+
margin-left: 76.5957446809%;
|
|
114
|
+
}
|
|
115
|
+
.qti-layout-row .qti-layout-col8 {
|
|
116
|
+
width: 65.9574468085%;
|
|
117
|
+
}
|
|
118
|
+
.qti-layout-row .qti-layout-offset8 {
|
|
119
|
+
margin-left: 70.2127659574%;
|
|
120
|
+
}
|
|
121
|
+
.qti-layout-row .qti-layout-offset8:first-child {
|
|
122
|
+
margin-left: 68.085106383%;
|
|
123
|
+
}
|
|
124
|
+
.qti-layout-row .qti-layout-col7 {
|
|
125
|
+
width: 57.4468085106%;
|
|
126
|
+
}
|
|
127
|
+
.qti-layout-row .qti-layout-offset7 {
|
|
128
|
+
margin-left: 61.7021276596%;
|
|
129
|
+
}
|
|
130
|
+
.qti-layout-row .qti-layout-offset7:first-child {
|
|
131
|
+
margin-left: 59.5744680851%;
|
|
132
|
+
}
|
|
133
|
+
.qti-layout-row .qti-layout-col6 {
|
|
134
|
+
width: 48.9361702128%;
|
|
135
|
+
}
|
|
136
|
+
.qti-layout-row .qti-layout-offset6 {
|
|
137
|
+
margin-left: 53.1914893617%;
|
|
138
|
+
}
|
|
139
|
+
.qti-layout-row .qti-layout-offset6:first-child {
|
|
140
|
+
margin-left: 51.0638297872%;
|
|
141
|
+
}
|
|
142
|
+
.qti-layout-row .qti-layout-col5 {
|
|
143
|
+
width: 40.4255319149%;
|
|
144
|
+
}
|
|
145
|
+
.qti-layout-row .qti-layout-offset5 {
|
|
146
|
+
margin-left: 44.6808510638%;
|
|
147
|
+
}
|
|
148
|
+
.qti-layout-row .qti-layout-offset5:first-child {
|
|
149
|
+
margin-left: 42.5531914894%;
|
|
150
|
+
}
|
|
151
|
+
.qti-layout-row .qti-layout-col4 {
|
|
152
|
+
width: 31.914893617%;
|
|
153
|
+
}
|
|
154
|
+
.qti-layout-row .qti-layout-offset4 {
|
|
155
|
+
margin-left: 36.170212766%;
|
|
156
|
+
}
|
|
157
|
+
.qti-layout-row .qti-layout-offset4:first-child {
|
|
158
|
+
margin-left: 34.0425531915%;
|
|
159
|
+
}
|
|
160
|
+
.qti-layout-row .qti-layout-col3 {
|
|
161
|
+
width: 23.4042553191%;
|
|
162
|
+
}
|
|
163
|
+
.qti-layout-row .qti-layout-offset3 {
|
|
164
|
+
margin-left: 27.6595744681%;
|
|
165
|
+
}
|
|
166
|
+
.qti-layout-row .qti-layout-offset3:first-child {
|
|
167
|
+
margin-left: 25.5319148936%;
|
|
168
|
+
}
|
|
169
|
+
.qti-layout-row .qti-layout-col2 {
|
|
170
|
+
width: 14.8936170213%;
|
|
171
|
+
}
|
|
172
|
+
.qti-layout-row .qti-layout-offset2 {
|
|
173
|
+
margin-left: 19.1489361702%;
|
|
174
|
+
}
|
|
175
|
+
.qti-layout-row .qti-layout-offset2:first-child {
|
|
176
|
+
margin-left: 17.0212765957%;
|
|
177
|
+
}
|
|
178
|
+
.qti-layout-row .qti-layout-col1 {
|
|
179
|
+
width: 6.3829787234%;
|
|
180
|
+
}
|
|
181
|
+
.qti-layout-row .qti-layout-offset1 {
|
|
182
|
+
margin-left: 10.6382978723%;
|
|
183
|
+
}
|
|
184
|
+
.qti-layout-row .qti-layout-offset1:first-child {
|
|
185
|
+
margin-left: 8.5106382979%;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
:root {
|
|
189
|
+
/**
|
|
190
|
+
* @tokens Colors
|
|
191
|
+
* @presenter Color
|
|
192
|
+
*/
|
|
193
|
+
--qti-primary: rgb(30, 80, 127);
|
|
194
|
+
--qti-primary-color: var(--qti-primary);
|
|
195
|
+
--qti-focus-color: #98cbfa;
|
|
196
|
+
--qti-border-color: #cdd5df;
|
|
197
|
+
--qti-shadow-color: #838c96;
|
|
198
|
+
--qti-text-color: #4a5a69;
|
|
199
|
+
--qti-background: #f2f4f5;
|
|
200
|
+
--qti-placeholder-text: var(--qti-border-color);
|
|
201
|
+
--qti-white: #fff;
|
|
202
|
+
/**
|
|
203
|
+
* @tokens Others
|
|
204
|
+
*/
|
|
205
|
+
--qti-padding-x: 0.7rem;
|
|
206
|
+
--qti-padding-y: 0.5rem;
|
|
207
|
+
--qti-border-width: 2px;
|
|
208
|
+
--qti-shadow-blur: 2px;
|
|
209
|
+
--qti-border-radius: 2px;
|
|
210
|
+
--qti-gap: 2px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
html,
|
|
214
|
+
body,
|
|
215
|
+
qti-test {
|
|
216
|
+
height: 100%;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
qti-test {
|
|
220
|
+
display: flex;
|
|
221
|
+
flex-direction: column;
|
|
222
|
+
gap: 1rem;
|
|
223
|
+
height: 100%;
|
|
224
|
+
}
|
|
225
|
+
qti-test qti-test-nav {
|
|
226
|
+
display: flex;
|
|
227
|
+
justify-content: space-between;
|
|
228
|
+
gap: 1rem;
|
|
229
|
+
}
|
|
230
|
+
qti-test qti-test-nav qti-test-check,
|
|
231
|
+
qti-test qti-test-nav qti-test-score,
|
|
232
|
+
qti-test qti-test-nav qti-test-prev,
|
|
233
|
+
qti-test qti-test-nav qti-test-show-correct,
|
|
234
|
+
qti-test qti-test-nav qti-test-next {
|
|
235
|
+
display: flex;
|
|
236
|
+
align-items: center;
|
|
237
|
+
justify-content: center;
|
|
238
|
+
padding: 5px 10px;
|
|
239
|
+
border-radius: 3px;
|
|
240
|
+
color: rgb(56, 56, 56);
|
|
241
|
+
text-decoration: none;
|
|
242
|
+
display: inline-block;
|
|
243
|
+
padding: 8px 16px;
|
|
244
|
+
border: 0;
|
|
245
|
+
background: #eeeeee;
|
|
246
|
+
color: rgb(83, 83, 83);
|
|
247
|
+
cursor: pointer;
|
|
248
|
+
font-size: 16px;
|
|
249
|
+
font-weight: 700;
|
|
250
|
+
}
|
|
251
|
+
qti-test qti-test-nav qti-test-check:hover,
|
|
252
|
+
qti-test qti-test-nav qti-test-score:hover,
|
|
253
|
+
qti-test qti-test-nav qti-test-prev:hover,
|
|
254
|
+
qti-test qti-test-nav qti-test-show-correct:hover,
|
|
255
|
+
qti-test qti-test-nav qti-test-next:hover {
|
|
256
|
+
background: #dadada;
|
|
257
|
+
transition: all 0.3s ease;
|
|
258
|
+
}
|
|
259
|
+
qti-test qti-test-nav qti-test-check:active,
|
|
260
|
+
qti-test qti-test-nav qti-test-score:active,
|
|
261
|
+
qti-test qti-test-nav qti-test-prev:active,
|
|
262
|
+
qti-test qti-test-nav qti-test-show-correct:active,
|
|
263
|
+
qti-test qti-test-nav qti-test-next:active {
|
|
264
|
+
background: #aeaeae;
|
|
265
|
+
}
|
|
266
|
+
qti-test qti-test-nav qti-test-progress {
|
|
267
|
+
display: flex;
|
|
268
|
+
overflow-x: scroll;
|
|
269
|
+
}
|
|
270
|
+
qti-test qti-test-nav qti-test-progress qti-test-item {
|
|
271
|
+
display: flex;
|
|
272
|
+
align-items: center;
|
|
273
|
+
justify-content: center;
|
|
274
|
+
padding: 5px 10px;
|
|
275
|
+
border-radius: 3px;
|
|
276
|
+
color: rgb(56, 56, 56);
|
|
277
|
+
text-decoration: none;
|
|
278
|
+
display: inline-block;
|
|
279
|
+
padding: 8px 16px;
|
|
280
|
+
border: 0;
|
|
281
|
+
background: #eeeeee;
|
|
282
|
+
color: rgb(83, 83, 83);
|
|
283
|
+
cursor: pointer;
|
|
284
|
+
font-size: 16px;
|
|
285
|
+
font-weight: 700;
|
|
286
|
+
}
|
|
287
|
+
qti-test qti-test-nav qti-test-progress qti-test-item:hover {
|
|
288
|
+
background: #dadada;
|
|
289
|
+
transition: all 0.3s ease;
|
|
290
|
+
}
|
|
291
|
+
qti-test qti-test-nav qti-test-progress qti-test-item:active {
|
|
292
|
+
background: #aeaeae;
|
|
293
|
+
}
|
|
294
|
+
qti-test qti-test-nav qti-test-progress qti-test-item[checked] {
|
|
295
|
+
background: darkblue;
|
|
296
|
+
color: white;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
qti-modal-feedback[showstatus=on] {
|
|
300
|
+
position: absolute;
|
|
301
|
+
top: 2rem;
|
|
302
|
+
right: 0;
|
|
303
|
+
left: 0;
|
|
304
|
+
width: 400px;
|
|
305
|
+
height: 300px;
|
|
306
|
+
border: 1px solid #ddd;
|
|
307
|
+
border-radius: 10px;
|
|
308
|
+
margin-right: auto;
|
|
309
|
+
margin-left: auto;
|
|
310
|
+
background-color: white;
|
|
311
|
+
text-align: center;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.qti-theme-raised {
|
|
315
|
+
/* < usabled classes to extend in qti-components > */
|
|
316
|
+
}
|
|
317
|
+
.qti-theme-raised qti-text-entry-interaction, .qti-theme-raised qti-extended-text-interaction {
|
|
318
|
+
position: relative;
|
|
319
|
+
display: inline-block;
|
|
320
|
+
border-radius: var(--qti-border-radius);
|
|
321
|
+
color: var(--qti-text-color);
|
|
322
|
+
background: var(--qti-background);
|
|
323
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
|
|
324
|
+
border-radius: calc(var(--qti-border-radius) * 3);
|
|
325
|
+
}
|
|
326
|
+
.qti-theme-raised qti-text-entry-interaction[disabled], .qti-theme-raised qti-extended-text-interaction[disabled] {
|
|
327
|
+
box-shadow: unset !important;
|
|
328
|
+
color: var(--qti-border-color);
|
|
329
|
+
cursor: unset !important;
|
|
330
|
+
}
|
|
331
|
+
.qti-theme-raised qti-text-entry-interaction:focus, .qti-theme-raised qti-extended-text-interaction:focus {
|
|
332
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
333
|
+
outline-offset: 2px;
|
|
334
|
+
outline-style: solid;
|
|
335
|
+
outline-width: var(--qti-border-width);
|
|
336
|
+
}
|
|
337
|
+
.qti-theme-raised qti-text-entry-interaction:hover:not([disabled]), .qti-theme-raised qti-extended-text-interaction:hover:not([disabled]) {
|
|
338
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
339
|
+
outline-offset: 0;
|
|
340
|
+
outline-style: solid;
|
|
341
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
342
|
+
}
|
|
343
|
+
.qti-theme-raised .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-raised qti-hottext, .qti-theme-raised .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-raised qti-simple-choice {
|
|
344
|
+
position: relative;
|
|
345
|
+
display: inline-block;
|
|
346
|
+
border-radius: var(--qti-border-radius);
|
|
347
|
+
color: var(--qti-text-color);
|
|
348
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
349
|
+
cursor: pointer;
|
|
350
|
+
background: var(--qti-background);
|
|
351
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
|
|
352
|
+
border-radius: calc(var(--qti-border-radius) * 3);
|
|
353
|
+
}
|
|
354
|
+
.qti-theme-raised .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-raised qti-hottext[disabled], .qti-theme-raised .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[disabled] {
|
|
355
|
+
box-shadow: unset !important;
|
|
356
|
+
color: var(--qti-border-color);
|
|
357
|
+
cursor: unset !important;
|
|
358
|
+
}
|
|
359
|
+
.qti-theme-raised .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-raised qti-hottext:focus, .qti-theme-raised .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-raised qti-simple-choice:focus {
|
|
360
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
361
|
+
outline-offset: 2px;
|
|
362
|
+
outline-style: solid;
|
|
363
|
+
outline-width: var(--qti-border-width);
|
|
364
|
+
}
|
|
365
|
+
.qti-theme-raised .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-hottext:hover:not([disabled]), .qti-theme-raised .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-simple-choice:hover:not([disabled]) {
|
|
366
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
367
|
+
outline-offset: 0;
|
|
368
|
+
outline-style: solid;
|
|
369
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
370
|
+
}
|
|
371
|
+
.qti-theme-raised .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-hottext[aria-checked=true], .qti-theme-raised .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[aria-checked=true] {
|
|
372
|
+
--qti-border-color: var(--qti-primary-color);
|
|
373
|
+
}
|
|
374
|
+
.qti-theme-raised qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice {
|
|
375
|
+
cursor: pointer;
|
|
376
|
+
background: var(--qti-background);
|
|
377
|
+
}
|
|
378
|
+
.qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[disabled], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[disabled] {
|
|
379
|
+
box-shadow: unset !important;
|
|
380
|
+
color: var(--qti-border-color);
|
|
381
|
+
cursor: unset !important;
|
|
382
|
+
}
|
|
383
|
+
.qti-theme-raised qti-hotspot-interaction qti-hotspot-choice:focus, qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice:focus {
|
|
384
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
385
|
+
outline-offset: 2px;
|
|
386
|
+
outline-style: solid;
|
|
387
|
+
outline-width: var(--qti-border-width);
|
|
388
|
+
}
|
|
389
|
+
.qti-theme-raised qti-hotspot-interaction qti-hotspot-choice:hover:not([disabled]), qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice:hover:not([disabled]) {
|
|
390
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
391
|
+
outline-offset: 0;
|
|
392
|
+
outline-style: solid;
|
|
393
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
394
|
+
}
|
|
395
|
+
.qti-theme-raised qti-hotspot-interaction qti-hotspot-choice[aria-checked=true], qti-hotspot-interaction .qti-theme-raised qti-hotspot-choice[aria-checked=true] {
|
|
396
|
+
--qti-border-color: var(--qti-primary-color);
|
|
397
|
+
}
|
|
398
|
+
.qti-theme-raised qti-hottext, .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice, .qti-theme-raised qti-simple-choice {
|
|
399
|
+
cursor: pointer;
|
|
400
|
+
--width: 22px;
|
|
401
|
+
--height: 22px;
|
|
402
|
+
display: inline-flex;
|
|
403
|
+
width: fit-content;
|
|
404
|
+
align-items: center;
|
|
405
|
+
gap: 0.2rem;
|
|
406
|
+
}
|
|
407
|
+
.qti-theme-raised qti-hottext[disabled], .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[disabled], .qti-theme-raised qti-simple-choice[disabled] {
|
|
408
|
+
box-shadow: unset !important;
|
|
409
|
+
color: var(--qti-border-color);
|
|
410
|
+
cursor: unset !important;
|
|
411
|
+
}
|
|
412
|
+
.qti-theme-raised qti-hottext:focus, .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:focus, .qti-theme-raised qti-simple-choice:focus {
|
|
413
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
414
|
+
outline-offset: 2px;
|
|
415
|
+
outline-style: solid;
|
|
416
|
+
outline-width: var(--qti-border-width);
|
|
417
|
+
}
|
|
418
|
+
.qti-theme-raised qti-hottext:hover:not([disabled]), .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:hover:not([disabled]), .qti-theme-raised qti-simple-choice:hover:not([disabled]) {
|
|
419
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
420
|
+
outline-offset: 0;
|
|
421
|
+
outline-style: solid;
|
|
422
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
423
|
+
}
|
|
424
|
+
.qti-theme-raised qti-hottext::before, .qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice::before, .qti-theme-raised qti-simple-choice::before {
|
|
425
|
+
position: relative;
|
|
426
|
+
display: inline-block;
|
|
427
|
+
border-radius: var(--qti-border-radius);
|
|
428
|
+
color: var(--qti-text-color);
|
|
429
|
+
background: var(--qti-background);
|
|
430
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
|
|
431
|
+
}
|
|
432
|
+
.qti-theme-raised qti-inline-choice-interaction {
|
|
433
|
+
position: relative;
|
|
434
|
+
display: inline-block;
|
|
435
|
+
border-radius: var(--qti-border-radius);
|
|
436
|
+
color: var(--qti-text-color);
|
|
437
|
+
background: var(--qti-background);
|
|
438
|
+
box-shadow: 0 var(--qti-border-width) var(--qti-border-color);
|
|
439
|
+
border-radius: calc(var(--qti-border-radius) * 3);
|
|
440
|
+
}
|
|
441
|
+
.qti-theme-raised qti-inline-choice-interaction[disabled] {
|
|
442
|
+
box-shadow: unset !important;
|
|
443
|
+
color: var(--qti-border-color);
|
|
444
|
+
cursor: unset !important;
|
|
445
|
+
}
|
|
446
|
+
.qti-theme-raised qti-inline-choice-interaction:focus {
|
|
447
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
448
|
+
outline-offset: 2px;
|
|
449
|
+
outline-style: solid;
|
|
450
|
+
outline-width: var(--qti-border-width);
|
|
451
|
+
}
|
|
452
|
+
.qti-theme-raised qti-inline-choice-interaction:hover:not([disabled]) {
|
|
453
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
454
|
+
outline-offset: 0;
|
|
455
|
+
outline-style: solid;
|
|
456
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
457
|
+
}
|
|
458
|
+
.qti-theme-raised qti-inline-choice-interaction::after {
|
|
459
|
+
border-left: 5px solid transparent;
|
|
460
|
+
border-right: 5px solid transparent;
|
|
461
|
+
border-top: 8px solid var(--qti-border-color);
|
|
462
|
+
clear: both;
|
|
463
|
+
content: "";
|
|
464
|
+
pointer-events: none;
|
|
465
|
+
position: absolute;
|
|
466
|
+
right: 5%;
|
|
467
|
+
top: calc(50% - 3px);
|
|
468
|
+
}
|
|
469
|
+
.qti-theme-raised qti-order-interaction::part(drop-list), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-raised qti-gap, .qti-theme-raised qti-associate-interaction::part(drop-list) {
|
|
470
|
+
position: relative;
|
|
471
|
+
display: inline-block;
|
|
472
|
+
border-radius: var(--qti-border-radius);
|
|
473
|
+
color: var(--qti-text-color);
|
|
474
|
+
background: var(--qti-background);
|
|
475
|
+
box-shadow: inset 0 var(--qti-border-width) var(--qti-border-color);
|
|
476
|
+
}
|
|
477
|
+
.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:empty::after, .qti-theme-raised qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-raised qti-gap:empty::after {
|
|
478
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
479
|
+
/* when empty, put a space in it, so the height remains the same */
|
|
480
|
+
display: inline-block;
|
|
481
|
+
content: "\xA0";
|
|
482
|
+
}
|
|
483
|
+
.qti-theme-raised qti-order-interaction:not(:empty)::part(drop-list), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:not(:empty), .qti-theme-raised qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-raised qti-gap:not(:empty), .qti-theme-raised qti-associate-interaction:not(:empty)::part(drop-list) {
|
|
484
|
+
display: flex;
|
|
485
|
+
}
|
|
486
|
+
.qti-theme-raised qti-order-interaction:not(:empty)::part(drop-list) > *, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:not(:empty) > *, .qti-theme-raised qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-raised qti-gap:not(:empty) > *, .qti-theme-raised qti-associate-interaction:not(:empty)::part(drop-list) > * {
|
|
487
|
+
box-shadow: unset;
|
|
488
|
+
flex-grow: 1;
|
|
489
|
+
margin: 2px;
|
|
490
|
+
}
|
|
491
|
+
.qti-theme-raised qti-order-interaction[active]::part(drop-list), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice[active], .qti-theme-raised qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-raised qti-gap[active], .qti-theme-raised qti-associate-interaction[active]::part(drop-list) {
|
|
492
|
+
background: var(--qti-background);
|
|
493
|
+
}
|
|
494
|
+
.qti-theme-raised qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-raised qti-simple-choice, .qti-theme-raised qti-order-interaction::part(qti-simple-choice), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice, .qti-theme-raised qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-raised qti-gap-text, .qti-theme-raised qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-associate-interaction::part(qti-simple-associable-choice) {
|
|
495
|
+
position: relative;
|
|
496
|
+
display: inline-block;
|
|
497
|
+
border-radius: var(--qti-border-radius);
|
|
498
|
+
color: var(--qti-text-color);
|
|
499
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
500
|
+
cursor: pointer;
|
|
501
|
+
background: var(--qti-background);
|
|
502
|
+
user-select: none;
|
|
503
|
+
box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
|
|
504
|
+
}
|
|
505
|
+
.qti-theme-raised qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-raised qti-simple-choice[disabled], .qti-theme-raised qti-order-interaction[disabled]::part(qti-simple-choice), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice[disabled], .qti-theme-raised qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-raised qti-gap-text[disabled], .qti-theme-raised qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
|
|
506
|
+
box-shadow: unset !important;
|
|
507
|
+
color: var(--qti-border-color);
|
|
508
|
+
cursor: unset !important;
|
|
509
|
+
}
|
|
510
|
+
.qti-theme-raised qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-raised qti-simple-choice:focus, .qti-theme-raised qti-order-interaction:focus::part(qti-simple-choice), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice:focus, .qti-theme-raised qti-gap-match-interaction qti-gap-text:focus, qti-gap-match-interaction .qti-theme-raised qti-gap-text:focus, .qti-theme-raised qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-associate-interaction:focus::part(qti-simple-associable-choice) {
|
|
511
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
512
|
+
outline-offset: 2px;
|
|
513
|
+
outline-style: solid;
|
|
514
|
+
outline-width: var(--qti-border-width);
|
|
515
|
+
}
|
|
516
|
+
.qti-theme-raised qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-raised qti-simple-choice:hover:not([disabled]), .qti-theme-raised qti-order-interaction:hover:not([disabled])::part(qti-simple-choice), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-raised qti-gap-text:hover:not([disabled]), .qti-theme-raised qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
|
|
517
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
518
|
+
outline-offset: 0;
|
|
519
|
+
outline-style: solid;
|
|
520
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
521
|
+
}
|
|
522
|
+
.qti-theme-raised qti-order-interaction qti-simple-choice::before, qti-order-interaction .qti-theme-raised qti-simple-choice::before, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice::before, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice::before, .qti-theme-raised qti-gap-match-interaction qti-gap-text::before, qti-gap-match-interaction .qti-theme-raised qti-gap-text::before, .qti-theme-raised qti-associate-interaction qti-simple-associable-choice::before, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice::before {
|
|
523
|
+
position: absolute;
|
|
524
|
+
bottom: 0.2rem;
|
|
525
|
+
top: 0.2rem;
|
|
526
|
+
left: 0.2rem;
|
|
527
|
+
width: 0.3rem;
|
|
528
|
+
max-height: 2rem;
|
|
529
|
+
background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
|
|
530
|
+
background-repeat: repeat;
|
|
531
|
+
background-size: 0.3rem 0.3rem;
|
|
532
|
+
content: "";
|
|
533
|
+
}
|
|
534
|
+
.qti-theme-raised qti-slider-interaction[disabled] {
|
|
535
|
+
box-shadow: unset !important;
|
|
536
|
+
color: var(--qti-border-color);
|
|
537
|
+
cursor: unset !important;
|
|
538
|
+
}
|
|
539
|
+
.qti-theme-raised qti-slider-interaction:focus {
|
|
540
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
541
|
+
outline-offset: 2px;
|
|
542
|
+
outline-style: solid;
|
|
543
|
+
outline-width: var(--qti-border-width);
|
|
544
|
+
}
|
|
545
|
+
.qti-theme-raised qti-slider-interaction:hover:not([disabled]) {
|
|
546
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
547
|
+
outline-offset: 0;
|
|
548
|
+
outline-style: solid;
|
|
549
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
550
|
+
}
|
|
551
|
+
.qti-theme-raised qti-slider-interaction::before {
|
|
552
|
+
position: relative;
|
|
553
|
+
display: inline-block;
|
|
554
|
+
border-radius: var(--qti-border-radius);
|
|
555
|
+
color: var(--qti-text-color);
|
|
556
|
+
cursor: pointer;
|
|
557
|
+
border-radius: calc(var(--qti-border-radius) * 3);
|
|
558
|
+
background: var(--qti-background);
|
|
559
|
+
box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
/* </ end test classes for storybook> */
|
|
563
|
+
.qti-theme-subtle {
|
|
564
|
+
/* < usabled classes to extend in qti-components */
|
|
565
|
+
}
|
|
566
|
+
.qti-theme-subtle qti-text-entry-interaction, .qti-theme-subtle qti-extended-text-interaction {
|
|
567
|
+
position: relative;
|
|
568
|
+
display: inline-block;
|
|
569
|
+
border-radius: var(--qti-border-radius);
|
|
570
|
+
color: var(--qti-text-color);
|
|
571
|
+
background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
|
|
572
|
+
}
|
|
573
|
+
.qti-theme-subtle qti-text-entry-interaction[disabled], .qti-theme-subtle qti-extended-text-interaction[disabled] {
|
|
574
|
+
--qti-border-color: transparent;
|
|
575
|
+
box-shadow: unset !important;
|
|
576
|
+
color: var(--qti-shadow-color);
|
|
577
|
+
cursor: unset !important;
|
|
578
|
+
}
|
|
579
|
+
.qti-theme-subtle qti-text-entry-interaction:focus, .qti-theme-subtle qti-extended-text-interaction:focus {
|
|
580
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
581
|
+
outline-offset: 2px;
|
|
582
|
+
outline-style: solid;
|
|
583
|
+
outline-width: var(--qti-border-width);
|
|
584
|
+
}
|
|
585
|
+
.qti-theme-subtle qti-text-entry-interaction:hover:not([disabled]), .qti-theme-subtle qti-extended-text-interaction:hover:not([disabled]) {
|
|
586
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
587
|
+
outline-offset: 0;
|
|
588
|
+
outline-style: solid;
|
|
589
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
590
|
+
}
|
|
591
|
+
.qti-theme-subtle .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-subtle qti-hottext, .qti-theme-subtle .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice {
|
|
592
|
+
position: relative;
|
|
593
|
+
display: inline-block;
|
|
594
|
+
border-radius: var(--qti-border-radius);
|
|
595
|
+
color: var(--qti-text-color);
|
|
596
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
597
|
+
cursor: pointer;
|
|
598
|
+
background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
|
|
599
|
+
}
|
|
600
|
+
.qti-theme-subtle .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-subtle qti-hottext[disabled], .qti-theme-subtle .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[disabled] {
|
|
601
|
+
--qti-border-color: transparent;
|
|
602
|
+
box-shadow: unset !important;
|
|
603
|
+
color: var(--qti-shadow-color);
|
|
604
|
+
cursor: unset !important;
|
|
605
|
+
}
|
|
606
|
+
.qti-theme-subtle .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-subtle qti-hottext:focus, .qti-theme-subtle .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:focus {
|
|
607
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
608
|
+
outline-offset: 2px;
|
|
609
|
+
outline-style: solid;
|
|
610
|
+
outline-width: var(--qti-border-width);
|
|
611
|
+
}
|
|
612
|
+
.qti-theme-subtle .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-hottext:hover:not([disabled]), .qti-theme-subtle .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:hover:not([disabled]) {
|
|
613
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
614
|
+
outline-offset: 0;
|
|
615
|
+
outline-style: solid;
|
|
616
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
617
|
+
}
|
|
618
|
+
.qti-theme-subtle .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-hottext[aria-checked=true], .qti-theme-subtle .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[aria-checked=true] {
|
|
619
|
+
--qti-border-color: var(--qti-primary-color);
|
|
620
|
+
background-color: rgb(var(--qti-primary) 0.1);
|
|
621
|
+
}
|
|
622
|
+
.qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice {
|
|
623
|
+
cursor: pointer;
|
|
624
|
+
background: var(--qti-background);
|
|
625
|
+
}
|
|
626
|
+
.qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[disabled], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[disabled] {
|
|
627
|
+
--qti-border-color: transparent;
|
|
628
|
+
box-shadow: unset !important;
|
|
629
|
+
color: var(--qti-shadow-color);
|
|
630
|
+
cursor: unset !important;
|
|
631
|
+
}
|
|
632
|
+
.qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice:focus, qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice:focus {
|
|
633
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
634
|
+
outline-offset: 2px;
|
|
635
|
+
outline-style: solid;
|
|
636
|
+
outline-width: var(--qti-border-width);
|
|
637
|
+
}
|
|
638
|
+
.qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice:hover:not([disabled]), qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice:hover:not([disabled]) {
|
|
639
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
640
|
+
outline-offset: 0;
|
|
641
|
+
outline-style: solid;
|
|
642
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
643
|
+
}
|
|
644
|
+
.qti-theme-subtle qti-hotspot-interaction qti-hotspot-choice[aria-checked=true], qti-hotspot-interaction .qti-theme-subtle qti-hotspot-choice[aria-checked=true] {
|
|
645
|
+
--qti-border-color: var(--qti-primary-color);
|
|
646
|
+
background-color: rgb(var(--qti-primary) 0.1);
|
|
647
|
+
}
|
|
648
|
+
.qti-theme-subtle qti-hottext, .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice, .qti-theme-subtle qti-simple-choice {
|
|
649
|
+
cursor: pointer;
|
|
650
|
+
--width: 22px;
|
|
651
|
+
--height: 22px;
|
|
652
|
+
display: inline-flex;
|
|
653
|
+
width: fit-content;
|
|
654
|
+
align-items: center;
|
|
655
|
+
gap: 0.2rem;
|
|
656
|
+
}
|
|
657
|
+
.qti-theme-subtle qti-hottext[disabled], .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[disabled], .qti-theme-subtle qti-simple-choice[disabled] {
|
|
658
|
+
--qti-border-color: transparent;
|
|
659
|
+
box-shadow: unset !important;
|
|
660
|
+
color: var(--qti-shadow-color);
|
|
661
|
+
cursor: unset !important;
|
|
662
|
+
}
|
|
663
|
+
.qti-theme-subtle qti-hottext:focus, .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:focus, .qti-theme-subtle qti-simple-choice:focus {
|
|
664
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
665
|
+
outline-offset: 2px;
|
|
666
|
+
outline-style: solid;
|
|
667
|
+
outline-width: var(--qti-border-width);
|
|
668
|
+
}
|
|
669
|
+
.qti-theme-subtle qti-hottext:hover:not([disabled]), .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:hover:not([disabled]), .qti-theme-subtle qti-simple-choice:hover:not([disabled]) {
|
|
670
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
671
|
+
outline-offset: 0;
|
|
672
|
+
outline-style: solid;
|
|
673
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
674
|
+
}
|
|
675
|
+
.qti-theme-subtle qti-hottext::before, .qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice::before, .qti-theme-subtle qti-simple-choice::before {
|
|
676
|
+
position: relative;
|
|
677
|
+
display: inline-block;
|
|
678
|
+
border-radius: var(--qti-border-radius);
|
|
679
|
+
color: var(--qti-text-color);
|
|
680
|
+
background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
|
|
681
|
+
}
|
|
682
|
+
.qti-theme-subtle qti-inline-choice-interaction {
|
|
683
|
+
position: relative;
|
|
684
|
+
display: inline-block;
|
|
685
|
+
border-radius: var(--qti-border-radius);
|
|
686
|
+
color: var(--qti-text-color);
|
|
687
|
+
background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
|
|
688
|
+
}
|
|
689
|
+
.qti-theme-subtle qti-inline-choice-interaction[disabled] {
|
|
690
|
+
--qti-border-color: transparent;
|
|
691
|
+
box-shadow: unset !important;
|
|
692
|
+
color: var(--qti-shadow-color);
|
|
693
|
+
cursor: unset !important;
|
|
694
|
+
}
|
|
695
|
+
.qti-theme-subtle qti-inline-choice-interaction:focus {
|
|
696
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
697
|
+
outline-offset: 2px;
|
|
698
|
+
outline-style: solid;
|
|
699
|
+
outline-width: var(--qti-border-width);
|
|
700
|
+
}
|
|
701
|
+
.qti-theme-subtle qti-inline-choice-interaction:hover:not([disabled]) {
|
|
702
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
703
|
+
outline-offset: 0;
|
|
704
|
+
outline-style: solid;
|
|
705
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
706
|
+
}
|
|
707
|
+
.qti-theme-subtle qti-inline-choice-interaction::after {
|
|
708
|
+
border-left: 5px solid transparent;
|
|
709
|
+
border-right: 5px solid transparent;
|
|
710
|
+
border-top: 8px solid var(--qti-border-color);
|
|
711
|
+
clear: both;
|
|
712
|
+
content: "";
|
|
713
|
+
pointer-events: none;
|
|
714
|
+
position: absolute;
|
|
715
|
+
right: 5%;
|
|
716
|
+
top: calc(50% - 3px);
|
|
717
|
+
}
|
|
718
|
+
.qti-theme-subtle qti-order-interaction::part(drop-list), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-subtle qti-gap, .qti-theme-subtle qti-associate-interaction::part(drop-list) {
|
|
719
|
+
position: relative;
|
|
720
|
+
display: inline-block;
|
|
721
|
+
border-radius: var(--qti-border-radius);
|
|
722
|
+
color: var(--qti-text-color);
|
|
723
|
+
background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
|
|
724
|
+
transition: all 0.2s ease-out;
|
|
725
|
+
}
|
|
726
|
+
.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:empty::after, .qti-theme-subtle qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-subtle qti-gap:empty::after {
|
|
727
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
728
|
+
/* when empty, put a space in it, so the height remains the same */
|
|
729
|
+
display: inline-block;
|
|
730
|
+
content: "\xA0";
|
|
731
|
+
}
|
|
732
|
+
.qti-theme-subtle qti-order-interaction:not(:empty)::part(drop-list), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:not(:empty), .qti-theme-subtle qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-subtle qti-gap:not(:empty), .qti-theme-subtle qti-associate-interaction:not(:empty)::part(drop-list) {
|
|
733
|
+
display: flex;
|
|
734
|
+
}
|
|
735
|
+
.qti-theme-subtle qti-order-interaction:not(:empty)::part(drop-list) > *, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:not(:empty) > *, .qti-theme-subtle qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-subtle qti-gap:not(:empty) > *, .qti-theme-subtle qti-associate-interaction:not(:empty)::part(drop-list) > * {
|
|
736
|
+
flex-grow: 1;
|
|
737
|
+
margin: 2px;
|
|
738
|
+
}
|
|
739
|
+
.qti-theme-subtle qti-order-interaction[active]::part(drop-list), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice[active], .qti-theme-subtle qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-subtle qti-gap[active], .qti-theme-subtle qti-associate-interaction[active]::part(drop-list) {
|
|
740
|
+
background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
|
|
741
|
+
transform: scale(1.02);
|
|
742
|
+
}
|
|
743
|
+
.qti-theme-subtle qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-subtle qti-simple-choice, .qti-theme-subtle qti-order-interaction::part(qti-simple-choice), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice, .qti-theme-subtle qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-subtle qti-gap-text, .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-associate-interaction::part(qti-simple-associable-choice) {
|
|
744
|
+
position: relative;
|
|
745
|
+
display: inline-block;
|
|
746
|
+
border-radius: var(--qti-border-radius);
|
|
747
|
+
color: var(--qti-text-color);
|
|
748
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
749
|
+
cursor: pointer;
|
|
750
|
+
user-select: none;
|
|
751
|
+
background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
|
|
752
|
+
}
|
|
753
|
+
.qti-theme-subtle qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-subtle qti-simple-choice[disabled], .qti-theme-subtle qti-order-interaction[disabled]::part(qti-simple-choice), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice[disabled], .qti-theme-subtle qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-subtle qti-gap-text[disabled], .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
|
|
754
|
+
--qti-border-color: transparent;
|
|
755
|
+
box-shadow: unset !important;
|
|
756
|
+
color: var(--qti-shadow-color);
|
|
757
|
+
cursor: unset !important;
|
|
758
|
+
}
|
|
759
|
+
.qti-theme-subtle qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-subtle qti-simple-choice:focus, .qti-theme-subtle qti-order-interaction:focus::part(qti-simple-choice), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice:focus, .qti-theme-subtle qti-gap-match-interaction qti-gap-text:focus, qti-gap-match-interaction .qti-theme-subtle qti-gap-text:focus, .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-associate-interaction:focus::part(qti-simple-associable-choice) {
|
|
760
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
761
|
+
outline-offset: 2px;
|
|
762
|
+
outline-style: solid;
|
|
763
|
+
outline-width: var(--qti-border-width);
|
|
764
|
+
}
|
|
765
|
+
.qti-theme-subtle qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-subtle qti-simple-choice:hover:not([disabled]), .qti-theme-subtle qti-order-interaction:hover:not([disabled])::part(qti-simple-choice), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-subtle qti-gap-text:hover:not([disabled]), .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
|
|
766
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
767
|
+
outline-offset: 0;
|
|
768
|
+
outline-style: solid;
|
|
769
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
770
|
+
}
|
|
771
|
+
.qti-theme-subtle qti-order-interaction qti-simple-choice::before, qti-order-interaction .qti-theme-subtle qti-simple-choice::before, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice::before, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice::before, .qti-theme-subtle qti-gap-match-interaction qti-gap-text::before, qti-gap-match-interaction .qti-theme-subtle qti-gap-text::before, .qti-theme-subtle qti-associate-interaction qti-simple-associable-choice::before, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice::before {
|
|
772
|
+
position: absolute;
|
|
773
|
+
bottom: 0.2rem;
|
|
774
|
+
top: 0.2rem;
|
|
775
|
+
left: 0.2rem;
|
|
776
|
+
width: 0.3rem;
|
|
777
|
+
max-height: 2rem;
|
|
778
|
+
background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
|
|
779
|
+
background-repeat: repeat;
|
|
780
|
+
background-size: 0.3rem 0.3rem;
|
|
781
|
+
content: "";
|
|
782
|
+
}
|
|
783
|
+
.qti-theme-subtle qti-slider-interaction {
|
|
784
|
+
cursor: pointer;
|
|
785
|
+
}
|
|
786
|
+
.qti-theme-subtle qti-slider-interaction[aria-checked=true] {
|
|
787
|
+
--qti-border-color: var(--qti-primary-color);
|
|
788
|
+
background-color: rgb(var(--qti-primary) 0.1);
|
|
789
|
+
}
|
|
790
|
+
.qti-theme-subtle qti-slider-interaction[disabled] {
|
|
791
|
+
--qti-border-color: transparent;
|
|
792
|
+
box-shadow: unset !important;
|
|
793
|
+
color: var(--qti-shadow-color);
|
|
794
|
+
cursor: unset !important;
|
|
795
|
+
}
|
|
796
|
+
.qti-theme-subtle qti-slider-interaction:focus {
|
|
797
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
798
|
+
outline-offset: 2px;
|
|
799
|
+
outline-style: solid;
|
|
800
|
+
outline-width: var(--qti-border-width);
|
|
801
|
+
}
|
|
802
|
+
.qti-theme-subtle qti-slider-interaction:hover:not([disabled]) {
|
|
803
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
804
|
+
outline-offset: 0;
|
|
805
|
+
outline-style: solid;
|
|
806
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
807
|
+
}
|
|
808
|
+
.qti-theme-subtle qti-slider-interaction::before {
|
|
809
|
+
position: relative;
|
|
810
|
+
display: inline-block;
|
|
811
|
+
border-radius: var(--qti-border-radius);
|
|
812
|
+
color: var(--qti-text-color);
|
|
813
|
+
cursor: pointer;
|
|
814
|
+
background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.qti-theme-ims {
|
|
818
|
+
/* < usabled classes to extend in qti-components > */
|
|
819
|
+
}
|
|
820
|
+
.qti-theme-ims qti-text-entry-interaction, .qti-theme-ims qti-extended-text-interaction {
|
|
821
|
+
position: relative;
|
|
822
|
+
display: inline-block;
|
|
823
|
+
border-radius: var(--qti-border-radius);
|
|
824
|
+
color: var(--qti-text-color);
|
|
825
|
+
background: var(--qti-background);
|
|
826
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
|
|
827
|
+
}
|
|
828
|
+
.qti-theme-ims qti-text-entry-interaction[disabled], .qti-theme-ims qti-extended-text-interaction[disabled] {
|
|
829
|
+
--qti-border-color: var(--qti-shadow-color);
|
|
830
|
+
color: var(--qti-shadow-color);
|
|
831
|
+
cursor: unset !important;
|
|
832
|
+
filter: grayscale(100%);
|
|
833
|
+
}
|
|
834
|
+
.qti-theme-ims qti-text-entry-interaction:focus-within, .qti-theme-ims qti-extended-text-interaction:focus-within {
|
|
835
|
+
outline-color: rgb(var(--qti-primary) 0.6);
|
|
836
|
+
outline-offset: 4px;
|
|
837
|
+
outline-style: solid;
|
|
838
|
+
outline-width: var(--qti-border-width);
|
|
839
|
+
/* applies to all before elements, choice round and circle, slider thumb */
|
|
840
|
+
}
|
|
841
|
+
.qti-theme-ims qti-text-entry-interaction:focus-within::before, .qti-theme-ims qti-extended-text-interaction:focus-within::before {
|
|
842
|
+
background-color: rgb(var(--qti-primary) 0.2);
|
|
843
|
+
}
|
|
844
|
+
.qti-theme-ims qti-text-entry-interaction:hover:not([disabled]), .qti-theme-ims qti-extended-text-interaction:hover:not([disabled]) {
|
|
845
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
846
|
+
outline-offset: 2px;
|
|
847
|
+
outline-style: solid;
|
|
848
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
849
|
+
}
|
|
850
|
+
.qti-theme-ims .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-ims qti-hottext, .qti-theme-ims .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-ims qti-simple-choice {
|
|
851
|
+
position: relative;
|
|
852
|
+
display: inline-block;
|
|
853
|
+
border-radius: var(--qti-border-radius);
|
|
854
|
+
color: var(--qti-text-color);
|
|
855
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
856
|
+
cursor: pointer;
|
|
857
|
+
background: var(--qti-background);
|
|
858
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
|
|
859
|
+
}
|
|
860
|
+
.qti-theme-ims .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-ims qti-hottext[disabled], .qti-theme-ims .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[disabled] {
|
|
861
|
+
--qti-border-color: var(--qti-shadow-color);
|
|
862
|
+
color: var(--qti-shadow-color);
|
|
863
|
+
cursor: unset !important;
|
|
864
|
+
filter: grayscale(100%);
|
|
865
|
+
}
|
|
866
|
+
.qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within, .qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within {
|
|
867
|
+
outline-color: rgb(var(--qti-primary) 0.6);
|
|
868
|
+
outline-offset: 4px;
|
|
869
|
+
outline-style: solid;
|
|
870
|
+
outline-width: var(--qti-border-width);
|
|
871
|
+
/* applies to all before elements, choice round and circle, slider thumb */
|
|
872
|
+
}
|
|
873
|
+
.qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within::before, .qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within::before {
|
|
874
|
+
background-color: rgb(var(--qti-primary) 0.2);
|
|
875
|
+
}
|
|
876
|
+
.qti-theme-ims .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-hottext:hover:not([disabled]), .qti-theme-ims .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-simple-choice:hover:not([disabled]) {
|
|
877
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
878
|
+
outline-offset: 2px;
|
|
879
|
+
outline-style: solid;
|
|
880
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
881
|
+
}
|
|
882
|
+
.qti-theme-ims .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-hottext[aria-checked=true], .qti-theme-ims .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[aria-checked=true] {
|
|
883
|
+
--qti-border-color: var(--qti-primary-color);
|
|
884
|
+
background-color: var(--qti-primary-color);
|
|
885
|
+
color: #fff;
|
|
886
|
+
}
|
|
887
|
+
.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice {
|
|
888
|
+
cursor: pointer;
|
|
889
|
+
background: var(--qti-background);
|
|
890
|
+
}
|
|
891
|
+
.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[disabled], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[disabled] {
|
|
892
|
+
--qti-border-color: var(--qti-shadow-color);
|
|
893
|
+
color: var(--qti-shadow-color);
|
|
894
|
+
cursor: unset !important;
|
|
895
|
+
filter: grayscale(100%);
|
|
896
|
+
}
|
|
897
|
+
.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:focus-within, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:focus-within {
|
|
898
|
+
outline-color: rgb(var(--qti-primary) 0.6);
|
|
899
|
+
outline-offset: 4px;
|
|
900
|
+
outline-style: solid;
|
|
901
|
+
outline-width: var(--qti-border-width);
|
|
902
|
+
/* applies to all before elements, choice round and circle, slider thumb */
|
|
903
|
+
}
|
|
904
|
+
.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:focus-within::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before {
|
|
905
|
+
background-color: rgb(var(--qti-primary) 0.2);
|
|
906
|
+
}
|
|
907
|
+
.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:hover:not([disabled]), qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]) {
|
|
908
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
909
|
+
outline-offset: 2px;
|
|
910
|
+
outline-style: solid;
|
|
911
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
912
|
+
}
|
|
913
|
+
.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[aria-checked=true], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[aria-checked=true] {
|
|
914
|
+
--qti-border-color: var(--qti-primary-color);
|
|
915
|
+
background-color: var(--qti-primary-color);
|
|
916
|
+
color: #fff;
|
|
917
|
+
}
|
|
918
|
+
.qti-theme-ims qti-hottext, .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice, .qti-theme-ims qti-simple-choice {
|
|
919
|
+
cursor: pointer;
|
|
920
|
+
--width: 22px;
|
|
921
|
+
--height: 22px;
|
|
922
|
+
display: inline-flex;
|
|
923
|
+
width: fit-content;
|
|
924
|
+
align-items: center;
|
|
925
|
+
gap: 0.2rem;
|
|
926
|
+
}
|
|
927
|
+
.qti-theme-ims qti-hottext[disabled], .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[disabled], .qti-theme-ims qti-simple-choice[disabled] {
|
|
928
|
+
--qti-border-color: var(--qti-shadow-color);
|
|
929
|
+
color: var(--qti-shadow-color);
|
|
930
|
+
cursor: unset !important;
|
|
931
|
+
filter: grayscale(100%);
|
|
932
|
+
}
|
|
933
|
+
.qti-theme-ims qti-hottext:focus-within, .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within, .qti-theme-ims qti-simple-choice:focus-within {
|
|
934
|
+
outline-color: rgb(var(--qti-primary) 0.6);
|
|
935
|
+
outline-offset: 4px;
|
|
936
|
+
outline-style: solid;
|
|
937
|
+
outline-width: var(--qti-border-width);
|
|
938
|
+
/* applies to all before elements, choice round and circle, slider thumb */
|
|
939
|
+
}
|
|
940
|
+
.qti-theme-ims qti-hottext:focus-within::before, .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within::before, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before, .qti-theme-ims qti-simple-choice:focus-within::before {
|
|
941
|
+
background-color: rgb(var(--qti-primary) 0.2);
|
|
942
|
+
}
|
|
943
|
+
.qti-theme-ims qti-hottext:hover:not([disabled]), .qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]), .qti-theme-ims qti-simple-choice:hover:not([disabled]) {
|
|
944
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
945
|
+
outline-offset: 2px;
|
|
946
|
+
outline-style: solid;
|
|
947
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
948
|
+
}
|
|
949
|
+
.qti-theme-ims qti-hottext[role=checkbox]::before, .qti-theme-ims qti-simple-choice[role=checkbox]::before {
|
|
950
|
+
content: "";
|
|
951
|
+
min-height: var(--width);
|
|
952
|
+
min-width: var(--width);
|
|
953
|
+
transition: border-radius 1s ease-in;
|
|
954
|
+
}
|
|
955
|
+
.qti-theme-ims qti-hottext[role=checkbox]::after, .qti-theme-ims qti-simple-choice[role=checkbox]::after {
|
|
956
|
+
border-bottom: 3px solid var(--qti-primary-color);
|
|
957
|
+
border-left: 3px solid var(--qti-primary-color);
|
|
958
|
+
content: "";
|
|
959
|
+
display: inline-block;
|
|
960
|
+
height: 6px;
|
|
961
|
+
opacity: 0;
|
|
962
|
+
position: absolute;
|
|
963
|
+
transform: translate(6px, -2px) rotate(-45deg);
|
|
964
|
+
transition: all 0.2s ease;
|
|
965
|
+
width: 10px;
|
|
966
|
+
}
|
|
967
|
+
.qti-theme-ims qti-hottext[role=checkbox][aria-checked=true]::after, .qti-theme-ims qti-simple-choice[role=checkbox][aria-checked=true]::after {
|
|
968
|
+
border-bottom: 2px solid var(--qti-primary-color);
|
|
969
|
+
border-left: 2px solid var(--qti-primary-color);
|
|
970
|
+
opacity: 1;
|
|
971
|
+
}
|
|
972
|
+
.qti-theme-ims qti-hottext[role=radio]::before, .qti-theme-ims qti-simple-choice[role=radio]::before {
|
|
973
|
+
border-radius: 100%;
|
|
974
|
+
content: "";
|
|
975
|
+
min-height: 22px;
|
|
976
|
+
min-width: 22px;
|
|
977
|
+
}
|
|
978
|
+
.qti-theme-ims qti-hottext[role=radio]::after, .qti-theme-ims qti-simple-choice[role=radio]::after {
|
|
979
|
+
background: var(--qti-primary-color);
|
|
980
|
+
border-radius: 100%;
|
|
981
|
+
content: "";
|
|
982
|
+
display: inline-block;
|
|
983
|
+
height: 14px;
|
|
984
|
+
margin-left: 4px;
|
|
985
|
+
opacity: 0;
|
|
986
|
+
position: absolute;
|
|
987
|
+
transform: scale(0.8);
|
|
988
|
+
transition: all 0.1s ease-out;
|
|
989
|
+
width: 14px;
|
|
990
|
+
}
|
|
991
|
+
.qti-theme-ims qti-hottext[role=radio][aria-checked=true]::after, .qti-theme-ims qti-simple-choice[role=radio][aria-checked=true]::after {
|
|
992
|
+
opacity: 1;
|
|
993
|
+
transform: scale(1);
|
|
994
|
+
}
|
|
995
|
+
.qti-theme-ims qti-hottext::before, .qti-theme-ims qti-simple-choice::before {
|
|
996
|
+
position: relative;
|
|
997
|
+
display: inline-block;
|
|
998
|
+
border-radius: var(--qti-border-radius);
|
|
999
|
+
color: var(--qti-text-color);
|
|
1000
|
+
background: var(--qti-background);
|
|
1001
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
|
|
1002
|
+
}
|
|
1003
|
+
.qti-theme-ims qti-inline-choice-interaction {
|
|
1004
|
+
position: relative;
|
|
1005
|
+
display: inline-block;
|
|
1006
|
+
border-radius: var(--qti-border-radius);
|
|
1007
|
+
color: var(--qti-text-color);
|
|
1008
|
+
cursor: pointer;
|
|
1009
|
+
background: var(--qti-background);
|
|
1010
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
|
|
1011
|
+
}
|
|
1012
|
+
.qti-theme-ims qti-inline-choice-interaction[disabled] {
|
|
1013
|
+
--qti-border-color: var(--qti-shadow-color);
|
|
1014
|
+
color: var(--qti-shadow-color);
|
|
1015
|
+
cursor: unset !important;
|
|
1016
|
+
filter: grayscale(100%);
|
|
1017
|
+
}
|
|
1018
|
+
.qti-theme-ims qti-inline-choice-interaction:focus-within {
|
|
1019
|
+
outline-color: rgb(var(--qti-primary) 0.6);
|
|
1020
|
+
outline-offset: 4px;
|
|
1021
|
+
outline-style: solid;
|
|
1022
|
+
outline-width: var(--qti-border-width);
|
|
1023
|
+
/* applies to all before elements, choice round and circle, slider thumb */
|
|
1024
|
+
}
|
|
1025
|
+
.qti-theme-ims qti-inline-choice-interaction:focus-within::before {
|
|
1026
|
+
background-color: rgb(var(--qti-primary) 0.2);
|
|
1027
|
+
}
|
|
1028
|
+
.qti-theme-ims qti-inline-choice-interaction:hover:not([disabled]) {
|
|
1029
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
1030
|
+
outline-offset: 2px;
|
|
1031
|
+
outline-style: solid;
|
|
1032
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
1033
|
+
}
|
|
1034
|
+
.qti-theme-ims qti-inline-choice-interaction::after {
|
|
1035
|
+
border-left: 5px solid transparent;
|
|
1036
|
+
border-right: 5px solid transparent;
|
|
1037
|
+
border-top: 8px solid var(--qti-border-color);
|
|
1038
|
+
clear: both;
|
|
1039
|
+
content: "";
|
|
1040
|
+
pointer-events: none;
|
|
1041
|
+
position: absolute;
|
|
1042
|
+
right: 5%;
|
|
1043
|
+
top: calc(50% - 3px);
|
|
1044
|
+
}
|
|
1045
|
+
.qti-theme-ims qti-order-interaction::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-ims qti-gap, .qti-theme-ims qti-associate-interaction::part(drop-list) {
|
|
1046
|
+
position: relative;
|
|
1047
|
+
display: inline-block;
|
|
1048
|
+
border-radius: var(--qti-border-radius);
|
|
1049
|
+
color: var(--qti-text-color);
|
|
1050
|
+
border-radius: 0;
|
|
1051
|
+
background: var(--qti-white);
|
|
1052
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
|
|
1053
|
+
}
|
|
1054
|
+
.qti-theme-ims qti-order-interaction[disabled]::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-gap-match-interaction qti-gap[disabled], qti-gap-match-interaction .qti-theme-ims qti-gap[disabled], .qti-theme-ims qti-associate-interaction[disabled]::part(drop-list) {
|
|
1055
|
+
--qti-border-color: var(--qti-shadow-color);
|
|
1056
|
+
color: var(--qti-shadow-color);
|
|
1057
|
+
cursor: unset !important;
|
|
1058
|
+
filter: grayscale(100%);
|
|
1059
|
+
}
|
|
1060
|
+
.qti-theme-ims qti-order-interaction:focus-within::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-gap-match-interaction qti-gap:focus-within, qti-gap-match-interaction .qti-theme-ims qti-gap:focus-within, .qti-theme-ims qti-associate-interaction:focus-within::part(drop-list) {
|
|
1061
|
+
outline-color: rgb(var(--qti-primary) 0.6);
|
|
1062
|
+
outline-offset: 4px;
|
|
1063
|
+
outline-style: solid;
|
|
1064
|
+
outline-width: var(--qti-border-width);
|
|
1065
|
+
/* applies to all before elements, choice round and circle, slider thumb */
|
|
1066
|
+
}
|
|
1067
|
+
.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-gap-match-interaction qti-gap:focus-within::before, qti-gap-match-interaction .qti-theme-ims qti-gap:focus-within::before {
|
|
1068
|
+
background-color: rgb(var(--qti-primary) 0.2);
|
|
1069
|
+
}
|
|
1070
|
+
.qti-theme-ims qti-order-interaction:hover:not([disabled])::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-gap-match-interaction qti-gap:hover:not([disabled]), qti-gap-match-interaction .qti-theme-ims qti-gap:hover:not([disabled]), .qti-theme-ims qti-associate-interaction:hover:not([disabled])::part(drop-list) {
|
|
1071
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
1072
|
+
outline-offset: 2px;
|
|
1073
|
+
outline-style: solid;
|
|
1074
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
1075
|
+
}
|
|
1076
|
+
.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:empty::after, .qti-theme-ims qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-ims qti-gap:empty::after {
|
|
1077
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
1078
|
+
/* when empty, put a space in it, so the height remains the same */
|
|
1079
|
+
display: inline-block;
|
|
1080
|
+
content: "\xA0";
|
|
1081
|
+
}
|
|
1082
|
+
.qti-theme-ims qti-order-interaction:not(:empty)::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:not(:empty), .qti-theme-ims qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-ims qti-gap:not(:empty), .qti-theme-ims qti-associate-interaction:not(:empty)::part(drop-list) {
|
|
1083
|
+
display: inline-flex;
|
|
1084
|
+
}
|
|
1085
|
+
.qti-theme-ims qti-order-interaction:not(:empty)::part(drop-list) > *, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:not(:empty) > *, .qti-theme-ims qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-ims qti-gap:not(:empty) > *, .qti-theme-ims qti-associate-interaction:not(:empty)::part(drop-list) > * {
|
|
1086
|
+
flex-grow: 1;
|
|
1087
|
+
margin: 2px;
|
|
1088
|
+
}
|
|
1089
|
+
.qti-theme-ims qti-order-interaction[active]::part(drop-list), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-ims qti-gap[active], .qti-theme-ims qti-associate-interaction[active]::part(drop-list) {
|
|
1090
|
+
background: rgb(var(--qti-primary) 0.4) !important;
|
|
1091
|
+
}
|
|
1092
|
+
.qti-theme-ims qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-ims qti-simple-choice, .qti-theme-ims qti-order-interaction::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice, .qti-theme-ims qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-ims qti-gap-text, .qti-theme-ims qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-associate-interaction::part(qti-simple-associable-choice) {
|
|
1093
|
+
position: relative;
|
|
1094
|
+
display: inline-block;
|
|
1095
|
+
border-radius: var(--qti-border-radius);
|
|
1096
|
+
color: var(--qti-text-color);
|
|
1097
|
+
cursor: pointer;
|
|
1098
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
1099
|
+
background: var(--qti-background);
|
|
1100
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
|
|
1101
|
+
}
|
|
1102
|
+
.qti-theme-ims qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-ims qti-simple-choice[disabled], .qti-theme-ims qti-order-interaction[disabled]::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice[disabled], .qti-theme-ims qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-ims qti-gap-text[disabled], .qti-theme-ims qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
|
|
1103
|
+
--qti-border-color: var(--qti-shadow-color);
|
|
1104
|
+
color: var(--qti-shadow-color);
|
|
1105
|
+
cursor: unset !important;
|
|
1106
|
+
filter: grayscale(100%);
|
|
1107
|
+
}
|
|
1108
|
+
.qti-theme-ims qti-order-interaction qti-simple-choice:focus-within, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within, .qti-theme-ims qti-order-interaction:focus-within::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:focus-within, .qti-theme-ims qti-gap-match-interaction qti-gap-text:focus-within, qti-gap-match-interaction .qti-theme-ims qti-gap-text:focus-within, .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-associate-interaction:focus-within::part(qti-simple-associable-choice) {
|
|
1109
|
+
outline-color: rgb(var(--qti-primary) 0.6);
|
|
1110
|
+
outline-offset: 4px;
|
|
1111
|
+
outline-style: solid;
|
|
1112
|
+
outline-width: var(--qti-border-width);
|
|
1113
|
+
/* applies to all before elements, choice round and circle, slider thumb */
|
|
1114
|
+
}
|
|
1115
|
+
.qti-theme-ims qti-order-interaction qti-simple-choice:focus-within::before, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within::before, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-gap-match-interaction qti-gap-text:focus-within::before, qti-gap-match-interaction .qti-theme-ims qti-gap-text:focus-within::before, .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within::before, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within::before {
|
|
1116
|
+
background-color: rgb(var(--qti-primary) 0.2);
|
|
1117
|
+
}
|
|
1118
|
+
.qti-theme-ims qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-ims qti-simple-choice:hover:not([disabled]), .qti-theme-ims qti-order-interaction:hover:not([disabled])::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-ims qti-gap-text:hover:not([disabled]), .qti-theme-ims qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
|
|
1119
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
1120
|
+
outline-offset: 2px;
|
|
1121
|
+
outline-style: solid;
|
|
1122
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
1123
|
+
}
|
|
1124
|
+
.qti-theme-ims qti-order-interaction qti-simple-choice[active], qti-order-interaction .qti-theme-ims qti-simple-choice[active], .qti-theme-ims qti-order-interaction[active]::part(qti-simple-choice), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice[active], .qti-theme-ims qti-gap-match-interaction qti-gap-text[active], qti-gap-match-interaction .qti-theme-ims qti-gap-text[active], .qti-theme-ims qti-associate-interaction qti-simple-associable-choice[active], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-associate-interaction[active]::part(qti-simple-associable-choice) {
|
|
1125
|
+
background: rgb(var(--qti-primary) 0.4) !important;
|
|
1126
|
+
}
|
|
1127
|
+
.qti-theme-ims qti-slider-interaction {
|
|
1128
|
+
cursor: pointer;
|
|
1129
|
+
}
|
|
1130
|
+
.qti-theme-ims qti-slider-interaction[disabled] {
|
|
1131
|
+
--qti-border-color: var(--qti-shadow-color);
|
|
1132
|
+
color: var(--qti-shadow-color);
|
|
1133
|
+
cursor: unset !important;
|
|
1134
|
+
filter: grayscale(100%);
|
|
1135
|
+
}
|
|
1136
|
+
.qti-theme-ims qti-slider-interaction:focus-within {
|
|
1137
|
+
outline-color: rgb(var(--qti-primary) 0.6);
|
|
1138
|
+
outline-offset: 4px;
|
|
1139
|
+
outline-style: solid;
|
|
1140
|
+
outline-width: var(--qti-border-width);
|
|
1141
|
+
/* applies to all before elements, choice round and circle, slider thumb */
|
|
1142
|
+
}
|
|
1143
|
+
.qti-theme-ims qti-slider-interaction:focus-within::before {
|
|
1144
|
+
background-color: rgb(var(--qti-primary) 0.2);
|
|
1145
|
+
}
|
|
1146
|
+
.qti-theme-ims qti-slider-interaction:hover:not([disabled]) {
|
|
1147
|
+
outline-color: rgb(var(--qti-primary) 0.4);
|
|
1148
|
+
outline-offset: 2px;
|
|
1149
|
+
outline-style: solid;
|
|
1150
|
+
outline-width: calc(var(--qti-border-width) * 2);
|
|
1151
|
+
}
|
|
1152
|
+
.qti-theme-ims qti-slider-interaction::part(knob) {
|
|
1153
|
+
position: relative;
|
|
1154
|
+
display: inline-block;
|
|
1155
|
+
border-radius: var(--qti-border-radius);
|
|
1156
|
+
color: var(--qti-text-color);
|
|
1157
|
+
cursor: pointer;
|
|
1158
|
+
border-radius: calc(var(--qti-border-radius) * 3);
|
|
1159
|
+
background: var(--qti-background);
|
|
1160
|
+
box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
|
|
1161
|
+
width: 24px;
|
|
1162
|
+
height: 24px;
|
|
1163
|
+
border-radius: 100%;
|
|
1164
|
+
aspect-ratio: 1/1;
|
|
1165
|
+
transform: translateX(-50%);
|
|
1166
|
+
transform-origin: center;
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
qti-associate-interaction::part(associables-container) {
|
|
1170
|
+
display: flex;
|
|
1171
|
+
width: 100%;
|
|
1172
|
+
height: 100%;
|
|
1173
|
+
justify-content: space-between;
|
|
1174
|
+
margin-top: 1rem;
|
|
1175
|
+
background: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(50% - 1px), var(--qti-border-color) 50%, rgba(0, 0, 0, 0) calc(50% + 1px));
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
qti-associate-interaction::part(drop-list) {
|
|
1179
|
+
width: 30%;
|
|
1180
|
+
height: 40px;
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
/* Choice as checkbox */
|
|
1184
|
+
qti-simple-choice {
|
|
1185
|
+
position: relative;
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
.qti-input-control-hidden qti-simple-choice::before, .qti-input-control-hidden qti-simple-choice::after {
|
|
1189
|
+
content: unset !important;
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
qti-choice-interaction {
|
|
1193
|
+
display: grid;
|
|
1194
|
+
grid-auto-flow: row dense;
|
|
1195
|
+
grid-gap: 10px;
|
|
1196
|
+
grid-template-rows: auto auto;
|
|
1197
|
+
}
|
|
1198
|
+
qti-choice-interaction.qti-choices-stacking-1 {
|
|
1199
|
+
grid-template-columns: repeat(1, 1fr);
|
|
1200
|
+
}
|
|
1201
|
+
qti-choice-interaction.qti-choices-stacking-2 {
|
|
1202
|
+
grid-template-columns: repeat(2, 1fr);
|
|
1203
|
+
}
|
|
1204
|
+
qti-choice-interaction.qti-choices-stacking-3 {
|
|
1205
|
+
grid-template-columns: repeat(3, 1fr);
|
|
1206
|
+
}
|
|
1207
|
+
qti-choice-interaction.qti-choices-stacking-4 {
|
|
1208
|
+
grid-template-columns: repeat(4, 1fr);
|
|
1209
|
+
}
|
|
1210
|
+
qti-choice-interaction.qti-choices-stacking-5 {
|
|
1211
|
+
grid-template-columns: repeat(5, 1fr);
|
|
1212
|
+
}
|
|
1213
|
+
qti-choice-interaction.qti-orientation-horizontal {
|
|
1214
|
+
display: flex;
|
|
1215
|
+
}
|
|
1216
|
+
qti-choice-interaction[orientation=horizontal] {
|
|
1217
|
+
display: flex;
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
.qti-height-lines-3 {
|
|
1221
|
+
width: 100%;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
.qti-height-lines-6 {
|
|
1225
|
+
width: 100%;
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
.qti-height-lines-15 {
|
|
1229
|
+
width: 100%;
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
qti-gap-match-interaction {
|
|
1233
|
+
display: block;
|
|
1234
|
+
}
|
|
1235
|
+
qti-gap-match-interaction qti-gap {
|
|
1236
|
+
width: 20%;
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
qti-graphic-associate-interaction {
|
|
1240
|
+
position: relative;
|
|
1241
|
+
display: block;
|
|
1242
|
+
}
|
|
1243
|
+
qti-graphic-associate-interaction qti-associable-hotspot[shape=circle] {
|
|
1244
|
+
border-radius: 100%;
|
|
1245
|
+
background-color: green;
|
|
1246
|
+
}
|
|
1247
|
+
qti-graphic-associate-interaction qti-associable-hotspot[shape=square] {
|
|
1248
|
+
border-radius: 0;
|
|
1249
|
+
background-color: green;
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
qti-graphic-gap-match-interaction {
|
|
1253
|
+
position: relative;
|
|
1254
|
+
display: block;
|
|
1255
|
+
}
|
|
1256
|
+
qti-graphic-order-interaction {
|
|
1257
|
+
position: relative;
|
|
1258
|
+
display: block;
|
|
1259
|
+
}
|
|
1260
|
+
qti-graphic-order-interaction qti-hotspot-choice {
|
|
1261
|
+
position: absolute;
|
|
1262
|
+
}
|
|
1263
|
+
qti-graphic-order-interaction qti-hotspot-choice[shape=circle]::before {
|
|
1264
|
+
border-radius: 100%;
|
|
1265
|
+
background: transparent;
|
|
1266
|
+
}
|
|
1267
|
+
qti-graphic-order-interaction qti-hotspot-choice[shape=square]::before {
|
|
1268
|
+
border-radius: 0;
|
|
1269
|
+
background: transparent;
|
|
1270
|
+
}
|
|
1271
|
+
qti-graphic-order-interaction qti-hotspot-choice::before {
|
|
1272
|
+
content: unset !important;
|
|
1273
|
+
}
|
|
1274
|
+
qti-graphic-order-interaction qti-hotspot-choice::after {
|
|
1275
|
+
display: flex !important;
|
|
1276
|
+
width: unset !important;
|
|
1277
|
+
min-width: var(--width);
|
|
1278
|
+
height: unset !important;
|
|
1279
|
+
min-height: var(--width);
|
|
1280
|
+
align-items: center;
|
|
1281
|
+
justify-content: center;
|
|
1282
|
+
border: unset !important;
|
|
1283
|
+
background: unset;
|
|
1284
|
+
background: rgba(21, 0, 255, 0.067);
|
|
1285
|
+
content: attr(aria-ordervalue) !important;
|
|
1286
|
+
opacity: unset !important;
|
|
1287
|
+
transform: unset !important;
|
|
1288
|
+
transition: unset !important;
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
qti-hotspot-interaction qti-hotspot-choice {
|
|
1292
|
+
position: absolute;
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
/* Choice as checkbox */
|
|
1296
|
+
qti-hottext {
|
|
1297
|
+
position: relative;
|
|
1298
|
+
vertical-align: bottom;
|
|
1299
|
+
}
|
|
1300
|
+
|
|
1301
|
+
.qti-input-control-hidden qti-hottext {
|
|
1302
|
+
vertical-align: unset;
|
|
1303
|
+
}
|
|
1304
|
+
.qti-input-control-hidden qti-hottext::before, .qti-input-control-hidden qti-hottext::after {
|
|
1305
|
+
content: unset !important;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type {
|
|
1309
|
+
display: flex;
|
|
1310
|
+
gap: var(--qti-gap, 0.5rem);
|
|
1311
|
+
flex-wrap: wrap;
|
|
1312
|
+
padding-bottom: var(--qti-gap, 0.5rem);
|
|
1313
|
+
}
|
|
1314
|
+
qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type {
|
|
1315
|
+
display: flex;
|
|
1316
|
+
gap: var(--qti-gap, 0.5rem);
|
|
1317
|
+
flex-wrap: wrap;
|
|
1318
|
+
}
|
|
1319
|
+
qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
|
|
1320
|
+
padding: var(--qti-padding-x) var(--qti-padding-y);
|
|
1321
|
+
flex: 1 1 0px;
|
|
1322
|
+
display: flex;
|
|
1323
|
+
flex-wrap: wrap;
|
|
1324
|
+
flex-direction: column;
|
|
1325
|
+
}
|
|
1326
|
+
qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
|
|
1327
|
+
height: auto;
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1330
|
+
qti-match-interaction.qti-match-tabular qti-simple-match-set:first-of-type {
|
|
1331
|
+
display: flex;
|
|
1332
|
+
margin-left: 4rem;
|
|
1333
|
+
font-weight: bold;
|
|
1334
|
+
gap: 2rem;
|
|
1335
|
+
}
|
|
1336
|
+
qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type {
|
|
1337
|
+
display: flex;
|
|
1338
|
+
flex-direction: column;
|
|
1339
|
+
gap: 0.2rem;
|
|
1340
|
+
}
|
|
1341
|
+
qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-simple-associable-choice {
|
|
1342
|
+
display: unset !important;
|
|
1343
|
+
}
|
|
1344
|
+
qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-simple-associable-choice > * {
|
|
1345
|
+
display: block !important;
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
qti-order-interaction::part(drop-list) {
|
|
1349
|
+
width: 30%;
|
|
1350
|
+
height: 40px;
|
|
1351
|
+
}
|
|
1352
|
+
|
|
1353
|
+
qti-order-interaction::part(drop-list) {
|
|
1354
|
+
display: block;
|
|
1355
|
+
background: var(--qti-background, #eee);
|
|
1356
|
+
padding: var(--qti-padding-x, 0.7rem) var(--qti-padding-y, 0.5rem);
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
qti-select-point-interaction {
|
|
1360
|
+
position: relative;
|
|
1361
|
+
display: block;
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
qti-slider-interaction {
|
|
1365
|
+
width: 100%;
|
|
1366
|
+
display: block;
|
|
1367
|
+
}
|
|
1368
|
+
|
|
1369
|
+
qti-slider-interaction::part(knob) {
|
|
1370
|
+
position: absolute;
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1373
|
+
qti-slider-interaction::part(rail) {
|
|
1374
|
+
background-position: 0 center;
|
|
1375
|
+
/* ticks */
|
|
1376
|
+
background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x, linear-gradient(to top, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x;
|
|
1377
|
+
background-size: calc((100% - var(--qti-border-width)) / ((var(--max) - var(--min)) / var(--step))) 50%;
|
|
1378
|
+
}
|
|
1379
|
+
|
|
1380
|
+
qti-prompt {
|
|
1381
|
+
display: block;
|
|
1382
|
+
}
|
|
1383
|
+
|
|
1384
|
+
qti-content-body {
|
|
1385
|
+
display: block;
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
qti-rubric-block qti-content-body:not(:empty) {
|
|
1389
|
+
display: block;
|
|
1390
|
+
padding: 1rem;
|
|
1391
|
+
border: 1px solid #ddd;
|
|
1392
|
+
margin-bottom: 1rem;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
.qti-theme-ims {
|
|
1396
|
+
--qti-border-width: 1px;
|
|
1397
|
+
--qti-border-color: var(--qti-primary-color);
|
|
1398
|
+
--qti-text-color: var(--qti-primary-color);
|
|
1399
|
+
--qti-background: #f6f6f6;
|
|
1400
|
+
}
|
|
1401
|
+
|
|
1402
|
+
.qti-theme-subtle {
|
|
1403
|
+
--qti-border-radius: 0;
|
|
1404
|
+
--qti-border-width: 2px;
|
|
1405
|
+
--qti-background: #fcfcfc;
|
|
1406
|
+
--qti-padding-x: 0.5rem;
|
|
1407
|
+
--qti-padding-y: 0.8rem;
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
.qti-theme-raised {
|
|
1411
|
+
--qti-border-radius: 0;
|
|
1412
|
+
--qti-border-width: 2px;
|
|
1413
|
+
--qti-background: #ebebeb;
|
|
1414
|
+
--qti-padding-x: 0.5rem;
|
|
1415
|
+
--qti-padding-y: 0.8rem;
|
|
1416
|
+
}
|
|
1417
|
+
|
|
1418
|
+
qti-item-body img {
|
|
1419
|
+
width: 100% !important;
|
|
1420
|
+
height: auto !important;
|
|
1421
|
+
}`;var e=class extends p(y,"qti-assessment-item"){constructor(){super(...arguments);this.disabled=!1;this.readonly=!1;this.provider=new w(this,m,{log:t=>console.log(`[my-app] ${t}`),view:"candidate"});this.processResponse=()=>{var t;return(t=this._item)==null?void 0:t.processResponse()};this.validateResponses=()=>this._item?this._item.validateResponses():!1;this.resetInteractions=()=>{var t;return(t=this._item)==null?void 0:t.resetInteractions()};this.render=()=>v`${x(this._xml)}`}handleDisabledChange(t,o){var s,a;o&&((s=this._item)==null||s.setAttribute("disabled","")),!o&&((a=this._item)==null||a.removeAttribute("disabled"))}handleReadonlyChange(t,o){var s,a;o&&((s=this._item)==null||s.setAttribute("readonly","")),!o&&((a=this._item)==null||a.removeAttribute("readonly"))}handleResponsesChange(t,o){this._item&&(this._item.responses=o)}set qtiContext(t){this.provider.value.view=t.view,this.provider.updateObservers()}get _item(){var t;return(t=this.shadowRoot)==null?void 0:t.querySelector("qti-assessment-item")}set xml(t){let o=this._xml;this._xml=t,this.requestUpdate("xml",o),requestAnimationFrame(()=>{var s;(s=this._item)==null||s.classList.add("qti-theme-raised"),console.log("test")})}get xml(){return this._xml}connectedCallback(){super.connectedCallback();let t=new CSSStyleSheet;t.replaceSync(b),this.shadowRoot.adoptedStyleSheets.push(t)}};e.styles=g`
|
|
1422
|
+
:host {
|
|
1423
|
+
display: block; /* necessary to calculate scaling position */
|
|
1424
|
+
width: 100%;
|
|
1425
|
+
height: 100%;
|
|
1426
|
+
overflow: auto;
|
|
1427
|
+
}
|
|
1428
|
+
qti-assessment-item {
|
|
1429
|
+
display: block; /* necessary to calculate scaling position */
|
|
1430
|
+
width: 100%;
|
|
1431
|
+
}
|
|
1432
|
+
:host([scales]) qti-assessment-item {
|
|
1433
|
+
aspect-ratio: 4 / 3;
|
|
1434
|
+
width: 800px;
|
|
1435
|
+
transform-origin: 0 0;
|
|
1436
|
+
}
|
|
1437
|
+
`,i([n({type:Boolean})],e.prototype,"disabled",2),i([c("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),i([n({type:Boolean})],e.prototype,"readonly",2),i([c("readonly",{waitUntilFirstUpdate:!0})],e.prototype,"handleReadonlyChange",1),i([n({type:Object,attribute:!1})],e.prototype,"responses",2),i([c("responses",{waitUntilFirstUpdate:!0})],e.prototype,"handleResponsesChange",1),i([n({type:String})],e.prototype,"xml",1);customElements.define("qti-item",e);export{e as a};
|