@perspective-dev/viewer-datagrid 4.2.0 → 4.4.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/dist/cdn/perspective-viewer-datagrid.js +5 -4
- package/dist/cdn/perspective-viewer-datagrid.js.map +4 -4
- package/dist/css/perspective-viewer-datagrid-toolbar.css +1 -1
- package/dist/css/perspective-viewer-datagrid.css +1 -1
- package/dist/esm/custom_elements/datagrid.d.ts +1 -0
- package/dist/esm/data_listener/format_tree_header.d.ts +1 -0
- package/dist/esm/event_handlers/row_select_click.d.ts +1 -1
- package/dist/esm/perspective-viewer-datagrid.js +3 -3
- package/dist/esm/perspective-viewer-datagrid.js.map +3 -3
- package/dist/esm/style_handlers/table_cell/datetime.d.ts +6 -2
- package/dist/esm/types.d.ts +3 -8
- package/package.json +3 -3
- package/src/css/mitered-headers.css +64 -0
- package/src/css/perspective-viewer-datagrid.css +6 -0
- package/src/{less/pro.less → css/pro.css} +32 -31
- package/src/{less/regular_table.less → css/regular_table.css} +196 -172
- package/src/{less/row-hover.less → css/row-hover.css} +28 -22
- package/src/{less/scrollbar.less → css/scrollbar.css} +16 -15
- package/src/{less/sub-cell-scroll.less → css/sub-cell-scroll.css} +14 -13
- package/src/{less/toolbar.less → css/toolbar.css} +46 -39
- package/src/ts/custom_elements/datagrid.ts +5 -0
- package/src/ts/data_listener/format_tree_header.ts +16 -0
- package/src/ts/data_listener/index.ts +24 -4
- package/src/ts/event_handlers/row_select_click.ts +19 -16
- package/src/ts/event_handlers/sort.ts +10 -7
- package/src/ts/model/create.ts +12 -8
- package/src/ts/plugin/draw.ts +1 -0
- package/src/ts/style_handlers/body.ts +20 -13
- package/src/ts/style_handlers/column_header.ts +9 -8
- package/src/ts/style_handlers/table_cell/datetime.ts +12 -9
- package/src/ts/types.ts +3 -7
- package/src/less/mitered-headers.less +0 -65
|
@@ -1,53 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
@
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
// }
|
|
40
|
-
|
|
41
|
-
// @mixin settings-not-open {
|
|
42
|
-
// regular-table table tr.rt-autosize + tr th {
|
|
43
|
-
// height: 0px;
|
|
44
|
-
// span {
|
|
45
|
-
// display: none;
|
|
46
|
-
// }
|
|
47
|
-
// }
|
|
48
|
-
// }
|
|
49
|
-
|
|
50
|
-
@mixin settings-open {
|
|
1
|
+
/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
|
2
|
+
* ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
|
|
3
|
+
* ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
|
|
4
|
+
* ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
|
|
5
|
+
* ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
|
|
6
|
+
* ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
|
7
|
+
* ┃ Copyright (c) 2017, the Perspective Authors. ┃
|
|
8
|
+
* ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
|
|
9
|
+
* ┃ This file is part of the Perspective library, distributed under the terms ┃
|
|
10
|
+
* ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
|
|
11
|
+
* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
|
12
|
+
*/
|
|
13
|
+
/*
|
|
14
|
+
|
|
15
|
+
/* Row Selection */
|
|
16
|
+
|
|
17
|
+
/* // TODO this makes the UI flash a CSS layout for a millsiecond when toggling */
|
|
18
|
+
/* // settings butit could be fixed. */
|
|
19
|
+
|
|
20
|
+
/* perspective-viewer:not([settings]) { */
|
|
21
|
+
/* @include settings-not-open; */
|
|
22
|
+
/* } */
|
|
23
|
+
|
|
24
|
+
/* :host-context(perspective-viewer:not([settings])) { */
|
|
25
|
+
/* @include settings-not-open; */
|
|
26
|
+
/* } */
|
|
27
|
+
|
|
28
|
+
/* @mixin settings-not-open { */
|
|
29
|
+
/* regular-table table tr.rt-autosize + tr th { */
|
|
30
|
+
/* height: 0px; */
|
|
31
|
+
/* span { */
|
|
32
|
+
/* display: none; */
|
|
33
|
+
/* } */
|
|
34
|
+
/* } */
|
|
35
|
+
/* } */
|
|
36
|
+
|
|
37
|
+
perspective-viewer,
|
|
38
|
+
:host {
|
|
51
39
|
.psp-menu-enabled {
|
|
52
40
|
padding: 0 6px;
|
|
53
41
|
font-size: 8px;
|
|
@@ -56,65 +44,55 @@
|
|
|
56
44
|
|
|
57
45
|
.psp-menu-enabled:hover,
|
|
58
46
|
tr:not(.rt-autosize) th.psp-menu-open {
|
|
59
|
-
color: var(--
|
|
60
|
-
background-color: var(--
|
|
61
|
-
border-bottom-color: var(--
|
|
47
|
+
color: var(--psp--background-color);
|
|
48
|
+
background-color: var(--psp--color);
|
|
49
|
+
border-bottom-color: var(--psp--color);
|
|
62
50
|
cursor: pointer;
|
|
63
51
|
}
|
|
64
52
|
|
|
65
53
|
tr:not(.rt-autosize) th.psp-menu-open {
|
|
66
54
|
&:before {
|
|
67
|
-
|
|
55
|
+
background-repeat: no-repeat;
|
|
56
|
+
background-color: var(--psp--color);
|
|
57
|
+
content: "";
|
|
58
|
+
display: inline-block;
|
|
59
|
+
-webkit-mask-size: cover;
|
|
60
|
+
mask-size: cover;
|
|
68
61
|
height: 8px;
|
|
69
62
|
width: 10px;
|
|
70
|
-
-webkit-mask-image: var(--column-settings
|
|
71
|
-
mask-image: var(--column-settings
|
|
63
|
+
-webkit-mask-image: var(--psp-icon--column-settings--mask-image);
|
|
64
|
+
mask-image: var(--psp-icon--column-settings--mask-image);
|
|
72
65
|
margin-right: 4px;
|
|
73
|
-
background-color: var(--
|
|
66
|
+
background-color: var(--psp--background-color);
|
|
74
67
|
}
|
|
75
68
|
}
|
|
76
69
|
|
|
77
70
|
td.psp-menu-open {
|
|
78
71
|
box-shadow:
|
|
79
|
-
inset -2px 0px 0px var(--
|
|
80
|
-
inset 2px 0px 0px var(--
|
|
72
|
+
inset -2px 0px 0px var(--psp--color),
|
|
73
|
+
inset 2px 0px 0px var(--psp--color);
|
|
81
74
|
}
|
|
82
75
|
|
|
83
76
|
tr:first-child td.psp-menu-open {
|
|
84
|
-
border-top-color: var(--
|
|
77
|
+
border-top-color: var(--psp--color) !important;
|
|
85
78
|
}
|
|
86
79
|
|
|
87
80
|
tr:last-child td.psp-menu-open {
|
|
88
81
|
box-shadow:
|
|
89
|
-
inset -2px 0px 0px var(--
|
|
90
|
-
inset 2px 0px 0px var(--
|
|
91
|
-
inset 0px -2px 0px var(--
|
|
82
|
+
inset -2px 0px 0px var(--psp--color),
|
|
83
|
+
inset 2px 0px 0px var(--psp--color),
|
|
84
|
+
inset 0px -2px 0px var(--psp--color);
|
|
92
85
|
}
|
|
93
86
|
}
|
|
94
87
|
|
|
95
|
-
perspective-viewer
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
:host {
|
|
100
|
-
@include settings-open;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
@mixin viewer-table-styles {
|
|
88
|
+
perspective-viewer,
|
|
89
|
+
:host-context(perspective-viewer) {
|
|
104
90
|
regular-table table thead tr:last-child th {
|
|
105
91
|
border-bottom-width: 1px;
|
|
106
|
-
border-bottom-color: var(--inactive--border-color, #8b868045);
|
|
92
|
+
border-bottom-color: var(--psp-inactive--border-color, #8b868045);
|
|
107
93
|
}
|
|
108
94
|
}
|
|
109
95
|
|
|
110
|
-
perspective-viewer {
|
|
111
|
-
@include viewer-table-styles;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
:host-context(perspective-viewer) {
|
|
115
|
-
@include viewer-table-styles;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
96
|
.psp-sort-enabled:hover {
|
|
119
97
|
cursor: pointer;
|
|
120
98
|
}
|
|
@@ -128,10 +106,20 @@ perspective-viewer {
|
|
|
128
106
|
border-color: var(--selected-row--background-color, #ea7319) !important;
|
|
129
107
|
}
|
|
130
108
|
|
|
109
|
+
regular-table.flat-group-rollup-mode.vertical-row-headers
|
|
110
|
+
th.psp-tree-label:not(:last-of-type) {
|
|
111
|
+
writing-mode: vertical-lr;
|
|
112
|
+
}
|
|
113
|
+
|
|
131
114
|
.psp-row-selected.psp-tree-label:not(:hover):before {
|
|
132
115
|
color: white;
|
|
133
116
|
}
|
|
134
117
|
|
|
118
|
+
regular-table:not(.flat-group-rollup-mode)
|
|
119
|
+
.psp-row-selected.psp-tree-label:not(:hover):before {
|
|
120
|
+
color: white;
|
|
121
|
+
}
|
|
122
|
+
|
|
135
123
|
.psp-row-subselected,
|
|
136
124
|
:hover .psp-row-subselected,
|
|
137
125
|
:hover th.psp-tree-leaf.psp-row-subselected,
|
|
@@ -149,96 +137,131 @@ td:focus {
|
|
|
149
137
|
outline-width: 1px;
|
|
150
138
|
}
|
|
151
139
|
|
|
152
|
-
|
|
140
|
+
perspective-viewer.dragging,
|
|
141
|
+
:host-context(perspective-viewer.dragging) {
|
|
153
142
|
regular-table {
|
|
154
143
|
pointer-events: none;
|
|
155
144
|
}
|
|
156
145
|
}
|
|
157
|
-
perspective-viewer.dragging {
|
|
158
|
-
@include table-no-dragging;
|
|
159
|
-
}
|
|
160
|
-
:host-context(perspective-viewer.dragging) {
|
|
161
|
-
@include table-no-dragging;
|
|
162
|
-
}
|
|
163
146
|
|
|
164
147
|
.psp-header-border:last-child {
|
|
165
148
|
border-right-width: 0px;
|
|
166
149
|
}
|
|
167
150
|
|
|
168
151
|
.psp-header-sort-desc:after {
|
|
169
|
-
|
|
152
|
+
background-repeat: no-repeat;
|
|
153
|
+
background-color: var(--psp--color);
|
|
154
|
+
content: "";
|
|
155
|
+
display: inline-block;
|
|
156
|
+
-webkit-mask-size: cover;
|
|
157
|
+
mask-size: cover;
|
|
170
158
|
width: 14px;
|
|
171
159
|
height: 11px;
|
|
172
160
|
margin-left: 4px;
|
|
173
|
-
-webkit-mask-image: var(--sort-desc
|
|
174
|
-
mask-image: var(--sort-desc
|
|
161
|
+
-webkit-mask-image: var(--psp-icon--sort-desc--mask-image);
|
|
162
|
+
mask-image: var(--psp-icon--sort-desc--mask-image);
|
|
175
163
|
}
|
|
176
164
|
|
|
177
165
|
.psp-header-sort-asc:after {
|
|
178
|
-
|
|
166
|
+
background-repeat: no-repeat;
|
|
167
|
+
background-color: var(--psp--color);
|
|
168
|
+
content: "";
|
|
169
|
+
display: inline-block;
|
|
170
|
+
-webkit-mask-size: cover;
|
|
171
|
+
mask-size: cover;
|
|
179
172
|
width: 14px;
|
|
180
173
|
height: 11px;
|
|
181
174
|
margin-left: 4px;
|
|
182
|
-
-webkit-mask-image: var(--sort-asc
|
|
183
|
-
mask-image: var(--sort-asc
|
|
175
|
+
-webkit-mask-image: var(--psp-icon--sort-asc--mask-image);
|
|
176
|
+
mask-image: var(--psp-icon--sort-asc--mask-image);
|
|
184
177
|
}
|
|
185
178
|
|
|
186
179
|
.psp-header-sort-col-desc:after {
|
|
187
|
-
|
|
180
|
+
background-repeat: no-repeat;
|
|
181
|
+
background-color: var(--psp--color);
|
|
182
|
+
content: "";
|
|
183
|
+
display: inline-block;
|
|
184
|
+
-webkit-mask-size: cover;
|
|
185
|
+
mask-size: cover;
|
|
188
186
|
width: 14px;
|
|
189
187
|
height: 11px;
|
|
190
188
|
margin-left: 4px;
|
|
191
|
-
-webkit-mask-image: var(--sort-col-desc
|
|
192
|
-
mask-image: var(--sort-col-desc
|
|
189
|
+
-webkit-mask-image: var(--psp-icon--sort-col-desc--mask-image);
|
|
190
|
+
mask-image: var(--psp-icon--sort-col-desc--mask-image);
|
|
193
191
|
}
|
|
194
192
|
|
|
195
193
|
.psp-header-sort-col-asc:after {
|
|
196
|
-
|
|
194
|
+
background-repeat: no-repeat;
|
|
195
|
+
background-color: var(--psp--color);
|
|
196
|
+
content: "";
|
|
197
|
+
display: inline-block;
|
|
198
|
+
-webkit-mask-size: cover;
|
|
199
|
+
mask-size: cover;
|
|
197
200
|
width: 14px;
|
|
198
201
|
height: 11px;
|
|
199
202
|
margin-left: 4px;
|
|
200
|
-
-webkit-mask-image: var(--sort-col-asc
|
|
201
|
-
mask-image: var(--sort-col-asc
|
|
203
|
+
-webkit-mask-image: var(--psp-icon--sort-col-asc--mask-image);
|
|
204
|
+
mask-image: var(--psp-icon--sort-col-asc--mask-image);
|
|
202
205
|
}
|
|
203
206
|
|
|
204
207
|
.psp-header-sort-abs-desc:after {
|
|
205
|
-
|
|
208
|
+
background-repeat: no-repeat;
|
|
209
|
+
background-color: var(--psp--color);
|
|
210
|
+
content: "";
|
|
211
|
+
display: inline-block;
|
|
212
|
+
-webkit-mask-size: cover;
|
|
213
|
+
mask-size: cover;
|
|
206
214
|
width: 14px;
|
|
207
215
|
height: 11px;
|
|
208
216
|
margin-left: 4px;
|
|
209
|
-
-webkit-mask-image: var(--sort-abs-desc
|
|
210
|
-
mask-image: var(--sort-abs-desc
|
|
217
|
+
-webkit-mask-image: var(--psp-icon--sort-abs-desc--mask-image);
|
|
218
|
+
mask-image: var(--psp-icon--sort-abs-desc--mask-image);
|
|
211
219
|
}
|
|
212
220
|
|
|
213
221
|
.psp-header-sort-abs-asc:after {
|
|
214
|
-
|
|
222
|
+
background-repeat: no-repeat;
|
|
223
|
+
background-color: var(--psp--color);
|
|
224
|
+
content: "";
|
|
225
|
+
display: inline-block;
|
|
226
|
+
-webkit-mask-size: cover;
|
|
227
|
+
mask-size: cover;
|
|
215
228
|
width: 14px;
|
|
216
229
|
height: 11px;
|
|
217
230
|
margin-left: 4px;
|
|
218
|
-
-webkit-mask-image: var(--sort-abs-asc
|
|
219
|
-
mask-image: var(--sort-abs-asc
|
|
231
|
+
-webkit-mask-image: var(--psp-icon--sort-abs-asc--mask-image);
|
|
232
|
+
mask-image: var(--psp-icon--sort-abs-asc--mask-image);
|
|
220
233
|
}
|
|
221
234
|
|
|
222
235
|
.psp-header-sort-abs-col-desc:after {
|
|
223
|
-
|
|
236
|
+
background-repeat: no-repeat;
|
|
237
|
+
background-color: var(--psp--color);
|
|
238
|
+
content: "";
|
|
239
|
+
display: inline-block;
|
|
240
|
+
-webkit-mask-size: cover;
|
|
241
|
+
mask-size: cover;
|
|
224
242
|
width: 14px;
|
|
225
243
|
height: 11px;
|
|
226
244
|
margin-left: 4px;
|
|
227
|
-
-webkit-mask-image: var(--sort-abs-col-desc
|
|
228
|
-
mask-image: var(--sort-abs-col-desc
|
|
245
|
+
-webkit-mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
|
|
246
|
+
mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
|
|
229
247
|
}
|
|
230
248
|
|
|
231
249
|
.psp-header-sort-abs-col-asc:after {
|
|
232
|
-
|
|
250
|
+
background-repeat: no-repeat;
|
|
251
|
+
background-color: var(--psp--color);
|
|
252
|
+
content: "";
|
|
253
|
+
display: inline-block;
|
|
254
|
+
-webkit-mask-size: cover;
|
|
255
|
+
mask-size: cover;
|
|
233
256
|
width: 14px;
|
|
234
257
|
height: 11px;
|
|
235
258
|
margin-left: 4px;
|
|
236
|
-
-webkit-mask-image: var(--sort-abs-col-asc
|
|
237
|
-
mask-image: var(--sort-abs-col-asc
|
|
259
|
+
-webkit-mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
|
|
260
|
+
mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
|
|
238
261
|
}
|
|
239
262
|
|
|
240
263
|
tbody th:last-of-type {
|
|
241
|
-
border-right: 1px solid var(--inactive--border-color, #8b868045);
|
|
264
|
+
border-right: 1px solid var(--psp-inactive--border-color, #8b868045);
|
|
242
265
|
overflow: hidden;
|
|
243
266
|
text-overflow: ellipsis;
|
|
244
267
|
}
|
|
@@ -246,7 +269,7 @@ tbody th:empty {
|
|
|
246
269
|
background-image: linear-gradient(
|
|
247
270
|
to right,
|
|
248
271
|
transparent 9px,
|
|
249
|
-
var(--inactive--border-color, #eee) 10px,
|
|
272
|
+
var(--psp-inactive--border-color, #eee) 10px,
|
|
250
273
|
transparent 11px
|
|
251
274
|
);
|
|
252
275
|
background-repeat: no-repeat;
|
|
@@ -254,29 +277,36 @@ tbody th:empty {
|
|
|
254
277
|
max-width: 20px;
|
|
255
278
|
pointer-events: none;
|
|
256
279
|
}
|
|
257
|
-
.psp-tree-label {
|
|
258
|
-
max-width: 0px;
|
|
259
|
-
min-width: 0px;
|
|
260
|
-
}
|
|
261
|
-
.psp-tree-label:before {
|
|
262
|
-
color: var(--icon--color);
|
|
263
|
-
font-family: var(--button--font-family, inherit);
|
|
264
|
-
padding-right: 11px;
|
|
265
|
-
}
|
|
266
|
-
.psp-tree-label-expand:before {
|
|
267
|
-
content: var(--tree-label-expand--content, "+");
|
|
268
|
-
}
|
|
269
|
-
.psp-tree-label-collapse:before {
|
|
270
|
-
content: var(--tree-label-collapse--content, "-");
|
|
271
|
-
}
|
|
272
|
-
.psp-tree-label-expand,
|
|
273
|
-
.psp-tree-label-collapse {
|
|
274
|
-
cursor: pointer;
|
|
275
|
-
}
|
|
276
280
|
|
|
277
|
-
.
|
|
278
|
-
|
|
279
|
-
|
|
281
|
+
regular-table:not(.flat-group-rollup-mode) {
|
|
282
|
+
.psp-tree-label {
|
|
283
|
+
max-width: 0px;
|
|
284
|
+
min-width: 0px;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.psp-tree-label:before {
|
|
288
|
+
color: var(--psp--color);
|
|
289
|
+
font-family: var(--psp-button--font-family, inherit);
|
|
290
|
+
padding-right: 11px;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.psp-tree-label-expand:before {
|
|
294
|
+
content: var(--psp-label--tree-expand--content, "+");
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.psp-tree-label-collapse:before {
|
|
298
|
+
content: var(--psp-label--tree-collapse--content, "-");
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.psp-tree-label-expand,
|
|
302
|
+
.psp-tree-label-collapse {
|
|
303
|
+
cursor: pointer;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.psp-tree-label:hover:before {
|
|
307
|
+
color: var(--psp-active--color);
|
|
308
|
+
text-shadow: 0px 0px 5px var(--psp-active--color);
|
|
309
|
+
}
|
|
280
310
|
}
|
|
281
311
|
|
|
282
312
|
.psp-tree-leaf {
|
|
@@ -290,10 +320,10 @@ tbody th:empty {
|
|
|
290
320
|
text-align: left;
|
|
291
321
|
}
|
|
292
322
|
.psp-positive:not(:focus) {
|
|
293
|
-
color: var(--
|
|
323
|
+
color: var(--psp-datagrid--pos-cell--color);
|
|
294
324
|
}
|
|
295
325
|
.psp-negative:not(:focus) {
|
|
296
|
-
color: var(--
|
|
326
|
+
color: var(--psp-datagrid--neg-cell--color);
|
|
297
327
|
}
|
|
298
328
|
|
|
299
329
|
regular-table table tbody td {
|
|
@@ -312,6 +342,7 @@ regular-table table tbody td {
|
|
|
312
342
|
}
|
|
313
343
|
|
|
314
344
|
regular-table table {
|
|
345
|
+
font-size: 1em;
|
|
315
346
|
user-select: none;
|
|
316
347
|
color: inherit;
|
|
317
348
|
border-collapse: separate;
|
|
@@ -322,7 +353,7 @@ regular-table table {
|
|
|
322
353
|
|
|
323
354
|
td,
|
|
324
355
|
th {
|
|
325
|
-
border-color: var(--inactive--border-color, #8b868045);
|
|
356
|
+
border-color: var(--psp-inactive--border-color, #8b868045);
|
|
326
357
|
height: 23px;
|
|
327
358
|
}
|
|
328
359
|
|
|
@@ -354,10 +385,10 @@ regular-table table {
|
|
|
354
385
|
|
|
355
386
|
td.psp-select-region,
|
|
356
387
|
th.psp-select-region {
|
|
357
|
-
|
|
358
|
-
background-color: var(--
|
|
359
|
-
color: var(--
|
|
360
|
-
border-color: var(--
|
|
388
|
+
/* transition: background-color 0.5s, color 0.5s, border-color 0.5s; */
|
|
389
|
+
background-color: var(--psp--color) !important;
|
|
390
|
+
color: var(--psp--background-color) !important;
|
|
391
|
+
border-color: var(--psp--background-color) !important;
|
|
361
392
|
}
|
|
362
393
|
}
|
|
363
394
|
|
|
@@ -370,63 +401,56 @@ regular-table
|
|
|
370
401
|
tr:hover
|
|
371
402
|
+ tr
|
|
372
403
|
td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected) {
|
|
373
|
-
border-color: var(--
|
|
404
|
+
border-color: var(--psp--background-color) !important;
|
|
374
405
|
}
|
|
375
406
|
|
|
376
407
|
regular-table tbody tr:hover {
|
|
377
408
|
td.psp-select-region.psp-menu-open {
|
|
378
409
|
&:not(.psp-row-selected):not(.psp-row-subselected) {
|
|
379
410
|
box-shadow:
|
|
380
|
-
inset -2px 0px 0px var(--
|
|
381
|
-
inset 2px 0px 0px var(--
|
|
411
|
+
inset -2px 0px 0px var(--psp--background-color),
|
|
412
|
+
inset 2px 0px 0px var(--psp--background-color);
|
|
382
413
|
}
|
|
383
414
|
}
|
|
384
415
|
}
|
|
385
416
|
|
|
386
417
|
:host-context(perspective-viewer[settings]) td.psp-select-region.psp-menu-open {
|
|
387
418
|
box-shadow:
|
|
388
|
-
inset -2px 0px 0px var(--
|
|
389
|
-
inset 2px 0px 0px var(--
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
// This is a design/architecture bug. When the datagrid draws during a sidepanel
|
|
393
|
-
// collapse/uncollapse, the `settings` attribute is set to the _previous_ state
|
|
394
|
-
// as this collapse takes a while and we dont want the new state CSS to apply
|
|
395
|
-
// until the drawing is done. However, this causes the datagrid to draw its
|
|
396
|
-
// _first_ frame as if its in the wrong state, as it detects sidepanel state
|
|
397
|
-
// via HTML attribute checking.
|
|
398
|
-
@mixin design-slash-architecture-bug {
|
|
399
|
-
regular-table #psp-column-edit-buttons:after {
|
|
400
|
-
content: none;
|
|
401
|
-
}
|
|
419
|
+
inset -2px 0px 0px var(--psp--background-color),
|
|
420
|
+
inset 2px 0px 0px var(--psp--background-color);
|
|
402
421
|
}
|
|
403
422
|
|
|
423
|
+
/* This is a design/architecture bug. When the datagrid draws during a sidepanel */
|
|
424
|
+
/* collapse/uncollapse, the `settings` attribute is set to the _previous_ state */
|
|
425
|
+
/* as this collapse takes a while and we dont want the new state CSS to apply */
|
|
426
|
+
/* until the drawing is done. However, this causes the datagrid to draw its */
|
|
427
|
+
/* _first_ frame as if its in the wrong state, as it detects sidepanel state */
|
|
428
|
+
/* via HTML attribute checking. */
|
|
404
429
|
regular-table
|
|
405
430
|
#psp-column-edit-buttons
|
|
406
431
|
th:not(.rt-group-corner)
|
|
407
432
|
span:not(.rt-column-resize):before {
|
|
408
|
-
content: var(--datagrid
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
perspective-viewer:not([settings]) {
|
|
412
|
-
@include design-slash-architecture-bug;
|
|
433
|
+
content: var(--psp-datagrid--column-edit-button--content, "Edit");
|
|
413
434
|
}
|
|
414
435
|
|
|
436
|
+
perspective-viewer:not([settings]),
|
|
415
437
|
:host-context(perspective-viewer:not([settings])) {
|
|
416
|
-
|
|
438
|
+
regular-table #psp-column-edit-buttons:after {
|
|
439
|
+
content: none;
|
|
440
|
+
}
|
|
417
441
|
}
|
|
418
442
|
|
|
419
|
-
|
|
443
|
+
/* Style the last row of the `<thead>` so that is has a bottom border. */
|
|
420
444
|
regular-table table thead tr:last-child:after {
|
|
421
445
|
width: 10000px;
|
|
422
446
|
box-sizing: border-box;
|
|
423
447
|
display: block;
|
|
424
448
|
height: 23px;
|
|
425
449
|
content: " ";
|
|
426
|
-
border-bottom: 1px solid var(--inactive--border-color);
|
|
450
|
+
border-bottom: 1px solid var(--psp-inactive--border-color);
|
|
427
451
|
}
|
|
428
452
|
|
|
429
|
-
|
|
453
|
+
/* Extend every row to the right edge of the page with a fake column. */
|
|
430
454
|
regular-table table tbody tr:after {
|
|
431
455
|
width: 10000px;
|
|
432
456
|
box-sizing: border-box;
|
|
@@ -437,15 +461,15 @@ regular-table table tbody tr:after {
|
|
|
437
461
|
}
|
|
438
462
|
|
|
439
463
|
regular-table table tbody tr:not(:first-child):after {
|
|
440
|
-
border-top: 1px solid var(--inactive--border-color);
|
|
464
|
+
border-top: 1px solid var(--psp-inactive--border-color);
|
|
441
465
|
}
|
|
442
466
|
|
|
443
467
|
regular-table table tbody tr:hover:not(:first-child):after {
|
|
444
|
-
border-top: 1px solid var(--
|
|
468
|
+
border-top: 1px solid var(--psp-datagrid--hover--border-color);
|
|
445
469
|
}
|
|
446
470
|
|
|
447
471
|
regular-table table tbody tr:hover + tr:after {
|
|
448
|
-
border-top: 1px solid var(--
|
|
472
|
+
border-top: 1px solid var(--psp-datagrid--hover--border-color);
|
|
449
473
|
}
|
|
450
474
|
|
|
451
475
|
@keyframes pulse_pos {
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
|
2
|
+
* ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
|
|
3
|
+
* ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
|
|
4
|
+
* ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
|
|
5
|
+
* ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
|
|
6
|
+
* ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
|
7
|
+
* ┃ Copyright (c) 2017, the Perspective Authors. ┃
|
|
8
|
+
* ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
|
|
9
|
+
* ┃ This file is part of the Perspective library, distributed under the terms ┃
|
|
10
|
+
* ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
|
|
11
|
+
* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
|
12
|
+
*/
|
|
12
13
|
|
|
13
14
|
regular-table {
|
|
14
15
|
tbody {
|
|
@@ -18,24 +19,29 @@ regular-table {
|
|
|
18
19
|
th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
|
|
19
20
|
tr:hover td:not(.psp-row-selected):not(.psp-row-subselected),
|
|
20
21
|
tr:hover:after {
|
|
21
|
-
border-color: var(
|
|
22
|
-
|
|
22
|
+
border-color: var(
|
|
23
|
+
--psp-datagrid--hover--border-color,
|
|
24
|
+
#c5c9d080
|
|
25
|
+
) !important;
|
|
26
|
+
box-shadow: 0px 1px 0px
|
|
27
|
+
var(--psp-datagrid--hover--border-color, #c5c9d080);
|
|
23
28
|
|
|
24
29
|
&.psp-menu-open {
|
|
25
30
|
box-shadow:
|
|
26
|
-
inset -2px 0px 0px var(--
|
|
27
|
-
inset 2px 0px 0px var(--
|
|
28
|
-
0px 1px 0px
|
|
31
|
+
inset -2px 0px 0px var(--psp--color),
|
|
32
|
+
inset 2px 0px 0px var(--psp--color),
|
|
33
|
+
0px 1px 0px
|
|
34
|
+
var(--psp-datagrid--hover--border-color, #c5c9d080);
|
|
29
35
|
}
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
tr:last-child:hover
|
|
33
39
|
td:not(.psp-row-selected):not(.psp-row-subselected).psp-menu-open {
|
|
34
40
|
box-shadow:
|
|
35
|
-
inset -2px 0px 0px var(--
|
|
36
|
-
inset 2px 0px 0px var(--
|
|
37
|
-
inset 0px -2px 0px var(--
|
|
38
|
-
0px 1px 0px var(--
|
|
41
|
+
inset -2px 0px 0px var(--psp--color),
|
|
42
|
+
inset 2px 0px 0px var(--psp--color),
|
|
43
|
+
inset 0px -2px 0px var(--psp--color),
|
|
44
|
+
0px 1px 0px var(--psp-datagrid--hover--border-color, #c5c9d080);
|
|
39
45
|
}
|
|
40
46
|
|
|
41
47
|
tr:hover
|
|
@@ -71,7 +77,7 @@ regular-table {
|
|
|
71
77
|
th:first-child:empty ~ th:empty + th:not(:empty),
|
|
72
78
|
td:first-child {
|
|
73
79
|
border-left-color: var(
|
|
74
|
-
--
|
|
80
|
+
--psp-datagrid--hover--border-color,
|
|
75
81
|
#c5c9d080
|
|
76
82
|
) !important;
|
|
77
83
|
}
|
|
@@ -79,7 +85,7 @@ regular-table {
|
|
|
79
85
|
th:last-child,
|
|
80
86
|
td:last-child {
|
|
81
87
|
border-right-color: var(
|
|
82
|
-
--
|
|
88
|
+
--psp-datagrid--hover--border-color,
|
|
83
89
|
#c5c9d080
|
|
84
90
|
) !important;
|
|
85
91
|
}
|