bkui-vue 2.0.1-beta.34 → 2.0.1-beta.34.scrollbar.2

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 (42) hide show
  1. package/dist/index.cjs.js +57 -57
  2. package/dist/index.esm.js +14138 -14147
  3. package/dist/index.umd.js +58 -58
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/index.js +1 -1
  7. package/lib/scrollbar/handlers/click-rail.d.ts +2 -0
  8. package/lib/scrollbar/handlers/drag-thumb.d.ts +1 -0
  9. package/lib/scrollbar/handlers/keyboard.d.ts +2 -0
  10. package/lib/scrollbar/handlers/mouse-wheel.d.ts +2 -0
  11. package/lib/scrollbar/handlers/touch.d.ts +4 -0
  12. package/lib/scrollbar/helper/class-names.d.ts +21 -0
  13. package/lib/scrollbar/helper/css.d.ts +3 -0
  14. package/lib/scrollbar/helper/dom.d.ts +4 -0
  15. package/lib/scrollbar/helper/event-manager.d.ts +20 -0
  16. package/lib/scrollbar/helper/util.d.ts +11 -0
  17. package/lib/scrollbar/index.d.ts +129 -12
  18. package/lib/scrollbar/index.js +1336 -18488
  19. package/lib/scrollbar/process-scroll-diff.d.ts +1 -0
  20. package/lib/scrollbar/scrollbar.css +91 -75
  21. package/lib/scrollbar/scrollbar.less +111 -91
  22. package/lib/scrollbar/scrollbar.variable.css +90 -74
  23. package/lib/scrollbar/update-geometry.d.ts +8 -0
  24. package/lib/styles/index.d.ts +1 -0
  25. package/lib/table/table.css +90 -82
  26. package/lib/table/table.variable.css +90 -82
  27. package/lib/tree/tree.css +91 -83
  28. package/lib/tree/tree.variable.css +91 -83
  29. package/lib/virtual-render/index.d.ts +0 -23
  30. package/lib/virtual-render/index.js +54 -106
  31. package/lib/virtual-render/props.d.ts +0 -6
  32. package/lib/virtual-render/use-scrollbar.d.ts +3 -17
  33. package/lib/virtual-render/virtual-render.css +90 -82
  34. package/lib/virtual-render/virtual-render.d.ts +2 -13
  35. package/lib/virtual-render/virtual-render.less +1 -10
  36. package/lib/virtual-render/virtual-render.variable.css +90 -82
  37. package/package.json +1 -1
  38. package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts +0 -2
  39. package/lib/scrollbar/scrollbar-core/helpers.d.ts +0 -5
  40. package/lib/scrollbar/scrollbar-core/index.d.ts +0 -242
  41. package/lib/scrollbar/scrollbar-core/mouse-wheel.d.ts +0 -5
  42. package/lib/scrollbar/scrollbar-core/scrollbar-width.d.ts +0 -1
package/lib/scrollbar/process-scroll-diff.d.ts ADDED
@@ -0,0 +1 @@
1
+ export default function (i: any, axis: any, diff: any, useScrollingClass?: boolean, forceFireReachEvent?: boolean): void;
package/lib/scrollbar/scrollbar.css CHANGED
@@ -128,97 +128,113 @@
128
128
  --select-active-color: #e1ecff;
129
129
  --select-hover-color: #f5f7fa;
130
130
  }
131
- .bk-scrollbar-wrapper {
132
- position: relative;
133
- overflow: hidden;
134
- }
135
- .bk-scrollbar-wrapper .bk-scrollbar-content-el {
136
- display: inline-flex;
137
- flex-direction: column;
138
- width: 100%;
131
+ .bk-scrollbar {
132
+ overflow: hidden !important;
133
+ overflow-anchor: none;
134
+ touch-action: auto;
135
+ /*
136
+ * Scrollbar rail styles
137
+ */
138
+ /*
139
+ * Scrollbar thumb styles
140
+ */
141
+ }
142
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
143
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
144
+ display: block;
145
+ }
146
+ .bk-scrollbar .bk__rail-x:hover,
147
+ .bk-scrollbar .bk__rail-y:hover,
148
+ .bk-scrollbar .bk__rail-x:focus,
149
+ .bk-scrollbar .bk__rail-y:focus,
150
+ .bk-scrollbar .bk__rail-x.bk--clicking,
151
+ .bk-scrollbar .bk__rail-y.bk--clicking {
152
+ background-color: #f0f1f5;
139
153
  }
