@khanacademy/math-input 0.5.6 → 0.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/CHANGELOG.md +6 -0
- package/dist/es/index.css +135 -134
- package/dist/index.css +135 -134
- package/less/main.less +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/es/index.css
CHANGED
|
@@ -9,6 +9,140 @@
|
|
|
9
9
|
* If the animation durations change, the corresponding values in
|
|
10
10
|
* echo-manager.js must change as well.
|
|
11
11
|
*/
|
|
12
|
+
.echo-slide-and-fade-enter {
|
|
13
|
+
opacity: 1 !important;
|
|
14
|
+
transform: translate3d(0, 0, 0) !important;
|
|
15
|
+
}
|
|
16
|
+
.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
|
|
17
|
+
opacity: 0 !important;
|
|
18
|
+
transform: translate3d(0, -33%, 0) !important;
|
|
19
|
+
/**
|
|
20
|
+
* TODO(charlie): These times are intentionally different, which means
|
|
21
|
+
* that the animation really "ends" after 400ms
|
|
22
|
+
* cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
|
|
23
|
+
* the transform doesn't complete. There's probably a way to achieve the
|
|
24
|
+
* same effect by manipulating the transform's Bezier curve and total
|
|
25
|
+
* displacement.
|
|
26
|
+
*/
|
|
27
|
+
transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
|
|
28
|
+
}
|
|
29
|
+
.echo-fade-only-enter {
|
|
30
|
+
opacity: 1 !important;
|
|
31
|
+
}
|
|
32
|
+
.echo-fade-only-enter.echo-fade-only-enter-active {
|
|
33
|
+
opacity: 0 !important;
|
|
34
|
+
transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
|
|
35
|
+
}
|
|
36
|
+
.echo-long-fade-only-enter {
|
|
37
|
+
opacity: 1 !important;
|
|
38
|
+
}
|
|
39
|
+
.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
|
|
40
|
+
opacity: 0 !important;
|
|
41
|
+
transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
|
|
42
|
+
}
|
|
43
|
+
.keypad-input {
|
|
44
|
+
outline: none !important;
|
|
45
|
+
}
|
|
46
|
+
.keypad-input .mq-editable-field .mq-root-block {
|
|
47
|
+
overflow-x: scroll;
|
|
48
|
+
}
|
|
49
|
+
.keypad-input .mq-editable-field .mq-cursor:not(:only-child),
|
|
50
|
+
.keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
|
|
51
|
+
/* HACK(charlie): Magic numbers to properly size and position the vertical
|
|
52
|
+
cursor, which is visible whenever the cursor is not alone in its parent,
|
|
53
|
+
with the exception that it's also visible when the entire input is
|
|
54
|
+
empty. */
|
|
55
|
+
height: 20px !important;
|
|
56
|
+
width: 2px;
|
|
57
|
+
margin-top: -5px !important;
|
|
58
|
+
vertical-align: middle !important;
|
|
59
|
+
border-radius: 1px !important;
|
|
60
|
+
}
|
|
61
|
+
.keypad-input .mq-editable-field .mq-cursor {
|
|
62
|
+
border-left: 2px solid #1865f2 !important;
|
|
63
|
+
margin-left: -1px !important;
|
|
64
|
+
margin-right: -1px !important;
|
|
65
|
+
opacity: 1 !important;
|
|
66
|
+
transition: opacity 500ms ease-out !important;
|
|
67
|
+
visibility: visible !important;
|
|
68
|
+
}
|
|
69
|
+
.keypad-input .mq-editable-field .mq-cursor.mq-blink {
|
|
70
|
+
opacity: 0 !important;
|
|
71
|
+
transition: opacity 500ms ease-in !important;
|
|
72
|
+
visibility: visible !important;
|
|
73
|
+
}
|
|
74
|
+
.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
|
|
75
|
+
border: 2px solid !important;
|
|
76
|
+
border-color: #1865f2 !important;
|
|
77
|
+
border-radius: 1px;
|
|
78
|
+
opacity: 1 !important;
|
|
79
|
+
padding: 0 4px 0 4px;
|
|
80
|
+
transition: border-color 500ms ease-out !important;
|
|
81
|
+
}
|
|
82
|
+
.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
|
|
83
|
+
border-color: #1865f2 !important;
|
|
84
|
+
opacity: 1 !important;
|
|
85
|
+
transition: border-color 500ms ease-in !important;
|
|
86
|
+
}
|
|
87
|
+
.keypad-input .mq-empty {
|
|
88
|
+
background: transparent !important;
|
|
89
|
+
}
|
|
90
|
+
.keypad-input .mq-empty:not(.mq-root-block):after,
|
|
91
|
+
.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
|
|
92
|
+
border: 2px solid rgba(33, 36, 44, 0.16);
|
|
93
|
+
border-radius: 1px;
|
|
94
|
+
color: transparent;
|
|
95
|
+
display: inline-block;
|
|
96
|
+
margin-left: -1px;
|
|
97
|
+
margin-right: -1px;
|
|
98
|
+
padding: 0 4px 0 4px;
|
|
99
|
+
visibility: visible !important;
|
|
100
|
+
}
|
|
101
|
+
.keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
|
|
102
|
+
border-color: white;
|
|
103
|
+
}
|
|
104
|
+
.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
|
|
105
|
+
content: 'c';
|
|
106
|
+
}
|
|
107
|
+
.keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
|
|
108
|
+
.keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
|
|
109
|
+
background: #1865f2 !important;
|
|
110
|
+
border-color: white !important;
|
|
111
|
+
color: white !important;
|
|
112
|
+
}
|
|
113
|
+
.keypad-input .mq-math-mode .mq-selection .mq-scaled,
|
|
114
|
+
.keypad-input .mq-editable-field .mq-selection .mq-scaled {
|
|
115
|
+
background: transparent !important;
|
|
116
|
+
border-color: transparent !important;
|
|
117
|
+
color: white !important;
|
|
118
|
+
}
|
|
119
|
+
.keypad-input .mq-selection {
|
|
120
|
+
background: #1865f2 !important;
|
|
121
|
+
border-color: white !important;
|
|
122
|
+
color: white !important;
|
|
123
|
+
display: inline-block !important;
|
|
124
|
+
}
|
|
125
|
+
.keypad-container .katex {
|
|
126
|
+
color: inherit !important;
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Styles for managing the popover animations.
|
|
130
|
+
*
|
|
131
|
+
* Ideally, we'd be generating these styles with Aphrodite (along with
|
|
132
|
+
* CSSTransitionGroup's support for custom classnames), but the generated
|
|
133
|
+
* styles have issues on mobile Safari.
|
|
134
|
+
* See: https://github.com/Khan/aphrodite/issues/68.
|
|
135
|
+
*
|
|
136
|
+
* If the animation durations change, the corresponding values in
|
|
137
|
+
* popover-manager.js must change as well.
|
|
138
|
+
*/
|
|
139
|
+
.popover-enter {
|
|
140
|
+
opacity: 0 !important;
|
|
141
|
+
}
|
|
142
|
+
.popover-enter.popover-enter-active {
|
|
143
|
+
opacity: 1 !important;
|
|
144
|
+
transition: opacity 200ms ease-out !important;
|
|
145
|
+
}
|
|
12
146
|
/*
|
|
13
147
|
* MathQuill v0.10.1 http://mathquill.com
|
|
14
148
|
* by Han, Jeanine, and Mary maintainers@mathquill.com
|
|
@@ -444,140 +578,7 @@
|
|
|
444
578
|
filter: progid:DXImageTransform.Microsoft.Chroma(color='white');
|
|
445
579
|
margin-top: -0.1em;
|
|
446
580
|
}
|
|
447
|
-
|
|
448
|
-
opacity: 1 !important;
|
|
449
|
-
transform: translate3d(0, 0, 0) !important;
|
|
450
|
-
}
|
|
451
|
-
.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
|
|
452
|
-
opacity: 0 !important;
|
|
453
|
-
transform: translate3d(0, -33%, 0) !important;
|
|
454
|
-
/**
|
|
455
|
-
* TODO(charlie): These times are intentionally different, which means
|
|
456
|
-
* that the animation really "ends" after 400ms
|
|
457
|
-
* cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
|
|
458
|
-
* the transform doesn't complete. There's probably a way to achieve the
|
|
459
|
-
* same effect by manipulating the transform's Bezier curve and total
|
|
460
|
-
* displacement.
|
|
461
|
-
*/
|
|
462
|
-
transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
|
|
463
|
-
}
|
|
464
|
-
.echo-fade-only-enter {
|
|
465
|
-
opacity: 1 !important;
|
|
466
|
-
}
|
|
467
|
-
.echo-fade-only-enter.echo-fade-only-enter-active {
|
|
468
|
-
opacity: 0 !important;
|
|
469
|
-
transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
|
|
470
|
-
}
|
|
471
|
-
.echo-long-fade-only-enter {
|
|
472
|
-
opacity: 1 !important;
|
|
473
|
-
}
|
|
474
|
-
.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
|
|
475
|
-
opacity: 0 !important;
|
|
476
|
-
transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
|
|
477
|
-
}
|
|
478
|
-
.keypad-input {
|
|
479
|
-
outline: none !important;
|
|
480
|
-
}
|
|
481
|
-
.keypad-input .mq-editable-field .mq-root-block {
|
|
482
|
-
overflow-x: scroll;
|
|
483
|
-
}
|
|
484
|
-
.keypad-input .mq-editable-field .mq-cursor:not(:only-child),
|
|
485
|
-
.keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
|
|
486
|
-
/* HACK(charlie): Magic numbers to properly size and position the vertical
|
|
487
|
-
cursor, which is visible whenever the cursor is not alone in its parent,
|
|
488
|
-
with the exception that it's also visible when the entire input is
|
|
489
|
-
empty. */
|
|
490
|
-
height: 20px !important;
|
|
491
|
-
width: 2px;
|
|
492
|
-
margin-top: -5px !important;
|
|
493
|
-
vertical-align: middle !important;
|
|
494
|
-
border-radius: 1px !important;
|
|
495
|
-
}
|
|
496
|
-
.keypad-input .mq-editable-field .mq-cursor {
|
|
497
|
-
border-left: 2px solid #1865f2 !important;
|
|
498
|
-
margin-left: -1px !important;
|
|
499
|
-
margin-right: -1px !important;
|
|
500
|
-
opacity: 1 !important;
|
|
501
|
-
transition: opacity 500ms ease-out !important;
|
|
502
|
-
visibility: visible !important;
|
|
503
|
-
}
|
|
504
|
-
.keypad-input .mq-editable-field .mq-cursor.mq-blink {
|
|
505
|
-
opacity: 0 !important;
|
|
506
|
-
transition: opacity 500ms ease-in !important;
|
|
507
|
-
visibility: visible !important;
|
|
508
|
-
}
|
|
509
|
-
.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
|
|
510
|
-
border: 2px solid !important;
|
|
511
|
-
border-color: #1865f2 !important;
|
|
512
|
-
border-radius: 1px;
|
|
513
|
-
opacity: 1 !important;
|
|
514
|
-
padding: 0 4px 0 4px;
|
|
515
|
-
transition: border-color 500ms ease-out !important;
|
|
516
|
-
}
|
|
517
|
-
.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
|
|
518
|
-
border-color: #1865f2 !important;
|
|
519
|
-
opacity: 1 !important;
|
|
520
|
-
transition: border-color 500ms ease-in !important;
|
|
521
|
-
}
|
|
522
|
-
.keypad-input .mq-empty {
|
|
523
|
-
background: transparent !important;
|
|
524
|
-
}
|
|
525
|
-
.keypad-input .mq-empty:not(.mq-root-block):after,
|
|
526
|
-
.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
|
|
527
|
-
border: 2px solid rgba(33, 36, 44, 0.16);
|
|
528
|
-
border-radius: 1px;
|
|
529
|
-
color: transparent;
|
|
530
|
-
display: inline-block;
|
|
531
|
-
margin-left: -1px;
|
|
532
|
-
margin-right: -1px;
|
|
533
|
-
padding: 0 4px 0 4px;
|
|
534
|
-
visibility: visible !important;
|
|
535
|
-
}
|
|
536
|
-
.keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
|
|
537
|
-
border-color: white;
|
|
538
|
-
}
|
|
539
|
-
.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
|
|
540
|
-
content: 'c';
|
|
541
|
-
}
|
|
542
|
-
.keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
|
|
543
|
-
.keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
|
|
544
|
-
background: #1865f2 !important;
|
|
545
|
-
border-color: white !important;
|
|
546
|
-
color: white !important;
|
|
547
|
-
}
|
|
548
|
-
.keypad-input .mq-math-mode .mq-selection .mq-scaled,
|
|
549
|
-
.keypad-input .mq-editable-field .mq-selection .mq-scaled {
|
|
550
|
-
background: transparent !important;
|
|
551
|
-
border-color: transparent !important;
|
|
552
|
-
color: white !important;
|
|
553
|
-
}
|
|
554
|
-
.keypad-input .mq-selection {
|
|
555
|
-
background: #1865f2 !important;
|
|
556
|
-
border-color: white !important;
|
|
557
|
-
color: white !important;
|
|
558
|
-
display: inline-block !important;
|
|
559
|
-
}
|
|
560
|
-
.keypad-container .katex {
|
|
561
|
-
color: inherit !important;
|
|
562
|
-
}
|
|
563
|
-
/**
|
|
564
|
-
* Styles for managing the popover animations.
|
|
565
|
-
*
|
|
566
|
-
* Ideally, we'd be generating these styles with Aphrodite (along with
|
|
567
|
-
* CSSTransitionGroup's support for custom classnames), but the generated
|
|
568
|
-
* styles have issues on mobile Safari.
|
|
569
|
-
* See: https://github.com/Khan/aphrodite/issues/68.
|
|
570
|
-
*
|
|
571
|
-
* If the animation durations change, the corresponding values in
|
|
572
|
-
* popover-manager.js must change as well.
|
|
573
|
-
*/
|
|
574
|
-
.popover-enter {
|
|
575
|
-
opacity: 0 !important;
|
|
576
|
-
}
|
|
577
|
-
.popover-enter.popover-enter-active {
|
|
578
|
-
opacity: 1 !important;
|
|
579
|
-
transition: opacity 200ms ease-out !important;
|
|
580
|
-
}
|
|
581
|
+
|
|
581
582
|
.tabbar_item {
|
|
582
583
|
background-color: red;
|
|
583
584
|
}
|
package/dist/index.css
CHANGED
|
@@ -9,6 +9,140 @@
|
|
|
9
9
|
* If the animation durations change, the corresponding values in
|
|
10
10
|
* echo-manager.js must change as well.
|
|
11
11
|
*/
|
|
12
|
+
.echo-slide-and-fade-enter {
|
|
13
|
+
opacity: 1 !important;
|
|
14
|
+
transform: translate3d(0, 0, 0) !important;
|
|
15
|
+
}
|
|
16
|
+
.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
|
|
17
|
+
opacity: 0 !important;
|
|
18
|
+
transform: translate3d(0, -33%, 0) !important;
|
|
19
|
+
/**
|
|
20
|
+
* TODO(charlie): These times are intentionally different, which means
|
|
21
|
+
* that the animation really "ends" after 400ms
|
|
22
|
+
* cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
|
|
23
|
+
* the transform doesn't complete. There's probably a way to achieve the
|
|
24
|
+
* same effect by manipulating the transform's Bezier curve and total
|
|
25
|
+
* displacement.
|
|
26
|
+
*/
|
|
27
|
+
transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
|
|
28
|
+
}
|
|
29
|
+
.echo-fade-only-enter {
|
|
30
|
+
opacity: 1 !important;
|
|
31
|
+
}
|
|
32
|
+
.echo-fade-only-enter.echo-fade-only-enter-active {
|
|
33
|
+
opacity: 0 !important;
|
|
34
|
+
transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
|
|
35
|
+
}
|
|
36
|
+
.echo-long-fade-only-enter {
|
|
37
|
+
opacity: 1 !important;
|
|
38
|
+
}
|
|
39
|
+
.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
|
|
40
|
+
opacity: 0 !important;
|
|
41
|
+
transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
|
|
42
|
+
}
|
|
43
|
+
.keypad-input {
|
|
44
|
+
outline: none !important;
|
|
45
|
+
}
|
|
46
|
+
.keypad-input .mq-editable-field .mq-root-block {
|
|
47
|
+
overflow-x: scroll;
|
|
48
|
+
}
|
|
49
|
+
.keypad-input .mq-editable-field .mq-cursor:not(:only-child),
|
|
50
|
+
.keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
|
|
51
|
+
/* HACK(charlie): Magic numbers to properly size and position the vertical
|
|
52
|
+
cursor, which is visible whenever the cursor is not alone in its parent,
|
|
53
|
+
with the exception that it's also visible when the entire input is
|
|
54
|
+
empty. */
|
|
55
|
+
height: 20px !important;
|
|
56
|
+
width: 2px;
|
|
57
|
+
margin-top: -5px !important;
|
|
58
|
+
vertical-align: middle !important;
|
|
59
|
+
border-radius: 1px !important;
|
|
60
|
+
}
|
|
61
|
+
.keypad-input .mq-editable-field .mq-cursor {
|
|
62
|
+
border-left: 2px solid #1865f2 !important;
|
|
63
|
+
margin-left: -1px !important;
|
|
64
|
+
margin-right: -1px !important;
|
|
65
|
+
opacity: 1 !important;
|
|
66
|
+
transition: opacity 500ms ease-out !important;
|
|
67
|
+
visibility: visible !important;
|
|
68
|
+
}
|
|
69
|
+
.keypad-input .mq-editable-field .mq-cursor.mq-blink {
|
|
70
|
+
opacity: 0 !important;
|
|
71
|
+
transition: opacity 500ms ease-in !important;
|
|
72
|
+
visibility: visible !important;
|
|
73
|
+
}
|
|
74
|
+
.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
|
|
75
|
+
border: 2px solid !important;
|
|
76
|
+
border-color: #1865f2 !important;
|
|
77
|
+
border-radius: 1px;
|
|
78
|
+
opacity: 1 !important;
|
|
79
|
+
padding: 0 4px 0 4px;
|
|
80
|
+
transition: border-color 500ms ease-out !important;
|
|
81
|
+
}
|
|
82
|
+
.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
|
|
83
|
+
border-color: #1865f2 !important;
|
|
84
|
+
opacity: 1 !important;
|
|
85
|
+
transition: border-color 500ms ease-in !important;
|
|
86
|
+
}
|
|
87
|
+
.keypad-input .mq-empty {
|
|
88
|
+
background: transparent !important;
|
|
89
|
+
}
|
|
90
|
+
.keypad-input .mq-empty:not(.mq-root-block):after,
|
|
91
|
+
.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
|
|
92
|
+
border: 2px solid rgba(33, 36, 44, 0.16);
|
|
93
|
+
border-radius: 1px;
|
|
94
|
+
color: transparent;
|
|
95
|
+
display: inline-block;
|
|
96
|
+
margin-left: -1px;
|
|
97
|
+
margin-right: -1px;
|
|
98
|
+
padding: 0 4px 0 4px;
|
|
99
|
+
visibility: visible !important;
|
|
100
|
+
}
|
|
101
|
+
.keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
|
|
102
|
+
border-color: white;
|
|
103
|
+
}
|
|
104
|
+
.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
|
|
105
|
+
content: 'c';
|
|
106
|
+
}
|
|
107
|
+
.keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
|
|
108
|
+
.keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
|
|
109
|
+
background: #1865f2 !important;
|
|
110
|
+
border-color: white !important;
|
|
111
|
+
color: white !important;
|
|
112
|
+
}
|
|
113
|
+
.keypad-input .mq-math-mode .mq-selection .mq-scaled,
|
|
114
|
+
.keypad-input .mq-editable-field .mq-selection .mq-scaled {
|
|
115
|
+
background: transparent !important;
|
|
116
|
+
border-color: transparent !important;
|
|
117
|
+
color: white !important;
|
|
118
|
+
}
|
|
119
|
+
.keypad-input .mq-selection {
|
|
120
|
+
background: #1865f2 !important;
|
|
121
|
+
border-color: white !important;
|
|
122
|
+
color: white !important;
|
|
123
|
+
display: inline-block !important;
|
|
124
|
+
}
|
|
125
|
+
.keypad-container .katex {
|
|
126
|
+
color: inherit !important;
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Styles for managing the popover animations.
|
|
130
|
+
*
|
|
131
|
+
* Ideally, we'd be generating these styles with Aphrodite (along with
|
|
132
|
+
* CSSTransitionGroup's support for custom classnames), but the generated
|
|
133
|
+
* styles have issues on mobile Safari.
|
|
134
|
+
* See: https://github.com/Khan/aphrodite/issues/68.
|
|
135
|
+
*
|
|
136
|
+
* If the animation durations change, the corresponding values in
|
|
137
|
+
* popover-manager.js must change as well.
|
|
138
|
+
*/
|
|
139
|
+
.popover-enter {
|
|
140
|
+
opacity: 0 !important;
|
|
141
|
+
}
|
|
142
|
+
.popover-enter.popover-enter-active {
|
|
143
|
+
opacity: 1 !important;
|
|
144
|
+
transition: opacity 200ms ease-out !important;
|
|
145
|
+
}
|
|
12
146
|
/*
|
|
13
147
|
* MathQuill v0.10.1 http://mathquill.com
|
|
14
148
|
* by Han, Jeanine, and Mary maintainers@mathquill.com
|
|
@@ -444,140 +578,7 @@
|
|
|
444
578
|
filter: progid:DXImageTransform.Microsoft.Chroma(color='white');
|
|
445
579
|
margin-top: -0.1em;
|
|
446
580
|
}
|
|
447
|
-
|
|
448
|
-
opacity: 1 !important;
|
|
449
|
-
transform: translate3d(0, 0, 0) !important;
|
|
450
|
-
}
|
|
451
|
-
.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
|
|
452
|
-
opacity: 0 !important;
|
|
453
|
-
transform: translate3d(0, -33%, 0) !important;
|
|
454
|
-
/**
|
|
455
|
-
* TODO(charlie): These times are intentionally different, which means
|
|
456
|
-
* that the animation really "ends" after 400ms
|
|
457
|
-
* cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
|
|
458
|
-
* the transform doesn't complete. There's probably a way to achieve the
|
|
459
|
-
* same effect by manipulating the transform's Bezier curve and total
|
|
460
|
-
* displacement.
|
|
461
|
-
*/
|
|
462
|
-
transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
|
|
463
|
-
}
|
|
464
|
-
.echo-fade-only-enter {
|
|
465
|
-
opacity: 1 !important;
|
|
466
|
-
}
|
|
467
|
-
.echo-fade-only-enter.echo-fade-only-enter-active {
|
|
468
|
-
opacity: 0 !important;
|
|
469
|
-
transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
|
|
470
|
-
}
|
|
471
|
-
.echo-long-fade-only-enter {
|
|
472
|
-
opacity: 1 !important;
|
|
473
|
-
}
|
|
474
|
-
.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
|
|
475
|
-
opacity: 0 !important;
|
|
476
|
-
transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
|
|
477
|
-
}
|
|
478
|
-
.keypad-input {
|
|
479
|
-
outline: none !important;
|
|
480
|
-
}
|
|
481
|
-
.keypad-input .mq-editable-field .mq-root-block {
|
|
482
|
-
overflow-x: scroll;
|
|
483
|
-
}
|
|
484
|
-
.keypad-input .mq-editable-field .mq-cursor:not(:only-child),
|
|
485
|
-
.keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
|
|
486
|
-
/* HACK(charlie): Magic numbers to properly size and position the vertical
|
|
487
|
-
cursor, which is visible whenever the cursor is not alone in its parent,
|
|
488
|
-
with the exception that it's also visible when the entire input is
|
|
489
|
-
empty. */
|
|
490
|
-
height: 20px !important;
|
|
491
|
-
width: 2px;
|
|
492
|
-
margin-top: -5px !important;
|
|
493
|
-
vertical-align: middle !important;
|
|
494
|
-
border-radius: 1px !important;
|
|
495
|
-
}
|
|
496
|
-
.keypad-input .mq-editable-field .mq-cursor {
|
|
497
|
-
border-left: 2px solid #1865f2 !important;
|
|
498
|
-
margin-left: -1px !important;
|
|
499
|
-
margin-right: -1px !important;
|
|
500
|
-
opacity: 1 !important;
|
|
501
|
-
transition: opacity 500ms ease-out !important;
|
|
502
|
-
visibility: visible !important;
|
|
503
|
-
}
|
|
504
|
-
.keypad-input .mq-editable-field .mq-cursor.mq-blink {
|
|
505
|
-
opacity: 0 !important;
|
|
506
|
-
transition: opacity 500ms ease-in !important;
|
|
507
|
-
visibility: visible !important;
|
|
508
|
-
}
|
|
509
|
-
.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
|
|
510
|
-
border: 2px solid !important;
|
|
511
|
-
border-color: #1865f2 !important;
|
|
512
|
-
border-radius: 1px;
|
|
513
|
-
opacity: 1 !important;
|
|
514
|
-
padding: 0 4px 0 4px;
|
|
515
|
-
transition: border-color 500ms ease-out !important;
|
|
516
|
-
}
|
|
517
|
-
.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
|
|
518
|
-
border-color: #1865f2 !important;
|
|
519
|
-
opacity: 1 !important;
|
|
520
|
-
transition: border-color 500ms ease-in !important;
|
|
521
|
-
}
|
|
522
|
-
.keypad-input .mq-empty {
|
|
523
|
-
background: transparent !important;
|
|
524
|
-
}
|
|
525
|
-
.keypad-input .mq-empty:not(.mq-root-block):after,
|
|
526
|
-
.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
|
|
527
|
-
border: 2px solid rgba(33, 36, 44, 0.16);
|
|
528
|
-
border-radius: 1px;
|
|
529
|
-
color: transparent;
|
|
530
|
-
display: inline-block;
|
|
531
|
-
margin-left: -1px;
|
|
532
|
-
margin-right: -1px;
|
|
533
|
-
padding: 0 4px 0 4px;
|
|
534
|
-
visibility: visible !important;
|
|
535
|
-
}
|
|
536
|
-
.keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
|
|
537
|
-
border-color: white;
|
|
538
|
-
}
|
|
539
|
-
.keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
|
|
540
|
-
content: 'c';
|
|
541
|
-
}
|
|
542
|
-
.keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
|
|
543
|
-
.keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
|
|
544
|
-
background: #1865f2 !important;
|
|
545
|
-
border-color: white !important;
|
|
546
|
-
color: white !important;
|
|
547
|
-
}
|
|
548
|
-
.keypad-input .mq-math-mode .mq-selection .mq-scaled,
|
|
549
|
-
.keypad-input .mq-editable-field .mq-selection .mq-scaled {
|
|
550
|
-
background: transparent !important;
|
|
551
|
-
border-color: transparent !important;
|
|
552
|
-
color: white !important;
|
|
553
|
-
}
|
|
554
|
-
.keypad-input .mq-selection {
|
|
555
|
-
background: #1865f2 !important;
|
|
556
|
-
border-color: white !important;
|
|
557
|
-
color: white !important;
|
|
558
|
-
display: inline-block !important;
|
|
559
|
-
}
|
|
560
|
-
.keypad-container .katex {
|
|
561
|
-
color: inherit !important;
|
|
562
|
-
}
|
|
563
|
-
/**
|
|
564
|
-
* Styles for managing the popover animations.
|
|
565
|
-
*
|
|
566
|
-
* Ideally, we'd be generating these styles with Aphrodite (along with
|
|
567
|
-
* CSSTransitionGroup's support for custom classnames), but the generated
|
|
568
|
-
* styles have issues on mobile Safari.
|
|
569
|
-
* See: https://github.com/Khan/aphrodite/issues/68.
|
|
570
|
-
*
|
|
571
|
-
* If the animation durations change, the corresponding values in
|
|
572
|
-
* popover-manager.js must change as well.
|
|
573
|
-
*/
|
|
574
|
-
.popover-enter {
|
|
575
|
-
opacity: 0 !important;
|
|
576
|
-
}
|
|
577
|
-
.popover-enter.popover-enter-active {
|
|
578
|
-
opacity: 1 !important;
|
|
579
|
-
transition: opacity 200ms ease-out !important;
|
|
580
|
-
}
|
|
581
|
+
|
|
581
582
|
.tabbar_item {
|
|
582
583
|
background-color: red;
|
|
583
584
|
}
|
package/less/main.less
CHANGED