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

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 (41) 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/update-geometry.d.ts +8 -0
  21. package/lib/table/table.css +93 -82
  22. package/lib/table/table.variable.css +93 -82
  23. package/lib/tree/tree.css +94 -83
  24. package/lib/tree/tree.variable.css +94 -83
  25. package/lib/virtual-render/index.d.ts +0 -23
  26. package/lib/virtual-render/index.js +54 -106
  27. package/lib/virtual-render/props.d.ts +0 -6
  28. package/lib/virtual-render/use-scrollbar.d.ts +3 -17
  29. package/lib/virtual-render/virtual-render.css +93 -82
  30. package/lib/virtual-render/virtual-render.d.ts +2 -13
  31. package/lib/virtual-render/virtual-render.less +2 -11
  32. package/lib/virtual-render/virtual-render.variable.css +93 -82
  33. package/package.json +1 -1
  34. package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts +0 -2
  35. package/lib/scrollbar/scrollbar-core/helpers.d.ts +0 -5
  36. package/lib/scrollbar/scrollbar-core/index.d.ts +0 -242
  37. package/lib/scrollbar/scrollbar-core/mouse-wheel.d.ts +0 -5
  38. package/lib/scrollbar/scrollbar-core/scrollbar-width.d.ts +0 -1
  39. package/lib/scrollbar/scrollbar.css +0 -224
  40. package/lib/scrollbar/scrollbar.less +0 -119
  41. package/lib/scrollbar/scrollbar.variable.css +0 -484
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/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/table/table.css CHANGED
@@ -145,111 +145,122 @@
145
145
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
146
146
  border-radius: 4px;
147
147
  }
148
- .bk-scrollbar-wrapper {
149
- position: relative;
150
- overflow: hidden;
148
+ /*
149
+ * Container style
150
+ */
151
+ .bk-scrollbar {
152
+ overflow: hidden !important;
153
+ overflow-anchor: none;
154
+ touch-action: auto;
155
+ /*
156
+ * Scrollbar rail styles
157
+ */
158
+ /*
159
+ * Scrollbar thumb styles
160
+ */
161
+ }
162
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
163
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
164
+ display: block;
151
165
  }
152
- .bk-scrollbar-wrapper .bk-scrollbar-content-el {
153
- display: inline-flex;
154
- flex-direction: column;
155
- width: 100%;
166
+ .bk-scrollbar .bk__rail-x:hover,
167
+ .bk-scrollbar .bk__rail-y:hover,
168
+ .bk-scrollbar .bk__rail-x:focus,
169
+ .bk-scrollbar .bk__rail-y:focus,
170
+ .bk-scrollbar .bk__rail-x.bk--clicking,
171
+ .bk-scrollbar .bk__rail-y.bk--clicking {
172
+ background-color: #f0f1f5;
156
173
  }
157
- .bk-scrollbar-wrapper .bk-scrollbar-track {
158
- z-index: 1;
174
+ .bk-scrollbar .bk__rail-x {
175
+ display: none;
176
+ opacity: 0;
177
+ transition: background-color 0.2s linear, opacity 0.2s linear;
178
+ height: 10px;
179
+ bottom: 0px;
159
180
  position: absolute;
160
- right: 0;
161
- bottom: 0;
162
- pointer-events: none;
163
- overflow: hidden;
164
- }
165
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
166
- width: 6px;
181
+ margin-bottom: 2px;
167
182
  }
168
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
169
- width: 8px;
170
- }
171
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
172
- height: 6px;
173
- }
174
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
183
+ .bk-scrollbar .bk__rail-x.bk-size-small {
175
184
  height: 8px;
176
185
  }
177
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
178
- background-color: #f0f1f5;
179
- cursor: pointer;
186
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
187
+ height: 6px;
180
188
  }
181
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
182
- background-color: #979ba5;
189
+ .bk-scrollbar .bk__rail-y {
190
+ display: none;
191
+ opacity: 0;
192
+ transition: background-color 0.2s linear, opacity 0.2s linear;
193
+ width: 10px;
194
+ right: 0px;
195
+ position: absolute;
196
+ margin-right: 2px;
183
197
  }
