@khanacademy/math-input 23.0.6 → 24.0.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/es/index.css DELETED
@@ -1,621 +0,0 @@
1
- .keypad-input {
2
- outline: none !important;
3
- }
4
- .keypad-input .mq-editable-field .mq-root-block {
5
- overflow-x: auto;
6
- }
7
- .keypad-input .mq-editable-field .mq-cursor:not(:only-child),
8
- .keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
9
- /* HACK(charlie): Magic numbers to properly size and position the vertical
10
- cursor, which is visible whenever the cursor is not alone in its parent,
11
- with the exception that it's also visible when the entire input is
12
- empty. */
13
- height: 20px !important;
14
- width: 2px;
15
- margin-top: -5px !important;
16
- vertical-align: middle !important;
17
- border-radius: 1px !important;
18
- }
19
- .keypad-input .mq-editable-field .mq-cursor {
20
- border-left: 2px solid #1865f2 !important;
21
- margin-left: -1px !important;
22
- margin-right: -1px !important;
23
- opacity: 1 !important;
24
- transition: opacity 300ms ease !important;
25
- visibility: visible !important;
26
- }
27
- .keypad-input .mq-editable-field .mq-cursor.mq-blink {
28
- opacity: 0 !important;
29
- visibility: visible !important;
30
- }
31
- .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
32
- border: 2px solid !important;
33
- border-color: #1865f2 !important;
34
- border-radius: 1px;
35
- opacity: 1 !important;
36
- padding: 0 4px 0 4px;
37
- transition: border-color 300ms ease !important;
38
- }
39
- .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
40
- border-color: #1865f2 !important;
41
- opacity: 1 !important;
42
- }
43
- .keypad-input .mq-empty {
44
- background: transparent !important;
45
- }
46
- .keypad-input .mq-empty:not(.mq-root-block):after,
47
- .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
48
- border: 2px solid rgba(33, 36, 44, 0.16);
49
- border-radius: 1px;
50
- color: transparent;
51
- display: inline-block;
52
- margin-left: -1px;
53
- margin-right: -1px;
54
- padding: 0 4px 0 4px;
55
- visibility: visible !important;
56
- }
57
- .keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
58
- border-color: white;
59
- }
60
- .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
61
- content: "c";
62
- }
63
- .keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
64
- .keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
65
- background: #1865f2 !important;
66
- border-color: white !important;
67
- color: white !important;
68
- }
69
- .keypad-input .mq-math-mode .mq-selection .mq-scaled,
70
- .keypad-input .mq-editable-field .mq-selection .mq-scaled {
71
- background: transparent !important;
72
- border-color: transparent !important;
73
- color: white !important;
74
- }
75
- .keypad-input .mq-selection {
76
- background: #1865f2 !important;
77
- border-color: white !important;
78
- color: white !important;
79
- display: inline-block !important;
80
- }
81
- /**
82
- * @license
83
- * MathQuill v0.10.1, by Han, Jeanine, and Mary
84
- * http://mathquill.com | maintainers@mathquill.com
85
- *
86
- * This Source Code Form is subject to the terms of the
87
- * Mozilla Public License, v. 2.0. If a copy of the MPL
88
- * was not distributed with this file, You can obtain
89
- * one at http://mozilla.org/MPL/2.0/.
90
- */
91
-
92
- .mq-aria-alert {
93
- position: absolute;
94
- left: -1000px;
95
- top: -1000px;
96
- width: 0px;
97
- height: 0px;
98
- text-align: left;
99
- overflow: hidden;
100
- }
101
- .mq-mathspeak {
102
- position: absolute;
103
- left: -1000px;
104
- top: -1000px;
105
- width: 0px;
106
- height: 0px;
107
- text-align: left;
108
- overflow: hidden;
109
- }
110
- @font-face {
111
- font-family: Symbola;
112
- src: url(/fonts/Symbola.eot);
113
- src: local('Symbola Regular'), local('Symbola'), url(/fonts/Symbola.woff2) format('woff2'), url(/fonts/Symbola.woff) format('woff'), url(/fonts/Symbola.ttf) format('truetype'), url(/fonts/Symbola.otf) format('opentype'), url(/fonts/Symbola.svg#Symbola) format('svg');
114
- }
115
- .mq-editable-field {
116
- display: -moz-inline-box;
117
- display: inline-block;
118
- }
119
- .mq-editable-field .mq-cursor {
120
- border-left: 1px solid currentColor;
121
- margin-left: -1px;
122
- position: relative;
123
- z-index: 1;
124
- padding: 0;
125
- display: -moz-inline-box;
126
- display: inline-block;
127
- }
128
- .mq-editable-field .mq-cursor.mq-blink {
129
- visibility: hidden;
130
- }
131
- .mq-editable-field,
132
- .mq-math-mode .mq-editable-field {
133
- border: 1px solid gray;
134
- }
135
- .mq-editable-field.mq-focused,
136
- .mq-math-mode .mq-editable-field.mq-focused {
137
- -webkit-box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
138
- -moz-box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
139
- box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
140
- border-color: #709ac0;
141
- }
142
- .mq-math-mode .mq-editable-field {
143
- margin: 1px;
144
- }
145
- .mq-editable-field .mq-latex-command-input {
146
- color: inherit;
147
- font-family: 'Courier New', monospace;
148
- border: 1px solid gray;
149
- padding-right: 1px;
150
- margin-right: 1px;
151
- margin-left: 2px;
152
- }
153
- .mq-editable-field .mq-latex-command-input.mq-empty {
154
- background: transparent;
155
- }
156
- .mq-editable-field .mq-latex-command-input.mq-hasCursor {
157
- border-color: ActiveBorder;
158
- }
159
- .mq-editable-field.mq-empty:after,
160
- .mq-editable-field.mq-text-mode:after,
161
- .mq-math-mode .mq-empty:after {
162
- visibility: hidden;
163
- content: 'c';
164
- }
165
- .mq-editable-field .mq-cursor:only-child:after,
166
- .mq-editable-field .mq-textarea + .mq-cursor:last-child:after {
167
- visibility: hidden;
168
- content: 'c';
169
- }
170
- .mq-editable-field .mq-text-mode .mq-cursor:only-child:after {
171
- content: '';
172
- }
173
- .mq-editable-field.mq-text-mode {
174
- overflow-x: auto;
175
- overflow-y: hidden;
176
- }
177
- .mq-root-block,
178
- .mq-math-mode .mq-root-block {
179
- display: -moz-inline-box;
180
- display: inline-block;
181
- width: 100%;
182
- padding: 2px;
183
- -webkit-box-sizing: border-box;
184
- -moz-box-sizing: border-box;
185
- box-sizing: border-box;
186
- white-space: nowrap;
187
- overflow: hidden;
188
- vertical-align: middle;
189
- }
190
- .mq-root-block .mq-digit,
191
- .mq-math-mode .mq-root-block .mq-digit {
192
- margin-left: 0.009em;
193
- margin-right: 0.009em;
194
- }
195
- .mq-root-block .mq-group-start,
196
- .mq-math-mode .mq-root-block .mq-group-start {
197
- margin-left: 0.11em;
198
- margin-right: -0.01em;
199
- }
200
- .mq-root-block .mq-group-other,
201
- .mq-math-mode .mq-root-block .mq-group-other {
202
- margin-left: -0.01em;
203
- margin-right: -0.01em;
204
- }
205
- .mq-root-block .mq-group-leading-1,
206
- .mq-math-mode .mq-root-block .mq-group-leading-1,
207
- .mq-root-block .mq-group-leading-2,
208
- .mq-math-mode .mq-root-block .mq-group-leading-2 {
209
- margin-left: 0;
210
- margin-right: -0.01em;
211
- }
212
- .mq-root-block .mq-group-leading-3,
213
- .mq-math-mode .mq-root-block .mq-group-leading-3 {
214
- margin-left: 0.036em;
215
- margin-right: -0.01em;
216
- }
217
- .mq-root-block.mq-suppress-grouping .mq-group-start,
218
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-start,
219
- .mq-root-block.mq-suppress-grouping .mq-group-other,
220
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-other,
221
- .mq-root-block.mq-suppress-grouping .mq-group-leading-1,
222
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-1,
223
- .mq-root-block.mq-suppress-grouping .mq-group-leading-2,
224
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-2,
225
- .mq-root-block.mq-suppress-grouping .mq-group-leading-3,
226
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-3 {
227
- margin-left: 0.009em;
228
- margin-right: 0.009em;
229
- }
230
- .mq-math-mode {
231
- font-variant: normal;
232
- font-weight: normal;
233
- font-style: normal;
234
- font-size: 115%;
235
- line-height: 1;
236
- display: -moz-inline-box;
237
- display: inline-block;
238
- }
239
- .mq-math-mode .mq-non-leaf,
240
- .mq-math-mode .mq-scaled {
241
- display: -moz-inline-box;
242
- display: inline-block;
243
- }
244
- .mq-math-mode var,
245
- .mq-math-mode .mq-text-mode,
246
- .mq-math-mode .mq-nonSymbola {
247
- font-family: 'Times New Roman', Symbola, serif;
248
- line-height: 0.9;
249
- }
250
- .mq-math-mode svg {
251
- fill: currentColor;
252
- position: absolute;
253
- top: 0;
254
- left: 0;
255
- width: 100%;
256
- height: 100%;
257
- }
258
- .mq-math-mode * {
259
- font-size: inherit;
260
- line-height: inherit;
261
- margin: 0;
262
- padding: 0;
263
- border-color: black;
264
- -webkit-user-select: none;
265
- -moz-user-select: none;
266
- user-select: none;
267
- box-sizing: border-box;
268
- }
269
- .mq-math-mode .mq-empty {
270
- background: rgba(0, 0, 0, 0.2);
271
- }
272
- .mq-math-mode .mq-empty.mq-root-block {
273
- background: transparent;
274
- }
275
- .mq-math-mode .mq-empty.mq-quiet-delimiter {
276
- background: transparent;
277
- }
278
- .mq-math-mode.mq-empty {
279
- background: transparent;
280
- }
281
- .mq-math-mode .mq-text-mode {
282
- display: inline-block;
283
- white-space: pre;
284
- }
285
- .mq-math-mode .mq-text-mode.mq-hasCursor {
286
- box-shadow: inset darkgray 0 0.1em 0.2em;
287
- padding: 0 0.1em;
288
- margin: 0 -0.1em;
289
- min-width: 1ex;
290
- }
291
- .mq-math-mode .mq-font {
292
- font: 1em 'Times New Roman', Symbola, serif;
293
- }
294
- .mq-math-mode .mq-font * {
295
- font-family: inherit;
296
- font-style: inherit;
297
- }
298
- .mq-math-mode b,
299
- .mq-math-mode b.mq-font {
300
- font-weight: bolder;
301
- }
302
- .mq-math-mode var,
303
- .mq-math-mode i,
304
- .mq-math-mode i.mq-font {
305
- font-style: italic;
306
- }
307
- .mq-math-mode var.mq-f {
308
- margin-right: 0.2em;
309
- margin-left: 0.1em;
310
- }
311
- .mq-math-mode .mq-roman var.mq-f {
312
- margin: 0;
313
- }
314
- .mq-math-mode big {
315
- font-size: 200%;
316
- }
317
- .mq-math-mode .mq-int > big {
318
- display: inline-block;
319
- -webkit-transform: scaleX(0.7);
320
- -moz-transform: scaleX(0.7);
321
- -ms-transform: scaleX(0.7);
322
- -o-transform: scaleX(0.7);
323
- transform: scaleX(0.7);
324
- vertical-align: -0.16em;
325
- }
326
- .mq-math-mode .mq-int > .mq-supsub {
327
- font-size: 80%;
328
- vertical-align: -1.1em;
329
- padding-right: 0.2em;
330
- }
331
- .mq-math-mode .mq-int > .mq-supsub > .mq-sup > .mq-sup-inner {
332
- vertical-align: 1.3em;
333
- }
334
- .mq-math-mode .mq-int > .mq-supsub > .mq-sub {
335
- margin-left: -0.35em;
336
- }
337
- .mq-math-mode .mq-roman {
338
- font-style: normal;
339
- }
340
- .mq-math-mode .mq-sans-serif {
341
- font-family: sans-serif, Symbola, serif;
342
- }
343
- .mq-math-mode .mq-monospace {
344
- font-family: monospace, Symbola, serif;
345
- }
346
- .mq-math-mode .mq-overline {
347
- border-top: 1px solid;
348
- margin-top: 1px;
349
- }
350
- .mq-math-mode .mq-underline {
351
- border-bottom: 1px solid;
352
- margin-bottom: 1px;
353
- }
354
- .mq-math-mode .mq-binary-operator {
355
- padding: 0 0.2em;
356
- display: -moz-inline-box;
357
- display: inline-block;
358
- }
359
- .mq-math-mode .mq-supsub {
360
- text-align: left;
361
- font-size: 90%;
362
- vertical-align: -0.5em;
363
- }
364
- .mq-math-mode .mq-supsub.mq-sup-only {
365
- vertical-align: 0.5em;
366
- }
367
- .mq-math-mode .mq-supsub.mq-sup-only > .mq-sup {
368
- display: inline-block;
369
- vertical-align: text-bottom;
370
- }
371
- .mq-math-mode .mq-supsub .mq-sup {
372
- display: block;
373
- }
374
- .mq-math-mode .mq-supsub .mq-sub {
375
- display: block;
376
- float: left;
377
- }
378
- .mq-math-mode .mq-supsub .mq-binary-operator {
379
- padding: 0 0.1em;
380
- }
381
- .mq-math-mode .mq-supsub .mq-fraction {
382
- font-size: 70%;
383
- }
384
- .mq-math-mode sup.mq-nthroot {
385
- font-size: 80%;
386
- vertical-align: 0.8em;
387
- margin-right: -0.6em;
388
- margin-left: 0.2em;
389
- min-width: 0.5em;
390
- }
391
- .mq-math-mode .mq-ghost svg {
392
- opacity: 0.2;
393
- }
394
- .mq-math-mode .mq-bracket-middle {
395
- margin-top: 0.1em;
396
- margin-bottom: 0.1em;
397
- }
398
- .mq-math-mode .mq-bracket-l,
399
- .mq-math-mode .mq-bracket-r {
400
- position: absolute;
401
- top: 0;
402
- bottom: 2px;
403
- }
404
- .mq-math-mode .mq-bracket-l {
405
- left: 0;
406
- }
407
- .mq-math-mode .mq-bracket-r {
408
- right: 0;
409
- }
410
- .mq-math-mode .mq-bracket-container {
411
- position: relative;
412
- }
413
- .mq-math-mode .mq-array {
414
- vertical-align: middle;
415
- text-align: center;
416
- }
417
- .mq-math-mode .mq-array > span {
418
- display: block;
419
- }
420
- .mq-math-mode .mq-operator-name {
421
- font-family: Symbola, 'Times New Roman', serif;
422
- line-height: 0.9;
423
- font-style: normal;
424
- }
425
- .mq-math-mode var.mq-operator-name.mq-first {
426
- padding-left: 0.2em;
427
- }
428
- .mq-math-mode var.mq-operator-name.mq-last,
429
- .mq-math-mode .mq-supsub.mq-after-operator-name {
430
- padding-right: 0.2em;
431
- }
432
- .mq-math-mode .mq-fraction {
433
- font-size: 90%;
434
- text-align: center;
435
- vertical-align: -0.4em;
436
- padding: 0 0.2em;
437
- }
438
- .mq-math-mode .mq-fraction,
439
- .mq-math-mode .mq-large-operator,
440
- .mq-math-mode x:-moz-any-link {
441
- display: -moz-groupbox;
442
- }
443
- .mq-math-mode .mq-fraction,
444
- .mq-math-mode .mq-large-operator,
445
- .mq-math-mode x:-moz-any-link,
446
- .mq-math-mode x:default {
447
- display: inline-block;
448
- }
449
- .mq-math-mode .mq-numerator,
450
- .mq-math-mode .mq-denominator,
451
- .mq-math-mode .mq-dot-recurring {
452
- display: block;
453
- }
454
- .mq-math-mode .mq-numerator {
455
- padding: 0 0.1em;
456
- }
457
- .mq-math-mode .mq-denominator {
458
- border-top: 1px solid;
459
- float: right;
460
- width: 100%;
461
- padding: 0.1em;
462
- }
463
- .mq-math-mode .mq-dot-recurring {
464
- text-align: center;
465
- height: 0.3em;
466
- }
467
- .mq-math-mode .mq-sqrt-prefix {
468
- position: absolute;
469
- top: 1px;
470
- bottom: 0.15em;
471
- width: 0.95em;
472
- }
473
- .mq-math-mode .mq-sqrt-container {
474
- position: relative;
475
- }
476
- .mq-math-mode .mq-sqrt-stem {
477
- border-top: 1px solid;
478
- margin-top: 1px;
479
- margin-left: 0.9em;
480
- padding-left: 0.15em;
481
- padding-right: 0.2em;
482
- margin-right: 0.1em;
483
- padding-top: 1px;
484
- }
485
- .mq-math-mode .mq-diacritic-above {
486
- display: block;
487
- text-align: center;
488
- line-height: 0.4em;
489
- }
490
- .mq-math-mode .mq-diacritic-stem {
491
- display: block;
492
- text-align: center;
493
- }
494
- .mq-math-mode .mq-hat-prefix {
495
- display: block;
496
- text-align: center;
497
- line-height: 0.95em;
498
- margin-bottom: -0.7em;
499
- transform: scaleX(1.5);
500
- -moz-transform: scaleX(1.5);
501
- -o-transform: scaleX(1.5);
502
- -webkit-transform: scaleX(1.5);
503
- }
504
- .mq-math-mode .mq-hat-stem {
505
- display: block;
506
- }
507
- .mq-math-mode .mq-large-operator {
508
- vertical-align: -0.2em;
509
- padding: 0.2em;
510
- text-align: center;
511
- }
512
- .mq-math-mode .mq-large-operator .mq-from,
513
- .mq-math-mode .mq-large-operator big,
514
- .mq-math-mode .mq-large-operator .mq-to {
515
- display: block;
516
- }
517
- .mq-math-mode .mq-large-operator .mq-from,
518
- .mq-math-mode .mq-large-operator .mq-to {
519
- font-size: 80%;
520
- }
521
- .mq-math-mode .mq-large-operator .mq-from {
522
- float: right;
523
- /* take out of normal flow to manipulate baseline */
524
- width: 100%;
525
- }
526
- .mq-math-mode,
527
- .mq-math-mode .mq-editable-field {
528
- cursor: text;
529
- font-family: Symbola, 'Times New Roman', serif;
530
- }
531
- .mq-math-mode .mq-overarc {
532
- border-top: 1px solid black;
533
- -webkit-border-top-right-radius: 50% 0.3em;
534
- -moz-border-radius-topright: 50% 0.3em;
535
- border-top-right-radius: 50% 0.3em;
536
- -webkit-border-top-left-radius: 50% 0.3em;
537
- -moz-border-radius-topleft: 50% 0.3em;
538
- border-top-left-radius: 50% 0.3em;
539
- margin-top: 1px;
540
- padding-top: 0.15em;
541
- }
542
- .mq-math-mode .mq-overarrow {
543
- min-width: 0.5em;
544
- border-top: 1px solid black;
545
- margin-top: 1px;
546
- padding-top: 0.2em;
547
- text-align: center;
548
- position: relative;
549
- }
550
- .mq-math-mode .mq-overarrow:after {
551
- position: absolute;
552
- right: -0.1em;
553
- top: -0.48em;
554
- font-size: 0.5em;
555
- content: '\27A4';
556
- }
557
- .mq-math-mode .mq-overarrow.mq-arrow-left:after {
558
- content: '';
559
- display: none;
560
- }
561
- .mq-math-mode .mq-overarrow.mq-arrow-left:before,
562
- .mq-math-mode .mq-overarrow.mq-arrow-leftright:before {
563
- position: absolute;
564
- top: -0.48em;
565
- left: -0.1em;
566
- font-size: 0.5em;
567
- content: '\27A4';
568
- -moz-transform: scaleX(-1);
569
- -o-transform: scaleX(-1);
570
- -webkit-transform: scaleX(-1);
571
- transform: scaleX(-1);
572
- filter: FlipH;
573
- -ms-filter: 'FlipH';
574
- }
575
- .mq-math-mode .mq-selection,
576
- .mq-editable-field .mq-selection,
577
- .mq-math-mode .mq-selection .mq-non-leaf,
578
- .mq-editable-field .mq-selection .mq-non-leaf,
579
- .mq-math-mode .mq-selection .mq-scaled,
580
- .mq-editable-field .mq-selection .mq-scaled {
581
- background: #b4d5fe !important;
582
- }
583
- .mq-math-mode .mq-selection.mq-blur,
584
- .mq-editable-field .mq-selection.mq-blur,
585
- .mq-math-mode .mq-selection.mq-blur .mq-non-leaf,
586
- .mq-editable-field .mq-selection.mq-blur .mq-non-leaf,
587
- .mq-math-mode .mq-selection.mq-blur .mq-scaled,
588
- .mq-editable-field .mq-selection.mq-blur .mq-scaled {
589
- background: #d4d4d4 !important;
590
- color: black;
591
- border-color: black;
592
- }
593
- html body .mq-math-mode .mq-selection .mq-nthroot-container *,
594
- html body .mq-editable-field .mq-selection .mq-nthroot-container * {
595
- background: transparent !important;
596
- }
597
- .mq-editable-field .mq-textarea,
598
- .mq-math-mode .mq-textarea {
599
- position: relative;
600
- -webkit-user-select: text;
601
- -moz-user-select: text;
602
- user-select: text;
603
- }
604
- .mq-editable-field .mq-textarea *,
605
- .mq-math-mode .mq-textarea * {
606
- -webkit-user-select: text;
607
- -moz-user-select: text;
608
- user-select: text;
609
- position: absolute;
610
- clip: rect(1em 1em 1em 1em);
611
- -webkit-transform: scale(0);
612
- -moz-transform: scale(0);
613
- -ms-transform: scale(0);
614
- -o-transform: scale(0);
615
- transform: scale(0);
616
- resize: none;
617
- width: 1px;
618
- height: 1px;
619
- box-sizing: content-box;
620
- }
621
-