@antv/s2-vue 2.0.0-alpha.1 → 2.0.0-next.10

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/esm/style.css CHANGED
@@ -1,50 +1,50 @@
1
1
  .antv-s2-tooltip-operator {
2
- color: rgba(0, 0, 0, 0.65);
2
+ color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
3
+ background: var(--antv-s2-tooltip-operator-background, #f9f9f9);
3
4
  font-size: 12px;
4
- line-height: 32px;
5
- background: #f9f9f9;
6
- padding: 0 12px;
5
+ line-height: 36px;
7
6
  border: 0;
8
7
  cursor: pointer;
9
8
  }
9
+ .antv-s2-tooltip-operator .ant-menu-horizontal:not(.ant-menu-dark) {
10
+ background: transparent;
11
+ line-height: 36px;
12
+ }
10
13
  .antv-s2-tooltip-operator .ant-dropdown-trigger,
11
14
  .antv-s2-tooltip-operator-dropdown {
12
15
  padding: 0 6px 0 0;
13
16
  }
14
17
  .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu {
15
18
  font-size: 12px;
16
- line-height: 32px;
17
- color: rgba(0, 0, 0, 0.65);
19
+ color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
18
20
  border: 0;
19
- margin: 0 -12px;
21
+ user-select: none;
22
+ padding: 4px;
20
23
  }
21
24
  .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu .ant-menu-item {
22
- height: 30px;
23
- }
24
- .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu .ant-menu-item:not(:last-child) {
25
- margin: 0;
25
+ height: 36px;
26
26
  }
27
27
  .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu .ant-menu-submenu > .ant-menu-submenu-title {
28
- height: 30px;
28
+ height: 36px;
29
+ width: 100%;
29
30
  }
30
31
  .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow {
31
- color: rgba(0, 0, 0, 0.65);
32
+ color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
32
33
  }
33
34
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-dropdown-menu-item,
34
35
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-dropdown-menu-item,
35
36
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-menu-item,
36
37
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-item {
37
38
  font-size: 12px;
38
- line-height: 32px;
39
+ line-height: 36px;
39
40
  padding: 0 12px;
40
41
  border: 0;
41
- margin: 0;
42
42
  }
43
43
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-dropdown-menu-item:not(.ant-menu-item-active),
44
44
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-dropdown-menu-item:not(.ant-menu-item-active),
45
45
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-menu-item:not(.ant-menu-item-active),
46
46
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-item:not(.ant-menu-item-active) {
47
- color: rgba(0, 0, 0, 0.65);
47
+ color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
48
48
  }
49
49
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title,
50
50
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title,
@@ -54,9 +54,9 @@
54
54
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu .ant-menu-submenu-title,
55
55
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title,
56
56
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title {
57
- padding: 0 12px;
57
+ padding: 0 0 0 12px;
58
58
  font-size: 12px;
59
- line-height: 32px;
59
+ line-height: 36px;
60
60
  margin: 0;
61
61
  }
62
62
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title:not(.ant-menu-item-active),
@@ -67,7 +67,7 @@
67
67
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu .ant-menu-submenu-title:not(.ant-menu-item-active),
68
68
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title:not(.ant-menu-item-active),
69
69
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title:not(.ant-menu-item-active) {
70
- color: rgba(0, 0, 0, 0.65);
70
+ color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
71
71
  }
72
72
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title .ant-dropdown-menu-title-content,
73
73
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-dropdown-menu-submenu .ant-menu-submenu-title .ant-dropdown-menu-title-content,
@@ -90,28 +90,29 @@
90
90
  .antv-s2-tooltip-operator-submenu-popup .ant-dropdown-menu-item,
91
91
  .antv-s2-tooltip-operator-submenu-popup .ant-menu-item {
92
92
  font-size: 12px;
93
- line-height: 32px;
93
+ line-height: 36px;
94
94
  padding: 0 12px;
95
95
  }
96
96
  .antv-s2-tooltip-operator-submenu-popup .ant-dropdown-menu-item:not(.ant-menu-item-active),
97
97
  .antv-s2-tooltip-operator-submenu-popup .ant-menu-item:not(.ant-menu-item-active) {
98
- color: rgba(0, 0, 0, 0.65);
98
+ color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
99
99
  }
100
100
  .antv-s2-tooltip-operator-submenu-popup .ant-menu-vertical .ant-menu-item {
101
101
  margin: 0;
102
- height: 30px;
103
- line-height: 32px;
102
+ height: 36px;
103
+ line-height: 36px;
104
+ width: 100%;
104
105
  }
105
106
  .antv-s2-tooltip-operator-submenu-popup .ant-menu-vertical .ant-menu-item:not(:last-child) {
106
107
  margin: 0;
107
108
  }
108
109
  .antv-s2-tooltip-operator-icon {
109
110
  vertical-align: middle;
110
- margin-right: 4px;
111
111
  }
112
112
  .antv-s2-tooltip-operator-icon svg {
113
113
  width: 12px;
114
114
  height: 12px;
115
+ fill: var(--antv-s2-font);
115
116
  }
116
117
  @media only screen and (max-device-width: 480px) {
117
118
  .antv-s2-tooltip-operator-menus.ant-menu-vertical.ant-menu {
@@ -144,7 +145,7 @@
144
145
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu .ant-menu-submenu-title:not(.ant-menu-item-active),
145
146
  .antv-s2-tooltip-operator-menus.ant-dropdown-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title:not(.ant-menu-item-active),
146
147
  .antv-s2-tooltip-operator-menus.ant-menu-vertical .ant-menu-submenu-vertical .ant-menu-submenu-title:not(.ant-menu-item-active) {
147
- color: rgba(0, 0, 0, 0.65);
148
+ color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
148
149
  }
149
150
  .antv-s2-tooltip-operator-submenu-popup .ant-dropdown-menu-item,
150
151
  .antv-s2-tooltip-operator-submenu-popup .ant-menu-item {
@@ -152,7 +153,7 @@
152
153
  }
153
154
  .antv-s2-tooltip-operator-submenu-popup .ant-dropdown-menu-item:not(.ant-menu-item-active),
154
155
  .antv-s2-tooltip-operator-submenu-popup .ant-menu-item:not(.ant-menu-item-active) {
155
- color: rgba(0, 0, 0, 0.65);
156
+ color: var(--antv-s2-font, rgba(0, 0, 0, 0.65));
156
157
  }
157
158
  .antv-s2-tooltip-operator-icon svg {
158
159
  width: 12px;
@@ -168,8 +169,8 @@
168
169
  overflow: auto;
169
170
  z-index: 1024;
170
171
  display: inline-block;
171
- background: rgba(255, 255, 255, 0.96);
172
- border-radius: 2px;
172
+ background: var(--antv-s2-tooltip-background, rgba(255, 255, 255, 0.95));
173
+ border-radius: 4px;
173
174
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
174
175
  font-size: 12px;
175
176
  font-family: Roboto, 'PingFang SC', 'Chinese Quote', BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -192,22 +193,22 @@
192
193
  padding: 12px;
193
194
  line-height: 16px;
194
195
  overflow-wrap: break-word;
195
- color: rgba(0, 0, 0, 0.85);
196
+ color: var(--antv-s2-font-85, rgba(0, 0, 0, 0.85));
196
197
  }
197
198
  .antv-s2-tooltip-description {
198
199
  padding: 0 12px 12px;
199
200
  line-height: 16px;
200
201
  overflow-wrap: break-word;
201
- color: rgba(0, 0, 0, 0.45);
202
+ color: var(--antv-s2-font-45, rgba(0, 0, 0, 0.45));
202
203
  }
203
204
  .antv-s2-tooltip-tips {
204
205
  padding: 4px 12px;
205
- color: rgba(0, 0, 0, 0.45);
206
+ color: var(--antv-s2-font-45, rgba(0, 0, 0, 0.45));
206
207
  }
207
208
  .antv-s2-tooltip-infos {
208
209
  padding: 4px 12px;
209
210
  line-height: 20px;
210
- color: rgba(0, 0, 0, 0.45);
211
+ color: var(--antv-s2-font-45, rgba(0, 0, 0, 0.45));
211
212
  overflow: hidden;
212
213
  text-overflow: ellipsis;
213
214
  -webkit-line-clamp: 2;
@@ -220,7 +221,7 @@
220
221
  }
221
222
  .antv-s2-tooltip-summary {
222
223
  line-height: 20px;
223
- color: rgba(0, 0, 0, 0.65);
224
+ color: var(--antv-s2-font-65, rgba(0, 0, 0, 0.65));
224
225
  overflow: hidden;
225
226
  padding: 12px;
226
227
  }
@@ -243,7 +244,7 @@
243
244
  padding: 12px;
244
245
  }
245
246
  .antv-s2-tooltip-interpretation + .antv-s2-tooltip-head-info-list {
246
- border-top: 1px solid #e9e9e9;
247
+ border-top: 1px solid var(--antv-s2-border, #e9e9e9);
247
248
  }
248
249
  .antv-s2-tooltip-interpretation .antv-s2-tooltip-interpretation-head {
249
250
  margin-bottom: 12px;
@@ -253,10 +254,10 @@
253
254
  height: 14px;
254
255
  }
255
256
  .antv-s2-tooltip-interpretation .antv-s2-tooltip-interpretation-head .antv-s2-tooltip-interpretation-name {
256
- color: #000;
257
+ color: var(--antv-s2-font, #000);
257
258
  }
258
259
  .antv-s2-tooltip-head-info-list {
259
- color: #a2a2a2;
260
+ color: var(--antv-s2-font-65, #a2a2a2);
260
261
  padding: 12px 12px 4px;
261
262
  line-height: 24px;
262
263
  word-break: break-word;
@@ -269,13 +270,13 @@
269
270
  margin-right: 5px;
270
271
  }
271
272
  .antv-s2-tooltip-highlight {
272
- color: rgba(0, 0, 0, 0.85);
273
+ color: var(--antv-s2-font-85, rgba(0, 0, 0, 0.85));
273
274
  }
274
275
  .antv-s2-tooltip-detail-list {
275
276
  padding: 2px 12px 8px;
276
277
  }
277
278
  .antv-s2-tooltip-detail-list .antv-s2-tooltip-detail-item {
278
- color: rgba(0, 0, 0, 0.65);
279
+ color: var(--antv-s2-font-65, rgba(0, 0, 0, 0.65));
279
280
  overflow: hidden;
280
281
  margin: 4px 0;
281
282
  display: flex;
@@ -324,19 +325,20 @@
324
325
  white-space: nowrap;
325
326
  max-width: 64px;
326
327
  }
327
- .antv-s2-drill-down[data-v-1a60f775] {
328
+ .antv-s2-drill-down[data-v-8dd920ec] {
328
329
  width: 260px;
329
330
  min-height: 20px;
330
331
  position: relative;
332
+ color: var(--antv-s2-font-70, #fff);
331
333
  }
332
- .antv-s2-drill-down-header[data-v-1a60f775] {
334
+ .antv-s2-drill-down-header[data-v-8dd920ec] {
333
335
  display: flex;
334
336
  height: 32px;
335
337
  font-size: 14px;
336
338
  padding: 0 16px;
337
339
  margin-top: 16px;
338
340
  }
339
- .antv-s2-drill-down-header button[data-v-1a60f775] {
341
+ .antv-s2-drill-down-header button[data-v-8dd920ec] {
340
342
  position: absolute;
341
343
  right: 0;
342
344
  top: -4px;
@@ -345,36 +347,47 @@
345
347
  letter-spacing: -0.2px;
346
348
  line-height: 20px;
347
349
  }
348
- .antv-s2-drill-down-search[data-v-1a60f775] {
350
+ .antv-s2-drill-down-search[data-v-8dd920ec] {
349
351
  height: 24px;
350
352
  width: 228px !important;
351
353
  margin: 0 16px;
352
354
  border: 1px solid rgba(0, 0, 0, 0.15);
353
355
  border-radius: 2px;
354
- background-color: #fff;
355
356
  }
356
- .antv-s2-drill-down-search input[data-v-1a60f775],
357
- .antv-s2-drill-down-search span[data-v-1a60f775] {
357
+ .antv-s2-drill-down-search input[data-v-8dd920ec],
358
+ .antv-s2-drill-down-search span[data-v-8dd920ec] {
358
359
  font-size: 12px;
359
360
  }
360
- .antv-s2-drill-down-menu[data-v-1a60f775] {
361
+ .antv-s2-drill-down-search[data-v-8dd920ec],
362
+ .antv-s2-drill-down-search .ant-input[data-v-8dd920ec]::placeholder {
363
+ background-color: var(--antv-s2-block-background, #fff);
364
+ }
365
+ .antv-s2-drill-down-extra[data-v-8dd920ec] {
366
+ margin: 4px 16px;
367
+ }
368
+ .antv-s2-drill-down-menu[data-v-8dd920ec] {
361
369
  max-height: 314px;
362
- overflow-y: auto;
363
- overflow-x: hidden;
370
+ overflow: hidden auto;
364
371
  }
365
- .antv-s2-drill-down-menu-item[data-v-1a60f775] {
372
+ .antv-s2-drill-down-menu.ant-menu[data-v-8dd920ec] {
373
+ background: var(--antv-s2-tooltip-background, #fff);
374
+ }
375
+ .antv-s2-drill-down-menu.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected[data-v-8dd920ec] {
376
+ background-color: var(--antv-s2-block-background, #e6f7ff);
377
+ }
378
+ .antv-s2-drill-down-menu-item[data-v-8dd920ec] {
366
379
  height: 32px !important;
367
380
  line-height: 32px !important;
368
381
  font-size: 12px;
369
382
  opacity: 0.65;
370
383
  }
371
- .antv-s2-drill-down-menu-item span[data-v-1a60f775]:last-child {
384
+ .antv-s2-drill-down-menu-item span[data-v-8dd920ec]:last-child {
372
385
  line-height: 32px;
373
386
  }
374
- .antv-s2-drill-down-menu-item svg[data-v-1a60f775] {
387
+ .antv-s2-drill-down-menu-item svg[data-v-8dd920ec] {
375
388
  margin-right: 8px;
376
389
  }
377
- .antv-s2-drill-down-empty[data-v-1a60f775] {
378
- padding: 18px 18px 0;
390
+ .antv-s2-drill-down-empty[data-v-8dd920ec] {
391
+ padding: 12px;
379
392
  font-size: 12px;
380
393
  }