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

package/lib/virtual-render/virtual-render.variable.css

@@ -535,111 +535,122 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-scrollbar-wrapper {
-  position: relative;
-  overflow: hidden;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-content-el {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
+/*
+ * Container style
+ */
+.bk-scrollbar {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  touch-action: auto;
+  /*
+ * Scrollbar rail styles
+ */
+  /*
+ * Scrollbar thumb styles
+ */
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track {
-  z-index: 1;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
-  width: 6px;
+.bk-scrollbar.bk--active-x > .bk__rail-x,
+.bk-scrollbar.bk--active-y > .bk__rail-y {
+  display: block;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 8px;
+.bk-scrollbar .bk__rail-x:hover,
+.bk-scrollbar .bk__rail-y:hover,
+.bk-scrollbar .bk__rail-x:focus,
+.bk-scrollbar .bk__rail-y:focus,
+.bk-scrollbar .bk__rail-x.bk--clicking,
+.bk-scrollbar .bk__rail-y.bk--clicking {
+  background-color: #f0f1f5;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
-  height: 6px;
+.bk-scrollbar .bk__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 10px;
+  bottom: 0px;
+  position: absolute;
+  margin-bottom: 2px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__rail-x.bk-size-small {
   height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
-  background-color: #f0f1f5;
-  cursor: pointer;
+.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
+  height: 6px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
-  background-color: #979ba5;
+.bk-scrollbar .bk__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  width: 10px;
+  right: 0px;
+  position: absolute;
+  margin-right: 2px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
-  top: 0;
+.bk-scrollbar .bk__rail-y.bk-size-small {
   width: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 10px;
+.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
+  width: 6px;
+}
+.bk-scrollbar:hover > .bk__rail-x,
+.bk-scrollbar:hover > .bk__rail-y,
+.bk-scrollbar.bk--focus > .bk__rail-x,
+.bk-scrollbar.bk--focus > .bk__rail-y,
+.bk-scrollbar.bk--scrolling-x > .bk__rail-x,
+.bk-scrollbar.bk--scrolling-y > .bk__rail-y {
+  opacity: 0.9;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
-  left: 0;
+.bk-scrollbar .bk__thumb-x {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
   height: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+  bottom: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__thumb-y {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  width: 8px;
+  right: 0px;
+  position: absolute;
+}
+.bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
+  background-color: #979ba5;
   height: 10px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
-  right: auto;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  min-height: 0;
-  min-width: 8px;
-  width: auto;
+.bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
+  background-color: #979ba5;
+  width: 10px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-dragging {
-  pointer-events: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
+  height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+.bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
+.bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
+  width: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar::before {
-  position: absolute;
-  content: '';
-  background: #dcdee5;
-  border-radius: 6px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  opacity: 0;
-  transition: opacity 0.2s 0.9s linear;
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
-.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
-  opacity: 0.9;
-  transition-delay: 0s;
-  transition-duration: 0s;
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
 .bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "2.0.1-beta.33",
+  "version": "2.0.1-beta.34.scrollbar.1",
   "workspaces": [
     "packages/**",
     "scripts/cli",

package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => boolean;
-export default _default;

package/lib/scrollbar/scrollbar-core/helpers.d.ts

@@ -1,5 +0,0 @@
-export declare function getElementWindow(element: Element): Window & typeof globalThis;
-export declare function getElementDocument(element: Element): Document;
-export declare function addClasses(el: HTMLElement | null, classes: string): void;
-export declare function removeClasses(el: HTMLElement | null, classes: string): void;
-export declare function classNamesToQuery(classNames: string): string;

package/lib/scrollbar/scrollbar-core/index.d.ts

@@ -1,242 +0,0 @@
-import * as helpers from './helpers';
-interface DebouncedFunc<T extends (...args: any[]) => void> {
-    /**
-     * Call the original function, but applying the debounce rules.
-     *
-     * If the debounced function can be run immediately, this calls it and returns its return
-     * value.
-     *
-     * Otherwise, it returns the return value of the last invocation, or undefined if the debounced
-     * function was not invoked yet.
-     */
-    (...args: Parameters<T>): ReturnType<T> | undefined;
-    /**
-     * Throw away any pending invocation of the debounced function.
-     */
-    cancel(): void;
-    /**
-     * If there is a pending invocation of the debounced function, invoke it immediately and return
-     * its return value.
-     *
-     * Otherwise, return the value from the last invocation, or undefined if the debounced function
-     * was never invoked.
-     */
-    flush(): ReturnType<T> | undefined;
-}
-export interface Options {
-    forceVisible: Axis | boolean;
-    clickOnTrack: boolean;
-    scrollbarMinSize: number;
-    scrollbarMaxSize: number;
-    classNames: Partial<ClassNames>;
-    ariaLabel: string;
-    contentNode: HTMLElement | null;
-    delegateYContent: HTMLElement | null;
-    delegateXContent: HTMLElement | null;
-    wrapperNode: HTMLElement | null;
-    autoHide: boolean;
-    useSystemScrollXBehavior?: boolean;
-    useSystemScrollYBehavior?: boolean;
-    size: 'default' | 'small';
-    scrollDelegate: {
-        scrollHeight?: number;
-        scrollWidth?: number;
-    };
-    onScrollCallback?: (args: {
-        x: number;
-        y: number;
-    }) => void;
-}
-export type BkScrollBarOptions = Partial<Options>;
-type ClassNames = {
-    contentEl: string;
-    offset: string;
-    mask: string;
-    wrapper: string;
-    placeholder: string;
-    scrollbar: string;
-    track: string;
-    visible: string;
-    horizontal: string;
-    vertical: string;
-    hover: string;
-    dragging: string;
-    scrolling: string;
-    scrollable: string;
-    mouseEntered: string;
-};
-type Axis = 'x' | 'y';
-type AxisProps = {
-    scrollOffsetAttr: 'scrollLeft' | 'scrollTop';
-    sizeAttr: 'height' | 'width';
-    scrollSizeAttr: 'scrollHeight' | 'scrollWidth';
-    offsetSizeAttr: 'offsetHeight' | 'offsetWidth';
-    offsetAttr: 'left' | 'top';
-    overflowAttr: 'overflowX' | 'overflowY';
-    dragOffset: number;
-    isOverflowing: boolean;
-    forceVisible: boolean;
-    track: {
-        size: number;
-        el: HTMLElement | null;
-        rect: DOMRect | null;
-        isVisible: boolean;
-    };
-    scrollbar: {
-        size: number;
-        el: HTMLElement | null;
-        rect: DOMRect | null;
-        isVisible: boolean;
-    };
-};
-type RtlHelpers = {
-    isScrollOriginAtZero: boolean;
-    isScrollingToNegative: boolean;
-} | null;
-type DefaultOptions = Options & typeof BkScrollbarCore.defaultOptions;
-type MouseWheelInstance = {
-    addWheelEvent: (target: HTMLElement) => void;
-    removeWheelEvent: (target: HTMLElement) => void;
-};
-export default class BkScrollbarCore {
-    static rtlHelpers: RtlHelpers;
-    static defaultOptions: Options;
-    /**
-     * Static functions
-     */
-    static helpers: typeof helpers;
-    /**
-     * Helper to fix browsers inconsistency on RTL:
-     *  - Firefox inverts the scrollbar initial position
-     *  - IE11 inverts both scrollbar position and scrolling offset
-     */
-    static getRtlHelpers(): {
-        isScrollOriginAtZero: boolean;
-        isScrollingToNegative: boolean;
-    };
-    static getOffset(el: Element): {
-        top: number;
-        left: number;
-    };
-    el: HTMLElement;
-    options: DefaultOptions;
-    classNames: ClassNames;
-    axis: {
-        x: AxisProps;
-        y: AxisProps;
-    };
-    draggedAxis?: Axis;
-    removePreventClickId: null | number;
-    minScrollbarWidth: number;
-    stopScrollDelay: number;
-    isScrolling: boolean;
-    isMouseEntering: boolean;
-    isDragging: boolean;
-    scrollXTicking: boolean;
-    scrollYTicking: boolean;
-    wrapperEl: HTMLElement | null;
-    contentEl: HTMLElement | null;
-    delegateXContent: HTMLElement | null;
-    delegateYContent: HTMLElement | null;
-    rtlHelpers: RtlHelpers;
-    scrollbarWidth: number;
-    resizeObserver: ResizeObserver | null;
-    mutationObserver: MutationObserver | null;
-    elStyles: CSSStyleDeclaration | null;
-    isRtl: boolean | null;
-    mouseX: number;
-    mouseY: number;
-    mouseWheelInstance: MouseWheelInstance;
-    wheelOffsetY: number;
-    wheelOffsetX: number;
-    mouseWeelTimer: any;
-    /**
-     * 最外层滚动容器滚动实际位置缓存器
-     */
-    wrapperScrollValue: {
-        scrollTop: number;
-        scrollLeft: number;
-    };
-    /**
-     * 模拟滚动条内部缩略滚动器滚动位置缓存器
-     */
-    wrapperScrollMap: {};
-    onMouseMove: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    onWindowResize: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    onStopScrolling: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    onMouseEntered: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    onMouseWheel: (() => void) | DebouncedFunc<(...args: any[]) => void>;
-    constructor(element: HTMLElement, options?: Partial<Options>);
-    getScrollbarWidth(): number;
-    init(): void;
-    initDOM(): void;
-    initListeners(): void;
-    getWrapperElScrollSize(attrName: string, target?: HTMLElement): any;
-    recalculate(): void;
-    /**
-     * Calculate scrollbar size
-     */
-    getScrollbarSize(axis?: Axis): any;
-    positionScrollbar(axis?: Axis): void;
-    toggleTrackVisibility(axis?: Axis): void;
-    showScrollbar(axis?: Axis): void;
-    hideScrollbar(axis?: Axis): void;
-    /**
-     * On scroll event handling
-     */
-    onScroll: () => void;
-    scrollX: () => void;
-    scrollY: () => void;
-    onMouseEnter: () => void;
-    onMouseMoveForAxis(axis?: Axis): void;
-    onMouseLeave: () => void;
-    onMouseLeaveForAxis(axis?: Axis): void;
-    onPointerEvent: (e: PointerEvent) => void;
-    /**
-     * on scrollbar handle drag movement starts
-     */
-    onDragStart(e: MouseEvent, axis?: Axis): void;
-    /**
-     * Drag scrollbar handle
-     */
-    drag: (e: MouseEvent) => void;
-    getPointerPosition: (dragPos: number, axis: Axis) => number;
-    scrollToAxisPosition: (scrollPos: number, axisValue: Axis) => boolean;
-    fixedScrollTo: (axisValue: Axis, resolvedValue: number) => void;
-    /**
-     * End scroll handle drag
-     */
-    onEndDrag: (e: MouseEvent) => void;
-    /**
-     * Handler to ignore click events during drag
-     */
-    preventClick: (e: MouseEvent) => void;
-    onTrackClick(e: MouseEvent, axis?: Axis): void;
-    /**
-     * Getter for content element
-     */
-    getContentElement(): HTMLElement;
-    /**
-     * Getter for original scrolling element
-     */
-    getScrollElement(): HTMLElement;
-    removeListeners(): void;
-    /**
-     * Remove all listeners from DOM nodes
-     */
-    unMount(): void;
-    /**
-     * Check if mouse is within bounds
-     */
-    isWithinBounds(bbox: DOMRect): boolean;
-    /**
-     * Find element children matches query
-     */
-    findChild(el: HTMLElement, query: string): any;
-    private mOnMouseWheel;
-    private mOnStopScrolling;
-    private mOnMouseEntered;
-    private mOnMouseMove;
-    private mOnWindowResize;
-}
-export {};

package/lib/scrollbar/scrollbar-core/mouse-wheel.d.ts

@@ -1,5 +0,0 @@
-declare const _default: (fn: any) => {
-    addWheelEvent: (target: HTMLElement) => void;
-    removeWheelEvent: (target: HTMLElement) => void;
-};
-export default _default;

package/lib/scrollbar/scrollbar-core/scrollbar-width.d.ts

@@ -1 +0,0 @@
-export default function scrollbarWidth(): number;

package/lib/scrollbar/scrollbar.css

@@ -1,224 +0,0 @@
-:root {
-  --bk-prefix: bk;
-  --popover-max-height: 216px;
-  --primary-color: #3a84ff;
-  --success-color: #2dcb56;
-  --warning-color: #ff9c01;
-  --danger-color: #ea3636;
-  --default-color: #63656e;
-  --gray-color: #979ba5;
-  --light-gray: #c4c6cc;
-  --white-color: white;
-  --whitesmoke-color: #fafbfd;
-  --disable-color: #dcdee5;
-  --disable-bg-color: #f9fafd;
-  --border-color: #dcdee5;
-  --font-size-base: 12px;
-  --font-size-medium: 14px;
-  --font-size-large: 16px;
-  --line-height-base: 16px;
-  --line-height-medium: 16px;
-  --line-height-large: 18px;
-  --component-size-small: 26px;
-  --component-size-base: 32px;
-  --component-size-large: 40px;
-  --component-size-small-padding: 0 12px;
-  --component-size-base-padding: 0 14px;
-  --component-size-large-padding: 0 16px;
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-radius-base: 2px;
-  --border-style-color: var(--light-gray);
-  --input-disabled-bg: #fafbfd;
-  --input-disabled-border: var(--disable-color);
-  --input-height-base: var(--component-size-base);
-  --input-color: var(--default-color);
-  --input-bg: white;
-  --input-border-color: var(--light-gray);
-  --input-broder-radius: 3px;
-  --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 8px;
-  --input-block-color: #f5f7fa;
-  --input-block-hover-color: #eaebf0;
-  --input-icon-size: var(--font-size-medium);
-  --input-maxlength-color: #979ba5;
-  --button-primary-hover-color: #5594fa;
-  --button-danger-hover-color: #ff5656;
-  --button-success-hover-color: #45e35f;
-  --button-warning-hover-color: #ffb848;
-  --button-default-hover-border-color: #979ba5;
-  --button-primary-active-color: #2c77f4;
-  --button-danger-active-color: #db2626;
-  --button-success-active-color: #1ab943;
-  --button-warning-active-color: #eb9000;
-  --button-selected-bg-color: #e1ecff;
-  --button-disabled-selected-bg-color: #f0f1f5;
-  --radio-font-color: #63656e;
-  --radio-active-color: #3a84ff;
-  --radio-hover-border-color: #979ba5;
-  --radio-disabled-border: #dcdee5;
-  --radio-disabled-font-color: #c4c6cc;
-  --radio-disabled-checked-bg: #a3c5fd;
-  --radio-button-checked-bg: #e1ecff;
-  --radio-button-disabled-checked-bg: #fafbfd;
-  --checkbox-disabled-checked-bg: #a3c5fd;
-  --fixed-navbar-background: #fff;
-  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
-  --switch-default-color: #fff;
-  --switch-grey-color: #c4c6cc;
-  --breadcrumb-black-color: #979ba5;
-  --breadcrumb-primary-hover-color: #0082ff;
-  --breadcrumb-fn-main-color: #63656e;
-  --link-default-hover-color: #979ba5;
-  --link-primary-hover-color: #699df4;
-  --link-success-hover-color: #45e35f;
-  --link-warning-hover-color: #ffb848;
-  --link-danger-hover-color: #ff5656;
-  --link-default-disabled-color: #dcdee5;
-  --link-primary-disabled-color: #a3c5fd;
-  --link-success-disabled-color: #94f5a4;
-  --link-warning-disabled-color: #ffd695;
-  --link-danger-disabled-color: #fd9c9c;
-  --message-color: var(--default-color);
-  --message-primary-bg-color: #f0f8ff;
-  --message-primary-border-color: #e1ecff;
-  --message-primary-shadow-color: #e1e8f4;
-  --message-warning-bg-color: #fff4e2;
-  --message-warning-border-color: #ffe8c3;
-  --message-warning-shadow-color: #ede6db;
-  --message-success-bg-color: #f2fff4;
-  --message-success-border-color: #dcffe2;
-  --message-success-shadow-color: #cef0d7;
-  --message-danger-bg-color: #ffeded;
-  --message-danger-border-color: #ffdddd;
-  --message-danger-shadow-color: #f6dada;
-  --slider-default-bg: #dcdee5;
-  --slider-disable-bar-bg: #979ba5;
-  --menu-bg-color: #182132;
-  --submenu-bg-color: #151d2c;
-  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
-  --menu-color: #96a2b9;
-  --menu-group-color: var(--default-color);
-  --menu-width: 260px;
-  --menu-collapse-width: 60px;
-  --menu-active-color: white;
-  --nav-header-bg-color: #182132;
-  --nav-bg-color: #182132;
-  --date-picker-disabled-bg: #fafbfd;
-  --date-picker-dropdown-mb: 4px;
-  --date-picker-dropdown-bg: #fff;
-  --table-bg-color: var(--white-color);
-  --table-border-color: #dcdee5;
-  --table-strip-color: #fafbfd;
-  --table-head-bg-color: #fafbfd;
-  --table-head-font-color: #313238;
-  --table-body-font-color: #63656e;
-  --table-row-hover-bg-color: #f5f7fa;
-  --table-row-active-bg-color: #f0f1f5;
-  --cascader-panel-border-color: #dcdee5;
-  --cascader-panel-hover: #f5f7fa;
-  --cascader-panel-active: #e1ecff;
-  --cascader-panel-disabled-bg: #fff;
-  --search-select-focus-border-color: var(--primary-color);
-  --search-select-focus-color: #3c96ff;
-  --search-select-font-color: var(--default-color);
-  --search-select-placeholder-color: var(--light-gray);
-  --search-select-message-color: var(--danger-color);
-  --search-select-menu-border-color: var(--disable-color);
-  --select-active-color: #e1ecff;
-  --select-hover-color: #f5f7fa;
-}
-.bk-scrollbar-wrapper {
-  position: relative;
-  overflow: hidden;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-content-el {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track {
-  z-index: 1;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
-  width: 6px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 8px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
-  height: 6px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
-  height: 8px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
-  background-color: #f0f1f5;
-  cursor: pointer;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
-  background-color: #979ba5;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
-  top: 0;
-  width: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 10px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
-  left: 0;
-  height: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
-  height: 10px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
-  right: auto;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  min-height: 0;
-  min-width: 8px;
-  width: auto;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-dragging {
-  pointer-events: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.bk-scrollbar-wrapper .bk-scrollbar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.bk-scrollbar-wrapper .bk-scrollbar::before {
-  position: absolute;
-  content: '';
-  background: #dcdee5;
-  border-radius: 6px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  opacity: 0;
-  transition: opacity 0.2s 0.9s linear;
-}
-.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
-  opacity: 0.9;
-  transition-delay: 0s;
-  transition-duration: 0s;
-}