140
- .bk-scrollbar-wrapper .bk-scrollbar-track {
141
- z-index: 1;
154
+ .bk-scrollbar .bk__rail-x {
155
+ display: none;
156
+ opacity: 0;
157
+ transition: background-color 0.2s linear, opacity 0.2s linear;
158
+ height: 10px;
159
+ bottom: 0px;
142
160
  position: absolute;
143
- right: 0;
144
- bottom: 0;
145
- pointer-events: none;
146
- overflow: hidden;
161
+ margin-bottom: 2px;
147
162
  }
148
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
149
- width: 6px;
163
+ .bk-scrollbar .bk__rail-x.bk-size-small {
164
+ height: 8px;
165
+ }
166
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
167
+ height: 6px;
150
168
  }
151
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
169
+ .bk-scrollbar .bk__rail-y {
170
+ display: none;
171
+ opacity: 0;
172
+ transition: background-color 0.2s linear, opacity 0.2s linear;
173
+ width: 10px;
174
+ right: 0px;
175
+ position: absolute;
176
+ margin-right: 2px;
177
+ }
178
+ .bk-scrollbar .bk__rail-y.bk-size-small {
152
179
  width: 8px;
153
180
  }
154
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
155
- height: 6px;
181
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
182
+ width: 6px;
183
+ }
184
+ .bk-scrollbar:hover > .bk__rail-x,
185
+ .bk-scrollbar:hover > .bk__rail-y,
186
+ .bk-scrollbar.bk--focus > .bk__rail-x,
187
+ .bk-scrollbar.bk--focus > .bk__rail-y,
188
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
189
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
190
+ opacity: 0.9;
156
191
  }
157
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
192
+ .bk-scrollbar .bk__thumb-x {
193
+ background-color: #dcdee5;
194
+ border-radius: 8px;
195
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
158
196
  height: 8px;
197
+ bottom: 0px;
198
+ position: absolute;
159
199
  }
160
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
161
- background-color: #f0f1f5;
162
- cursor: pointer;
200
+ .bk-scrollbar .bk__thumb-y {
201
+ background-color: #dcdee5;
202
+ border-radius: 8px;
203
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
204
+ width: 8px;
205
+ right: 0px;
206
+ position: absolute;
163
207
  }
164
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
208
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
209
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
210
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
165
211
  background-color: #979ba5;
212
+ height: 10px;
166
213
  }
167
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
168
- top: 0;
169
- width: 8px;
170
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
171
- }
172
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
214
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
215
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
216
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
217
+ background-color: #979ba5;
173
218
  width: 10px;
174
219
  }
175
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
176
- left: 0;
220
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
221
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
222
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
177
223
  height: 8px;
178
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
179
224
  }
180
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
181
- height: 10px;
225
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
226
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
227
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
228
+ width: 8px;
182
229
  }
183
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
184
- right: auto;
185
- left: 0;
186
- top: 0;
187
- bottom: 0;
188
- min-height: 0;
189
- min-width: 8px;
190
- width: auto;
191
- }
192
- .bk-scrollbar-wrapper .bk-scrollbar-dragging {
193
- pointer-events: none;
194
- -webkit-touch-callout: none;
195
- -webkit-user-select: none;
196
- -khtml-user-select: none;
197
- -moz-user-select: none;
198
- -ms-user-select: none;
199
- user-select: none;
200
- }
201
- .bk-scrollbar-wrapper .bk-scrollbar {
202
- position: absolute;
203
- left: 0;
204
- right: 0;
205
- top: 0;
206
- bottom: 0;
230
+ /* MS supports */
231
+ @supports (-ms-overflow-style: none) {
232
+ .bk-scrollbar {
233
+ overflow: auto !important;
234
+ }
207
235
  }
208
- .bk-scrollbar-wrapper .bk-scrollbar::before {
209
- position: absolute;
210
- content: '';
211
- background: #dcdee5;
212
- border-radius: 6px;
213
- left: 0;
214
- right: 0;
215
- top: 0;
216
- bottom: 0;
217
- opacity: 0;
218
- transition: opacity 0.2s 0.9s linear;
219
- }
220
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
221
- opacity: 0.9;
222
- transition-delay: 0s;
223
- transition-duration: 0s;
236
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
237
+ .bk-scrollbar {
238
+ overflow: auto !important;
239
+ }
224
240
  }
