@doenet/doenetml-iframe 0.7.21-dev.415 → 0.7.21-dev.417
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/index.js +14 -6
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/style.css +154 -132
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@doenet/doenetml-iframe",
|
|
3
3
|
"type": "module",
|
|
4
4
|
"description": "A renderer for DoenetML contained in an iframe",
|
|
5
|
-
"version": "0.7.21-dev.
|
|
5
|
+
"version": "0.7.21-dev.417",
|
|
6
6
|
"license": "AGPL-3.0-or-later",
|
|
7
7
|
"homepage": "https://github.com/Doenet/DoenetML#readme",
|
|
8
8
|
"repository": {
|
package/style.css
CHANGED
|
@@ -1,157 +1,176 @@
|
|
|
1
1
|
.inline {
|
|
2
|
-
|
|
2
|
+
display: inline;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.overline {
|
|
6
|
-
|
|
6
|
+
text-decoration-line: overline;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.blur {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
--tw-blur: blur(8px);
|
|
11
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.filter {
|
|
15
|
-
|
|
15
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.keyboard-button {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
height: 2.5rem;
|
|
21
|
+
max-width: 4em;
|
|
22
|
+
flex-grow: 1;
|
|
23
|
+
flex-basis: 1rem;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
align-items: center;
|
|
26
|
+
border-radius: 0.375rem;
|
|
27
|
+
border-width: 1px;
|
|
28
|
+
--tw-border-opacity: 1;
|
|
29
|
+
border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.keyboard-button:hover {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
--tw-bg-opacity: 1;
|
|
34
|
+
background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.keyboard-button:active {
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
--tw-bg-opacity: 1;
|
|
39
|
+
background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.special-button {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
--tw-border-opacity: 1;
|
|
44
|
+
border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
|
|
45
|
+
--tw-bg-opacity: 1;
|
|
46
|
+
background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.special-button:hover {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
--tw-border-opacity: 1;
|
|
51
|
+
border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
|
|
52
|
+
--tw-bg-opacity: 1;
|
|
53
|
+
background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
.special-button:active {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
57
|
+
--tw-border-opacity: 1;
|
|
58
|
+
border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
|
|
59
|
+
--tw-bg-opacity: 1;
|
|
60
|
+
background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
|
|
61
|
+
--tw-text-opacity: 1;
|
|
62
|
+
color: rgb(248 250 252 / var(--tw-text-opacity, 1));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/*
|
|
66
|
+
* The keys are mathematical notation, so they stay left-to-right even when the
|
|
67
|
+
* tray around them is right-to-left. Every row is a flex row and every region a
|
|
68
|
+
* grid, both of which reverse under `rtl`, so an Arabic reader would otherwise
|
|
69
|
+
* get a mirrored QWERTY and a numeric pad running 3-2-1. The cursor keys are
|
|
70
|
+
* the sharpest case: `.key-left` sends MathQuill a `Left` keystroke whatever
|
|
71
|
+
* the CSS says, so a reversed row would leave the `←` key sitting on the right
|
|
72
|
+
* and moving the caret the other way.
|
|
73
|
+
*
|
|
74
|
+
* Stated here rather than as a `dir` attribute because `Keyboard` returns a
|
|
75
|
+
* different element per style; one rule covers all of them. The tab strip is
|
|
76
|
+
* included: its labels are `123`, `f(x)`, `ABC`, `αβγ` and `$%∞`, none of which
|
|
77
|
+
* is prose.
|
|
78
|
+
*/
|
|
79
|
+
.virtual-keyboard,
|
|
80
|
+
.virtual-keyboard-tab-list {
|
|
81
|
+
direction: ltr;
|
|
63
82
|
}
|
|
64
83
|
|
|
65
84
|
.virtual-keyboard {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
85
|
+
display: flex;
|
|
86
|
+
max-width: 42rem;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
row-gap: 0.25rem;
|
|
89
|
+
-moz-column-gap: 0.75rem;
|
|
90
|
+
column-gap: 0.75rem;
|
|
72
91
|
}
|
|
73
92
|
|
|
74
93
|
@media (min-width: 640px) {
|
|
75
94
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
95
|
+
.virtual-keyboard {
|
|
96
|
+
row-gap: 0.5rem;
|
|
97
|
+
}
|
|
79
98
|
}
|
|
80
99
|
|
|
81
100
|
.virtual-keyboard {
|
|
82
|
-
|
|
101
|
+
flex-wrap: wrap;
|
|
83
102
|
}
|
|
84
103
|
|
|
85
104
|
@media (min-width: 640px) {
|
|
86
105
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
106
|
+
.virtual-keyboard {
|
|
107
|
+
flex-wrap: nowrap;
|
|
108
|
+
}
|
|
90
109
|
}
|
|
91
110
|
|
|
92
111
|
.virtual-keyboard .row {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-basis: 100%;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
-moz-column-gap: 0.25rem;
|
|
116
|
+
column-gap: 0.25rem;
|
|
98
117
|
}
|
|
99
118
|
|
|
100
119
|
@media (min-width: 640px) {
|
|
101
120
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
121
|
+
.virtual-keyboard .row {
|
|
122
|
+
-moz-column-gap: 0.5rem;
|
|
123
|
+
column-gap: 0.5rem;
|
|
124
|
+
}
|
|
106
125
|
}
|
|
107
126
|
|
|
108
127
|
.virtual-keyboard .keyboard-region {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
128
|
+
display: grid;
|
|
129
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
130
|
+
-moz-column-gap: 0.25rem;
|
|
131
|
+
column-gap: 0.25rem;
|
|
132
|
+
row-gap: 0.25rem;
|
|
114
133
|
}
|
|
115
134
|
|
|
116
135
|
@media (min-width: 640px) {
|
|
117
136
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
137
|
+
.virtual-keyboard .keyboard-region {
|
|
138
|
+
-moz-column-gap: 0.5rem;
|
|
139
|
+
column-gap: 0.5rem;
|
|
140
|
+
row-gap: 0.5rem;
|
|
141
|
+
}
|
|
123
142
|
}
|
|
124
143
|
|
|
125
144
|
.virtual-keyboard .keyboard-region .key {
|
|
126
|
-
|
|
127
|
-
|
|
145
|
+
padding-left: 0.5rem;
|
|
146
|
+
padding-right: 0.5rem;
|
|
128
147
|
}
|
|
129
148
|
|
|
130
149
|
@media (min-width: 640px) {
|
|
131
150
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
151
|
+
.virtual-keyboard .keyboard-region .key {
|
|
152
|
+
padding-left: 1rem;
|
|
153
|
+
padding-right: 1rem;
|
|
154
|
+
}
|
|
136
155
|
}
|
|
137
156
|
|
|
138
157
|
.virtual-keyboard .sub-keyboard {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
158
|
+
display: flex;
|
|
159
|
+
max-width: 42rem;
|
|
160
|
+
flex-wrap: wrap;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
row-gap: 0.25rem;
|
|
144
163
|
}
|
|
145
164
|
|
|
146
165
|
@media (min-width: 640px) {
|
|
147
166
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
167
|
+
.virtual-keyboard .sub-keyboard {
|
|
168
|
+
row-gap: 0.5rem;
|
|
169
|
+
}
|
|
151
170
|
}
|
|
152
171
|
|
|
153
172
|
.virtual-keyboard .sub-keyboard {
|
|
154
|
-
|
|
173
|
+
height: 100%;
|
|
155
174
|
}
|
|
156
175
|
|
|
157
176
|
.virtual-keyboard button {
|
|
@@ -170,26 +189,26 @@
|
|
|
170
189
|
}
|
|
171
190
|
|
|
172
191
|
.virtual-keyboard button:hover {
|
|
173
|
-
|
|
174
|
-
|
|
192
|
+
--tw-bg-opacity: 1;
|
|
193
|
+
background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
|
|
175
194
|
}
|
|
176
195
|
|
|
177
196
|
.virtual-keyboard button:active {
|
|
178
|
-
|
|
179
|
-
|
|
197
|
+
--tw-bg-opacity: 1;
|
|
198
|
+
background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
|
|
180
199
|
}
|
|
181
200
|
|
|
182
201
|
.virtual-keyboard .break {
|
|
183
|
-
|
|
184
|
-
|
|
202
|
+
height: 0px;
|
|
203
|
+
flex-basis: 100%;
|
|
185
204
|
}
|
|
186
205
|
|
|
187
206
|
.virtual-keyboard .key {
|
|
188
|
-
|
|
207
|
+
font-weight: 700;
|
|
189
208
|
}
|
|
190
209
|
|
|
191
210
|
.virtual-keyboard .key.math {
|
|
192
|
-
|
|
211
|
+
font-weight: 400;
|
|
193
212
|
}
|
|
194
213
|
|
|
195
214
|
.virtual-keyboard .key-space,
|
|
@@ -198,10 +217,10 @@
|
|
|
198
217
|
.virtual-keyboard .key-right,
|
|
199
218
|
.virtual-keyboard .key-shift,
|
|
200
219
|
.virtual-keyboard .key-enter {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
220
|
+
--tw-border-opacity: 1;
|
|
221
|
+
border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
|
|
222
|
+
--tw-bg-opacity: 1;
|
|
223
|
+
background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
|
|
205
224
|
}
|
|
206
225
|
|
|
207
226
|
.virtual-keyboard .key-space:hover,
|
|
@@ -210,10 +229,10 @@
|
|
|
210
229
|
.virtual-keyboard .key-right:hover,
|
|
211
230
|
.virtual-keyboard .key-shift:hover,
|
|
212
231
|
.virtual-keyboard .key-enter:hover {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
232
|
+
--tw-border-opacity: 1;
|
|
233
|
+
border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
|
|
234
|
+
--tw-bg-opacity: 1;
|
|
235
|
+
background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
|
|
217
236
|
}
|
|
218
237
|
|
|
219
238
|
.virtual-keyboard .key-space:active,
|
|
@@ -222,23 +241,23 @@
|
|
|
222
241
|
.virtual-keyboard .key-right:active,
|
|
223
242
|
.virtual-keyboard .key-shift:active,
|
|
224
243
|
.virtual-keyboard .key-enter:active {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
244
|
+
--tw-border-opacity: 1;
|
|
245
|
+
border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
|
|
246
|
+
--tw-bg-opacity: 1;
|
|
247
|
+
background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
|
|
248
|
+
--tw-text-opacity: 1;
|
|
249
|
+
color: rgb(248 250 252 / var(--tw-text-opacity, 1));
|
|
231
250
|
}
|
|
232
251
|
|
|
233
252
|
.virtual-keyboard .key-shift,
|
|
234
253
|
.virtual-keyboard .key-backspace {
|
|
235
|
-
|
|
236
|
-
|
|
254
|
+
max-width: none;
|
|
255
|
+
flex-grow: 1;
|
|
237
256
|
}
|
|
238
257
|
|
|
239
258
|
.virtual-keyboard .key-space {
|
|
240
|
-
|
|
241
|
-
|
|
259
|
+
max-width: none;
|
|
260
|
+
flex-grow: 1;
|
|
242
261
|
}
|
|
243
262
|
|
|
244
263
|
.virtual-keyboard .svg-inline--fa {
|
|
@@ -247,37 +266,37 @@
|
|
|
247
266
|
}
|
|
248
267
|
|
|
249
268
|
.virtual-keyboard.numeric .key-backspace {
|
|
250
|
-
|
|
269
|
+
max-width: 4em;
|
|
251
270
|
}
|
|
252
271
|
.virtual-keyboard.alpha,
|
|
253
272
|
.virtual-keyboard.greek {
|
|
254
|
-
|
|
273
|
+
flex-wrap: wrap;
|
|
255
274
|
}
|
|
256
275
|
.virtual-keyboard.symbol .keyboard-region {
|
|
257
|
-
|
|
276
|
+
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
258
277
|
}
|
|
259
278
|
|
|
260
279
|
.virtual-keyboard-tab-list {
|
|
261
|
-
|
|
262
|
-
|
|
280
|
+
display: flex;
|
|
281
|
+
flex-wrap: nowrap;
|
|
263
282
|
}
|
|
264
283
|
|
|
265
284
|
.virtual-keyboard-tab-list button {
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
285
|
+
margin-bottom: 0.75rem;
|
|
286
|
+
border-bottom-width: 2px;
|
|
287
|
+
padding: 0.25rem;
|
|
288
|
+
padding-left: 0.25rem;
|
|
289
|
+
padding-right: 0.25rem;
|
|
290
|
+
padding-bottom: 0.25rem;
|
|
272
291
|
}
|
|
273
292
|
|
|
274
293
|
@media (min-width: 640px) {
|
|
275
294
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
295
|
+
.virtual-keyboard-tab-list button {
|
|
296
|
+
padding: 0.5rem;
|
|
297
|
+
padding-left: 0.75rem;
|
|
298
|
+
padding-right: 0.75rem;
|
|
299
|
+
}
|
|
281
300
|
}
|
|
282
301
|
|
|
283
302
|
.virtual-keyboard-tab-list button {
|
|
@@ -289,10 +308,10 @@
|
|
|
289
308
|
}
|
|
290
309
|
|
|
291
310
|
.virtual-keyboard-tab-list button[aria-selected="true"] {
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
311
|
+
--tw-border-opacity: 1;
|
|
312
|
+
border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
|
|
313
|
+
--tw-text-opacity: 1;
|
|
314
|
+
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
|
|
296
315
|
}
|
|
297
316
|
/*
|
|
298
317
|
Tailwind base is purposely not included because we want all styles to be prefixed. We manually copy in whatever is needed from tailwind preflight.
|
|
@@ -389,7 +408,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
|
|
|
389
408
|
#virtual-keyboard-tray .close-keyboard-button {
|
|
390
409
|
position: absolute;
|
|
391
410
|
top: 0px;
|
|
392
|
-
|
|
411
|
+
inset-inline-end: 0px;
|
|
393
412
|
margin: 0.5rem;
|
|
394
413
|
border-radius: 0.25rem;
|
|
395
414
|
}
|
|
@@ -415,17 +434,20 @@ Tailwind base is purposely not included because we want all styles to be prefixe
|
|
|
415
434
|
}
|
|
416
435
|
|
|
417
436
|
/*
|
|
418
|
-
*
|
|
437
|
+
* Inline-end footprint of this button (w-12 + me-4 = 4rem) is mirrored
|
|
419
438
|
* by `--keyboard-tab-reserve-width` in
|
|
420
439
|
* `packages/doenetml/src/EditorViewer/editor-viewer.css` so the editor
|
|
421
|
-
* footer can shift its
|
|
422
|
-
*
|
|
440
|
+
* footer can shift its last element inward to clear it. Keep the two
|
|
441
|
+
* values in sync — and keep both on the *same* axis. `end-0` here pairs
|
|
442
|
+
* with `margin-inline-end` there; making one logical and leaving the
|
|
443
|
+
* other physical would send the tab and the space reserved for it to
|
|
444
|
+
* opposite edges under `rtl`, which is worse than either alone.
|
|
423
445
|
*/
|
|
424
446
|
|
|
425
447
|
#virtual-keyboard-tray .open-keyboard-button {
|
|
426
448
|
position: absolute;
|
|
427
449
|
top: -1.5rem;
|
|
428
|
-
|
|
450
|
+
inset-inline-end: 0px;
|
|
429
451
|
margin-inline-end: 1rem;
|
|
430
452
|
border-top-left-radius: 0.25rem;
|
|
431
453
|
border-top-right-radius: 0.25rem;
|