@citolab/qti-components 6.7.1-25 → 6.7.1-27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/item.css +585 -569
- package/package.json +6 -7
- package/dist/item-normalize.css +0 -173
- package/dist/item-prose.css +0 -51
package/dist/item.css
CHANGED
|
@@ -1,740 +1,756 @@
|
|
|
1
|
-
|
|
2
|
-
Uses tailwind components and utilities from the other files
|
|
1
|
+
@layer qti-base, qti-components, qti-utilities, qti-variants;
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
https://play.tailwindcss.com/CeHVrnwgXR
|
|
6
|
-
https://play.tailwindcss.com/JOgoCf81JM
|
|
3
|
+
/* base */
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
/* This is a subset of modern-normalize */
|
|
9
6
|
|
|
10
|
-
|
|
11
|
-
Then we consume these components in our qti-webcomponents
|
|
7
|
+
/* all the same info and documentation applies here */
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
ring: used for border around the elements, can be active, its an inner ring, except for
|
|
15
|
-
the dropping well, because that has to surround the drag with the inner ring
|
|
9
|
+
/* We removed all the typesetting and moved this to the prose */
|
|
16
10
|
|
|
17
|
-
|
|
18
|
-
- text : text-entry and extended-text
|
|
19
|
-
- select : inline-choice
|
|
20
|
-
- button : .input-control-hidden qti-choice, qti-hotspot
|
|
21
|
-
- check : qti-choice, qti-hotspot
|
|
22
|
-
- drag : gap-match, match, order, associate
|
|
23
|
-
- drop : gap-match, match, order, associate
|
|
24
|
-
- spot : gap-select-point, graphic-order, qti-graphic-associate
|
|
11
|
+
/* @import 'modern-normalize/modern-normalize.css'; */
|
|
25
12
|
|
|
26
|
-
|
|
13
|
+
@layer qti-base {
|
|
14
|
+
*,
|
|
15
|
+
::before,
|
|
16
|
+
::after {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
27
19
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
20
|
+
hr {
|
|
21
|
+
height: 0; /* 1 */
|
|
22
|
+
color: inherit; /* 2 */
|
|
23
|
+
}
|
|
31
24
|
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
sub,
|
|
26
|
+
sup {
|
|
27
|
+
font-size: 75%;
|
|
28
|
+
line-height: 0;
|
|
29
|
+
position: relative;
|
|
30
|
+
vertical-align: baseline;
|
|
31
|
+
}
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
|
|
39
|
-
*/
|
|
33
|
+
sub {
|
|
34
|
+
bottom: -0.25em;
|
|
35
|
+
}
|
|
40
36
|
|
|
41
|
-
|
|
37
|
+
sup {
|
|
38
|
+
top: -0.5em;
|
|
39
|
+
}
|
|
42
40
|
|
|
43
|
-
|
|
41
|
+
table {
|
|
42
|
+
text-indent: 0; /* 1 */
|
|
43
|
+
border-color: inherit; /* 2 */
|
|
44
|
+
}
|
|
44
45
|
|
|
45
|
-
|
|
46
|
+
button,
|
|
47
|
+
input,
|
|
48
|
+
optgroup,
|
|
49
|
+
select,
|
|
50
|
+
textarea {
|
|
51
|
+
font-family: inherit; /* 1 */
|
|
52
|
+
font-size: 100%; /* 1 */
|
|
53
|
+
line-height: inherit; /* 1 */
|
|
54
|
+
margin: 0; /* 2 */
|
|
55
|
+
}
|
|
46
56
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
} */
|
|
52
|
-
}
|
|
57
|
+
button,
|
|
58
|
+
select {
|
|
59
|
+
text-transform: none;
|
|
60
|
+
}
|
|
53
61
|
|
|
54
|
-
|
|
55
|
-
|
|
62
|
+
button,
|
|
63
|
+
[type='button'],
|
|
64
|
+
[type='reset'],
|
|
65
|
+
[type='submit'] {
|
|
66
|
+
-webkit-appearance: button;
|
|
67
|
+
}
|
|
56
68
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
69
|
+
::-moz-focus-inner {
|
|
70
|
+
border-style: none;
|
|
71
|
+
padding: 0;
|
|
60
72
|
}
|
|
61
73
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
/* @apply bordered relative appearance-none px-3 py-2 pr-7 ; */
|
|
65
|
-
/* background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
|
|
66
|
-
no-repeat center right 6px; */
|
|
74
|
+
:-moz-focusring {
|
|
75
|
+
outline: 1px dotted ButtonText;
|
|
67
76
|
}
|
|
68
77
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
/* @apply select-none; */
|
|
78
|
+
:-moz-ui-invalid {
|
|
79
|
+
box-shadow: none;
|
|
80
|
+
}
|
|
73
81
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
/* @apply h-2/3 w-2/3; */
|
|
77
|
-
}
|
|
78
|
-
&[role='radio']::part(ch) {
|
|
79
|
-
/* @apply flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-solid border-gray-300; */
|
|
80
|
-
}
|
|
81
|
-
&[role='radio'][aria-checked='true']::part(cha) {
|
|
82
|
-
/* @apply bg-primary rounded-full; */
|
|
83
|
-
}
|
|
84
|
-
&[role='checkbox']::part(ch) {
|
|
85
|
-
/* @apply flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 border-solid border-gray-300; */
|
|
86
|
-
}
|
|
87
|
-
&[role='checkbox'][aria-checked='true']::part(cha) {
|
|
88
|
-
/* @apply bg-primary; */
|
|
89
|
-
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
90
|
-
}border-width:0px !important
|
|
82
|
+
legend {
|
|
83
|
+
padding: 0;
|
|
91
84
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
85
|
+
|
|
86
|
+
progress {
|
|
87
|
+
vertical-align: baseline;
|
|
95
88
|
}
|
|
96
89
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
90
|
+
::-webkit-inner-spin-button,
|
|
91
|
+
::-webkit-outer-spin-button {
|
|
92
|
+
height: auto;
|
|
100
93
|
}
|
|
101
94
|
|
|
102
|
-
|
|
103
|
-
|
|
95
|
+
[type='search'] {
|
|
96
|
+
-webkit-appearance: textfield; /* 1 */
|
|
97
|
+
outline-offset: -2px; /* 2 */
|
|
104
98
|
}
|
|
105
99
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
/* @apply bordered inline-block cursor-grab bg-white py-1 pl-4 pr-2 font-semibold ; */
|
|
109
|
-
/* @apply select-none; */
|
|
110
|
-
/* background-image: radial-gradient(
|
|
111
|
-
circle at center,
|
|
112
|
-
rgba(0, 0, 0, 0.1) 0,
|
|
113
|
-
rgb(0, 0, 0, 0.1) 2px,
|
|
114
|
-
white 2px,
|
|
115
|
-
white 100%
|
|
116
|
-
);
|
|
117
|
-
background-repeat: repeat-y;
|
|
118
|
-
background-position: left 2px;
|
|
119
|
-
background-size: 14px 8px; */
|
|
100
|
+
::-webkit-search-decoration {
|
|
101
|
+
-webkit-appearance: none;
|
|
120
102
|
}
|
|
121
103
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
104
|
+
::-webkit-file-upload-button {
|
|
105
|
+
-webkit-appearance: button; /* 1 */
|
|
106
|
+
font: inherit; /* 2 */
|
|
125
107
|
}
|
|
126
108
|
|
|
127
|
-
|
|
128
|
-
|
|
109
|
+
summary {
|
|
110
|
+
display: list-item;
|
|
129
111
|
}
|
|
130
|
-
/** End components */
|
|
131
112
|
}
|
|
132
113
|
|
|
133
|
-
@layer
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
114
|
+
@layer qti-base {
|
|
115
|
+
.qti-layout-row {
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-wrap: wrap;
|
|
118
|
+
width: 100%;
|
|
119
|
+
gap: 2.1276595745%;
|
|
137
120
|
}
|
|
138
|
-
|
|
139
|
-
|
|
121
|
+
|
|
122
|
+
.qti-layout-row [class*='qti-layout-col'] {
|
|
123
|
+
box-sizing: border-box;
|
|
140
124
|
}
|
|
141
|
-
|
|
142
|
-
.
|
|
143
|
-
|
|
125
|
+
|
|
126
|
+
.qti-layout-col1 {
|
|
127
|
+
width: 6.3829787234%;
|
|
144
128
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
/* @apply border-primary-400 border-2; */
|
|
129
|
+
.qti-layout-col2 {
|
|
130
|
+
width: 14.8936170213%;
|
|
148
131
|
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
/* @apply cursor-pointer bg-white outline-0 border-0; */
|
|
132
|
+
.qti-layout-col3 {
|
|
133
|
+
width: 23.4042553191%;
|
|
152
134
|
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
/* @apply cursor-not-allowed bg-gray-100 text-gray-500 border-gray-400; */
|
|
156
|
-
/* drag in the drop, else the drag in the drop was black and not gray */
|
|
157
|
-
& > * {--qti-text-opacity:1 !important;color:rgb(107 114 128 / var(--qti-text-opacity)) !important;
|
|
158
|
-
}
|
|
135
|
+
.qti-layout-col4 {
|
|
136
|
+
width: 31.914893617%;
|
|
159
137
|
}
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
@layer utilities {
|
|
163
|
-
/** Modifiers */
|
|
164
|
-
|
|
165
|
-
/* PK: There was no utility to reset the border-solid
|
|
166
|
-
We use this for the drop container, where we want the border to have an outset
|
|
167
|
-
So the drag, with border-solid, snugs neatly into the drop with border-'outset'
|
|
168
|
-
by unsetting the border-solid */
|
|
169
|
-
.border-outset {
|
|
170
|
-
/* --tw-border-solid: unset; */
|
|
138
|
+
.qti-layout-col5 {
|
|
139
|
+
width: 40.4255319149%;
|
|
171
140
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
- intext : gap-match > qti-gap, hottext > hottext, select
|
|
175
|
-
*/
|
|
176
|
-
.button-in {
|
|
177
|
-
/* @apply inline-flex; */
|
|
178
|
-
|
|
179
|
-
/* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal border-offset-0; */
|
|
141
|
+
.qti-layout-col6 {
|
|
142
|
+
width: 48.9361702128%;
|
|
180
143
|
}
|
|
181
|
-
.
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
/* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal border-offset-0; */
|
|
144
|
+
.qti-layout-col7 {
|
|
145
|
+
width: 57.4468085106%;
|
|
185
146
|
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
- intext : gap-match > qti-gap, hottext > hottext, select
|
|
189
|
-
*/
|
|
190
|
-
.button-sm {
|
|
191
|
-
/* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 border-1; */
|
|
147
|
+
.qti-layout-col8 {
|
|
148
|
+
width: 65.9574468085%;
|
|
192
149
|
}
|
|
193
|
-
.
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
150
|
+
.qti-layout-col9 {
|
|
151
|
+
width: 74.4680851064%;
|
|
152
|
+
}
|
|
153
|
+
.qti-layout-col10 {
|
|
154
|
+
width: 82.9787234043%;
|
|
155
|
+
}
|
|
156
|
+
.qti-layout-col11 {
|
|
157
|
+
width: 91.4893617021%;
|
|
158
|
+
}
|
|
159
|
+
.qti-layout-col12 {
|
|
160
|
+
width: 100%;
|
|
199
161
|
}
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.qti-underline {
|
|
203
|
-
text-decoration: underline;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.qti-align-left {
|
|
207
|
-
text-align: left;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.qti-align-center {
|
|
211
|
-
text-align: center;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.qti-align-right {
|
|
215
|
-
text-align: right;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.qti-valign-top {
|
|
219
|
-
vertical-align: top;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.qti-valign-middle {
|
|
223
|
-
vertical-align: middle;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.qti-valign-baseline {
|
|
227
|
-
vertical-align: baseline;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.qti-valign-bottom {
|
|
231
|
-
vertical-align: bottom;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
.qti-fullwidth {
|
|
235
|
-
width: 100%;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.qti-hidden {
|
|
239
|
-
display: none;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
.qti-visually-hidden {
|
|
243
|
-
position: fixed !important;
|
|
244
|
-
overflow: hidden;
|
|
245
|
-
width: 1px;
|
|
246
|
-
height: 1px;
|
|
247
|
-
border: 0;
|
|
248
|
-
margin: -1px;
|
|
249
|
-
clip: rect(1px 1px 1px 1px);
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.qti-bordered {
|
|
253
|
-
padding: 2px;
|
|
254
|
-
border: 1px solid #888;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.qti-well {padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;outline:2px solid transparent;outline-offset:2px;border-width:1px;--qti-border-opacity:1;border-color:rgb(209 213 219 / var(--qti-border-opacity));border-radius:0.25rem;--qti-text-opacity:1;color:rgb(75 85 99 / var(--qti-text-opacity));
|
|
258
|
-
}
|
|
259
162
|
|
|
260
|
-
.qti-layout-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
}
|
|
163
|
+
.qti-layout-offset1 {
|
|
164
|
+
margin-left: 8.5106382979%;
|
|
165
|
+
}
|
|
166
|
+
.qti-layout-offset2 {
|
|
167
|
+
margin-left: 17.0212765957%;
|
|
168
|
+
}
|
|
169
|
+
.qti-layout-offset3 {
|
|
170
|
+
margin-left: 25.5319148936%;
|
|
171
|
+
}
|
|
172
|
+
.qti-layout-offset4 {
|
|
173
|
+
margin-left: 34.0425531915%;
|
|
174
|
+
}
|
|
175
|
+
.qti-layout-offset5 {
|
|
176
|
+
margin-left: 42.5531914894%;
|
|
177
|
+
}
|
|
178
|
+
.qti-layout-offset6 {
|
|
179
|
+
margin-left: 51.0638297872%;
|
|
180
|
+
}
|
|
181
|
+
.qti-layout-offset7 {
|
|
182
|
+
margin-left: 59.5744680851%;
|
|
183
|
+
}
|
|
184
|
+
.qti-layout-offset8 {
|
|
185
|
+
margin-left: 68.085106383%;
|
|
186
|
+
}
|
|
187
|
+
.qti-layout-offset9 {
|
|
188
|
+
margin-left: 76.5957446809%;
|
|
189
|
+
}
|
|
190
|
+
.qti-layout-offset10 {
|
|
191
|
+
margin-left: 85.1063829787%;
|
|
192
|
+
}
|
|
193
|
+
.qti-layout-offset11 {
|
|
194
|
+
margin-left: 93.6170212766%;
|
|
195
|
+
}
|
|
196
|
+
.qti-layout-offset12 {
|
|
197
|
+
margin-left: 102.1276595745%;
|
|
198
|
+
}
|
|
266
199
|
|
|
267
|
-
|
|
268
|
-
|
|
200
|
+
@media (max-width: 767px) {
|
|
201
|
+
[class*='qti-layout-col'] {
|
|
202
|
+
width: 100%;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
269
205
|
}
|
|
270
206
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
.qti-layout-col11 {width: 91.4893617021%;}
|
|
292
|
-
|
|
293
|
-
.qti-layout-col12 {width: 100%;}
|
|
294
|
-
|
|
295
|
-
.qti-layout-offset1 { margin-left: 8.5106382979%; }
|
|
296
|
-
|
|
297
|
-
.qti-layout-offset2 { margin-left: 17.0212765957%; }
|
|
298
|
-
|
|
299
|
-
.qti-layout-offset3 { margin-left: 25.5319148936%; }
|
|
300
|
-
|
|
301
|
-
.qti-layout-offset4 { margin-left: 34.0425531915%; }
|
|
302
|
-
|
|
303
|
-
.qti-layout-offset5 { margin-left: 42.5531914894%; }
|
|
304
|
-
|
|
305
|
-
.qti-layout-offset6 { margin-left: 51.0638297872%; }
|
|
306
|
-
|
|
307
|
-
.qti-layout-offset7 { margin-left: 59.5744680851%; }
|
|
308
|
-
|
|
309
|
-
.qti-layout-offset8 { margin-left: 68.085106383%; }
|
|
310
|
-
|
|
311
|
-
.qti-layout-offset9 { margin-left: 76.5957446809%; }
|
|
312
|
-
|
|
313
|
-
.qti-layout-offset10 { margin-left: 85.1063829787%; }
|
|
314
|
-
|
|
315
|
-
.qti-layout-offset11 { margin-left: 93.6170212766%; }
|
|
316
|
-
|
|
317
|
-
.qti-layout-offset12 { margin-left: 102.1276595745%; }
|
|
318
|
-
|
|
319
|
-
@media (max-width:767px){
|
|
320
|
-
[class*="qti-layout-col"] {width:100%;}
|
|
321
|
-
}
|
|
207
|
+
@layer qti-base {
|
|
208
|
+
abbr[title] {
|
|
209
|
+
-webkit-text-decoration: underline dotted;
|
|
210
|
+
text-decoration: underline dotted;
|
|
211
|
+
}
|
|
212
|
+
b,
|
|
213
|
+
strong {
|
|
214
|
+
font-weight: bolder;
|
|
215
|
+
}
|
|
216
|
+
code,
|
|
217
|
+
kbd,
|
|
218
|
+
samp,
|
|
219
|
+
pre {
|
|
220
|
+
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
|
|
221
|
+
font-size: 1em; /* 2 */
|
|
222
|
+
}
|
|
223
|
+
small {
|
|
224
|
+
font-size: 80%;
|
|
225
|
+
}
|
|
322
226
|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
}
|
|
327
|
-
.qti-input-width-2 {
|
|
328
|
-
width: 2ch;
|
|
329
|
-
min-width: 2ch;
|
|
330
|
-
}
|
|
331
|
-
.qti-input-width-3 {
|
|
332
|
-
width: 3ch;
|
|
333
|
-
min-width: 3ch;
|
|
334
|
-
}
|
|
335
|
-
.qti-input-width-4 {
|
|
336
|
-
width: 4ch;
|
|
337
|
-
min-width: 4ch;
|
|
338
|
-
}
|
|
339
|
-
.qti-input-width-6 {
|
|
340
|
-
width: 6ch;
|
|
341
|
-
min-width: 6ch;
|
|
342
|
-
}
|
|
343
|
-
.qti-input-width-10 {
|
|
344
|
-
width: 10ch;
|
|
345
|
-
min-width: 10ch;
|
|
346
|
-
}
|
|
347
|
-
.qti-input-width-15 {
|
|
348
|
-
width: 15ch;
|
|
349
|
-
min-width: 15ch;
|
|
350
|
-
}
|
|
351
|
-
.qti-input-width-20 {
|
|
352
|
-
width: 20ch;
|
|
353
|
-
min-width: 20ch;
|
|
354
|
-
}
|
|
355
|
-
.qti-input-width-72 {
|
|
356
|
-
width: 72ch;
|
|
357
|
-
min-width: 72ch;
|
|
358
|
-
} */
|
|
227
|
+
table {
|
|
228
|
+
width: 100%;
|
|
229
|
+
border-collapse: collapse;
|
|
230
|
+
}
|
|
359
231
|
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
232
|
+
/* Set table borders */
|
|
233
|
+
table,
|
|
234
|
+
th,
|
|
235
|
+
td {
|
|
236
|
+
border-bottom: 1px solid #eee;
|
|
364
237
|
}
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
}display:grid;grid-template-columns:repeat(3,minmax(0,1fr))
|
|
238
|
+
td {
|
|
239
|
+
padding: 0.5rem 0 0.5rem 0;
|
|
368
240
|
}
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
241
|
+
|
|
242
|
+
td > p {
|
|
243
|
+
padding: 0;
|
|
244
|
+
margin: 0;
|
|
372
245
|
}
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
246
|
+
|
|
247
|
+
th {
|
|
248
|
+
text-align: left;
|
|
376
249
|
}
|
|
377
|
-
|
|
378
|
-
|
|
250
|
+
/* Style table header */
|
|
251
|
+
th {
|
|
252
|
+
font-weight: bold;
|
|
253
|
+
/* background-color: #f2f2f2; */
|
|
379
254
|
}
|
|
380
|
-
|
|
255
|
+
|
|
256
|
+
/* Style alternating rows */
|
|
257
|
+
tr:nth-child(even) {
|
|
258
|
+
/* background-color: #f9f9f9; */
|
|
381
259
|
}
|
|
382
|
-
}
|
|
383
260
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
&::part(ch) {display:none !important;
|
|
388
|
-
}
|
|
389
|
-
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
390
|
-
}
|
|
391
|
-
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
392
|
-
}
|
|
393
|
-
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
394
|
-
}padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:pointer;outline:2px solid transparent;outline-offset:2px
|
|
395
|
-
}
|
|
396
|
-
& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
397
|
-
& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
261
|
+
/* Add hover effect to rows */
|
|
262
|
+
tr:hover {
|
|
263
|
+
/* background-color: #e6e6e6; */
|
|
398
264
|
}
|
|
265
|
+
}
|
|
399
266
|
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
267
|
+
/* components */
|
|
268
|
+
|
|
269
|
+
@layer qti-components {
|
|
270
|
+
qti-choice-interaction {
|
|
271
|
+
&.qti-input-control-hidden {
|
|
272
|
+
& qti-simple-choice {
|
|
273
|
+
&::part(ch) {display:none !important;
|
|
274
|
+
}
|
|
275
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
276
|
+
}
|
|
277
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
278
|
+
}
|
|
279
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
280
|
+
}padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:pointer;outline:2px solid transparent;outline-offset:2px
|
|
407
281
|
}
|
|
282
|
+
& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
283
|
+
& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
284
|
+
}
|
|
408
285
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
286
|
+
&:not(.qti-input-control-hidden) {
|
|
287
|
+
& qti-simple-choice {
|
|
288
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
289
|
+
}
|
|
290
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
291
|
+
}
|
|
292
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
&::part(cha) {
|
|
296
|
+
/* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
|
|
297
|
+
}
|
|
298
|
+
&[role='radio']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
|
|
299
|
+
}
|
|
300
|
+
&[role='radio'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;
|
|
301
|
+
}
|
|
302
|
+
&[role='checkbox']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
|
|
303
|
+
}
|
|
304
|
+
&[role='checkbox'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
305
|
+
}padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;border-radius:0.375rem;display:flex;gap:0.5rem;outline:2px solid transparent;outline-offset:2px;align-items:center
|
|
415
306
|
}
|
|
416
|
-
&
|
|
417
|
-
}
|
|
418
|
-
&[role='checkbox'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
419
|
-
}padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;border-radius:0.375rem;display:flex;gap:0.5rem;outline:2px solid transparent;outline-offset:2px;align-items:center
|
|
307
|
+
& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
308
|
+
& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
420
309
|
}
|
|
421
|
-
& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
422
|
-
& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
423
|
-
}
|
|
424
310
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
311
|
+
& qti-simple-choice {
|
|
312
|
+
&[data-correct-response='true'] {
|
|
313
|
+
&::after {
|
|
314
|
+
content: '\02714';--qti-text-opacity:1;color:rgb(22 163 74 / var(--qti-text-opacity));
|
|
315
|
+
}
|
|
429
316
|
}
|
|
430
317
|
}
|
|
431
|
-
}
|
|
432
318
|
|
|
433
|
-
|
|
319
|
+
& qti-simple-choice > p {padding:0;margin:0;
|
|
320
|
+
}
|
|
434
321
|
}
|
|
435
|
-
}
|
|
436
322
|
|
|
437
|
-
qti-text-entry-interaction {
|
|
438
|
-
|
|
323
|
+
qti-text-entry-interaction {
|
|
324
|
+
&::part(input) {padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;
|
|
325
|
+
}
|
|
326
|
+
&::part(input):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
327
|
+
&::part(input):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
439
328
|
}
|
|
440
|
-
&::part(input):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
441
|
-
&::part(input):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
442
|
-
}
|
|
443
329
|
|
|
444
|
-
qti-extended-text-interaction {
|
|
445
|
-
|
|
330
|
+
qti-extended-text-interaction {
|
|
331
|
+
&::part(textarea) {padding:0.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;cursor:text;outline:2px solid transparent;outline-offset:2px;
|
|
332
|
+
}
|
|
333
|
+
&::part(textarea):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
334
|
+
&::part(textarea):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
446
335
|
}
|
|
447
|
-
&::part(textarea):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
448
|
-
&::part(textarea):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
449
|
-
}
|
|
450
336
|
|
|
451
|
-
qti-gap-match-interaction {
|
|
452
|
-
|
|
337
|
+
qti-gap-match-interaction {
|
|
338
|
+
& qti-gap-text {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
453
339
|
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
454
340
|
background-repeat: repeat-y;
|
|
455
341
|
background-position: left 2px;
|
|
456
342
|
background-size: 14px 8px;
|
|
457
|
-
}
|
|
458
|
-
& qti-gap-text:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
459
|
-
& qti-gap-text:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
460
|
-
& qti-gap { /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
|
|
461
|
-
&:empty:after {
|
|
462
|
-
content: '\0000a0'; /* when empty, put a space in it */
|
|
463
|
-
}
|
|
464
|
-
&:not(:empty) {padding:0;display:inline-flex;width:auto;
|
|
465
|
-
}
|
|
466
|
-
&:not(:empty) > * {--qti-ring-opacity:1;--qti-ring-color:rgb(229 231 235 / var(--qti-ring-opacity));flex:1 1 0%;--qti-rotate-x:0;--qti-rotate-y:0;--qti-rotate-z:0;--qti-rotate:0;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));
|
|
467
|
-
}width:8rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:inline-flex
|
|
468
|
-
}
|
|
469
|
-
& qti-gap:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
470
|
-
& qti-gap:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
qti-hotspot-interaction {
|
|
474
|
-
& qti-hotspot-choice {
|
|
475
|
-
&[shape='circle'] {
|
|
476
|
-
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
477
|
-
}
|
|
478
|
-
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
479
|
-
}
|
|
480
|
-
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
481
|
-
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px;border-radius:9999px
|
|
482
343
|
}
|
|
483
|
-
&
|
|
484
|
-
&
|
|
485
|
-
|
|
344
|
+
& qti-gap-text:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
345
|
+
& qti-gap-text:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
346
|
+
& qti-gap { /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
|
|
347
|
+
&:empty:after {
|
|
348
|
+
content: '\0000a0'; /* when empty, put a space in it */
|
|
486
349
|
}
|
|
487
|
-
|
|
350
|
+
&:not(:empty) {padding:0;display:inline-flex;width:auto;
|
|
488
351
|
}
|
|
489
|
-
|
|
490
|
-
}padding:0;background-color:
|
|
352
|
+
&:not(:empty) > * {--qti-ring-opacity:1;--qti-ring-color:rgb(229 231 235 / var(--qti-ring-opacity));flex:1 1 0%;--qti-rotate-x:0;--qti-rotate-y:0;--qti-rotate-z:0;--qti-rotate:0;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));
|
|
353
|
+
}width:8rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:inline-flex
|
|
491
354
|
}
|
|
492
|
-
&
|
|
493
|
-
&
|
|
494
|
-
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
495
|
-
}
|
|
496
|
-
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
497
|
-
}
|
|
498
|
-
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
499
|
-
}
|
|
500
|
-
}
|
|
501
|
-
&[shape="poly"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
502
|
-
&[shape="poly"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
355
|
+
& qti-gap:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
356
|
+
& qti-gap:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
503
357
|
}
|
|
504
|
-
& qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
|
|
505
|
-
}
|
|
506
358
|
|
|
507
|
-
qti-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
359
|
+
qti-hotspot-interaction {
|
|
360
|
+
& qti-hotspot-choice {
|
|
361
|
+
&[shape='circle'] {
|
|
362
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
363
|
+
}
|
|
364
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
365
|
+
}
|
|
366
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
367
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px;border-radius:9999px
|
|
511
368
|
}
|
|
512
|
-
&[
|
|
369
|
+
&[shape="circle"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
370
|
+
&[shape='rect'] {
|
|
371
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
372
|
+
}
|
|
373
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
374
|
+
}
|
|
375
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
376
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
513
377
|
}
|
|
514
|
-
&[
|
|
378
|
+
&[shape="rect"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
379
|
+
&[shape='poly'] {
|
|
380
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
381
|
+
}
|
|
382
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
383
|
+
}
|
|
384
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
385
|
+
}
|
|
515
386
|
}
|
|
516
|
-
&[
|
|
517
|
-
|
|
387
|
+
&[shape="poly"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
388
|
+
&[shape="poly"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
518
389
|
}
|
|
519
|
-
qti-
|
|
520
|
-
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
390
|
+
& qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
|
|
521
391
|
}
|
|
522
392
|
|
|
523
|
-
|
|
524
|
-
qti-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
393
|
+
qti-hottext-interaction {
|
|
394
|
+
&.qti-input-control-hidden {
|
|
395
|
+
qti-hottext {
|
|
396
|
+
&::part(ch) {display:none !important;
|
|
397
|
+
}
|
|
398
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
399
|
+
}
|
|
400
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
401
|
+
}
|
|
402
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
403
|
+
}padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:pointer;outline:2px solid transparent;outline-offset:2px;display:inline-flex
|
|
531
404
|
}
|
|
532
|
-
|
|
405
|
+
qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
406
|
+
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
&:not(.qti-input-control-hidden) {
|
|
410
|
+
qti-hottext {
|
|
411
|
+
&::part(cha) {
|
|
412
|
+
/* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
|
|
413
|
+
}
|
|
414
|
+
&[role='radio']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
|
|
415
|
+
}
|
|
416
|
+
&[role='radio'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;
|
|
417
|
+
}
|
|
418
|
+
&[role='checkbox']::part(ch) {border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;outline:2px solid transparent;outline-offset:2px;justify-content:center;align-items:center;
|
|
419
|
+
}
|
|
420
|
+
&[role='checkbox'][aria-checked='true']::part(cha) {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
421
|
+
}padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;border-radius:0.375rem;display:flex;gap:0.5rem;outline:2px solid transparent;outline-offset:2px;align-items:center;display:inline-flex
|
|
533
422
|
}
|
|
534
|
-
|
|
535
|
-
|
|
423
|
+
qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
424
|
+
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
536
425
|
}
|
|
537
|
-
qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
538
|
-
qti-hottext:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
539
426
|
}
|
|
540
|
-
}
|
|
541
427
|
|
|
542
|
-
qti-inline-choice-interaction {
|
|
543
|
-
|
|
428
|
+
qti-inline-choice-interaction {
|
|
429
|
+
&::part(select) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-right:1.75rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;
|
|
430
|
+
}
|
|
431
|
+
&::part(select):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
432
|
+
&::part(select):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
544
433
|
}
|
|
545
|
-
&::part(select):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
546
|
-
&::part(select):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
547
|
-
}
|
|
548
434
|
|
|
549
|
-
qti-match-interaction:not(.qti-match-tabular) {
|
|
550
|
-
|
|
435
|
+
qti-match-interaction:not(.qti-match-tabular) {
|
|
436
|
+
& qti-simple-match-set:first-of-type {
|
|
551
437
|
|
|
552
|
-
|
|
438
|
+
& qti-simple-associable-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
553
439
|
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
554
440
|
background-repeat: repeat-y;
|
|
555
441
|
background-position: left 2px;
|
|
556
442
|
background-size: 14px 8px;
|
|
557
|
-
|
|
443
|
+
}
|
|
558
444
|
|
|
559
|
-
|
|
445
|
+
& qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
560
446
|
|
|
561
|
-
|
|
562
|
-
|
|
447
|
+
& qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}padding-bottom:1rem;display:flex;flex-wrap:wrap;gap:0.5rem
|
|
448
|
+
}
|
|
563
449
|
|
|
564
|
-
|
|
450
|
+
& qti-simple-match-set:last-of-type {
|
|
565
451
|
|
|
566
|
-
|
|
567
|
-
|
|
452
|
+
& qti-simple-associable-choice {display:flex;flex-direction:column;height:8rem;margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;
|
|
453
|
+
}
|
|
568
454
|
|
|
569
|
-
|
|
455
|
+
& qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
570
456
|
|
|
571
|
-
|
|
457
|
+
& qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
572
458
|
|
|
573
|
-
|
|
574
|
-
|
|
459
|
+
& qti-simple-associable-choice > qti-simple-associable-choice {
|
|
460
|
+
flex-basis: fit-content;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
575
461
|
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
576
462
|
background-repeat: repeat-y;
|
|
577
463
|
background-position: left 2px;
|
|
578
464
|
background-size: 14px 8px;
|
|
579
|
-
|
|
465
|
+
}
|
|
580
466
|
|
|
581
|
-
|
|
467
|
+
& qti-simple-associable-choice>qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
582
468
|
|
|
583
|
-
|
|
469
|
+
& qti-simple-associable-choice>qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:0.5rem
|
|
470
|
+
}
|
|
584
471
|
}
|
|
585
|
-
}
|
|
586
472
|
|
|
587
|
-
qti-order-interaction {
|
|
588
|
-
|
|
589
|
-
|
|
473
|
+
qti-order-interaction {
|
|
474
|
+
&::part(qti-simple-choice),
|
|
475
|
+
& qti-simple-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
590
476
|
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
591
477
|
background-repeat: repeat-y;
|
|
592
478
|
background-position: left 2px;
|
|
593
479
|
background-size: 14px 8px;
|
|
480
|
+
}
|
|
481
|
+
&::part(qti-simple-choice):hover,& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
482
|
+
&::part(qti-simple-choice):focus,& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
483
|
+
&::part(qti-simple-choice) {text-overflow:ellipsis;display:flex;width:100%;overflow:hidden;align-items:center;
|
|
484
|
+
}
|
|
485
|
+
&::part(drops) {gap:0.5rem;
|
|
486
|
+
}
|
|
487
|
+
&::part(drags) {gap:0.5rem;
|
|
488
|
+
}
|
|
489
|
+
&::part(drop-list) {margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:flex;min-height:4rem;
|
|
490
|
+
}
|
|
491
|
+
&::part(drop-list):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
492
|
+
&::part(drop-list):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
493
|
+
&::part(active) {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
494
|
+
}
|
|
594
495
|
}
|
|
595
|
-
&::part(qti-simple-choice):hover,& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
596
|
-
&::part(qti-simple-choice):focus,& qti-simple-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
597
|
-
&::part(qti-simple-choice) {text-overflow:ellipsis;display:flex;width:100%;overflow:hidden;align-items:center;
|
|
598
|
-
}
|
|
599
|
-
&::part(drops) {gap:0.5rem;
|
|
600
|
-
}
|
|
601
|
-
&::part(drags) {gap:0.5rem;
|
|
602
|
-
}
|
|
603
|
-
&::part(drop-list) {margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:flex;min-height:4rem;
|
|
604
|
-
}
|
|
605
|
-
&::part(drop-list):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
606
|
-
&::part(drop-list):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
607
|
-
&::part(active) {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
608
|
-
}
|
|
609
|
-
}
|
|
610
496
|
|
|
611
|
-
qti-associate-interaction {
|
|
612
|
-
|
|
613
|
-
|
|
497
|
+
qti-associate-interaction {
|
|
498
|
+
&::part(qti-simple-associable-choice),
|
|
499
|
+
& qti-simple-associable-choice {padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;font-weight:600;cursor:grab;outline:2px solid transparent;outline-offset:2px;background-image:
|
|
614
500
|
radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
|
|
615
501
|
background-repeat: repeat-y;
|
|
616
502
|
background-position: left 2px;
|
|
617
503
|
background-size: 14px 8px;;text-overflow:ellipsis;display:flex;overflow:hidden;align-items:center;
|
|
618
|
-
}
|
|
619
|
-
&::part(qti-simple-associable-choice):hover,& qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
620
|
-
&::part(qti-simple-associable-choice):focus,& qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
621
|
-
&::part(associables-container) {
|
|
622
|
-
background: linear-gradient(
|
|
623
|
-
180deg,
|
|
624
|
-
rgb(0 0 0 / 0%) calc(50% - 1px),
|
|
625
|
-
#000000 calc(50%),
|
|
626
|
-
rgb(0 0 0 / 0%) calc(50% + 1px)
|
|
627
|
-
);margin-top:0.5rem;margin-bottom:0.5rem;display:flex;width:100%;justify-content:space-between;
|
|
628
|
-
}
|
|
629
|
-
&::part(active) {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
630
|
-
}
|
|
631
|
-
&::part(drop-list) {margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:grid;height:3rem;width:33.3333333333%;
|
|
632
|
-
}
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
qti-graphic-order-interaction {
|
|
636
|
-
& qti-hotspot-choice {
|
|
637
|
-
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
638
504
|
}
|
|
639
|
-
|
|
505
|
+
&::part(qti-simple-associable-choice):hover,& qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
506
|
+
&::part(qti-simple-associable-choice):focus,& qti-simple-associable-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
507
|
+
&::part(associables-container) {
|
|
508
|
+
background: linear-gradient(
|
|
509
|
+
180deg,
|
|
510
|
+
rgb(0 0 0 / 0%) calc(50% - 1px),
|
|
511
|
+
#000000 calc(50%),
|
|
512
|
+
rgb(0 0 0 / 0%) calc(50% + 1px)
|
|
513
|
+
);margin-top:0.5rem;margin-bottom:0.5rem;display:flex;width:100%;justify-content:space-between;
|
|
640
514
|
}
|
|
641
|
-
|
|
515
|
+
&::part(active) {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
642
516
|
}
|
|
643
|
-
|
|
517
|
+
&::part(drop-list) {margin:1px;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;position:relative;outline:2px solid transparent;outline-offset:2px;display:grid;height:3rem;width:33.3333333333%;
|
|
644
518
|
}
|
|
645
|
-
&[aria-ordervalue]::after {
|
|
646
|
-
content: attr(aria-ordervalue) !important;
|
|
647
|
-
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
648
519
|
}
|
|
649
|
-
& qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
650
|
-
& qti-hotspot-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
651
|
-
}
|
|
652
520
|
|
|
653
|
-
qti-graphic-
|
|
654
|
-
|
|
655
|
-
& qti-associable-hotspot {
|
|
656
|
-
&[shape='circle'] {
|
|
657
|
-
/* border-radius: 100%;
|
|
658
|
-
background-color: green; */
|
|
521
|
+
qti-graphic-order-interaction {
|
|
522
|
+
& qti-hotspot-choice {
|
|
659
523
|
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
660
524
|
}
|
|
661
525
|
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
662
526
|
}
|
|
663
527
|
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
528
|
+
}
|
|
529
|
+
&[aria-ordervalue] {--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;--qti-text-opacity:1;color:rgb(255 255 255 / var(--qti-text-opacity));height:1.5rem;width:1.5rem;display:flex;justify-content:center;align-items:center;
|
|
530
|
+
}
|
|
531
|
+
&[aria-ordervalue]::after {
|
|
532
|
+
content: attr(aria-ordervalue) !important;
|
|
664
533
|
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
665
534
|
}
|
|
666
|
-
&
|
|
667
|
-
&
|
|
535
|
+
& qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
536
|
+
& qti-hotspot-choice:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
537
|
+
}
|
|
668
538
|
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
&[
|
|
539
|
+
qti-graphic-associate-interaction {
|
|
540
|
+
|
|
541
|
+
& qti-associable-hotspot {
|
|
542
|
+
&[shape='circle'] {
|
|
543
|
+
/* border-radius: 100%;
|
|
544
|
+
background-color: green; */
|
|
545
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
546
|
+
}
|
|
547
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
548
|
+
}
|
|
549
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
550
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
673
551
|
}
|
|
674
|
-
&[
|
|
552
|
+
&[shape="circle"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
553
|
+
&[shape="circle"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
554
|
+
|
|
555
|
+
&[shape='square'] {
|
|
556
|
+
/* border-radius: 0; */
|
|
557
|
+
/* background-color: green; */
|
|
558
|
+
&[aria-checked='true'] {--qti-border-opacity:1;border-color:rgb(0 0 255 / var(--qti-border-opacity));
|
|
559
|
+
}
|
|
560
|
+
&[aria-readonly='true'] {--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));border-width:0px;cursor:pointer;outline-width:0px;
|
|
561
|
+
}
|
|
562
|
+
&[aria-disabled='true'] {--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));cursor:not-allowed;
|
|
563
|
+
}padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:100%;width:100%;outline:2px solid transparent;outline-offset:2px
|
|
675
564
|
}
|
|
676
|
-
|
|
677
|
-
|
|
565
|
+
|
|
566
|
+
&[shape="square"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
|
|
567
|
+
|
|
568
|
+
&[shape="square"]:focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
569
|
+
}display:block;position:relative
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
qti-graphic-gap-match-interaction {
|
|
573
|
+
& img {padding:0;margin:0;
|
|
574
|
+
}position:relative
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
qti-slider-interaction { /* else no screenshot will be made with html-to-image */
|
|
578
|
+
|
|
579
|
+
--qti-tick-color: rgb(229 231 235 / 1);
|
|
580
|
+
--qti-tick-width: 1px;
|
|
581
|
+
|
|
582
|
+
&::part(slider) { /* so the slider stays INSIDE of the qti-slider-interaction */ /* this keeps all content in the qti-slider interaction, also for html-to-image */margin-left:2rem;margin-right:2rem;padding-bottom:1rem;padding-top:1.25rem;
|
|
678
583
|
}
|
|
679
584
|
|
|
680
|
-
|
|
585
|
+
--show-bounds: true;
|
|
586
|
+
&::part(bounds) { /* the two divs with value lower and upper will now be at start and end of this bounds container */ /* just so it aligns with the value 'knob' */display:flex;width:100%;justify-content:space-between;margin-bottom:0.5rem;
|
|
587
|
+
}
|
|
681
588
|
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
589
|
+
--show-ticks: true;
|
|
590
|
+
&::part(ticks) { /* absolute height for the ticks, and keep distance of the rail. push them 0.5 inward */
|
|
591
|
+
background-position: 0 center;
|
|
592
|
+
background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
|
|
593
|
+
background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;margin-left:0.125rem;margin-right:0.125rem;margin-bottom:0.25rem;height:0.5rem;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
&::part(rail) { /* so the knob is neatly centered vertically */
|
|
597
|
+
/* DESIGN */ /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */display:flex;align-items:center;box-sizing:border-box;--qti-bg-opacity:1;background-color:rgb(229 231 235 / var(--qti-bg-opacity));border-width:1px;--qti-border-opacity:1;border-color:rgb(209 213 219 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;height:0.375rem;width:100%;cursor:pointer;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
&::part(knob) {
|
|
601
|
+
left: var(--value-percentage);--qti-bg-opacity:1;background-color:rgb(0 0 255 / var(--qti-bg-opacity));border-radius:9999px;position:relative;height:1rem;width:1rem;cursor:pointer;transform-origin:center;--qti-translate-x:-50%;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
--show-value: true;
|
|
605
|
+
&::part(value) { /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ /* should be half width of the knob if you want to center these two */position:absolute;bottom:2rem;left:0.5rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));border-radius:0.25rem;--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));text-align:center;cursor:pointer;--qti-translate-x:-50%;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));
|
|
606
|
+
}display:block
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
qti-select-point-interaction {
|
|
610
|
+
&::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:1.5rem;width:1.5rem;outline:2px solid transparent;outline-offset:2px;border-radius:9999px;
|
|
611
|
+
}
|
|
612
|
+
&::part(point):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
613
|
+
&::part(point):hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
|
|
614
|
+
}
|
|
685
615
|
|
|
686
|
-
qti-
|
|
687
|
-
|
|
688
|
-
|
|
616
|
+
qti-position-object-stage {
|
|
617
|
+
& qti-position-object-interaction {
|
|
618
|
+
/* no styles necessary, only layout styles, defined in the component */
|
|
619
|
+
/* height: 40px; */
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
qti-prompt {margin-top:0.5rem;margin-bottom:0.5rem;display:block;width:100%;
|
|
624
|
+
}
|
|
689
625
|
}
|
|
690
626
|
|
|
691
|
-
|
|
627
|
+
/* utilities */
|
|
692
628
|
|
|
693
|
-
|
|
694
|
-
|
|
629
|
+
@layer qti-utilities {
|
|
630
|
+
.qti-underline {
|
|
631
|
+
text-decoration: underline;
|
|
632
|
+
}
|
|
695
633
|
|
|
696
|
-
|
|
634
|
+
.qti-align-left {
|
|
635
|
+
text-align: left;
|
|
697
636
|
}
|
|
698
637
|
|
|
699
|
-
|
|
700
|
-
|
|
638
|
+
.qti-align-center {
|
|
639
|
+
text-align: center;
|
|
701
640
|
}
|
|
702
641
|
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
background-position: 0 center;
|
|
706
|
-
background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
|
|
707
|
-
background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;margin-left:0.125rem;margin-right:0.125rem;margin-bottom:0.25rem;height:0.5rem;
|
|
642
|
+
.qti-align-right {
|
|
643
|
+
text-align: right;
|
|
708
644
|
}
|
|
709
645
|
|
|
710
|
-
|
|
711
|
-
|
|
646
|
+
.qti-valign-top {
|
|
647
|
+
vertical-align: top;
|
|
712
648
|
}
|
|
713
649
|
|
|
714
|
-
|
|
715
|
-
|
|
650
|
+
.qti-valign-middle {
|
|
651
|
+
vertical-align: middle;
|
|
716
652
|
}
|
|
717
653
|
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
}
|
|
721
|
-
|
|
654
|
+
.qti-valign-baseline {
|
|
655
|
+
vertical-align: baseline;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
.qti-valign-bottom {
|
|
659
|
+
vertical-align: bottom;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.qti-fullwidth {
|
|
663
|
+
width: 100%;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.qti-hidden {
|
|
667
|
+
display: none;
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.qti-visually-hidden {
|
|
671
|
+
position: fixed !important;
|
|
672
|
+
overflow: hidden;
|
|
673
|
+
width: 1px;
|
|
674
|
+
height: 1px;
|
|
675
|
+
border: 0;
|
|
676
|
+
margin: -1px;
|
|
677
|
+
clip: rect(1px 1px 1px 1px);
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
.qti-bordered {
|
|
681
|
+
padding: 2px;
|
|
682
|
+
border: 1px solid #888;
|
|
683
|
+
}
|
|
722
684
|
|
|
723
|
-
qti-
|
|
724
|
-
&::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/padding:0;background-color:transparent;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;height:1.5rem;width:1.5rem;outline:2px solid transparent;outline-offset:2px;border-radius:9999px;
|
|
685
|
+
.qti-well {padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;display:inline-block;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;outline:2px solid transparent;outline-offset:2px;border-width:1px;--qti-border-opacity:1;border-color:rgb(209 213 219 / var(--qti-border-opacity));border-radius:0.25rem;--qti-text-opacity:1;color:rgb(75 85 99 / var(--qti-text-opacity));
|
|
725
686
|
}
|
|
726
|
-
&::part(point):focus{outline-width:2px;--qti-outline-color-opacity:1;outline-color:rgb(0 255 0 / var(--qti-outline-color-opacity));}
|
|
727
|
-
&::part(point):hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
|
|
728
687
|
}
|
|
729
688
|
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
689
|
+
/* variants */
|
|
690
|
+
|
|
691
|
+
@layer qti-variants {
|
|
692
|
+
.qti-input-width-1 {
|
|
693
|
+
width: 1ch;
|
|
694
|
+
min-width: 1ch;
|
|
695
|
+
}
|
|
696
|
+
.qti-input-width-2 {
|
|
697
|
+
width: 2ch;
|
|
698
|
+
min-width: 2ch;
|
|
699
|
+
}
|
|
700
|
+
.qti-input-width-3 {
|
|
701
|
+
width: 3ch;
|
|
702
|
+
min-width: 3ch;
|
|
703
|
+
}
|
|
704
|
+
.qti-input-width-4 {
|
|
705
|
+
width: 4ch;
|
|
706
|
+
min-width: 4ch;
|
|
707
|
+
}
|
|
708
|
+
.qti-input-width-6 {
|
|
709
|
+
width: 6ch;
|
|
710
|
+
min-width: 6ch;
|
|
711
|
+
}
|
|
712
|
+
.qti-input-width-10 {
|
|
713
|
+
width: 10ch;
|
|
714
|
+
min-width: 10ch;
|
|
715
|
+
}
|
|
716
|
+
.qti-input-width-15 {
|
|
717
|
+
width: 15ch;
|
|
718
|
+
min-width: 15ch;
|
|
719
|
+
}
|
|
720
|
+
.qti-input-width-20 {
|
|
721
|
+
width: 20ch;
|
|
722
|
+
min-width: 20ch;
|
|
723
|
+
}
|
|
724
|
+
.qti-input-width-72 {
|
|
725
|
+
width: 72ch;
|
|
726
|
+
min-width: 72ch;
|
|
734
727
|
}
|
|
735
728
|
}
|
|
736
729
|
|
|
737
|
-
qti-
|
|
730
|
+
@layer qti-variants {
|
|
731
|
+
qti-choice-interaction {
|
|
732
|
+
&.qti-choices-stacking-2 {
|
|
733
|
+
qti-prompt {grid-column:span 2/span 2;
|
|
734
|
+
}display:grid;grid-template-columns:repeat(2,minmax(0,1fr))
|
|
735
|
+
}
|
|
736
|
+
&.qti-choices-stacking-3 {
|
|
737
|
+
qti-prompt {grid-column:span 3/span 3;
|
|
738
|
+
}display:grid;grid-template-columns:repeat(3,minmax(0,1fr))
|
|
739
|
+
}
|
|
740
|
+
&.qti-choices-stacking-4 {
|
|
741
|
+
qti-prompt {grid-column:span 4/span 4;
|
|
742
|
+
}display:grid;grid-template-columns:repeat(4,minmax(0,1fr))
|
|
743
|
+
}
|
|
744
|
+
&.qti-choices-stacking-5 {
|
|
745
|
+
qti-prompt {grid-column:span 5/span 5;
|
|
746
|
+
}display:grid;grid-template-columns:repeat(5,minmax(0,1fr))
|
|
747
|
+
}
|
|
748
|
+
&.qti-orientation-horizontal {
|
|
749
|
+
/* is the default layout */
|
|
750
|
+
}
|
|
751
|
+
&[orientation='horizontal'] {flex-direction:row;
|
|
752
|
+
}
|
|
753
|
+
}
|
|
738
754
|
}
|
|
739
755
|
|
|
740
756
|
/* layer: shortcuts */
|