package/lib/scrollbar/scrollbar.less CHANGED
@@ -1,119 +1,139 @@
1
1
  @import '../styles/themes/themes.less';
2
2
 
3
- .@{bk-prefix}-scrollbar-wrapper {
4
- position: relative;
5
- overflow: hidden;
6
-
7
- .@{bk-prefix}-scrollbar-content-el {
8
- display: inline-flex;
9
- flex-direction: column;
10
- width: 100%;
3
+ .@{bk-prefix}-scrollbar {
4
+ overflow: hidden !important;
5
+ overflow-anchor: none;
6
+ touch-action: auto;
7
+
8
+ &.@{bk-prefix}--active-x > .@{bk-prefix}__rail-x,
9
+ &.@{bk-prefix}--active-y > .@{bk-prefix}__rail-y {
10
+ display: block;
11
11
  }
12
12
 
13
- .@{bk-prefix}-scrollbar-track {
14
- z-index: 1;
15
- position: absolute;
16
- right: 0;
17
- bottom: 0;
18
- pointer-events: none;
19
- overflow: hidden;
13
+ .@{bk-prefix}__rail-x:hover,
14
+ .@{bk-prefix}__rail-y:hover,
15
+ .@{bk-prefix}__rail-x:focus,
16
+ .@{bk-prefix}__rail-y:focus,
17
+ .@{bk-prefix}__rail-x.@{bk-prefix}--clicking,
18
+ .@{bk-prefix}__rail-y.@{bk-prefix}--clicking {
19
+ background-color: #f0f1f5;
20
+ }
20
21
 
21
- &.track-small {
22
- &.@{bk-prefix}-scrollbar-vertical {
23
- width: 6px;
22
+ /*
23
+ * Scrollbar rail styles
24
+ */
25
+ .@{bk-prefix}__rail-x {
26
+ display: none;
27
+ opacity: 0;
28
+ transition:
29
+ background-color 0.2s linear,
30
+ opacity 0.2s linear;
31
+ height: 10px;
32
+ bottom: 0px;
33
+ position: absolute;
34
+ margin-bottom: 2px;
24
35
 
25
- &.@{bk-prefix}-scrollbar-hover {
26
- width: 8px;
27
- }
28
- }
36
+ &.@{bk-prefix}-size-small {
37
+ height: 8px;
29
38
 
30
- &.@{bk-prefix}-scrollbar-horizontal {
39
+ .@{bk-prefix}__thumb-x {
31
40
  height: 6px;
32
-
33
- &.@{bk-prefix}-scrollbar-hover {
34
- height: 8px;
35
- }
36
41
  }
37
42
  }
43
+ }
38
44
 
39
- &.@{bk-prefix}-scrollbar-hover {
40
- background-color: #f0f1f5;
41
- cursor: pointer;
42
-
43
- .@{bk-prefix}-scrollbar {
44
- &::before {
45
- background-color: #979ba5;
46
- }
47
- }
48
- }
45
+ .@{bk-prefix}__rail-y {
46
+ display: none;
47
+ opacity: 0;
48
+ transition:
49
+ background-color 0.2s linear,
50
+ opacity 0.2s linear;
51
+ width: 10px;
52
+ right: 0px;
53
+ position: absolute;
54
+ margin-right: 2px;
49
55
 
50
- &.@{bk-prefix}-scrollbar-vertical {
51
- top: 0;
56
+ &.@{bk-prefix}-size-small {
52
57
  width: 8px;
53
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
54
58
 
55
- &.@{bk-prefix}-scrollbar-hover {
56
- width: 10px;
59
+ .@{bk-prefix}__thumb-y {
60
+ width: 6px;
57
61
  }
58
62
  }
63
+ }
59
64
 
60
- &.@{bk-prefix}-scrollbar-horizontal {
61
- left: 0;
62
- height: 8px;
63
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
65
+ &:hover > .@{bk-prefix}__rail-x,
66
+ &:hover > .@{bk-prefix}__rail-y,
67
+ &.@{bk-prefix}--focus > .@{bk-prefix}__rail-x,
68
+ &.@{bk-prefix}--focus > .@{bk-prefix}__rail-y,
69
+ &.@{bk-prefix}--scrolling-x > .@{bk-prefix}__rail-x,
70
+ &.@{bk-prefix}--scrolling-y > .@{bk-prefix}__rail-y {
71
+ opacity: 0.9;
72
+ }
64
73
 
65
- &.@{bk-prefix}-scrollbar-hover {
66
- height: 10px;
67
- }
74
+ /*
75
+ * Scrollbar thumb styles
76
+ */
77
+ .@{bk-prefix}__thumb-x {
78
+ background-color: #dcdee5;
79
+ border-radius: 8px;
80
+ transition:
81
+ background-color 0.2s linear,
82
+ height 0.2s ease-in-out;
83
+ height: 8px;
84
+ bottom: 0px;
85
+ position: absolute;
86
+ }
68
87
 
69
- &.@{bk-prefix}-scrollbar {
70
- right: auto;
71
- left: 0;
72
- top: 0;
73
- bottom: 0;
74
- min-height: 0;
75
- min-width: 8px;
76
- width: auto;
77
- }
78
- }
88
+ .@{bk-prefix}__thumb-y {
89
+ background-color: #dcdee5;
90
+ border-radius: 8px;
91
+ transition:
92
+ background-color 0.2s linear,
93
+ width 0.2s ease-in-out;
94
+ width: 8px;
95
+ right: 0px;
96
+ position: absolute;
79
97
  }
80
98
 
81
- .@{bk-prefix}-scrollbar-dragging {
82
- pointer-events: none;
83
- -webkit-touch-callout: none;
84
- -webkit-user-select: none;
85
- -khtml-user-select: none;
86
- -moz-user-select: none;
87
- -ms-user-select: none;
88
- user-select: none;
99
+ .@{bk-prefix}__rail-x:hover > .@{bk-prefix}__thumb-x,
100
+ .@{bk-prefix}__rail-x:focus > .@{bk-prefix}__thumb-x,
101
+ .@{bk-prefix}__rail-x.@{bk-prefix}--clicking .@{bk-prefix}__thumb-x {
102
+ background-color: #979ba5;
103
+ height: 10px;
89
104
  }
90
105
 
91
- .@{bk-prefix}-scrollbar {
92
- position: absolute;
93
- left: 0;
94
- right: 0;
95
- top: 0;
96
- bottom: 0;
97
-
98
- &::before {
99
- position: absolute;
100
- content: '';
101
- background: #dcdee5;
102
- border-radius: 6px;
103
- left: 0;
104
- right: 0;
105
- top: 0;
106
- bottom: 0;
107
- opacity: 0;
108
- transition: opacity 0.2s 0.9s linear;
106
+ .@{bk-prefix}__rail-y:hover > .@{bk-prefix}__thumb-y,
107
+ .@{bk-prefix}__rail-y:focus > .@{bk-prefix}__thumb-y,
108
+ .@{bk-prefix}__rail-y.@{bk-prefix}--clicking .@{bk-prefix}__thumb-y {
109
+ background-color: #979ba5;
110
+ width: 10px;
111
+ }
112
+
113
+ .@{bk-prefix}-size-small {
114
+ > .@{bk-prefix}__thumb-x,
115
+ > .@{bk-prefix}__thumb-x,
116
+ &.@{bk-prefix}--clicking .@{bk-prefix}__thumb-x {
117
+ height: 8px;
109
118
  }
110
119
 
111
- &.@{bk-prefix}-scrollbar-visible {
112
- &::before {
113
- opacity: 0.9;
114
- transition-delay: 0s;
115
- transition-duration: 0s;
116
- }
120
+ &:hover > .@{bk-prefix}__thumb-y,
121
+ &:focus > .@{bk-prefix}__thumb-y,
122
+ &.@{bk-prefix}--clicking .@{bk-prefix}__thumb-y {
123
+ width: 8px;
117
124
  }
118
125
  }
119
126
  }
127
+
128
+ /* MS supports */
129
+ @supports (-ms-overflow-style: none) {
130
+ .@{bk-prefix}-scrollbar {
131
+ overflow: auto !important;
132
+ }
133
+ }
134
+
135
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
136
+ .@{bk-prefix}-scrollbar {
137
+ overflow: auto !important;
138
+ }
139
+ }
package/lib/scrollbar/scrollbar.variable.css CHANGED
@@ -388,97 +388,113 @@
388
388
  --select-active-color: #e1ecff;
389
389
  --select-hover-color: #f5f7fa;
390
390
  }
391
- .bk-scrollbar-wrapper {
392
- position: relative;
393
- overflow: hidden;
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
+ */
394
401
  }
395
- .bk-scrollbar-wrapper .bk-scrollbar-content-el {
396
- display: inline-flex;
397
- flex-direction: column;
398
- width: 100%;
402
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
403
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
404
+ display: block;
399
405
  }
400
- .bk-scrollbar-wrapper .bk-scrollbar-track {
401
- z-index: 1;
402
- position: absolute;
403
- right: 0;
404
- bottom: 0;
405
- pointer-events: none;
406
- overflow: hidden;
407
- }
408
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
409
- width: 6px;
410
- }
411
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
412
- width: 8px;
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
413
  }
414
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
415
- height: 6px;
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;
416
422
  }
417
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
423
+ .bk-scrollbar .bk__rail-x.bk-size-small {
418
424
  height: 8px;
419
425
  }
420
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
421
- background-color: #f0f1f5;
422
- cursor: pointer;
426
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
427
+ height: 6px;
423
428
  }
424
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
425
- background-color: #979ba5;
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;
426
437
  }
427
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
428
- top: 0;
438
+ .bk-scrollbar .bk__rail-y.bk-size-small {
429
439
  width: 8px;
430
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
431
440
  }
432
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
433
- width: 10px;
441
+ .bk-scrollbar .bk__rail-y.bk-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;
434
451
  }
435
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
436
- left: 0;
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;
437
456
  height: 8px;
438
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
457
+ bottom: 0px;
458
+ position: absolute;
439
459
  }
440
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
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;
441
472
  height: 10px;
442
473
  }
443
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
444
- right: auto;
445
- left: 0;
446
- top: 0;
447
- bottom: 0;
448
- min-height: 0;
449
- min-width: 8px;
450
- width: auto;
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;
451
479
  }
