bkui-vue 2.0.1-beta.34.scrollbar.1 → 2.0.1-beta.34.scrollbar.3

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.
@@ -0,0 +1,500 @@
1
+ :root {
2
+ --bk-prefix: bk;
3
+ --popover-max-height: var(--popover-max-height);
4
+ --primary-color: var(--primary-color);
5
+ --success-color: var(--success-color);
6
+ --warning-color: var(--warning-color);
7
+ --danger-color: var(--danger-color);
8
+ --default-color: var(--default-color);
9
+ --gray-color: var(--gray-color);
10
+ --light-gray: var(--light-gray);
11
+ --white-color: var(--white-color);
12
+ --whitesmoke-color: var(--whitesmoke-color);
13
+ --disable-color: var(--disable-color);
14
+ --disable-bg-color: var(--disable-bg-color);
15
+ --border-color: var(--border-color);
16
+ --font-size-base: var(--font-size-base);
17
+ --font-size-medium: var(--font-size-medium);
18
+ --font-size-large: var(--font-size-large);
19
+ --line-height-base: var(--line-height-base);
20
+ --line-height-medium: var(--line-height-medium);
21
+ --line-height-large: var(--line-height-large);
22
+ --component-size-small: var(--component-size-small);
23
+ --component-size-base: var(--component-size-base);
24
+ --component-size-large: var(--component-size-large);
25
+ --component-size-small-padding: var(--component-size-small-padding);
26
+ --component-size-base-padding: var(--component-size-base-padding);
27
+ --component-size-large-padding: var(--component-size-large-padding);
28
+ --border-width-base: var(--border-width-base);
29
+ --border-style-base: var(--border-style-base);
30
+ --border-radius-base: var(--border-radius-base);
31
+ --border-style-color: var(--border-style-color);
32
+ --input-disabled-bg: var(--input-disabled-bg);
33
+ --input-disabled-border: var(--input-disabled-border);
34
+ --input-height-base: var(--input-height-base);
35
+ --input-color: var(--input-color);
36
+ --input-bg: var(--input-bg);
37
+ --input-border-color: var(--input-border-color);
38
+ --input-broder-radius: var(--input-broder-radius);
39
+ --input-shadow-color: var(--input-shadow-color);
40
+ --input-horizontal-padding: var(--input-horizontal-padding);
41
+ --input-block-color: var(--input-block-color);
42
+ --input-block-hover-color: var(--input-block-hover-color);
43
+ --input-icon-size: var(--input-icon-size);
44
+ --input-maxlength-color: var(--input-maxlength-color);
45
+ --button-primary-hover-color: var(--button-primary-hover-color);
46
+ --button-danger-hover-color: var(--button-danger-hover-color);
47
+ --button-success-hover-color: var(--button-success-hover-color);
48
+ --button-warning-hover-color: var(--button-warning-hover-color);
49
+ --button-default-hover-border-color: var(--button-default-hover-border-color);
50
+ --button-primary-active-color: var(--button-primary-active-color);
51
+ --button-danger-active-color: var(--button-danger-active-color);
52
+ --button-success-active-color: var(--button-success-active-color);
53
+ --button-warning-active-color: var(--button-warning-active-color);
54
+ --button-selected-bg-color: var(--button-selected-bg-color);
55
+ --button-disabled-selected-bg-color: var(--button-disabled-selected-bg-color);
56
+ --radio-font-color: var(--radio-font-color);
57
+ --radio-active-color: var(--radio-active-color);
58
+ --radio-hover-border-color: var(--radio-hover-border-color);
59
+ --radio-disabled-border: var(--radio-disabled-border);
60
+ --radio-disabled-font-color: var(--radio-disabled-font-color);
61
+ --radio-disabled-checked-bg: var(--radio-disabled-checked-bg);
62
+ --radio-button-checked-bg: var(--radio-button-checked-bg);
63
+ --radio-button-disabled-checked-bg: var(--radio-button-disabled-checked-bg);
64
+ --checkbox-disabled-checked-bg: var(--checkbox-disabled-checked-bg);
65
+ --fixed-navbar-background: var(--fixed-navbar-background);
66
+ --fixed-navbar-boxshadow-color: var(--fixed-navbar-boxshadow-color);
67
+ --switch-default-color: var(--switch-default-color);
68
+ --switch-grey-color: var(--switch-grey-color);
69
+ --breadcrumb-black-color: var(--breadcrumb-black-color);
70
+ --breadcrumb-primary-hover-color: var(--breadcrumb-primary-hover-color);
71
+ --breadcrumb-fn-main-color: var(--breadcrumb-fn-main-color);
72
+ --link-default-hover-color: var(--link-default-hover-color);
73
+ --link-primary-hover-color: var(--link-primary-hover-color);
74
+ --link-success-hover-color: var(--link-success-hover-color);
75
+ --link-warning-hover-color: var(--link-warning-hover-color);
76
+ --link-danger-hover-color: var(--link-danger-hover-color);
77
+ --link-default-disabled-color: var(--link-default-disabled-color);
78
+ --link-primary-disabled-color: var(--link-primary-disabled-color);
79
+ --link-success-disabled-color: var(--link-success-disabled-color);
80
+ --link-warning-disabled-color: var(--link-warning-disabled-color);
81
+ --link-danger-disabled-color: var(--link-danger-disabled-color);
82
+ --message-color: var(--message-color);
83
+ --message-primary-bg-color: var(--message-primary-bg-color);
84
+ --message-primary-border-color: var(--message-primary-border-color);
85
+ --message-primary-shadow-color: var(--message-primary-shadow-color);
86
+ --message-warning-bg-color: var(--message-warning-bg-color);
87
+ --message-warning-border-color: var(--message-warning-border-color);
88
+ --message-warning-shadow-color: var(--message-warning-shadow-color);
89
+ --message-success-bg-color: var(--message-success-bg-color);
90
+ --message-success-border-color: var(--message-success-border-color);
91
+ --message-success-shadow-color: var(--message-success-shadow-color);
92
+ --message-danger-bg-color: var(--message-danger-bg-color);
93
+ --message-danger-border-color: var(--message-danger-border-color);
94
+ --message-danger-shadow-color: var(--message-danger-shadow-color);
95
+ --slider-default-bg: var(--slider-default-bg);
96
+ --slider-disable-bar-bg: var(--slider-disable-bar-bg);
97
+ --menu-bg-color: var(--menu-bg-color);
98
+ --submenu-bg-color: var(--submenu-bg-color);
99
+ --menu-active-bg-color: var(--menu-active-bg-color);
100
+ --menu-color: var(--menu-color);
101
+ --menu-group-color: var(--menu-group-color);
102
+ --menu-width: var(--menu-width);
103
+ --menu-collapse-width: var(--menu-collapse-width);
104
+ --menu-active-color: var(--menu-active-color);
105
+ --nav-header-bg-color: var(--nav-header-bg-color);
106
+ --nav-bg-color: var(--nav-bg-color);
107
+ --date-picker-disabled-bg: var(--date-picker-disabled-bg);
108
+ --date-picker-dropdown-mb: var(--date-picker-dropdown-mb);
109
+ --date-picker-dropdown-bg: var(--date-picker-dropdown-bg);
110
+ --table-bg-color: var(--table-bg-color);
111
+ --table-border-color: var(--table-border-color);
112
+ --table-strip-color: var(--table-strip-color);
113
+ --table-head-bg-color: var(--table-head-bg-color);
114
+ --table-head-font-color: var(--table-head-font-color);
115
+ --table-body-font-color: var(--table-body-font-color);
116
+ --table-row-hover-bg-color: var(--table-row-hover-bg-color);
117
+ --table-row-active-bg-color: var(--table-row-active-bg-color);
118
+ --cascader-panel-border-color: var(--cascader-panel-border-color);
119
+ --cascader-panel-hover: var(--cascader-panel-hover);
120
+ --cascader-panel-active: var(--cascader-panel-active);
121
+ --cascader-panel-disabled-bg: var(--cascader-panel-disabled-bg);
122
+ --search-select-focus-border-color: var(--search-select-focus-border-color);
123
+ --search-select-focus-color: var(--search-select-focus-color);
124
+ --search-select-font-color: var(--search-select-font-color);
125
+ --search-select-placeholder-color: var(--search-select-placeholder-color);
126
+ --search-select-message-color: var(--search-select-message-color);
127
+ --search-select-menu-border-color: var(--search-select-menu-border-color);
128
+ --select-active-color: var(--select-active-color);
129
+ --select-hover-color: var(--select-hover-color);
130
+ }
131
+ :root :root {
132
+ --bk-prefix: bk;
133
+ --popover-max-height: 216px;
134
+ --primary-color: #3a84ff;
135
+ --success-color: #2dcb56;
136
+ --warning-color: #ff9c01;
137
+ --danger-color: #ea3636;
138
+ --default-color: #63656e;
139
+ --gray-color: #979ba5;
140
+ --light-gray: #c4c6cc;
141
+ --white-color: white;
142
+ --whitesmoke-color: #fafbfd;
143
+ --disable-color: #dcdee5;
144
+ --disable-bg-color: #f9fafd;
145
+ --border-color: #dcdee5;
146
+ --font-size-base: 12px;
147
+ --font-size-medium: 14px;
148
+ --font-size-large: 16px;
149
+ --line-height-base: 16px;
150
+ --line-height-medium: 16px;
151
+ --line-height-large: 18px;
152
+ --component-size-small: 26px;
153
+ --component-size-base: 32px;
154
+ --component-size-large: 40px;
155
+ --component-size-small-padding: 0 12px;
156
+ --component-size-base-padding: 0 14px;
157
+ --component-size-large-padding: 0 16px;
158
+ --border-width-base: 1px;
159
+ --border-style-base: solid;
160
+ --border-radius-base: 2px;
161
+ --border-style-color: var(--light-gray);
162
+ --input-disabled-bg: #fafbfd;
163
+ --input-disabled-border: var(--disable-color);
164
+ --input-height-base: var(--component-size-base);
165
+ --input-color: var(--default-color);
166
+ --input-bg: white;
167
+ --input-border-color: var(--light-gray);
168
+ --input-broder-radius: 3px;
169
+ --input-shadow-color: #a3c5fd;
170
+ --input-horizontal-padding: 8px;
171
+ --input-block-color: #f5f7fa;
172
+ --input-block-hover-color: #eaebf0;
173
+ --input-icon-size: var(--font-size-medium);
174
+ --input-maxlength-color: #979ba5;
175
+ --button-primary-hover-color: #5594fa;
176
+ --button-danger-hover-color: #ff5656;
177
+ --button-success-hover-color: #45e35f;
178
+ --button-warning-hover-color: #ffb848;
179
+ --button-default-hover-border-color: #979ba5;
180
+ --button-primary-active-color: #2c77f4;
181
+ --button-danger-active-color: #db2626;
182
+ --button-success-active-color: #1ab943;
183
+ --button-warning-active-color: #eb9000;
184
+ --button-selected-bg-color: #e1ecff;
185
+ --button-disabled-selected-bg-color: #f0f1f5;
186
+ --radio-font-color: #63656e;
187
+ --radio-active-color: #3a84ff;
188
+ --radio-hover-border-color: #979ba5;
189
+ --radio-disabled-border: #dcdee5;
190
+ --radio-disabled-font-color: #c4c6cc;
191
+ --radio-disabled-checked-bg: #a3c5fd;
192
+ --radio-button-checked-bg: #e1ecff;
193
+ --radio-button-disabled-checked-bg: #fafbfd;
194
+ --checkbox-disabled-checked-bg: #a3c5fd;
195
+ --fixed-navbar-background: #fff;
196
+ --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
197
+ --switch-default-color: #fff;
198
+ --switch-grey-color: #c4c6cc;
199
+ --breadcrumb-black-color: #979ba5;
200
+ --breadcrumb-primary-hover-color: #0082ff;
201
+ --breadcrumb-fn-main-color: #63656e;
202
+ --link-default-hover-color: #979ba5;
203
+ --link-primary-hover-color: #699df4;
204
+ --link-success-hover-color: #45e35f;
205
+ --link-warning-hover-color: #ffb848;
206
+ --link-danger-hover-color: #ff5656;
207
+ --link-default-disabled-color: #dcdee5;
208
+ --link-primary-disabled-color: #a3c5fd;
209
+ --link-success-disabled-color: #94f5a4;
210
+ --link-warning-disabled-color: #ffd695;
211
+ --link-danger-disabled-color: #fd9c9c;
212
+ --message-color: var(--default-color);
213
+ --message-primary-bg-color: #f0f8ff;
214
+ --message-primary-border-color: #e1ecff;
215
+ --message-primary-shadow-color: #e1e8f4;
216
+ --message-warning-bg-color: #fff4e2;
217
+ --message-warning-border-color: #ffe8c3;
218
+ --message-warning-shadow-color: #ede6db;
219
+ --message-success-bg-color: #f2fff4;
220
+ --message-success-border-color: #dcffe2;
221
+ --message-success-shadow-color: #cef0d7;
222
+ --message-danger-bg-color: #ffeded;
223
+ --message-danger-border-color: #ffdddd;
224
+ --message-danger-shadow-color: #f6dada;
225
+ --slider-default-bg: #dcdee5;
226
+ --slider-disable-bar-bg: #979ba5;
227
+ --menu-bg-color: #182132;
228
+ --submenu-bg-color: #151d2c;
229
+ --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
230
+ --menu-color: #96a2b9;
231
+ --menu-group-color: var(--default-color);
232
+ --menu-width: 260px;
233
+ --menu-collapse-width: 60px;
234
+ --menu-active-color: white;
235
+ --nav-header-bg-color: #182132;
236
+ --nav-bg-color: #182132;
237
+ --date-picker-disabled-bg: #fafbfd;
238
+ --date-picker-dropdown-mb: 4px;
239
+ --date-picker-dropdown-bg: #fff;
240
+ --table-bg-color: var(--white-color);
241
+ --table-border-color: #dcdee5;
242
+ --table-strip-color: #fafbfd;
243
+ --table-head-bg-color: #fafbfd;
244
+ --table-head-font-color: #313238;
245
+ --table-body-font-color: #63656e;
246
+ --table-row-hover-bg-color: #f5f7fa;
247
+ --table-row-active-bg-color: #f0f1f5;
248
+ --cascader-panel-border-color: #dcdee5;
249
+ --cascader-panel-hover: #f5f7fa;
250
+ --cascader-panel-active: #e1ecff;
251
+ --cascader-panel-disabled-bg: #fff;
252
+ --search-select-focus-border-color: var(--primary-color);
253
+ --search-select-focus-color: #3c96ff;
254
+ --search-select-font-color: var(--default-color);
255
+ --search-select-placeholder-color: var(--light-gray);
256
+ --search-select-message-color: var(--danger-color);
257
+ --search-select-menu-border-color: var(--disable-color);
258
+ --select-active-color: #e1ecff;
259
+ --select-hover-color: #f5f7fa;
260
+ }
261
+ :root {
262
+ --bk-prefix: bk;
263
+ --popover-max-height: 216px;
264
+ --primary-color: #3a84ff;
265
+ --success-color: #2dcb56;
266
+ --warning-color: #ff9c01;
267
+ --danger-color: #ea3636;
268
+ --default-color: #63656e;
269
+ --gray-color: #979ba5;
270
+ --light-gray: #c4c6cc;
271
+ --white-color: white;
272
+ --whitesmoke-color: #fafbfd;
273
+ --disable-color: #dcdee5;
274
+ --disable-bg-color: #f9fafd;
275
+ --border-color: #dcdee5;
276
+ --font-size-base: 12px;
277
+ --font-size-medium: 14px;
278
+ --font-size-large: 16px;
279
+ --line-height-base: 16px;
280
+ --line-height-medium: 16px;
281
+ --line-height-large: 18px;
282
+ --component-size-small: 26px;
283
+ --component-size-base: 32px;
284
+ --component-size-large: 40px;
285
+ --component-size-small-padding: 0 12px;
286
+ --component-size-base-padding: 0 14px;
287
+ --component-size-large-padding: 0 16px;
288
+ --border-width-base: 1px;
289
+ --border-style-base: solid;
290
+ --border-radius-base: 2px;
291
+ --border-style-color: var(--light-gray);
292
+ --input-disabled-bg: #fafbfd;
293
+ --input-disabled-border: var(--disable-color);
294
+ --input-height-base: var(--component-size-base);
295
+ --input-color: var(--default-color);
296
+ --input-bg: white;
297
+ --input-border-color: var(--light-gray);
298
+ --input-broder-radius: 3px;
299
+ --input-shadow-color: #a3c5fd;
300
+ --input-horizontal-padding: 8px;
301
+ --input-block-color: #f5f7fa;
302
+ --input-block-hover-color: #eaebf0;
303
+ --input-icon-size: var(--font-size-medium);
304
+ --input-maxlength-color: #979ba5;
305
+ --button-primary-hover-color: #5594fa;
306
+ --button-danger-hover-color: #ff5656;
307
+ --button-success-hover-color: #45e35f;
308
+ --button-warning-hover-color: #ffb848;
309
+ --button-default-hover-border-color: #979ba5;
310
+ --button-primary-active-color: #2c77f4;
311
+ --button-danger-active-color: #db2626;
312
+ --button-success-active-color: #1ab943;
313
+ --button-warning-active-color: #eb9000;
314
+ --button-selected-bg-color: #e1ecff;
315
+ --button-disabled-selected-bg-color: #f0f1f5;
316
+ --radio-font-color: #63656e;
317
+ --radio-active-color: #3a84ff;
318
+ --radio-hover-border-color: #979ba5;
319
+ --radio-disabled-border: #dcdee5;
320
+ --radio-disabled-font-color: #c4c6cc;
321
+ --radio-disabled-checked-bg: #a3c5fd;
322
+ --radio-button-checked-bg: #e1ecff;
323
+ --radio-button-disabled-checked-bg: #fafbfd;
324
+ --checkbox-disabled-checked-bg: #a3c5fd;
325
+ --fixed-navbar-background: #fff;
326
+ --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
327
+ --switch-default-color: #fff;
328
+ --switch-grey-color: #c4c6cc;
329
+ --breadcrumb-black-color: #979ba5;
330
+ --breadcrumb-primary-hover-color: #0082ff;
331
+ --breadcrumb-fn-main-color: #63656e;
332
+ --link-default-hover-color: #979ba5;
333
+ --link-primary-hover-color: #699df4;
334
+ --link-success-hover-color: #45e35f;
335
+ --link-warning-hover-color: #ffb848;
336
+ --link-danger-hover-color: #ff5656;
337
+ --link-default-disabled-color: #dcdee5;
338
+ --link-primary-disabled-color: #a3c5fd;
339
+ --link-success-disabled-color: #94f5a4;
340
+ --link-warning-disabled-color: #ffd695;
341
+ --link-danger-disabled-color: #fd9c9c;
342
+ --message-color: var(--default-color);
343
+ --message-primary-bg-color: #f0f8ff;
344
+ --message-primary-border-color: #e1ecff;
345
+ --message-primary-shadow-color: #e1e8f4;
346
+ --message-warning-bg-color: #fff4e2;
347
+ --message-warning-border-color: #ffe8c3;
348
+ --message-warning-shadow-color: #ede6db;
349
+ --message-success-bg-color: #f2fff4;
350
+ --message-success-border-color: #dcffe2;
351
+ --message-success-shadow-color: #cef0d7;
352
+ --message-danger-bg-color: #ffeded;
353
+ --message-danger-border-color: #ffdddd;
354
+ --message-danger-shadow-color: #f6dada;
355
+ --slider-default-bg: #dcdee5;
356
+ --slider-disable-bar-bg: #979ba5;
357
+ --menu-bg-color: #182132;
358
+ --submenu-bg-color: #151d2c;
359
+ --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
360
+ --menu-color: #96a2b9;
361
+ --menu-group-color: var(--default-color);
362
+ --menu-width: 260px;
363
+ --menu-collapse-width: 60px;
364
+ --menu-active-color: white;
365
+ --nav-header-bg-color: #182132;
366
+ --nav-bg-color: #182132;
367
+ --date-picker-disabled-bg: #fafbfd;
368
+ --date-picker-dropdown-mb: 4px;
369
+ --date-picker-dropdown-bg: #fff;
370
+ --table-bg-color: var(--white-color);
371
+ --table-border-color: #dcdee5;
372
+ --table-strip-color: #fafbfd;
373
+ --table-head-bg-color: #fafbfd;
374
+ --table-head-font-color: #313238;
375
+ --table-body-font-color: #63656e;
376
+ --table-row-hover-bg-color: #f5f7fa;
377
+ --table-row-active-bg-color: #f0f1f5;
378
+ --cascader-panel-border-color: #dcdee5;
379
+ --cascader-panel-hover: #f5f7fa;
380
+ --cascader-panel-active: #e1ecff;
381
+ --cascader-panel-disabled-bg: #fff;
382
+ --search-select-focus-border-color: var(--primary-color);
383
+ --search-select-focus-color: #3c96ff;
384
+ --search-select-font-color: var(--default-color);
385
+ --search-select-placeholder-color: var(--light-gray);
386
+ --search-select-message-color: var(--danger-color);
387
+ --search-select-menu-border-color: var(--disable-color);
388
+ --select-active-color: #e1ecff;
389
+ --select-hover-color: #f5f7fa;
390
+ }
391
+ .bk-scrollbar {
392
+ overflow: hidden !important;
393
+ overflow-anchor: none;
394
+ touch-action: auto;
395
+ /*
396
+ * Scrollbar rail styles
397
+ */
398
+ /*
399
+ * Scrollbar thumb styles
400
+ */
401
+ }
402
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
403
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
404
+ display: block;
405
+ }
406
+ .bk-scrollbar .bk__rail-x:hover,
407
+ .bk-scrollbar .bk__rail-y:hover,
408
+ .bk-scrollbar .bk__rail-x:focus,
409
+ .bk-scrollbar .bk__rail-y:focus,
410
+ .bk-scrollbar .bk__rail-x.bk--clicking,
411
+ .bk-scrollbar .bk__rail-y.bk--clicking {
412
+ background-color: #f0f1f5;
413
+ }
414
+ .bk-scrollbar .bk__rail-x {
415
+ display: none;
416
+ opacity: 0;
417
+ transition: background-color 0.2s linear, opacity 0.2s linear;
418
+ height: 10px;
419
+ bottom: 0px;
420
+ position: absolute;
421
+ margin-bottom: 2px;
422
+ }
423
+ .bk-scrollbar .bk__rail-x.bk-scroll-size-small {
424
+ height: 8px;
425
+ }
426
+ .bk-scrollbar .bk__rail-x.bk-scroll-size-small .bk__thumb-x {
427
+ height: 6px;
428
+ }
429
+ .bk-scrollbar .bk__rail-y {
430
+ display: none;
431
+ opacity: 0;
432
+ transition: background-color 0.2s linear, opacity 0.2s linear;
433
+ width: 10px;
434
+ right: 0px;
435
+ position: absolute;
436
+ margin-right: 2px;
437
+ }
438
+ .bk-scrollbar .bk__rail-y.bk-scroll-size-small {
439
+ width: 8px;
440
+ }
441
+ .bk-scrollbar .bk__rail-y.bk-scroll-size-small .bk__thumb-y {
442
+ width: 6px;
443
+ }
444
+ .bk-scrollbar:hover > .bk__rail-x,
445
+ .bk-scrollbar:hover > .bk__rail-y,
446
+ .bk-scrollbar.bk--focus > .bk__rail-x,
447
+ .bk-scrollbar.bk--focus > .bk__rail-y,
448
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
449
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
450
+ opacity: 0.9;
451
+ }
452
+ .bk-scrollbar .bk__thumb-x {
453
+ background-color: #dcdee5;
454
+ border-radius: 8px;
455
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
456
+ height: 8px;
457
+ bottom: 0px;
458
+ position: absolute;
459
+ }
460
+ .bk-scrollbar .bk__thumb-y {
461
+ background-color: #dcdee5;
462
+ border-radius: 8px;
463
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
464
+ width: 8px;
465
+ right: 0px;
466
+ position: absolute;
467
+ }
468
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
469
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
470
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
471
+ background-color: #979ba5;
472
+ height: 10px;
473
+ }
474
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
475
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
476
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
477
+ background-color: #979ba5;
478
+ width: 10px;
479
+ }
480
+ .bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
481
+ .bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
482
+ .bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-x {
483
+ height: 8px;
484
+ }
485
+ .bk-scrollbar .bk-scroll-size-small:hover > .bk__thumb-y,
486
+ .bk-scrollbar .bk-scroll-size-small:focus > .bk__thumb-y,
487
+ .bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-y {
488
+ width: 8px;
489
+ }
490
+ /* MS supports */
491
+ @supports (-ms-overflow-style: none) {
492
+ .bk-scrollbar {
493
+ overflow: auto !important;
494
+ }
495
+ }
496
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
497
+ .bk-scrollbar {
498
+ overflow: auto !important;
499
+ }
500
+ }
@@ -56,3 +56,4 @@ import '../pop-confirm/pop-confirm.less';
56
56
  import '../image/image.less';
