@qti-components/theme 1.4.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/item.css +110 -2
- package/package.json +1 -1
package/dist/item.css
CHANGED
|
@@ -2220,6 +2220,25 @@
|
|
|
2220
2220
|
align-items: center;
|
|
2221
2221
|
cursor: grab;
|
|
2222
2222
|
}
|
|
2223
|
+
/* Editor fake-drag projected into a filled <qti-associable-hotspot>'s
|
|
2224
|
+
shadow. Same `drag` styling so editor previews match runtime. */
|
|
2225
|
+
& qti-associable-hotspot::part(drag) {
|
|
2226
|
+
&:hover {
|
|
2227
|
+
}
|
|
2228
|
+
&:focus {
|
|
2229
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
2230
|
+
}
|
|
2231
|
+
box-sizing: border-box;
|
|
2232
|
+
transition: transform 200ms ease-out,
|
|
2233
|
+
box-shadow 200ms ease-out,
|
|
2234
|
+
rotate 200ms ease-out;
|
|
2235
|
+
cursor: grab;
|
|
2236
|
+
background-color: var(--qti-bg);
|
|
2237
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
2238
|
+
border-radius: var(--qti-border-radius);
|
|
2239
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
2240
|
+
outline: none
|
|
2241
|
+
}
|
|
2223
2242
|
& qti-associable-hotspot {
|
|
2224
2243
|
display: flex;
|
|
2225
2244
|
justify-content: center;
|
|
@@ -2372,6 +2391,25 @@
|
|
|
2372
2391
|
&:state(--dragzone-enabled)::part(drags) {
|
|
2373
2392
|
background-color: var(--qti-bg-active);
|
|
2374
2393
|
}
|
|
2394
|
+
/* Editor fake-drag projected into a filled <qti-gap>'s shadow. Same `drag`
|
|
2395
|
+
styling so the editor preview matches runtime when a gap is filled. */
|
|
2396
|
+
& qti-gap::part(drag) {
|
|
2397
|
+
&:hover {
|
|
2398
|
+
}
|
|
2399
|
+
&:focus {
|
|
2400
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
2401
|
+
}
|
|
2402
|
+
box-sizing: border-box;
|
|
2403
|
+
transition: transform 200ms ease-out,
|
|
2404
|
+
box-shadow 200ms ease-out,
|
|
2405
|
+
rotate 200ms ease-out;
|
|
2406
|
+
cursor: grab;
|
|
2407
|
+
background-color: var(--qti-bg);
|
|
2408
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
2409
|
+
border-radius: var(--qti-border-radius);
|
|
2410
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
2411
|
+
outline: none
|
|
2412
|
+
}
|
|
2375
2413
|
& qti-gap-text {
|
|
2376
2414
|
&[dragging] {
|
|
2377
2415
|
pointer-events: none;
|
|
@@ -2948,6 +2986,27 @@
|
|
|
2948
2986
|
background-color: var(--qti-incorrect, #f44336) !important;
|
|
2949
2987
|
}
|
|
2950
2988
|
}
|
|
2989
|
+
/* Editor fake-drag projected into the target choice's `dropslot` shadow.
|
|
2990
|
+
Reuses the same `drag` styling so the editor preview matches what students
|
|
2991
|
+
see when an answer is dropped onto a target at runtime. */
|
|
2992
|
+
qti-simple-associable-choice::part(drag) {
|
|
2993
|
+
&:hover {
|
|
2994
|
+
}
|
|
2995
|
+
&:focus {
|
|
2996
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
2997
|
+
}
|
|
2998
|
+
box-sizing: border-box;
|
|
2999
|
+
transition: transform 200ms ease-out,
|
|
3000
|
+
box-shadow 200ms ease-out,
|
|
3001
|
+
rotate 200ms ease-out;
|
|
3002
|
+
cursor: grab;
|
|
3003
|
+
background-color: var(--qti-bg);
|
|
3004
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
3005
|
+
border-radius: var(--qti-border-radius);
|
|
3006
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
3007
|
+
outline: none
|
|
3008
|
+
}
|
|
3009
|
+
|
|
2951
3010
|
qti-match-interaction:not(.qti-match-tabular) {
|
|
2952
3011
|
&:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
|
|
2953
3012
|
background-color: var(--qti-bg-active);
|
|
@@ -3091,7 +3150,10 @@
|
|
|
3091
3150
|
background-color: var(--qti-bg-active);
|
|
3092
3151
|
}
|
|
3093
3152
|
&::part(qti-simple-choice),
|
|
3094
|
-
& qti-simple-choice
|
|
3153
|
+
& qti-simple-choice,
|
|
3154
|
+
/* Editor fake-drag projected into the interaction's drop-list shadow.
|
|
3155
|
+
Same `drag` styling so editor previews match runtime visuals. */
|
|
3156
|
+
&::part(drag) {
|
|
3095
3157
|
&[dragging] {
|
|
3096
3158
|
pointer-events: none;
|
|
3097
3159
|
rotate: -2deg;
|
|
@@ -3114,6 +3176,28 @@
|
|
|
3114
3176
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
3115
3177
|
outline: none
|
|
3116
3178
|
}
|
|
3179
|
+
/* Editor fake-drag projected into the interaction's drop-list shadow.
|
|
3180
|
+
Same `drag` styling so editor previews match runtime visuals.
|
|
3181
|
+
Kept as its own block (separate from the runtime-drag selector list
|
|
3182
|
+
above) because a CSS comment between commas inside a nested selector
|
|
3183
|
+
list is silently dropped by Chrome's nesting parser. */
|
|
3184
|
+
&::part(drag) {
|
|
3185
|
+
&:hover {
|
|
3186
|
+
}
|
|
3187
|
+
&:focus {
|
|
3188
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
3189
|
+
}
|
|
3190
|
+
box-sizing: border-box;
|
|
3191
|
+
transition: transform 200ms ease-out,
|
|
3192
|
+
box-shadow 200ms ease-out,
|
|
3193
|
+
rotate 200ms ease-out;
|
|
3194
|
+
cursor: grab;
|
|
3195
|
+
background-color: var(--qti-bg);
|
|
3196
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
3197
|
+
border-radius: var(--qti-border-radius);
|
|
3198
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
3199
|
+
outline: none
|
|
3200
|
+
}
|
|
3117
3201
|
&::part(qti-simple-choice) {
|
|
3118
3202
|
display: flex;
|
|
3119
3203
|
overflow: hidden;
|
|
@@ -3245,7 +3329,10 @@
|
|
|
3245
3329
|
background-color: var(--qti-bg-active);
|
|
3246
3330
|
}
|
|
3247
3331
|
& qti-simple-associable-choice,
|
|
3248
|
-
&::part(qti-simple-associable-choice)
|
|
3332
|
+
&::part(qti-simple-associable-choice),
|
|
3333
|
+
/* Editor fake-drag projected into the interaction's drop-list shadow.
|
|
3334
|
+
Same `drag` styling so editor previews match runtime visuals. */
|
|
3335
|
+
&::part(drag) {
|
|
3249
3336
|
&:hover {
|
|
3250
3337
|
}
|
|
3251
3338
|
&:focus {
|
|
@@ -3268,6 +3355,27 @@
|
|
|
3268
3355
|
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
3269
3356
|
outline: none
|
|
3270
3357
|
}
|
|
3358
|
+
/* Editor fake-drag projected into the interaction's drop-list shadow.
|
|
3359
|
+
Kept as a separate block (not merged into the comma list above)
|
|
3360
|
+
because a CSS comment between commas in a nested selector list is
|
|
3361
|
+
silently dropped by Chrome's nesting parser. */
|
|
3362
|
+
&::part(drag) {
|
|
3363
|
+
&:hover {
|
|
3364
|
+
}
|
|
3365
|
+
&:focus {
|
|
3366
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
3367
|
+
}
|
|
3368
|
+
box-sizing: border-box;
|
|
3369
|
+
transition: transform 200ms ease-out,
|
|
3370
|
+
box-shadow 200ms ease-out,
|
|
3371
|
+
rotate 200ms ease-out;
|
|
3372
|
+
cursor: grab;
|
|
3373
|
+
background-color: var(--qti-bg);
|
|
3374
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
3375
|
+
border-radius: var(--qti-border-radius);
|
|
3376
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
3377
|
+
outline: none
|
|
3378
|
+
}
|
|
3271
3379
|
&::part(drop-list) {
|
|
3272
3380
|
display: grid;
|
|
3273
3381
|
height: 3rem;
|