452
- .bk-scrollbar-wrapper .bk-scrollbar-dragging {
453
- pointer-events: none;
454
- -webkit-touch-callout: none;
455
- -webkit-user-select: none;
456
- -khtml-user-select: none;
457
- -moz-user-select: none;
458
- -ms-user-select: none;
459
- user-select: none;
480
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
481
+ .bk-scrollbar .bk-size-small > .bk__thumb-x,
482
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
483
+ height: 8px;
460
484
  }
461
- .bk-scrollbar-wrapper .bk-scrollbar {
462
- position: absolute;
463
- left: 0;
464
- right: 0;
465
- top: 0;
466
- bottom: 0;
485
+ .bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
486
+ .bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
487
+ .bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
488
+ width: 8px;
467
489
  }
468
- .bk-scrollbar-wrapper .bk-scrollbar::before {
469
- position: absolute;
470
- content: '';
471
- background: #dcdee5;
472
- border-radius: 6px;
473
- left: 0;
474
- right: 0;
475
- top: 0;
476
- bottom: 0;
477
- opacity: 0;
478
- transition: opacity 0.2s 0.9s linear;
490
+ /* MS supports */
491
+ @supports (-ms-overflow-style: none) {
492
+ .bk-scrollbar {
493
+ overflow: auto !important;
494
+ }
479
495
  }
480
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
481
- opacity: 0.9;
482
- transition-delay: 0s;
483
- transition-duration: 0s;
496
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
497
+ .bk-scrollbar {
498
+ overflow: auto !important;
499
+ }
484
500
  }
package/lib/scrollbar/update-geometry.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import BkScrollbar from '.';
2
+ export type Placement = {
3
+ left?: number;
4
+ right?: number;
5
+ top?: number;
6
+ bottom?: number;
7
+ };
8
+ export default function (i: BkScrollbar): void;
package/lib/styles/index.d.ts CHANGED
@@ -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';