57
57
  import '../image/image-viewer.less';
58
58
  import '../overflow-title/overflow-title.less';
59
+ import '../scrollbar/scrollbar.less';
@@ -21258,6 +21258,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
21258
21258
  var scrollWidth = (_refBody$value$refRoo = (_refBody$value = refBody.value) === null || _refBody$value === void 0 || (_refBody$value = _refBody$value.refRoot) === null || _refBody$value === void 0 ? void 0 : _refBody$value.scrollWidth) !== null && _refBody$value$refRoo !== void 0 ? _refBody$value$refRoo : 0;
21259
21259
  var offsetWidth = (_refBody$value$refRoo2 = (_refBody$value2 = refBody.value) === null || _refBody$value2 === void 0 || (_refBody$value2 = _refBody$value2.refRoot) === null || _refBody$value2 === void 0 ? void 0 : _refBody$value2.offsetWidth) !== null && _refBody$value$refRoo2 !== void 0 ? _refBody$value$refRoo2 : 0;
21260
21260
  offsetRight.value = (_ref = scrollWidth - offsetWidth - (translateX === null || translateX === void 0 ? void 0 : translateX.value)) !== null && _ref !== void 0 ? _ref : 0;
21261
+ setFixedColumnShawdow();
21261
21262
  };
21262
21263
  var setLineHeight = function setLineHeight(val) {
21263
21264
  lineHeight.value = val;
@@ -145,9 +145,6 @@
145
145
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
146
146
  border-radius: 4px;
147
147
  }