184
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
185
- top: 0;
198
+ .bk-scrollbar .bk__rail-y.bk-size-small {
186
199
  width: 8px;
187
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
188
200
  }
189
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
190
- width: 10px;
201
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
202
+ width: 6px;
191
203
  }
192
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
193
- left: 0;
204
+ .bk-scrollbar:hover > .bk__rail-x,
205
+ .bk-scrollbar:hover > .bk__rail-y,
206
+ .bk-scrollbar.bk--focus > .bk__rail-x,
207
+ .bk-scrollbar.bk--focus > .bk__rail-y,
208
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
209
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
210
+ opacity: 0.9;
211
+ }
212
+ .bk-scrollbar .bk__thumb-x {
213
+ background-color: #dcdee5;
214
+ border-radius: 8px;
215
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
194
216
  height: 8px;
195
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
217
+ bottom: 0px;
218
+ position: absolute;
219
+ }
220
+ .bk-scrollbar .bk__thumb-y {
221
+ background-color: #dcdee5;
222
+ border-radius: 8px;
223
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
224
+ width: 8px;
225
+ right: 0px;
226
+ position: absolute;
196
227
  }
197
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
228
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
229
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
230
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
231
+ background-color: #979ba5;
198
232
  height: 10px;
199
233
  }
200
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
201
- right: auto;
202
- left: 0;
203
- top: 0;
204
- bottom: 0;
205
- min-height: 0;
206
- min-width: 8px;
207
- width: auto;
234
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
235
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
236
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
237
+ background-color: #979ba5;
238
+ width: 10px;
208
239
  }
209
- .bk-scrollbar-wrapper .bk-scrollbar-dragging {
210
- pointer-events: none;
211
- -webkit-touch-callout: none;
212
- -webkit-user-select: none;
213
- -khtml-user-select: none;
214
- -moz-user-select: none;
215
- -ms-user-select: none;
216
- user-select: none;
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 {
243
+ height: 8px;
217
244
  }
218
- .bk-scrollbar-wrapper .bk-scrollbar {
219
- position: absolute;
220
- left: 0;
221
- right: 0;
222
- top: 0;
223
- bottom: 0;
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 {
248
+ width: 8px;
224
249
  }
225
- .bk-scrollbar-wrapper .bk-scrollbar::before {
226
- position: absolute;
227
- content: '';
228
- background: #dcdee5;
229
- border-radius: 6px;
230
- left: 0;
231
- right: 0;
232
- top: 0;
233
- bottom: 0;
234
- opacity: 0;
235
- transition: opacity 0.2s 0.9s linear;
250
+ /* MS supports */
251
+ @supports (-ms-overflow-style: none) {
252
+ .bk-scrollbar {
253
+ overflow: auto !important;
254
+ }
236
255
  }
237
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
238
- opacity: 0.9;
239
- transition-delay: 0s;
240
- transition-duration: 0s;
256
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
257
+ .bk-scrollbar {
258
+ overflow: auto !important;
259
+ }
241
260
  }
242
261
  .bk-virtual-render {
243
262
  position: relative;
244
263
  }
245
- .bk-virtual-render .bk-virtual-content {
246
- position: absolute;
247
- top: 0;
248
- bottom: 0;
249
- left: 0;
250
- width: 100%;
251
- height: 100%;
252
- }
253
264
  .bk-virtual-render .bk-virtual-section {
254
265
  width: 1px;
255
266
  background: transparent;
package/lib/table/table.variable.css CHANGED
@@ -535,111 +535,122 @@
535
535
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
536
536
  border-radius: 4px;
537
537
  }
538
- .bk-scrollbar-wrapper {
539
- position: relative;
540
- overflow: hidden;
538
+ /*
539
+ * Container style
540
+ */
541
+ .bk-scrollbar {
542
+ overflow: hidden !important;
543
+ overflow-anchor: none;
544
+ touch-action: auto;
545
+ /*
546
+ * Scrollbar rail styles
547
+ */
548
+ /*
549
+ * Scrollbar thumb styles
550
+ */
551
+ }
552
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
553
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
554
+ display: block;
541
555
  }
542
- .bk-scrollbar-wrapper .bk-scrollbar-content-el {
543
- display: inline-flex;
544
- flex-direction: column;
545
- width: 100%;
556
+ .bk-scrollbar .bk__rail-x:hover,
557
+ .bk-scrollbar .bk__rail-y:hover,
558
+ .bk-scrollbar .bk__rail-x:focus,
559
+ .bk-scrollbar .bk__rail-y:focus,
560
+ .bk-scrollbar .bk__rail-x.bk--clicking,
561
+ .bk-scrollbar .bk__rail-y.bk--clicking {
562
+ background-color: #f0f1f5;
546
563
  }
547
- .bk-scrollbar-wrapper .bk-scrollbar-track {
548
- z-index: 1;
564
+ .bk-scrollbar .bk__rail-x {
565
+ display: none;
566
+ opacity: 0;
567
+ transition: background-color 0.2s linear, opacity 0.2s linear;
568
+ height: 10px;
569
+ bottom: 0px;
549
570
  position: absolute;
550
- right: 0;
551
- bottom: 0;
552
- pointer-events: none;
553
- overflow: hidden;
554
- }
555
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
556
- width: 6px;
571
+ margin-bottom: 2px;
557
572
  }
558
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
559
- width: 8px;
560
- }
561
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
562
- height: 6px;
563
- }
564
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
573
+ .bk-scrollbar .bk__rail-x.bk-size-small {
565
574
  height: 8px;
566
575
  }
567
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
568
- background-color: #f0f1f5;
569
- cursor: pointer;
576
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
577
+ height: 6px;
570
578
  }
