x4js 2.0.35 → 2.1.0-manual

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 (134) hide show
  1. package/README.md +21 -21
  2. package/package.json +39 -26
  3. package/src/components/base.scss +25 -89
  4. package/src/components/boxes/boxes.module.scss +54 -54
  5. package/src/components/boxes/boxes.ts +513 -513
  6. package/src/components/breadcrumb/breadcrumb.scss +56 -56
  7. package/src/components/breadcrumb/breadcrumb.ts +93 -93
  8. package/src/components/btngroup/btngroup.module.scss +40 -40
  9. package/src/components/btngroup/btngroup.ts +152 -152
  10. package/src/components/button/button.module.scss +172 -172
  11. package/src/components/button/button.ts +232 -232
  12. package/src/components/calendar/calendar.module.scss +162 -162
  13. package/src/components/calendar/calendar.ts +326 -326
  14. package/src/components/canvas/canvas.module.scss +24 -24
  15. package/src/components/canvas/canvas.ts +195 -195
  16. package/src/components/canvas/canvas_ex.ts +275 -275
  17. package/src/components/checkbox/check.svg +3 -3
  18. package/src/components/checkbox/checkbox.module.scss +141 -141
  19. package/src/components/checkbox/checkbox.ts +139 -139
  20. package/src/components/colorinput/colorinput.module.scss +64 -64
  21. package/src/components/colorinput/colorinput.ts +90 -90
  22. package/src/components/colorpicker/colorpicker.module.scss +132 -132
  23. package/src/components/colorpicker/colorpicker.ts +481 -481
  24. package/src/components/combobox/combobox.module.scss +145 -145
  25. package/src/components/combobox/combobox.ts +282 -282
  26. package/src/components/combobox/updown.svg +3 -3
  27. package/src/components/components.ts +45 -44
  28. package/src/components/dialog/dialog.module.scss +103 -105
  29. package/src/components/dialog/dialog.ts +233 -233
  30. package/src/components/filedrop/filedrop.module.scss +69 -69
  31. package/src/components/filedrop/filedrop.ts +130 -130
  32. package/src/components/form/form.module.scss +38 -38
  33. package/src/components/form/form.ts +172 -172
  34. package/src/components/gridview/gridview.module.scss +323 -337
  35. package/src/components/gridview/gridview.ts +1276 -1316
  36. package/src/components/header/header.module.scss +40 -40
  37. package/src/components/header/header.ts +141 -141
  38. package/src/components/icon/icon.module.scss +32 -32
  39. package/src/components/icon/icon.ts +165 -165
  40. package/src/components/image/image.module.scss +27 -27
  41. package/src/components/image/image.ts +168 -168
  42. package/src/components/input/input.module.scss +74 -74
  43. package/src/components/input/input.ts +537 -537
  44. package/src/components/keyboard/keyboard.module.scss +136 -136
  45. package/src/components/keyboard/keyboard.ts +549 -549
  46. package/src/components/label/label.module.scss +90 -91
  47. package/src/components/label/label.ts +101 -101
  48. package/src/components/link/link.module.scss +44 -44
  49. package/src/components/link/link.ts +87 -87
  50. package/src/components/listbox/listbox.module.scss +179 -179
  51. package/src/components/listbox/listbox.ts +596 -596
  52. package/src/components/menu/menu.module.scss +128 -128
  53. package/src/components/menu/menu.ts +174 -174
  54. package/src/components/messages/messages.module.scss +92 -146
  55. package/src/components/messages/messages.ts +237 -303
  56. package/src/components/normalize.scss +391 -391
  57. package/src/components/notification/notification.module.scss +83 -83
  58. package/src/components/notification/notification.ts +107 -107
  59. package/src/components/panel/panel.module.scss +66 -71
  60. package/src/components/panel/panel.ts +57 -57
  61. package/src/components/popup/popup.module.scss +51 -51
  62. package/src/components/popup/popup.ts +457 -457
  63. package/src/components/progress/progress.module.scss +56 -56
  64. package/src/components/progress/progress.ts +43 -43
  65. package/src/components/propgrid/progrid.module.scss +111 -111
  66. package/src/components/propgrid/propgrid.ts +300 -300
  67. package/src/components/propgrid/updown.svg +3 -3
  68. package/src/components/radio/radio.module.scss +163 -163
  69. package/src/components/radio/radio.svg +3 -3
  70. package/src/components/radio/radio.ts +141 -141
  71. package/src/components/rating/rating.module.scss +22 -22
  72. package/src/components/rating/rating.ts +131 -131
  73. package/src/components/select/select.module.scss +8 -8
  74. package/src/components/select/select.ts +134 -134
  75. package/src/components/shared.scss +141 -71
  76. package/src/components/sizers/sizer.module.scss +90 -112
  77. package/src/components/sizers/sizer.ts +131 -155
  78. package/src/components/slider/slider.module.scss +117 -117
  79. package/src/components/slider/slider.ts +197 -197
  80. package/src/components/spreadsheet/spreadsheet.module.scss +307 -307
  81. package/src/components/spreadsheet/spreadsheet.ts +1223 -1223
  82. package/src/components/switch/switch.module.scss +126 -126
  83. package/src/components/switch/switch.ts +61 -61
  84. package/src/components/tabs/tabs.module.scss +46 -67
  85. package/src/components/tabs/tabs.ts +229 -234
  86. package/src/components/textarea/textarea.module.scss +63 -63
  87. package/src/components/textarea/textarea.ts +131 -131
  88. package/src/components/textedit/textedit.module.scss +115 -115
  89. package/src/components/textedit/textedit.ts +122 -122
  90. package/src/components/themes.scss +90 -90
  91. package/src/components/tickline/tickline.module.scss +25 -25
  92. package/src/components/tickline/tickline.ts +81 -81
  93. package/src/components/tooltips/tooltips.scss +71 -71
  94. package/src/components/tooltips/tooltips.ts +120 -120
  95. package/src/components/treeview/treeview.module.scss +192 -192
  96. package/src/components/treeview/treeview.ts +484 -484
  97. package/src/components/viewport/viewport.module.scss +31 -31
  98. package/src/components/viewport/viewport.ts +41 -41
  99. package/src/core/component.ts +1299 -1299
  100. package/src/core/core_application.ts +361 -361
  101. package/src/core/core_colors.ts +512 -512
  102. package/src/core/core_data.ts +1297 -1310
  103. package/src/core/core_dom.ts +481 -481
  104. package/src/core/core_dragdrop.ts +225 -225
  105. package/src/core/core_element.ts +221 -221
  106. package/src/core/core_events.ts +214 -214
  107. package/src/core/core_i18n.ts +395 -395
  108. package/src/core/core_pdf.ts +454 -454
  109. package/src/core/core_react.ts +78 -78
  110. package/src/core/core_router.ts +296 -296
  111. package/src/core/core_state.ts +62 -62
  112. package/src/core/core_styles.ts +213 -213
  113. package/src/core/core_svg.ts +1042 -1042
  114. package/src/core/core_tools.ts +996 -996
  115. package/src/types/scss.d.ts +4 -4
  116. package/src/types/x4react.d.ts +8 -8
  117. package/src/x4.scss +19 -19
  118. package/src/x4.ts +36 -36
  119. package/src/x4tsx.d.ts +26 -26
  120. package/.vscode/launch.json +0 -14
  121. package/.vscode/settings.json +0 -2
  122. package/demo/assets/house-light.svg +0 -1
  123. package/demo/assets/radio.svg +0 -4
  124. package/demo/index.html +0 -12
  125. package/demo/main.scss +0 -23
  126. package/demo/main.ts +0 -324
  127. package/demo/package.json +0 -26
  128. package/demo/scss.d.ts +0 -4
  129. package/demo/svg.d.ts +0 -1
  130. package/demo/tsconfig.json +0 -14
  131. package/src/components/gridview/folder-open.svg +0 -1
  132. package/src/components/messages/spinner.svg +0 -1
  133. package/src/x4.d.ts +0 -10
  134. package/tsconfig.json +0 -11