148
- /*
149
- * Container style
150
- */
151
148
  .bk-scrollbar {
152
149
  overflow: hidden !important;
153
150
  overflow-anchor: none;
@@ -180,10 +177,10 @@
180
177
  position: absolute;
181
178
  margin-bottom: 2px;
182
179
  }
183
- .bk-scrollbar .bk__rail-x.bk-size-small {
180
+ .bk-scrollbar .bk__rail-x.bk-scroll-size-small {
184
181
  height: 8px;
185
182
  }
186
- .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
183
+ .bk-scrollbar .bk__rail-x.bk-scroll-size-small .bk__thumb-x {
187
184
  height: 6px;
188
185
  }
189
186
  .bk-scrollbar .bk__rail-y {
@@ -195,10 +192,10 @@
195
192
  position: absolute;
196
193
  margin-right: 2px;
197
194
  }
198
- .bk-scrollbar .bk__rail-y.bk-size-small {
195
+ .bk-scrollbar .bk__rail-y.bk-scroll-size-small {
199
196
  width: 8px;
200
197
  }
201
- .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
198
+ .bk-scrollbar .bk__rail-y.bk-scroll-size-small .bk__thumb-y {
202
199
  width: 6px;
203
200
  }
204
201
  .bk-scrollbar:hover > .bk__rail-x,
@@ -237,14 +234,14 @@
237
234
  background-color: #979ba5;
238
235
  width: 10px;
239
236
  }
240
- .bk-scrollbar .bk-size-small > .bk__thumb-x,
241
- .bk-scrollbar .bk-size-small > .bk__thumb-x,
242
- .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
237
+ .bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
238
+ .bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
239
+ .bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-x {
243
240
  height: 8px;
244
241
  }
245
- .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
246
- .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
247
- .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
242
+ .bk-scrollbar .bk-scroll-size-small:hover > .bk__thumb-y,
243
+ .bk-scrollbar .bk-scroll-size-small:focus > .bk__thumb-y,
244
+ .bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-y {
248
245
  width: 8px;
249
246
  }
250
247
  /* MS supports */
@@ -535,9 +535,6 @@
535
535
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
536
536
  border-radius: 4px;
537
537
  }