571
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
572
- background-color: #979ba5;
579
+ .bk-scrollbar .bk__rail-y {
580
+ display: none;
581
+ opacity: 0;
582
+ transition: background-color 0.2s linear, opacity 0.2s linear;
583
+ width: 10px;
584
+ right: 0px;
585
+ position: absolute;
586
+ margin-right: 2px;
573
587
  }
574
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
575
- top: 0;
588
+ .bk-scrollbar .bk__rail-y.bk-size-small {
576
589
  width: 8px;
577
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
578
590
  }
579
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
580
- width: 10px;
591
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
592
+ width: 6px;
581
593
  }
582
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
583
- left: 0;
594
+ .bk-scrollbar:hover > .bk__rail-x,
595
+ .bk-scrollbar:hover > .bk__rail-y,
596
+ .bk-scrollbar.bk--focus > .bk__rail-x,
597
+ .bk-scrollbar.bk--focus > .bk__rail-y,
598
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
599
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
600
+ opacity: 0.9;
601
+ }
602
+ .bk-scrollbar .bk__thumb-x {
603
+ background-color: #dcdee5;
604
+ border-radius: 8px;
605
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
584
606
  height: 8px;
585
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
607
+ bottom: 0px;
608
+ position: absolute;
609
+ }
610
+ .bk-scrollbar .bk__thumb-y {
611
+ background-color: #dcdee5;
612
+ border-radius: 8px;
613
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
614
+ width: 8px;
615
+ right: 0px;
616
+ position: absolute;
586
617
  }
587
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
618
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
619
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
620
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
621
+ background-color: #979ba5;
588
622
  height: 10px;
589
623
  }
590
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
591
- right: auto;
592
- left: 0;
593
- top: 0;
594
- bottom: 0;
595
- min-height: 0;
596
- min-width: 8px;
597
- width: auto;
624
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
625
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
626
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
627
+ background-color: #979ba5;
628
+ width: 10px;
598
629
  }
