@zzish/math-rich-input 0.1.40 → 0.1.42
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/math-rich-input.css +161 -135
- package/package.json +1 -1
- package/src/MathRichInput.css +31 -5
package/dist/math-rich-input.css
CHANGED
|
@@ -11,11 +11,7 @@
|
|
|
11
11
|
border-radius: 5px;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
background-color: white !important;
|
|
16
|
-
outline: 0px;
|
|
17
|
-
border: 1px solid #663676;
|
|
18
|
-
}
|
|
14
|
+
|
|
19
15
|
|
|
20
16
|
.MathRichInput-scrollview {
|
|
21
17
|
position: relative;
|
|
@@ -78,6 +74,166 @@
|
|
|
78
74
|
padding: 2px;
|
|
79
75
|
margin: 0px 2px;
|
|
80
76
|
}
|
|
77
|
+
|
|
78
|
+
.MathRichInput-Container {
|
|
79
|
+
:focus-within {
|
|
80
|
+
background-color: white;
|
|
81
|
+
outline: 0px;
|
|
82
|
+
/* border: 1px solid #663676; */
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.dark {
|
|
86
|
+
:focus-within {
|
|
87
|
+
background: none;
|
|
88
|
+
outline: 0px;
|
|
89
|
+
border: none;
|
|
90
|
+
}
|
|
91
|
+
.MathRichInput {
|
|
92
|
+
background: none;
|
|
93
|
+
color: white;
|
|
94
|
+
border: none;
|
|
95
|
+
|
|
96
|
+
.katex, .base {
|
|
97
|
+
background: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:focus {
|
|
101
|
+
border: none;
|
|
102
|
+
background: none;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
/* Note that the top left position of the toolbar is set programatically in componentDidMount */
|
|
108
|
+
|
|
109
|
+
.Toolbar {
|
|
110
|
+
position: absolute;
|
|
111
|
+
z-index: 1;
|
|
112
|
+
display: flex;
|
|
113
|
+
height: 42px;
|
|
114
|
+
background-color: white;
|
|
115
|
+
border: 1px solid #d0d0d0;
|
|
116
|
+
border-radius: 5px;
|
|
117
|
+
box-shadow: 1px 1px 5px #a0a0a0;
|
|
118
|
+
animation: 0.5s fadeIn1;
|
|
119
|
+
animation-fill-mode: forwards;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@keyframes fadeIn1 {
|
|
123
|
+
0% {
|
|
124
|
+
opacity: 0;
|
|
125
|
+
}
|
|
126
|
+
100% {
|
|
127
|
+
opacity: 1;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.Toolbar-button {
|
|
132
|
+
font-family: sans-serif;
|
|
133
|
+
font-size: 16px;
|
|
134
|
+
width: 40px;
|
|
135
|
+
height: 36px;
|
|
136
|
+
background-color: white;
|
|
137
|
+
border-radius: 5px;
|
|
138
|
+
border: 0px;
|
|
139
|
+
padding: 1px;
|
|
140
|
+
margin: 2px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.Toolbar-button:hover {
|
|
144
|
+
color: white;
|
|
145
|
+
background: #663676;
|
|
146
|
+
cursor: pointer;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.Toolbar-button:active {
|
|
150
|
+
background: #808080;
|
|
151
|
+
color: white;
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.TB-narrow {
|
|
156
|
+
width: 30px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.TB-wide {
|
|
160
|
+
width: 46px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.TB-selected {
|
|
164
|
+
background: #d0d0d0;
|
|
165
|
+
color: black;
|
|
166
|
+
cursor: pointer;
|
|
167
|
+
animation: 0.2s TB-fadeIn;
|
|
168
|
+
animation-fill-mode: forwards;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.TB-selected:hover {
|
|
172
|
+
color: white;
|
|
173
|
+
background: #663676;
|
|
174
|
+
cursor: pointer;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@keyframes TB-fadeIn {
|
|
178
|
+
00% {
|
|
179
|
+
background: white;
|
|
180
|
+
}
|
|
181
|
+
100% {
|
|
182
|
+
background: #d0d0d0;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* Tooltip text */
|
|
187
|
+
.Toolbar-button .tooltiptext {
|
|
188
|
+
font-weight: normal;
|
|
189
|
+
visibility: hidden;
|
|
190
|
+
width: 100px;
|
|
191
|
+
background-color: #222;
|
|
192
|
+
color: #fff;
|
|
193
|
+
/*font-weight: bold;*/
|
|
194
|
+
font-size: 12px;
|
|
195
|
+
text-align: center;
|
|
196
|
+
padding: 4px 10px;
|
|
197
|
+
border-radius: 6px;
|
|
198
|
+
|
|
199
|
+
/* Position the tooltip text - see examples below! */
|
|
200
|
+
position: absolute;
|
|
201
|
+
z-index: 2;
|
|
202
|
+
top: -90%; /* Must leave a small gap between tooltip and button */
|
|
203
|
+
left: 50px;
|
|
204
|
+
|
|
205
|
+
/* transform: translate (50%,0%); */
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* Show the tooltip text when you mouse over the tooltip container */
|
|
209
|
+
.Toolbar-button:hover .tooltiptext {
|
|
210
|
+
animation: 0.8s fadeIn2;
|
|
211
|
+
animation-fill-mode: forwards;
|
|
212
|
+
visibility: visible;
|
|
213
|
+
/* width: 100px; */
|
|
214
|
+
/* top: -90%; */ /* Must leave a small gap between tooltip and button */
|
|
215
|
+
/* left: 20%; */
|
|
216
|
+
/* margin-left: -50px; */
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
@keyframes fadeIn2 {
|
|
220
|
+
00% {
|
|
221
|
+
opacity: 0;
|
|
222
|
+
}
|
|
223
|
+
70% {
|
|
224
|
+
opacity: 0;
|
|
225
|
+
}
|
|
226
|
+
100% {
|
|
227
|
+
visibility: visible;
|
|
228
|
+
opacity: 0.9;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* .tooltip {
|
|
233
|
+
position: relative;
|
|
234
|
+
display: inline-block;
|
|
235
|
+
border-bottom: 1px dotted black; /* If you want dots under the hoverable text
|
|
236
|
+
} */
|
|
81
237
|
.EquationEditorModal-background {
|
|
82
238
|
position: fixed;
|
|
83
239
|
top: 0;
|
|
@@ -233,136 +389,6 @@
|
|
|
233
389
|
.EquationEditorModal .slider.round:before {
|
|
234
390
|
border-radius: 50%;
|
|
235
391
|
}
|
|
236
|
-
/* Note that the top left position of the toolbar is set programatically in componentDidMount */
|
|
237
|
-
|
|
238
|
-
.Toolbar {
|
|
239
|
-
position: absolute;
|
|
240
|
-
z-index: 1;
|
|
241
|
-
display: flex;
|
|
242
|
-
height: 42px;
|
|
243
|
-
background-color: white;
|
|
244
|
-
border: 1px solid #d0d0d0;
|
|
245
|
-
border-radius: 5px;
|
|
246
|
-
box-shadow: 1px 1px 5px #a0a0a0;
|
|
247
|
-
animation: 0.5s fadeIn1;
|
|
248
|
-
animation-fill-mode: forwards;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
@keyframes fadeIn1 {
|
|
252
|
-
0% {
|
|
253
|
-
opacity: 0;
|
|
254
|
-
}
|
|
255
|
-
100% {
|
|
256
|
-
opacity: 1;
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.Toolbar-button {
|
|
261
|
-
font-family: sans-serif;
|
|
262
|
-
font-size: 16px;
|
|
263
|
-
width: 40px;
|
|
264
|
-
height: 36px;
|
|
265
|
-
background-color: white;
|
|
266
|
-
border-radius: 5px;
|
|
267
|
-
border: 0px;
|
|
268
|
-
padding: 1px;
|
|
269
|
-
margin: 2px;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
.Toolbar-button:hover {
|
|
273
|
-
color: white;
|
|
274
|
-
background: #663676;
|
|
275
|
-
cursor: pointer;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.Toolbar-button:active {
|
|
279
|
-
background: #808080;
|
|
280
|
-
color: white;
|
|
281
|
-
cursor: pointer;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
.TB-narrow {
|
|
285
|
-
width: 30px;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
.TB-wide {
|
|
289
|
-
width: 46px;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
.TB-selected {
|
|
293
|
-
background: #d0d0d0;
|
|
294
|
-
color: black;
|
|
295
|
-
cursor: pointer;
|
|
296
|
-
animation: 0.2s TB-fadeIn;
|
|
297
|
-
animation-fill-mode: forwards;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
.TB-selected:hover {
|
|
301
|
-
color: white;
|
|
302
|
-
background: #663676;
|
|
303
|
-
cursor: pointer;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
@keyframes TB-fadeIn {
|
|
307
|
-
00% {
|
|
308
|
-
background: white;
|
|
309
|
-
}
|
|
310
|
-
100% {
|
|
311
|
-
background: #d0d0d0;
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
/* Tooltip text */
|
|
316
|
-
.Toolbar-button .tooltiptext {
|
|
317
|
-
font-weight: normal;
|
|
318
|
-
visibility: hidden;
|
|
319
|
-
width: 100px;
|
|
320
|
-
background-color: #222;
|
|
321
|
-
color: #fff;
|
|
322
|
-
/*font-weight: bold;*/
|
|
323
|
-
font-size: 12px;
|
|
324
|
-
text-align: center;
|
|
325
|
-
padding: 4px 10px;
|
|
326
|
-
border-radius: 6px;
|
|
327
|
-
|
|
328
|
-
/* Position the tooltip text - see examples below! */
|
|
329
|
-
position: absolute;
|
|
330
|
-
z-index: 2;
|
|
331
|
-
top: -90%; /* Must leave a small gap between tooltip and button */
|
|
332
|
-
left: 50px;
|
|
333
|
-
|
|
334
|
-
/* transform: translate (50%,0%); */
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
/* Show the tooltip text when you mouse over the tooltip container */
|
|
338
|
-
.Toolbar-button:hover .tooltiptext {
|
|
339
|
-
animation: 0.8s fadeIn2;
|
|
340
|
-
animation-fill-mode: forwards;
|
|
341
|
-
visibility: visible;
|
|
342
|
-
/* width: 100px; */
|
|
343
|
-
/* top: -90%; */ /* Must leave a small gap between tooltip and button */
|
|
344
|
-
/* left: 20%; */
|
|
345
|
-
/* margin-left: -50px; */
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
@keyframes fadeIn2 {
|
|
349
|
-
00% {
|
|
350
|
-
opacity: 0;
|
|
351
|
-
}
|
|
352
|
-
70% {
|
|
353
|
-
opacity: 0;
|
|
354
|
-
}
|
|
355
|
-
100% {
|
|
356
|
-
visibility: visible;
|
|
357
|
-
opacity: 0.9;
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
/* .tooltip {
|
|
362
|
-
position: relative;
|
|
363
|
-
display: inline-block;
|
|
364
|
-
border-bottom: 1px dotted black; /* If you want dots under the hoverable text
|
|
365
|
-
} */
|
|
366
392
|
/* Note that the top left position of the accent bar is set programatically in componentDidMount */
|
|
367
393
|
|
|
368
394
|
.AccentBar {
|
package/package.json
CHANGED
package/src/MathRichInput.css
CHANGED
|
@@ -11,11 +11,7 @@
|
|
|
11
11
|
border-radius: 5px;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
background-color: white !important;
|
|
16
|
-
outline: 0px;
|
|
17
|
-
border: 1px solid #663676;
|
|
18
|
-
}
|
|
14
|
+
|
|
19
15
|
|
|
20
16
|
.MathRichInput-scrollview {
|
|
21
17
|
position: relative;
|
|
@@ -78,3 +74,33 @@
|
|
|
78
74
|
padding: 2px;
|
|
79
75
|
margin: 0px 2px;
|
|
80
76
|
}
|
|
77
|
+
|
|
78
|
+
.MathRichInput-Container {
|
|
79
|
+
:focus-within {
|
|
80
|
+
background-color: white;
|
|
81
|
+
outline: 0px;
|
|
82
|
+
/* border: 1px solid #663676; */
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.dark {
|
|
86
|
+
:focus-within {
|
|
87
|
+
background: none;
|
|
88
|
+
outline: 0px;
|
|
89
|
+
border: none;
|
|
90
|
+
}
|
|
91
|
+
.MathRichInput {
|
|
92
|
+
background: none;
|
|
93
|
+
color: white;
|
|
94
|
+
border: none;
|
|
95
|
+
|
|
96
|
+
.katex, .base {
|
|
97
|
+
background: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:focus {
|
|
101
|
+
border: none;
|
|
102
|
+
background: none;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|