538
- /*
539
- * Container style
540
- */
541
538
  .bk-scrollbar {
542
539
  overflow: hidden !important;
543
540
  overflow-anchor: none;
@@ -570,10 +567,10 @@
570
567
  position: absolute;
571
568
  margin-bottom: 2px;
572
569
  }
573
- .bk-scrollbar .bk__rail-x.bk-size-small {
570
+ .bk-scrollbar .bk__rail-x.bk-scroll-size-small {
574
571
  height: 8px;
575
572
  }
576
- .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
573
+ .bk-scrollbar .bk__rail-x.bk-scroll-size-small .bk__thumb-x {
577
574
  height: 6px;
578
575
  }
579
576
  .bk-scrollbar .bk__rail-y {
@@ -585,10 +582,10 @@
585
582
  position: absolute;
586
583
  margin-right: 2px;
587
584
  }
588
- .bk-scrollbar .bk__rail-y.bk-size-small {
585
+ .bk-scrollbar .bk__rail-y.bk-scroll-size-small {
589
586
  width: 8px;
590
587
  }
591
- .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
588
+ .bk-scrollbar .bk__rail-y.bk-scroll-size-small .bk__thumb-y {
592
589
  width: 6px;
593
590
  }
594
591
  .bk-scrollbar:hover > .bk__rail-x,
@@ -627,14 +624,14 @@
627
624
  background-color: #979ba5;
628
625
  width: 10px;
629
626
  }
630
- .bk-scrollbar .bk-size-small > .bk__thumb-x,
631
- .bk-scrollbar .bk-size-small > .bk__thumb-x,
632
- .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
627
+ .bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
628
+ .bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
629
+ .bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-x {
633
630
  height: 8px;
634
631
  }
635
- .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
636
- .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
637
- .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
632
+ .bk-scrollbar .bk-scroll-size-small:hover > .bk__thumb-y,
633
+ .bk-scrollbar .bk-scroll-size-small:focus > .bk__thumb-y,
634
+ .bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-y {
638
635
  width: 8px;
639
636
  }
640
637
  /* MS supports */
package/lib/tree/tree.css CHANGED
@@ -145,9 +145,6 @@
145
145
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
146
146
  border-radius: 4px;
147
147
  }