599
- .bk-scrollbar-wrapper .bk-scrollbar-dragging {
600
- pointer-events: none;
601
- -webkit-touch-callout: none;
602
- -webkit-user-select: none;
603
- -khtml-user-select: none;
604
- -moz-user-select: none;
605
- -ms-user-select: none;
606
- user-select: none;
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 {
633
+ height: 8px;
607
634
  }
608
- .bk-scrollbar-wrapper .bk-scrollbar {
609
- position: absolute;
610
- left: 0;
611
- right: 0;
612
- top: 0;
613
- bottom: 0;
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 {
638
+ width: 8px;
614
639
  }
615
- .bk-scrollbar-wrapper .bk-scrollbar::before {
616
- position: absolute;
617
- content: '';
618
- background: #dcdee5;
619
- border-radius: 6px;
620
- left: 0;
621
- right: 0;
622
- top: 0;
623
- bottom: 0;
624
- opacity: 0;
625
- transition: opacity 0.2s 0.9s linear;
640
+ /* MS supports */
641
+ @supports (-ms-overflow-style: none) {
642
+ .bk-scrollbar {
643
+ overflow: auto !important;
644
+ }
626
645
  }
627
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
628
- opacity: 0.9;
629
- transition-delay: 0s;
630
- transition-duration: 0s;
646
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
647
+ .bk-scrollbar {
648
+ overflow: auto !important;
649
+ }
631
650
  }
632
651
  .bk-virtual-render {
633
652
  position: relative;
634
653
  }
635
- .bk-virtual-render .bk-virtual-content {
636
- position: absolute;
637
- top: 0;
638
- bottom: 0;
639
- left: 0;
640
- width: 100%;
641
- height: 100%;
642
- }
643
654
  .bk-virtual-render .bk-virtual-section {
644
655
  width: 1px;
645
656
  background: transparent;
package/lib/tree/tree.css CHANGED
@@ -145,111 +145,122 @@
145
145
  .bk-F-scroll-y::-webkit-scrollbar-thumb {
146
146
  border-radius: 4px;
147
147
  }
148
- .bk-scrollbar-wrapper {
149
- position: relative;
150
- overflow: hidden;
151
- }
152
- .bk-scrollbar-wrapper .bk-scrollbar-content-el {
153
- display: inline-flex;
154
- flex-direction: column;
155
- width: 100%;
148
+ /*
149
+ * Container style
150
+ */
151
+ .bk-scrollbar {
152
+ overflow: hidden !important;
153
+ overflow-anchor: none;
154
+ touch-action: auto;
155
+ /*
156
+ * Scrollbar rail styles
157
+ */
158
+ /*
159
+ * Scrollbar thumb styles
160
+ */
161
+ }
162
+ .bk-scrollbar.bk--active-x > .bk__rail-x,
163
+ .bk-scrollbar.bk--active-y > .bk__rail-y {
164
+ display: block;
165
+ }
166
+ .bk-scrollbar .bk__rail-x:hover,
167
+ .bk-scrollbar .bk__rail-y:hover,
168
+ .bk-scrollbar .bk__rail-x:focus,
169
+ .bk-scrollbar .bk__rail-y:focus,
170
+ .bk-scrollbar .bk__rail-x.bk--clicking,
171
+ .bk-scrollbar .bk__rail-y.bk--clicking {
172
+ background-color: #f0f1f5;
156
173
  }
157
- .bk-scrollbar-wrapper .bk-scrollbar-track {
158
- z-index: 1;
174
+ .bk-scrollbar .bk__rail-x {
175
+ display: none;
176
+ opacity: 0;
177
+ transition: background-color 0.2s linear, opacity 0.2s linear;
178
+ height: 10px;
179
+ bottom: 0px;
159
180
  position: absolute;
160
- right: 0;
161
- bottom: 0;
162
- pointer-events: none;
163
- overflow: hidden;
164
- }
165
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
166
- width: 6px;
167
- }
168
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
169
- width: 8px;
181
+ margin-bottom: 2px;
170
182
  }
171
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
172
- height: 6px;
173
- }
174
- .bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
183
+ .bk-scrollbar .bk__rail-x.bk-size-small {
175
184
  height: 8px;
176
185
  }
177
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
178
- background-color: #f0f1f5;
179
- cursor: pointer;
186
+ .bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
187
+ height: 6px;
180
188
  }
181
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
182
- background-color: #979ba5;
189
+ .bk-scrollbar .bk__rail-y {
190
+ display: none;
191
+ opacity: 0;
192
+ transition: background-color 0.2s linear, opacity 0.2s linear;
193
+ width: 10px;
194
+ right: 0px;
195
+ position: absolute;
196
+ margin-right: 2px;
183
197
  }
184
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
185
- top: 0;
198
+ .bk-scrollbar .bk__rail-y.bk-size-small {
186
199
  width: 8px;
187
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
188
200
  }
189
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
190
- width: 10px;
201
+ .bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
202
+ width: 6px;
191
203
  }
