@qti-components/theme 1.4.0 → 1.5.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 +67 -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;
|
|
@@ -3245,7 +3307,10 @@
|
|
|
3245
3307
|
background-color: var(--qti-bg-active);
|
|
3246
3308
|
}
|
|
3247
3309
|
& qti-simple-associable-choice,
|
|
3248
|
-
&::part(qti-simple-associable-choice)
|
|
3310
|
+
&::part(qti-simple-associable-choice),
|
|
3311
|
+
/* Editor fake-drag projected into the interaction's drop-list shadow.
|
|
3312
|
+
Same `drag` styling so editor previews match runtime visuals. */
|
|
3313
|
+
&::part(drag) {
|
|
3249
3314
|
&:hover {
|
|
3250
3315
|
}
|
|
3251
3316
|
&:focus {
|