package/src/components/spreadsheet/spreadsheet.module.scss CHANGED
@@ -1,308 +1,308 @@
1
- /**
2
- * ___ ___ __
3
- * \ \/ / / _
4
- * \ / /_| |_
5
- * / \____ _|
6
- * /__/\__\ |_|
7
- *
8
- * @file spreadsheet.module.scss
9
- * @author Etienne Cochard
10
- *
11
- * @copyright (c) 2024 R-libre ingenierie
12
- *
13
- * Use of this source code is governed by an MIT-style license
14
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
15
- **/
16
-
17
-
18
- :root {
19
- --spreadsheet-background: white;
20
- --spreadsheet-border: var( --border );
21
-
22
- --spreadsheet-header-cell-background: white;
23
- --spreadsheet-header-cell-color: black;
24
- --spreadsheet-header-cell-vline: #f0f0f0;
25
- --spreadsheet-header-cell-border: #cccccc;
26
-
27
- --spreadsheet-check-background: var( --accent-background );
28
- --spreadsheet-check-color: white;
29
- --spreadsheet-check-background-hover: white;
30
- --spreadsheet-check-color-hover: var( --accent-background );
31
-
32
- --spreadsheet-perc-background: var( --accent-background );
33
- --spreadsheet-perc-color: white;
34
- --spreadsheet-perc-background-hover: white;
35
- --spreadsheet-perc-color-hover: var( --accent-background );
36
-
37
- --spreadsheet-cell-color: black;
38
- --spreadsheet-cell-color-sel: white;
39
- --spreadsheet-cell-vline: var( --border );
40
-
41
- --spreadsheet-row-background: white;
42
- --spreadsheet-row-odd-background: white;
43
- --spreadsheet-row-border: var( --border );
44
-
45
- --spreadsheet-row-background-hover: var( --background-secondary );
46
- --spreadsheet-row-background-hover-sel: var(--color-primary-a50);
47
- --spreadsheet-row-background-sel: var( --accent-background );
48
- --spreadsheet-row-color-sel: var( --accent-color );
49
-
50
- --spreadsheet-fix-border: var( --accent-background );
51
- }
52
-
53
-
54
-
55
- .x4spreadsheet {
56
-
57
- --left: 0px;
58
- --top: 0px;
59
-
60
- --fixed-width: 0;
61
- --fixed-height: 30px;
62
- --footer-height: 24px;
63
-
64
- --row-height: 30px;
65
-
66
- position: relative;
67
- overflow: hidden;
68
- margin: 5px;
69
- outline: none;
70
-
71
- background-color: var( --spreadsheet-background );
72
- border: 1px solid var( --spreadsheet-border );
73
-
74
- .cell {
75
- padding: 4px;
76
- display: flex;
77
- align-items: center;
78
- transition: border-bottom-color 0.3s ease, background-color 0.3s ease;
79
- min-width: 16px;
80
-
81
- .cell-check {
82
- width: 16px;
83
- height: 16px;
84
- background-color: var( --spreadsheet-check-background );
85
- color: var( --spreadsheet-check-color );
86
- padding: 4px;
87
- border-radius: 8px;
88
- margin: 0 auto;
89
- }
90
-
91
- justify-content: start;
92
-
93
- &.align-center {
94
- justify-content: center;
95
- }
96
-
97
- &.align-right {
98
- justify-content: end;
99
- }
100
- }
101
-
102
- .x4viewport {
103
- position: absolute;
104
- overflow: auto;
105
- right: 0;
106
- bottom: var( --footer-height );
107
- left: var( --fixed-width );
108
- top: var( --fixed-height );
109
- width: unset;
110
- }
111
-
112
- .body {
113
- position: absolute;
114
- overflow: hidden;
115
-
116
- right: var( --scrollbar-size );
117
- bottom: var( --scrollbar-size );
118
- left: 0;
119
- top: 0;
120
- }
121
-
122
- .row {
123
- position: absolute;
124
- left: 0;
125
- top: 0;
126
- display: flex;
127
-
128
- overflow: hidden;
129
- height: var( --row-height );
130
- border-bottom: 1px solid var( --spreadsheet-row-border );
131
-
132
- .cell {
133
- height: 100%;
134
- overflow: hidden;
135
- white-space: nowrap;
136
-
137
- border-right: 1px solid var( --spreadsheet-cell-vline );
138
-
139
- &> .x4icon:not(.cell-check) {
140
- height: 100%;
141
- }
142
-
143
- &> .x4image {
144
- width: 100%;
145
- height: 100%;
146
- }
147
-
148
- .percent {
149
- width: 100%;
150
- border: 1px solid var( --border );
151
- height: 8px;
152
- background-color: white;
153
- overflow: hidden;
154
-
155
- div {
156
- background-color: var(--spreadsheet-perc-background);
157
- height: 100%;
158
- }
159
- }
160
-
161
-
162
- }
163
- }
164
-
165
- .cell.selected {
166
- background-color: var( --spreadsheet-row-background-sel );
167
- color: var( --spreadsheet-cell-color-sel );
168
-
169
- .cell-check {
170
- background-color: var( --spreadsheet-check-background-hover );
171
- color: var( --spreadsheet-check-color-hover );
172
- }
173
- }
174
-
175
- .cell:hover:not(.selected) {
176
- background-color: var( --spreadsheet-row-background-hover );
177
- .cell-check {
178
- background-color: var( --spreadsheet-check-background-hover );
179
- color: var( --spreadsheet-check-color-hover );
180
- }
181
- }
182
-
183
- .cell:hover.selected {
184
- background-color: var( --spreadsheet-row-background-hover-sel );
185
- // color: var( --spreadsheet-cell-color );
186
- }
187
-
188
- .col-header,
189
- .col-footer {
190
- position: absolute;
191
- background-color: var( --spreadsheet-header-cell-background );
192
- touch-action: none;
193
-
194
-
195
- left: calc( var( --fixed-width ) + var( --left ) );
196
- &.fixed {
197
- left: 0;
198
- z-index: 2;
199
- }
200
-
201
- z-index: 1;
202
-
203
- display: inline-flex;
204
- align-items: center;
205
-
206
- color: black;
207
- font-weight: 500;
208
- justify-content: center;
209
-
210
- .cell {
211
- position: relative;
212
- height: 100%;
213
- display: flex;
214
-
215
- justify-content: center;
216
- border-right: 1px solid var( --spreadsheet-header-cell-vline );
217
-
218
- &> .x4simpletext {
219
- flex-grow: 1;
220
- text-overflow: ellipsis;
221
- overflow: hidden;
222
- }
223
-
224
- .x-c-sizer:hover {
225
- width: 8px;
226
- }
227
- }
228
-
229
- &.fixed .cell:last-child {
230
- border-right-color: var( --spreadsheet-fix-border );
231
- }
232
-
233
- &:hover .cell {
234
- border-right-color: var( --border-hover );
235
- }
236
- }
237
-
238
- .col-header {
239
- top: 0;
240
- height: var( --fixed-height );
241
-
242
- border-bottom: 1px solid var( --spreadsheet-header-cell-border );
243
-
244
- .cell {
245
- overflow: hidden;
246
- border-bottom: 1px solid transparent;
247
-
248
- &:hover {
249
- //background-color: var( --color-10 );
250
- border-bottom-color: var( --spreadsheet-row-background-hover );
251
- }
252
- }
253
- }
254
-
255
- .col-footer {
256
- border-top: 1px solid var( --spreadsheet-header-cell-border );
257
- height: var( --footer-height );
258
-
259
- bottom: 0;
260
-
261
- .cell {
262
- border-top: 1px solid transparent;
263
-
264
- &:hover {
265
- //background-color: var( --color-10 );
266
- //border-top-color: var( --spreadsheet-row-background-hover );
267
- background-color: var( --spreadsheet-row-background-hover );
268
- }
269
- }
270
- }
271
-
272
- .row-header {
273
- position: absolute;
274
- left: 0;
275
- top: calc( var( --fixed-height ) + var( --top ) );
276
- width: var( --fixed-width );
277
- bottom: 0;
278
-
279
- background-color: white;
280
- z-index: 1;
281
-
282
- .row {
283
- position: absolute;
284
- display: inline-flex;
285
- }
286
-
287
- .cell {
288
- border-right: 1px solid var( --spreadsheet-cell-vline );
289
- border-bottom: 1px solid var(--spreadsheet-row-border );
290
- height: var( --row-height );
291
-
292
- &> .x4simpletext {
293
- margin: 0 auto;
294
- }
295
-
296
- &:last-child {
297
- border-right: 1px solid var( --spreadsheet-fix-border );
298
- }
299
- }
300
-
301
- .cell-out {
302
- position: absolute;
303
- background-color: var( --color-gray-0 );
304
- width: 100%;
305
- height: var( --row-height );
306
- }
307
- }
1
+ /**
2
+ * ___ ___ __
3
+ * \ \/ / / _
4
+ * \ / /_| |_
5
+ * / \____ _|
6
+ * /__/\__\ |_|
7
+ *
8
+ * @file spreadsheet.module.scss
9
+ * @author Etienne Cochard
10
+ *
11
+ * @copyright (c) 2024 R-libre ingenierie
12
+ *
13
+ * Use of this source code is governed by an MIT-style license
14
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
15
+ **/
16
+
17
+
18
+ :root {
19
+ --spreadsheet-background: white;
20
+ --spreadsheet-border: var( --border );
21
+
22
+ --spreadsheet-header-cell-background: white;
23
+ --spreadsheet-header-cell-color: black;
24
+ --spreadsheet-header-cell-vline: #f0f0f0;
25
+ --spreadsheet-header-cell-border: #cccccc;
26
+
27
+ --spreadsheet-check-background: var( --accent-background );
28
+ --spreadsheet-check-color: white;
29
+ --spreadsheet-check-background-hover: white;
30
+ --spreadsheet-check-color-hover: var( --accent-background );
31
+
32
+ --spreadsheet-perc-background: var( --accent-background );
33
+ --spreadsheet-perc-color: white;
34
+ --spreadsheet-perc-background-hover: white;
35
+ --spreadsheet-perc-color-hover: var( --accent-background );
36
+
37
+ --spreadsheet-cell-color: black;
38
+ --spreadsheet-cell-color-sel: white;
39
+ --spreadsheet-cell-vline: var( --border );
40
+
41
+ --spreadsheet-row-background: white;
42
+ --spreadsheet-row-odd-background: white;
43
+ --spreadsheet-row-border: var( --border );
44
+
45
+ --spreadsheet-row-background-hover: var( --background-secondary );
46
+ --spreadsheet-row-background-hover-sel: var(--color-primary-a50);
47
+ --spreadsheet-row-background-sel: var( --accent-background );
48
+ --spreadsheet-row-color-sel: var( --accent-color );
49
+
50
+ --spreadsheet-fix-border: var( --accent-background );
51
+ }
52
+
53
+
54
+
55
+ .x4spreadsheet {
56
+
57
+ --left: 0px;
58
+ --top: 0px;
59
+
60
+ --fixed-width: 0;
61
+ --fixed-height: 30px;
62
+ --footer-height: 24px;
63
+
64
+ --row-height: 30px;
65
+
66
+ position: relative;
67
+ overflow: hidden;
68
+ margin: 5px;
69
+ outline: none;
70
+
71
+ background-color: var( --spreadsheet-background );
72
+ border: 1px solid var( --spreadsheet-border );
73
+
74
+ .cell {
75
+ padding: 4px;
76
+ display: flex;
77
+ align-items: center;
78
+ transition: border-bottom-color 0.3s ease, background-color 0.3s ease;
79
+ min-width: 16px;
80
+
81
+ .cell-check {
82
+ width: 16px;
83
+ height: 16px;
84
+ background-color: var( --spreadsheet-check-background );
85
+ color: var( --spreadsheet-check-color );
86
+ padding: 4px;
87
+ border-radius: 8px;
88
+ margin: 0 auto;
89
+ }
90
+
91
+ justify-content: start;
92
+
93
+ &.align-center {
94
+ justify-content: center;
95
+ }
96
+
97
+ &.align-right {
98
+ justify-content: end;
99
+ }
100
+ }
101
+
102
+ .x4viewport {
103
+ position: absolute;
104
+ overflow: auto;
105
+ right: 0;
106
+ bottom: var( --footer-height );
107
+ left: var( --fixed-width );
108
+ top: var( --fixed-height );
109
+ width: unset;
110
+ }
111
+
112
+ .body {
113
+ position: absolute;
114
+ overflow: hidden;
115
+
116
+ right: var( --scrollbar-size );
117
+ bottom: var( --scrollbar-size );
118
+ left: 0;
119
+ top: 0;
120
+ }
121
+
122
+ .row {
123
+ position: absolute;
124
+ left: 0;
125
+ top: 0;
126
+ display: flex;
127
+
128
+ overflow: hidden;
129
+ height: var( --row-height );
130
+ border-bottom: 1px solid var( --spreadsheet-row-border );
131
+
132
+ .cell {
133
+ height: 100%;
134
+ overflow: hidden;
135
+ white-space: nowrap;
136
+
137
+ border-right: 1px solid var( --spreadsheet-cell-vline );
138
+
139
+ &> .x4icon:not(.cell-check) {
140
+ height: 100%;
141
+ }
142
+
143
+ &> .x4image {
144
+ width: 100%;
145
+ height: 100%;
146
+ }
147
+
148
+ .percent {
149
+ width: 100%;
150
+ border: 1px solid var( --border );
151
+ height: 8px;
152
+ background-color: white;
153
+ overflow: hidden;
154
+
155
+ div {
156
+ background-color: var(--spreadsheet-perc-background);
157
+ height: 100%;
158
+ }
159
+ }
160
+
161
+
162
+ }
163
+ }
164
+
165
+ .cell.selected {
166
+ background-color: var( --spreadsheet-row-background-sel );
167
+ color: var( --spreadsheet-cell-color-sel );
168
+
169
+ .cell-check {
170
+ background-color: var( --spreadsheet-check-background-hover );
171
+ color: var( --spreadsheet-check-color-hover );
172
+ }
173
+ }
174
+
175
+ .cell:hover:not(.selected) {
176
+ background-color: var( --spreadsheet-row-background-hover );
177
+ .cell-check {
178
+ background-color: var( --spreadsheet-check-background-hover );
179
+ color: var( --spreadsheet-check-color-hover );
180
+ }
181
+ }
182
+
183
+ .cell:hover.selected {
184
+ background-color: var( --spreadsheet-row-background-hover-sel );
185
+ // color: var( --spreadsheet-cell-color );
186
+ }
187
+
188
+ .col-header,
189
+ .col-footer {
190
+ position: absolute;
191
+ background-color: var( --spreadsheet-header-cell-background );
192
+ touch-action: none;
193
+
194
+
195
+ left: calc( var( --fixed-width ) + var( --left ) );
196
+ &.fixed {
197
+ left: 0;
198
+ z-index: 2;
199
+ }
200
+
201
+ z-index: 1;
202
+
203
+ display: inline-flex;
204
+ align-items: center;
205
+
206
+ color: black;
207
+ font-weight: 500;
208
+ justify-content: center;
209
+
210
+ .cell {
211
+ position: relative;
212
+ height: 100%;
213
+ display: flex;
214
+
215
+ justify-content: center;
216
+ border-right: 1px solid var( --spreadsheet-header-cell-vline );
217
+
218
+ &> .x4simpletext {
219
+ flex-grow: 1;
220
+ text-overflow: ellipsis;
221
+ overflow: hidden;
222
+ }
223
+
224
+ .x-c-sizer:hover {
225
+ width: 8px;
226
+ }
227
+ }
228
+
229
+ &.fixed .cell:last-child {
230
+ border-right-color: var( --spreadsheet-fix-border );
231
+ }
232
+
233
+ &:hover .cell {
234
+ border-right-color: var( --border-hover );
235
+ }
236
+ }
237
+
238
+ .col-header {
239
+ top: 0;
240
+ height: var( --fixed-height );
241
+
242
+ border-bottom: 1px solid var( --spreadsheet-header-cell-border );
243
+
244
+ .cell {
245
+ overflow: hidden;
246
+ border-bottom: 1px solid transparent;
247
+
248
+ &:hover {
249
+ //background-color: var( --color-10 );
250
+ border-bottom-color: var( --spreadsheet-row-background-hover );
251
+ }
252
+ }
253
+ }
254
+
255
+ .col-footer {
256
+ border-top: 1px solid var( --spreadsheet-header-cell-border );
257
+ height: var( --footer-height );
258
+
259
+ bottom: 0;
260
+
261
+ .cell {
262
+ border-top: 1px solid transparent;
263
+
264
+ &:hover {
265
+ //background-color: var( --color-10 );
266
+ //border-top-color: var( --spreadsheet-row-background-hover );
267
+ background-color: var( --spreadsheet-row-background-hover );
268
+ }
269
+ }
270
+ }
271
+
272
+ .row-header {
273
+ position: absolute;
274
+ left: 0;
275
+ top: calc( var( --fixed-height ) + var( --top ) );
276
+ width: var( --fixed-width );
277
+ bottom: 0;
278
+
279
+ background-color: white;
280
+ z-index: 1;
281
+
282
+ .row {
283
+ position: absolute;
284
+ display: inline-flex;
285
+ }
286
+
287
+ .cell {
288
+ border-right: 1px solid var( --spreadsheet-cell-vline );
289
+ border-bottom: 1px solid var(--spreadsheet-row-border );
290
+ height: var( --row-height );
291
+
292
+ &> .x4simpletext {
293
+ margin: 0 auto;
294
+ }
295
+
296
+ &:last-child {
297
+ border-right: 1px solid var( --spreadsheet-fix-border );
298
+ }
299
+ }
300
+
301
+ .cell-out {
302
+ position: absolute;
303
+ background-color: var( --color-gray-0 );
304
+ width: 100%;
305
+ height: var( --row-height );
306
+ }
307
+ }
308
308
  }