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