@zzish/math-rich-input 0.1.42 → 0.1.44

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.
Files changed (13) hide show
  1. package/dist/index.js +937 -1536
  2. package/dist/math-rich-input.css +550 -518
  3. package/package.json +3 -3
  4. package/src/AccentBar.css +113 -111
  5. package/src/EquationEditor.css +160 -159
  6. package/src/EquationEditor.jsx +528 -560
  7. package/src/EquationEditorModal.css +109 -101
  8. package/src/EquationEditorModal.jsx +65 -68
  9. package/src/MathRichInput.css +86 -66
  10. package/src/MathRichInput.jsx +1981 -2070
  11. package/src/Toolbar.css +83 -82
  12. package/src/Toolbar.jsx +220 -234
  13. package/src/index.js +4 -8
package/src/Toolbar.css CHANGED
@@ -1,126 +1,127 @@
1
1
  /* Note that the top left position of the toolbar is set programatically in componentDidMount */
2
2
 
3
3
  .Toolbar {
4
- position: absolute;
5
- z-index: 1;
6
- display: flex;
7
- height: 42px;
8
- background-color: white;
9
- border: 1px solid #d0d0d0;
10
- border-radius: 5px;
11
- box-shadow: 1px 1px 5px #a0a0a0;
12
- animation: 0.5s fadeIn1;
13
- animation-fill-mode: forwards;
4
+ position: absolute;
5
+ z-index: 10;
6
+ display: flex;
7
+ height: 42px;
8
+ background-color: white;
9
+ border: 1px solid #d0d0d0;
10
+ border-radius: 5px;
11
+ box-shadow: 1px 1px 5px #a0a0a0;
12
+ animation: 0.5s fadeIn1;
13
+ animation-fill-mode: forwards;
14
+ color: black;
14
15
  }
15
16
 
16
17
  @keyframes fadeIn1 {
17
- 0% {
18
- opacity: 0;
19
- }
20
- 100% {
21
- opacity: 1;
22
- }
18
+ 0% {
19
+ opacity: 0;
20
+ }
21
+ 100% {
22
+ opacity: 1;
23
+ }
23
24
  }
24
25
 
25
26
  .Toolbar-button {
26
- font-family: sans-serif;
27
- font-size: 16px;
28
- width: 40px;
29
- height: 36px;
30
- background-color: white;
31
- border-radius: 5px;
32
- border: 0px;
33
- padding: 1px;
34
- margin: 2px;
27
+ font-family: sans-serif;
28
+ font-size: 16px;
29
+ width: 40px;
30
+ height: 36px;
31
+ background-color: white;
32
+ border-radius: 5px;
33
+ border: 0px;
34
+ padding: 1px;
35
+ margin: 2px;
35
36
  }
36
37
 
37
38
  .Toolbar-button:hover {
38
- color: white;
39
- background: #663676;
40
- cursor: pointer;
39
+ color: white;
40
+ background: #663676;
41
+ cursor: pointer;
41
42
  }
42
43
 
43
44
  .Toolbar-button:active {
44
- background: #808080;
45
- color: white;
46
- cursor: pointer;
45
+ background: #808080;
46
+ color: white;
47
+ cursor: pointer;
47
48
  }
48
49
 
49
50
  .TB-narrow {
50
- width: 30px;
51
+ width: 30px;
51
52
  }
52
53
 
53
54
  .TB-wide {
54
- width: 46px;
55
+ width: 46px;
55
56
  }
56
57
 
57
58
  .TB-selected {
58
- background: #d0d0d0;
59
- color: black;
60
- cursor: pointer;
61
- animation: 0.2s TB-fadeIn;
62
- animation-fill-mode: forwards;
59
+ background: #d0d0d0;
60
+ color: black;
61
+ cursor: pointer;
62
+ animation: 0.2s TB-fadeIn;
63
+ animation-fill-mode: forwards;
63
64
  }
64
65
 
65
66
  .TB-selected:hover {
66
- color: white;
67
- background: #663676;
68
- cursor: pointer;
67
+ color: white;
68
+ background: #663676;
69
+ cursor: pointer;
69
70
  }
70
71
 
71
72
  @keyframes TB-fadeIn {
72
- 00% {
73
- background: white;
74
- }
75
- 100% {
76
- background: #d0d0d0;
77
- }
73
+ 00% {
74
+ background: white;
75
+ }
76
+ 100% {
77
+ background: #d0d0d0;
78
+ }
78
79
  }
79
80
 
80
81
  /* Tooltip text */
81
82
  .Toolbar-button .tooltiptext {
82
- font-weight: normal;
83
- visibility: hidden;
84
- width: 100px;
85
- background-color: #222;
86
- color: #fff;
87
- /*font-weight: bold;*/
88
- font-size: 12px;
89
- text-align: center;
90
- padding: 4px 10px;
91
- border-radius: 6px;
92
-
93
- /* Position the tooltip text - see examples below! */
94
- position: absolute;
95
- z-index: 2;
96
- top: -90%; /* Must leave a small gap between tooltip and button */
97
- left: 50px;
98
-
99
- /* transform: translate (50%,0%); */
83
+ font-weight: normal;
84
+ visibility: hidden;
85
+ width: 100px;
86
+ background-color: #222;
87
+ color: #fff;
88
+ /*font-weight: bold;*/
89
+ font-size: 12px;
90
+ text-align: center;
91
+ padding: 4px 10px;
92
+ border-radius: 6px;
93
+
94
+ /* Position the tooltip text - see examples below! */
95
+ position: absolute;
96
+ z-index: 11;
97
+ top: -90%; /* Must leave a small gap between tooltip and button */
98
+ left: 50px;
99
+
100
+ /* transform: translate (50%,0%); */
100
101
  }
101
102
 
102
103
  /* Show the tooltip text when you mouse over the tooltip container */
103
104
  .Toolbar-button:hover .tooltiptext {
104
- animation: 0.8s fadeIn2;
105
- animation-fill-mode: forwards;
106
- visibility: visible;
107
- /* width: 100px; */
108
- /* top: -90%; */ /* Must leave a small gap between tooltip and button */
109
- /* left: 20%; */
110
- /* margin-left: -50px; */
105
+ animation: 0.8s fadeIn2;
106
+ animation-fill-mode: forwards;
107
+ visibility: visible;
108
+ /* width: 100px; */
109
+ /* top: -90%; */ /* Must leave a small gap between tooltip and button */
110
+ /* left: 20%; */
111
+ /* margin-left: -50px; */
111
112
  }
112
113
 
113
114
  @keyframes fadeIn2 {
114
- 00% {
115
- opacity: 0;
116
- }
117
- 70% {
118
- opacity: 0;
119
- }
120
- 100% {
121
- visibility: visible;
122
- opacity: 0.9;
123
- }
115
+ 00% {
116
+ opacity: 0;
117
+ }
118
+ 70% {
119
+ opacity: 0;
120
+ }
121
+ 100% {
122
+ visibility: visible;
123
+ opacity: 0.9;
124
+ }
124
125
  }
125
126
 
126
127
  /* .tooltip {