pivotgrid-js 0.1.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/src/pivot.css ADDED
@@ -0,0 +1,252 @@
1
+ /* ── PivotGrid styles ─────────────────────────────────────────────────────── */
2
+
3
+ .pg-root {
4
+ position: relative;
5
+ overflow: hidden;
6
+ font-family: -apple-system, 'Segoe UI', sans-serif;
7
+ font-size: 13px;
8
+ border: 1px solid #e0e0e0;
9
+ border-radius: 8px;
10
+ background: #fff;
11
+ user-select: none;
12
+ }
13
+
14
+ .pg-col-resize-handle:hover,
15
+ .pg-col-resize-handle:active {
16
+ background: rgba(26, 115, 232, 0.25);
17
+ }
18
+
19
+ /* ── Scroll area ─────────────────────────────────────────────────────────── */
20
+
21
+ .pg-scroll {
22
+ position: absolute;
23
+ left: 0;
24
+ right: 0;
25
+ bottom: 0;
26
+ overflow: auto;
27
+ }
28
+
29
+ /* ── Column header ───────────────────────────────────────────────────────── */
30
+
31
+ .pg-col-header {
32
+ position: absolute;
33
+ top: 0;
34
+ left: 0;
35
+ display: flex;
36
+ flex-direction: column;
37
+ align-items: flex-start;
38
+ background: #fafafa;
39
+ border-bottom: 1px solid #d0d0d0;
40
+ z-index: 10;
41
+ }
42
+
43
+ .pg-col-header-cell {
44
+ flex-shrink: 0;
45
+ display: flex;
46
+ align-items: flex-start;
47
+ justify-content: flex-start;
48
+ padding: 0 10px;
49
+ box-sizing: border-box;
50
+ font-size: 11px;
51
+ font-weight: 500;
52
+ color: #666;
53
+ text-transform: uppercase;
54
+ letter-spacing: 0.04em;
55
+ border-right: 1px solid #e8e8e8;
56
+ white-space: nowrap;
57
+ overflow: hidden;
58
+ background: #fafafa;
59
+ padding-top: 6px
60
+ }
61
+
62
+ .pg-col-header-cell.row-label {
63
+ justify-content: flex-start;
64
+ color: #999;
65
+ position: sticky;
66
+ left: 0;
67
+ background: #fafafa;
68
+ z-index: 11;
69
+ border-right: 1px solid #d0d0d0;
70
+ }
71
+
72
+ .pg-col-header-cell.total-col {
73
+ color: #444;
74
+ font-weight: 600;
75
+ }
76
+
77
+ /* ── Rows ────────────────────────────────────────────────────────────────── */
78
+
79
+ .pg-row {
80
+ position: absolute;
81
+ left: 0;
82
+ display: flex;
83
+ align-items: center;
84
+ box-sizing: border-box;
85
+ border-bottom: 1px solid #f0f0f0;
86
+ transition: background 0.08s;
87
+ }
88
+
89
+ .pg-row:hover {
90
+ background: #f5f9ff !important;
91
+ }
92
+
93
+ .pg-row.grand-total {
94
+ font-weight: 500;
95
+ border-top: 1px solid #d0d0d0;
96
+ background: #fafafa;
97
+ }
98
+
99
+ /* ── Row header cell (sticky left) ──────────────────────────────────────── */
100
+
101
+ .pg-cell-header {
102
+ flex-shrink: 0;
103
+ display: flex;
104
+ align-items: center;
105
+ height: 100%;
106
+ box-sizing: border-box;
107
+ border-right: 1px solid #f0f0f0;
108
+ overflow: hidden;
109
+ white-space: nowrap;
110
+ color: #1a1a1a;
111
+ position: sticky;
112
+ left: 0;
113
+ background: inherit;
114
+ z-index: 1;
115
+ }
116
+
117
+ .pg-cell-header .pg-label {
118
+ margin-left: 4px;
119
+ overflow: hidden;
120
+ text-overflow: ellipsis;
121
+ white-space: nowrap;
122
+ }
123
+
124
+ .pg-cell-header .pg-label.depth-0 {
125
+ font-weight: 500;
126
+ color: #1a1a1a;
127
+ font-size: 13px;
128
+ }
129
+
130
+ .pg-cell-header .pg-label.depth-1 {
131
+ font-weight: 400;
132
+ color: #555;
133
+ font-size: 12px;
134
+ }
135
+
136
+ .pg-cell-header .pg-label.depth-2 {
137
+ font-weight: 400;
138
+ color: #777;
139
+ font-size: 12px;
140
+ }
141
+
142
+ /* ── Toggle button ───────────────────────────────────────────────────────── */
143
+
144
+ .pg-toggle {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ width: 16px;
149
+ height: 16px;
150
+ flex-shrink: 0;
151
+ cursor: pointer;
152
+ color: #999;
153
+ font-size: 10px;
154
+ transition: transform 0.15s;
155
+ border-radius: 3px;
156
+ }
157
+
158
+ .pg-toggle:hover {
159
+ background: #e8e8e8;
160
+ color: #333;
161
+ }
162
+
163
+ .pg-toggle.collapsed {
164
+ transform: rotate(-90deg);
165
+ }
166
+
167
+ .pg-toggle-spacer {
168
+ width: 16px;
169
+ flex-shrink: 0;
170
+ display: inline-block;
171
+ }
172
+
173
+ /* ── Value cells ─────────────────────────────────────────────────────────── */
174
+
175
+ .pg-cell {
176
+ flex-shrink: 0;
177
+ display: flex;
178
+ align-items: center;
179
+ justify-content: flex-end;
180
+ height: 100%;
181
+ padding: 0 10px;
182
+ box-sizing: border-box;
183
+ border-right: 1px solid #f0f0f0;
184
+ font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
185
+ font-size: 12px;
186
+ color: #2a2a2a;
187
+ cursor: pointer;
188
+ transition: background 0.08s, color 0.08s;
189
+ }
190
+
191
+ .pg-cell:hover {
192
+ background: #e8f0fe;
193
+ color: #1a73e8;
194
+ }
195
+
196
+ .pg-cell.total {
197
+ background: #fafafa;
198
+ color: #555;
199
+ font-weight: 500;
200
+ }
201
+
202
+ .pg-cell.total:hover {
203
+ background: #e8f0fe;
204
+ color: #1a73e8;
205
+ }
206
+
207
+ .pg-cell.grand-total-val {
208
+ font-weight: 600;
209
+ color: #1a1a1a;
210
+ }
211
+
212
+ .pg-cell.empty {
213
+ color: #ccc;
214
+ cursor: default;
215
+ }
216
+
217
+ .pg-cell.empty:hover {
218
+ background: transparent;
219
+ color: #ccc;
220
+ }
221
+
222
+ .pg-col-header-group {
223
+ border-bottom: 1px solid #d0d0d0;
224
+ justify-content: flex-start;
225
+ padding-left: 6px;
226
+ font-weight: 600;
227
+ color: #444;
228
+ }
229
+
230
+ .pg-cell.subtotal,
231
+ .pg-col-header-cell.subtotal-col {
232
+ background: #f5f5f5;
233
+ color: #555;
234
+ border-left: 2px solid #d0d0d0;
235
+ }
236
+
237
+ .pg-row:hover .pg-cell.subtotal,
238
+ .pg-row--hover .pg-cell.subtotal {
239
+ background: #f5f9ff !important;
240
+ }
241
+
242
+ .pg-row:hover .pg-cell:hover,
243
+ .pg-row--hover .pg-cell:hover {
244
+ background: #e8f0fe !important;
245
+ color: #1a73e8 !important;
246
+ }
247
+
248
+ .pg-row:hover .pg-cell.subtotal:hover,
249
+ .pg-row--hover .pg-cell.subtotal:hover {
250
+ background: #e8f0fe !important;
251
+ color: #1a73e8 !important;
252
+ }