@zzish/math-rich-input 0.1.3 → 0.1.5
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/index.js +262 -186
- package/dist/math-rich-input.css +349 -353
- package/package.json +5 -3
- package/rollup.config.js +4 -4
- package/src/AccentBar.css +38 -39
- package/src/EquationEditor.css +89 -99
- package/src/EquationEditor.jsx +416 -368
- package/src/EquationEditorModal.css +49 -53
- package/src/MathRichInput.css +30 -23
- package/src/SymbolButton.css +31 -31
- package/src/SymbolButton.jsx +47 -49
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zzish/math-rich-input",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "React component for user to enter rich text with embedded math equations.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,8 +17,6 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"katex": "^0.12.0",
|
|
20
|
-
"react": "^17.0.1",
|
|
21
|
-
"react-dom": "^17.0.1",
|
|
22
20
|
"react-mathquill": "^1.0.1",
|
|
23
21
|
"react-transition-group": "^4.4.1",
|
|
24
22
|
"web-vitals": "^0.2.4"
|
|
@@ -40,5 +38,9 @@
|
|
|
40
38
|
"@rollup/plugin-node-resolve": "^11.2.0",
|
|
41
39
|
"rollup": "^2.41.4",
|
|
42
40
|
"rollup-plugin-css-only": "^3.1.0"
|
|
41
|
+
},
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"react": "^17.0.1",
|
|
44
|
+
"react-dom": "^17.0.1"
|
|
43
45
|
}
|
|
44
46
|
}
|
package/rollup.config.js
CHANGED
|
@@ -14,14 +14,14 @@ export default {
|
|
|
14
14
|
plugins: [
|
|
15
15
|
nodeResolve({ main: true }),
|
|
16
16
|
css({
|
|
17
|
-
output: "math-rich-input.css"
|
|
17
|
+
output: "math-rich-input.css",
|
|
18
18
|
}),
|
|
19
|
-
babel({
|
|
19
|
+
babel({
|
|
20
20
|
babelHelpers: "bundled",
|
|
21
|
-
exclude: "node_modules/**",
|
|
21
|
+
exclude: "node_modules/**",
|
|
22
22
|
extensions,
|
|
23
23
|
presets: ["@babel/env", "@babel/react"],
|
|
24
|
-
plugins: ["@babel/plugin-proposal-class-properties"]
|
|
24
|
+
plugins: ["@babel/plugin-proposal-class-properties"],
|
|
25
25
|
}),
|
|
26
26
|
commonjs({
|
|
27
27
|
extensions,
|
package/src/AccentBar.css
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
|
|
2
1
|
/* Note that the top left position of the accent bar is set programatically in componentDidMount */
|
|
3
2
|
|
|
4
3
|
.AccentBar {
|
|
5
4
|
position: fixed;
|
|
6
5
|
z-index: 1;
|
|
7
|
-
width:348px;
|
|
8
|
-
background-color:
|
|
6
|
+
width: 348px; /* max of 346px to ensure fits on Moto G4 mobile device screens */
|
|
7
|
+
background-color: red;
|
|
9
8
|
border: 1px solid #d0d0d0;
|
|
10
9
|
border-radius: 5px;
|
|
11
10
|
box-shadow: 1px 1px 5px #a0a0a0;
|
|
12
|
-
padding:5px;
|
|
13
|
-
|
|
11
|
+
padding: 5px;
|
|
12
|
+
animation: 0.4s fadeIn1;
|
|
14
13
|
animation-fill-mode: forwards;
|
|
15
14
|
}
|
|
16
15
|
|
|
@@ -21,46 +20,46 @@
|
|
|
21
20
|
border: 1px solid #d0d0d0;
|
|
22
21
|
border-radius: 5px;
|
|
23
22
|
box-shadow: 1px 1px 5px #a0a0a0;
|
|
24
|
-
padding:5px;
|
|
25
|
-
top:0px;
|
|
26
|
-
left:0px; /* Important to set this default so that accent bar renders to optimal width */
|
|
27
|
-
|
|
23
|
+
padding: 5px;
|
|
24
|
+
top: 0px;
|
|
25
|
+
left: 0px; /* Important to set this default so that accent bar renders to optimal width */
|
|
26
|
+
animation: 0.4s fadeIn1;
|
|
28
27
|
animation-fill-mode: forwards;
|
|
29
28
|
}
|
|
30
29
|
|
|
31
30
|
.AccentBar-outerContainer {
|
|
32
|
-
overflow-y:scroll;
|
|
33
|
-
border-radius:5px;
|
|
31
|
+
overflow-y: scroll;
|
|
32
|
+
border-radius: 5px;
|
|
34
33
|
overflow: overlay;
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
.AccentBar-innerContainer {
|
|
38
|
-
height:350px; /* Height of overall box */
|
|
37
|
+
height: 350px; /* Height of overall box */
|
|
39
38
|
}
|
|
40
39
|
|
|
41
40
|
@keyframes fadeIn1 {
|
|
42
41
|
0% {
|
|
43
42
|
opacity: 0;
|
|
44
|
-
}
|
|
43
|
+
}
|
|
45
44
|
100% {
|
|
46
|
-
opacity: 1
|
|
45
|
+
opacity: 1;
|
|
47
46
|
}
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
.AccentBar .type-a-letter {
|
|
51
|
-
color: #
|
|
52
|
-
font-family:sans-serif;
|
|
50
|
+
color: #a0a0a0;
|
|
51
|
+
font-family: sans-serif;
|
|
53
52
|
font-size: 14px;
|
|
54
53
|
font-weight: bold;
|
|
55
54
|
height: 36px;
|
|
56
|
-
padding-top:12px;
|
|
57
|
-
padding-left:20px;
|
|
55
|
+
padding-top: 12px;
|
|
56
|
+
padding-left: 20px;
|
|
58
57
|
}
|
|
59
58
|
|
|
60
59
|
.AccentBar-button {
|
|
61
|
-
font-family:sans-serif;
|
|
60
|
+
font-family: sans-serif;
|
|
62
61
|
font-size: 17px;
|
|
63
|
-
width:40px;
|
|
62
|
+
width: 40px;
|
|
64
63
|
height: 36px;
|
|
65
64
|
background: #f4f4f4;
|
|
66
65
|
border-radius: 5px;
|
|
@@ -75,7 +74,7 @@
|
|
|
75
74
|
}
|
|
76
75
|
|
|
77
76
|
.AB-narrow {
|
|
78
|
-
width:30px;
|
|
77
|
+
width: 30px;
|
|
79
78
|
}
|
|
80
79
|
|
|
81
80
|
.AccentBar-button:hover {
|
|
@@ -84,7 +83,7 @@
|
|
|
84
83
|
background: #663676;
|
|
85
84
|
cursor: pointer;
|
|
86
85
|
box-shadow: 1px 1px 3px #808080;
|
|
87
|
-
|
|
86
|
+
animation: 2s grow;
|
|
88
87
|
animation-fill-mode: forwards;
|
|
89
88
|
}
|
|
90
89
|
|
|
@@ -92,7 +91,7 @@
|
|
|
92
91
|
00% {
|
|
93
92
|
transform: scale(1);
|
|
94
93
|
box-shadow: 0px 0px 0px #808080;
|
|
95
|
-
}
|
|
94
|
+
}
|
|
96
95
|
10% {
|
|
97
96
|
transform: scale(1.3);
|
|
98
97
|
box-shadow: 1px 1px 3px #808080;
|
|
@@ -116,9 +115,9 @@
|
|
|
116
115
|
.AccentBar .tabBar {
|
|
117
116
|
background: white;
|
|
118
117
|
text-align: left;
|
|
119
|
-
border:0px;
|
|
120
|
-
padding:0px 0px 10px 0px;
|
|
121
|
-
margin:5px;
|
|
118
|
+
border: 0px;
|
|
119
|
+
padding: 0px 0px 10px 0px;
|
|
120
|
+
margin: 5px;
|
|
122
121
|
}
|
|
123
122
|
|
|
124
123
|
.AccentBar .tab {
|
|
@@ -126,15 +125,15 @@
|
|
|
126
125
|
font-weight: bold;
|
|
127
126
|
color: #404040;
|
|
128
127
|
text-align: left;
|
|
129
|
-
border:0px;
|
|
130
|
-
height:30px;
|
|
131
|
-
padding:2px 5px 2px 5px;
|
|
132
|
-
margin:2px;
|
|
128
|
+
border: 0px;
|
|
129
|
+
height: 30px;
|
|
130
|
+
padding: 2px 5px 2px 5px;
|
|
131
|
+
margin: 2px;
|
|
133
132
|
border-bottom: 4px solid #d0d0d0;
|
|
134
133
|
}
|
|
135
134
|
|
|
136
135
|
.AccentBar .tab:hover {
|
|
137
|
-
cursor:pointer
|
|
136
|
+
cursor: pointer;
|
|
138
137
|
}
|
|
139
138
|
|
|
140
139
|
.AccentBar .tab-selected {
|
|
@@ -142,10 +141,10 @@
|
|
|
142
141
|
font-weight: bold;
|
|
143
142
|
color: #404040;
|
|
144
143
|
text-align: left;
|
|
145
|
-
border:0px;
|
|
146
|
-
height:30px;
|
|
147
|
-
padding:2px 5px 2px 5px;
|
|
148
|
-
margin:2px;
|
|
144
|
+
border: 0px;
|
|
145
|
+
height: 30px;
|
|
146
|
+
padding: 2px 5px 2px 5px;
|
|
147
|
+
margin: 2px;
|
|
149
148
|
border-bottom: 4px solid #663676;
|
|
150
149
|
}
|
|
151
150
|
|
|
@@ -154,9 +153,9 @@
|
|
|
154
153
|
font-weight: bold;
|
|
155
154
|
/* color: #A0A0A0; */
|
|
156
155
|
color: #663676;
|
|
157
|
-
margin-top:8px;
|
|
158
|
-
margin-left:8px;
|
|
159
|
-
margin-bottom:4px;
|
|
156
|
+
margin-top: 8px;
|
|
157
|
+
margin-left: 8px;
|
|
158
|
+
margin-bottom: 4px;
|
|
160
159
|
}
|
|
161
160
|
|
|
162
161
|
.AccentBar .replace-section {
|
|
@@ -166,4 +165,4 @@
|
|
|
166
165
|
.AccentBar .tabArea {
|
|
167
166
|
animation: 0.4s fadeIn1;
|
|
168
167
|
animation-fill-mode: forwards;
|
|
169
|
-
}
|
|
168
|
+
}
|
package/src/EquationEditor.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
.EquationEditor {
|
|
2
|
-
|
|
3
|
-
height:auto;
|
|
2
|
+
height: auto;
|
|
4
3
|
text-align: center;
|
|
5
4
|
}
|
|
6
5
|
|
|
@@ -12,7 +11,7 @@
|
|
|
12
11
|
|
|
13
12
|
.EquationEditor .editableWrapper {
|
|
14
13
|
overflow: auto;
|
|
15
|
-
width:100%;
|
|
14
|
+
width: 100%;
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
.EquationEditor .cursorButton {
|
|
@@ -21,77 +20,77 @@
|
|
|
21
20
|
color: #663676;
|
|
22
21
|
background: white;
|
|
23
22
|
text-align: center;
|
|
24
|
-
border:1px solid #663676;
|
|
23
|
+
border: 1px solid #663676;
|
|
25
24
|
border-radius: 5px;
|
|
26
|
-
min-width:40px;
|
|
27
|
-
width:auto;
|
|
28
|
-
height:40px;
|
|
29
|
-
padding:0px;
|
|
25
|
+
min-width: 40px;
|
|
26
|
+
width: auto;
|
|
27
|
+
height: 40px;
|
|
28
|
+
padding: 0px;
|
|
30
29
|
margin-top: 10px;
|
|
31
|
-
margin-left:15px;
|
|
32
|
-
margin-right:15px;
|
|
30
|
+
margin-left: 15px;
|
|
31
|
+
margin-right: 15px;
|
|
33
32
|
/* transition: all .2s ease-in-out; */
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
.EquationEditor .centerBox {
|
|
37
|
-
display:inline-block;
|
|
38
|
-
text-align:center;
|
|
36
|
+
display: inline-block;
|
|
37
|
+
text-align: center;
|
|
39
38
|
}
|
|
40
39
|
|
|
41
40
|
.EquationEditor .editable {
|
|
42
41
|
/* width:auto; */
|
|
43
42
|
text-align: left;
|
|
44
|
-
min-height:26px;
|
|
45
|
-
min-width:150px;
|
|
43
|
+
min-height: 26px;
|
|
44
|
+
min-width: 150px;
|
|
46
45
|
font-size: 20px;
|
|
47
46
|
color: #404040;
|
|
48
|
-
border: 1px solid #
|
|
49
|
-
border-radius:5px;
|
|
47
|
+
border: 1px solid #b0b0b0;
|
|
48
|
+
border-radius: 5px;
|
|
50
49
|
/* height:36px; */
|
|
51
|
-
padding:7px 10px 7px 10px;
|
|
52
|
-
margin-top:6px;
|
|
53
|
-
margin-bottom:5px;
|
|
50
|
+
padding: 7px 10px 7px 10px;
|
|
51
|
+
margin-top: 6px;
|
|
52
|
+
margin-bottom: 5px;
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
.EquationEditor .editable-placeholder {
|
|
57
56
|
position: absolute;
|
|
58
57
|
z-index: -1;
|
|
59
|
-
min-height:26px;
|
|
60
|
-
min-width:150px;
|
|
58
|
+
min-height: 26px;
|
|
59
|
+
min-width: 150px;
|
|
61
60
|
font-size: 15px;
|
|
62
|
-
color:grey;
|
|
61
|
+
color: grey;
|
|
63
62
|
/* Note the x translation needs to be updatad programatically if the modal width changes */
|
|
64
|
-
transform: translate(-12px
|
|
63
|
+
transform: translate(-12px, -36px);
|
|
65
64
|
}
|
|
66
65
|
|
|
67
66
|
.EquationEditor .editable:focus-within {
|
|
68
|
-
border-radius:5px;
|
|
69
|
-
border: 1px solid #663676!important;
|
|
67
|
+
border-radius: 5px;
|
|
68
|
+
border: 1px solid #663676 !important;
|
|
70
69
|
box-shadow: 0px 0px 0px white;
|
|
71
70
|
/* box-shadow: inset 1px 1px 5px #a0a0a0; */
|
|
72
71
|
}
|
|
73
72
|
|
|
74
73
|
.latexInputAreaWrapper {
|
|
75
|
-
width:auto;
|
|
74
|
+
width: auto;
|
|
76
75
|
}
|
|
77
76
|
|
|
78
77
|
.EquationEditor .katexRenderedInput {
|
|
79
78
|
text-align: left;
|
|
80
|
-
min-height:30px;
|
|
81
|
-
width:90%;
|
|
79
|
+
min-height: 30px;
|
|
80
|
+
width: 90%;
|
|
82
81
|
font-size: 16px;
|
|
83
82
|
color: #404040;
|
|
84
|
-
border: 0px solid #
|
|
85
|
-
border-radius:5px;
|
|
83
|
+
border: 0px solid #b0b0b0;
|
|
84
|
+
border-radius: 5px;
|
|
86
85
|
/* height:36px; */
|
|
87
|
-
padding:7px 10px 4px 10px;
|
|
88
|
-
margin:
|
|
86
|
+
padding: 7px 10px 4px 10px;
|
|
87
|
+
margin: 5px 15px;
|
|
89
88
|
}
|
|
90
89
|
|
|
91
90
|
.EquationEditor .latexInput {
|
|
92
91
|
text-align: left;
|
|
93
|
-
height:88px;
|
|
94
|
-
width:90%;
|
|
92
|
+
height: 88px;
|
|
93
|
+
width: 90%;
|
|
95
94
|
font-size: 16px;
|
|
96
95
|
/* color: #202020; */
|
|
97
96
|
/* background-color: #e0e0e0; */
|
|
@@ -99,16 +98,16 @@
|
|
|
99
98
|
background-color: #202020; */
|
|
100
99
|
color: #007000;
|
|
101
100
|
background-color: #e0e0e0;
|
|
102
|
-
border: 1px solid #
|
|
103
|
-
border-radius:5px;
|
|
104
|
-
padding:7px 10px 5px 10px;
|
|
105
|
-
margin-top:10px;
|
|
101
|
+
border: 1px solid #b0b0b0;
|
|
102
|
+
border-radius: 5px;
|
|
103
|
+
padding: 7px 10px 5px 10px;
|
|
104
|
+
margin-top: 10px;
|
|
106
105
|
}
|
|
107
106
|
|
|
108
107
|
.EquationEditor .latexInput:focus {
|
|
109
|
-
border: 1px solid #663676!important;
|
|
108
|
+
border: 1px solid #663676 !important;
|
|
110
109
|
outline: 0;
|
|
111
|
-
/* outline: 2px solid #663676!important; */
|
|
110
|
+
/* outline: 2px solid #663676!important; */ /* Has square corners */
|
|
112
111
|
/* box-shadow: inset 1px 1px 5px #a0a0a0, 0px 0px 3px #663676; */
|
|
113
112
|
}
|
|
114
113
|
|
|
@@ -117,14 +116,14 @@
|
|
|
117
116
|
color: white;
|
|
118
117
|
background: #663676;
|
|
119
118
|
text-align: left;
|
|
120
|
-
border:0px;
|
|
121
|
-
border-radius:5px;
|
|
122
|
-
height:36px;
|
|
123
|
-
padding:
|
|
124
|
-
margin-top:5px;
|
|
125
|
-
margin-bottom:5px;
|
|
126
|
-
margin-left:5px;
|
|
127
|
-
margin-right:5px;
|
|
119
|
+
border: 0px;
|
|
120
|
+
border-radius: 5px;
|
|
121
|
+
height: 36px;
|
|
122
|
+
padding: 0px 30px;
|
|
123
|
+
margin-top: 5px;
|
|
124
|
+
margin-bottom: 5px;
|
|
125
|
+
margin-left: 5px;
|
|
126
|
+
margin-right: 5px;
|
|
128
127
|
}
|
|
129
128
|
|
|
130
129
|
.EquationEditor .cancelButton {
|
|
@@ -132,19 +131,19 @@
|
|
|
132
131
|
background: white;
|
|
133
132
|
color: #663676;
|
|
134
133
|
text-align: left;
|
|
135
|
-
border:1px solid #663676;
|
|
136
|
-
border-radius:5px;
|
|
137
|
-
height:36px;
|
|
138
|
-
padding:
|
|
139
|
-
margin-bottom:10px;
|
|
140
|
-
margin-left:5px;
|
|
141
|
-
margin-right:5px;
|
|
134
|
+
border: 1px solid #663676;
|
|
135
|
+
border-radius: 5px;
|
|
136
|
+
height: 36px;
|
|
137
|
+
padding: 0px 30px;
|
|
138
|
+
margin-bottom: 10px;
|
|
139
|
+
margin-left: 5px;
|
|
140
|
+
margin-right: 5px;
|
|
142
141
|
}
|
|
143
142
|
|
|
144
143
|
.EquationEditor .insertButton:hover {
|
|
145
144
|
color: white;
|
|
146
145
|
background: #461656;
|
|
147
|
-
cursor: pointer;
|
|
146
|
+
cursor: pointer;
|
|
148
147
|
}
|
|
149
148
|
|
|
150
149
|
.EquationEditor .recentSymbols-recentText-active {
|
|
@@ -165,9 +164,9 @@
|
|
|
165
164
|
.EquationEditor .tabBar {
|
|
166
165
|
background: white;
|
|
167
166
|
text-align: left;
|
|
168
|
-
border:0px;
|
|
169
|
-
padding:10px 10px 5px 20px;
|
|
170
|
-
margin:5px;
|
|
167
|
+
border: 0px;
|
|
168
|
+
padding: 10px 10px 5px 20px;
|
|
169
|
+
margin: 5px;
|
|
171
170
|
}
|
|
172
171
|
|
|
173
172
|
.EquationEditor .tab {
|
|
@@ -175,34 +174,35 @@
|
|
|
175
174
|
font-weight: bold;
|
|
176
175
|
color: #404040;
|
|
177
176
|
text-align: left;
|
|
178
|
-
border:0px;
|
|
179
|
-
height:30px;
|
|
180
|
-
padding:
|
|
181
|
-
margin:5px;
|
|
177
|
+
border: 0px;
|
|
178
|
+
height: 30px;
|
|
179
|
+
padding: 5px 10px;
|
|
180
|
+
margin: 5px;
|
|
182
181
|
border-bottom: 6px solid #d0d0d0;
|
|
183
182
|
}
|
|
184
183
|
|
|
185
184
|
.EquationEditor .tab:hover {
|
|
186
|
-
cursor:pointer
|
|
185
|
+
cursor: pointer;
|
|
187
186
|
}
|
|
188
187
|
.EquationEditor .tab-selected {
|
|
189
188
|
font-size: 14px;
|
|
190
189
|
font-weight: bold;
|
|
191
190
|
color: #404040;
|
|
192
191
|
text-align: left;
|
|
193
|
-
border:0px;
|
|
194
|
-
height:30px;
|
|
195
|
-
padding:
|
|
196
|
-
margin:5px;
|
|
192
|
+
border: 0px;
|
|
193
|
+
height: 30px;
|
|
194
|
+
padding: 5px 10px;
|
|
195
|
+
margin: 5px;
|
|
197
196
|
border-bottom: 6px solid #663676;
|
|
198
197
|
}
|
|
199
198
|
|
|
200
199
|
.EquationEditor .recentSymbolsButtonArea {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
margin
|
|
200
|
+
display: flex;
|
|
201
|
+
justify-content: flex-start;
|
|
202
|
+
width: 486px;
|
|
203
|
+
padding: 2px;
|
|
204
|
+
margin: 5px;
|
|
205
|
+
margin-left: 15px;
|
|
206
206
|
}
|
|
207
207
|
|
|
208
208
|
.EquationEditor .symbolButtonAreasOuterContainer {
|
|
@@ -212,47 +212,37 @@
|
|
|
212
212
|
.EquationEditor .symbolButtonAreasInnerContainer {
|
|
213
213
|
display: flex;
|
|
214
214
|
width: 2330px;
|
|
215
|
-
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.EquationEditor .symbolButtonArea {
|
|
218
|
+
display: grid;
|
|
219
|
+
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
|
|
220
|
+
grid-auto-rows: minmax(min-content, max-content);
|
|
221
|
+
grid-gap: 1.5px;
|
|
222
|
+
padding: 12px;
|
|
223
|
+
margin: 0px;
|
|
216
224
|
}
|
|
217
225
|
|
|
218
226
|
.EquationEditor .symbolButtonArea-1 {
|
|
219
|
-
|
|
220
|
-
width:42px;
|
|
221
|
-
padding:12px 12px 12px 12px;
|
|
222
|
-
margin:0px;
|
|
227
|
+
width: 66px;
|
|
223
228
|
}
|
|
224
229
|
|
|
225
230
|
.EquationEditor .symbolButtonArea-2 {
|
|
226
|
-
|
|
227
|
-
width:84px;
|
|
228
|
-
padding:12px 12px 12px 12px;
|
|
229
|
-
margin:0px;
|
|
231
|
+
width: 108px;
|
|
230
232
|
}
|
|
231
233
|
|
|
232
234
|
.EquationEditor .symbolButtonArea-3 {
|
|
233
|
-
|
|
234
|
-
width:126px;
|
|
235
|
-
padding:12px 12px 12px 12px;
|
|
236
|
-
margin:0px;
|
|
235
|
+
width: 150px;
|
|
237
236
|
}
|
|
238
237
|
|
|
239
238
|
.EquationEditor .symbolButtonArea-4 {
|
|
240
|
-
|
|
241
|
-
width:168px;
|
|
242
|
-
padding:12px 12px 12px 12px;
|
|
243
|
-
margin:0px;
|
|
239
|
+
width: 192px;
|
|
244
240
|
}
|
|
245
241
|
|
|
246
242
|
.EquationEditor .symbolButtonArea-5 {
|
|
247
|
-
|
|
248
|
-
width:210px;
|
|
249
|
-
padding:12px 12px 12px 12px;
|
|
250
|
-
margin:0px;
|
|
243
|
+
width: 234px;
|
|
251
244
|
}
|
|
252
245
|
|
|
253
246
|
.EquationEditor .symbolButtonArea-6 {
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
padding:12px 12px 12px 12px;
|
|
257
|
-
margin:0px;
|
|
258
|
-
}
|
|
247
|
+
width: 276px;
|
|
248
|
+
}
|