148
- /*
149
- * Container style
150
- */
151
148
  .bk-scrollbar {
152
149
  overflow: hidden !important;
153
150
  overflow-anchor: none;
@@ -180,10 +177,10 @@
180
177
  position: absolute;
181
178
  margin-bottom: 2px;
182
179
  }
183
- .bk-scrollbar .bk__rail-x.bk-size-small {
180
+ .bk-scrollbar .bk__rail-x.bk-scroll-size-small {
184
181
  height: 8px;
185
182
  }
186
- .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
183
+ .bk-scrollbar .bk__rail-x.bk-scroll-size-small .bk__thumb-x {
187
184
  height: 6px;
188
185
  }
189
186
  .bk-scrollbar .bk__rail-y {
@@ -195,10 +192,10 @@
195
192
  position: absolute;
196
193
  margin-right: 2px;
197
194
  }
198
- .bk-scrollbar .bk__rail-y.bk-size-small {
195
+ .bk-scrollbar .bk__rail-y.bk-scroll-size-small {
199
196
  width: 8px;
200
197
  }
201
- .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
198
+ .bk-scrollbar .bk__rail-y.bk-scroll-size-small .bk__thumb-y {
202
199
  width: 6px;
203
200
  }
204
201
  .bk-scrollbar:hover > .bk__rail-x,
@@ -237,14 +234,14 @@
237
234
  background-color: #979ba5;
238
235
  width: 10px;
239
236
  }
240
- .bk-scrollbar .bk-size-small > .bk__thumb-x,
241
- .bk-scrollbar .bk-size-small > .bk__thumb-x,
242
- .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
237
+ .bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
238
+ .bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
239
+ .bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-x {
243
240
  height: 8px;
244
241
  }
245
- .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
246
- .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
247
- .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
242
+ .bk-scrollbar .bk-scroll-size-small:hover > .bk__thumb-y,
243
+ .bk-scrollbar .bk-scroll-size-small:focus > .bk__thumb-y,
244
+ .bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-y {
248
245
  width: 8px;
249
246
  }
250
247
  /* MS supports */