192
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
193
- left: 0;
204
+ .bk-scrollbar:hover > .bk__rail-x,
205
+ .bk-scrollbar:hover > .bk__rail-y,
206
+ .bk-scrollbar.bk--focus > .bk__rail-x,
207
+ .bk-scrollbar.bk--focus > .bk__rail-y,
208
+ .bk-scrollbar.bk--scrolling-x > .bk__rail-x,
209
+ .bk-scrollbar.bk--scrolling-y > .bk__rail-y {
210
+ opacity: 0.9;
211
+ }
212
+ .bk-scrollbar .bk__thumb-x {
213
+ background-color: #dcdee5;
214
+ border-radius: 8px;
215
+ transition: background-color 0.2s linear, height 0.2s ease-in-out;
194
216
  height: 8px;
195
- transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
217
+ bottom: 0px;
218
+ position: absolute;
196
219
  }
197
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
220
+ .bk-scrollbar .bk__thumb-y {
221
+ background-color: #dcdee5;
222
+ border-radius: 8px;
223
+ transition: background-color 0.2s linear, width 0.2s ease-in-out;
224
+ width: 8px;
225
+ right: 0px;
226
+ position: absolute;
227
+ }
228
+ .bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
229
+ .bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
230
+ .bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
231
+ background-color: #979ba5;
198
232
  height: 10px;
199
233
  }
200
- .bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
201
- right: auto;
202
- left: 0;
203
- top: 0;
204
- bottom: 0;
205
- min-height: 0;
206
- min-width: 8px;
207
- width: auto;
234
+ .bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
235
+ .bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
236
+ .bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
237
+ background-color: #979ba5;
238
+ width: 10px;
208
239
  }
209
- .bk-scrollbar-wrapper .bk-scrollbar-dragging {
210
- pointer-events: none;
211
- -webkit-touch-callout: none;
212
- -webkit-user-select: none;
213
- -khtml-user-select: none;
214
- -moz-user-select: none;
215
- -ms-user-select: none;
216
- user-select: none;
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 {
243
+ height: 8px;
217
244
  }
218
- .bk-scrollbar-wrapper .bk-scrollbar {
219
- position: absolute;
220
- left: 0;
221
- right: 0;
222
- top: 0;
223
- bottom: 0;
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 {
248
+ width: 8px;
224
249
  }
225
- .bk-scrollbar-wrapper .bk-scrollbar::before {
226
- position: absolute;
227
- content: '';
228
- background: #dcdee5;
229
- border-radius: 6px;
230
- left: 0;
231
- right: 0;
232
- top: 0;
233
- bottom: 0;
234
- opacity: 0;
235
- transition: opacity 0.2s 0.9s linear;
250
+ /* MS supports */
251
+ @supports (-ms-overflow-style: none) {
252
+ .bk-scrollbar {
253
+ overflow: auto !important;
254
+ }
236
255
  }
237
- .bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
238
- opacity: 0.9;
239
- transition-delay: 0s;
240
- transition-duration: 0s;
256
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
257
+ .bk-scrollbar {
258
+ overflow: auto !important;
259
+ }
241
260
  }
242
261
  .bk-virtual-render {
243
262
  position: relative;
244
263
  }
245
- .bk-virtual-render .bk-virtual-content {
246
- position: absolute;
247
- top: 0;
248
- bottom: 0;
249
- left: 0;
250
- width: 100%;
251
- height: 100%;
252
- }
253
264
  .bk-virtual-render .bk-virtual-section {
254
265
  width: 1px;
255
266
  background: transparent;