diff --git a/packages/components/style/mixins/reset.less b/packages/components/style/mixins/reset.less index 54eace005..66a1862ae 100644 --- a/packages/components/style/mixins/reset.less +++ b/packages/components/style/mixins/reset.less @@ -28,30 +28,41 @@ .reset-scroll() { ::-webkit-scrollbar { - width: @scrollbar-width; - height: @scrollbar-height; + width: var(--ix-scrollbar-width); + height: var(--ix-scrollbar-height); } ::-webkit-scrollbar-thumb { background-clip: padding-box; - background-color: @scrollbar-thumb-background-color; - border: @scrollbar-thumb-border solid transparent; - border-radius: @scrollbar-thumb-border-radius; - box-shadow: @scrollbar-thumb-box-shadow; + background-color: var(--ix-scrollbar-thumb-background-color); + border: var(--ix-scrollbar-thumb-border-width) solid transparent; + border-radius: var(--ix-scrollbar-thumb-border-radius); + box-shadow: var(--ix-scrollbar-thumb-box-shadow); &:hover { - background-color: @scrollbar-thumb-hover-background-color; + background-color: var(--ix-scrollbar-thumb-background-color-hover); } &:active { - background-color: @scrollbar-thumb-active-background-color; + background-color: var(--ix-scrollbar-thumb-background-color-active); } } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { - background-color: @scrollbar-track-background-color; - border-radius: @scrollbar-track-border-radius; - box-shadow: @scrollbar-track-box-shadow; + background-color: var(--ix-scrollbar-track-background-color); + border-radius: var(--ix-scrollbar-track-border-radius); + box-shadow: var(--ix-scrollbar-track-box-shadow); + } + + .@{idux-prefix}-scroll-min { + ::-webkit-scrollbar-thumb { + border-width: calc(var(--ix-scrollbar-thumb-border-width) * 2); + + &:hover, + &:active { + border-width: var(--ix-scrollbar-thumb-border-width); + } + } } } diff --git a/packages/components/style/themes/default.less b/packages/components/style/themes/default.less index 94923acc4..449f1163c 100644 --- a/packages/components/style/themes/default.less +++ b/packages/components/style/themes/default.less @@ -94,6 +94,19 @@ --ix-spacing-xl: 24px; --ix-spacing-2xl: 32px; + // scroll + --ix-scrollbar-width: 8px; + --ix-scrollbar-height: 8px; + --ix-scrollbar-thumb-background-color: @color-grey-l30; + --ix-scrollbar-thumb-background-color-hover: @color-grey-l10; + --ix-scrollbar-thumb-background-color-active: @color-grey-d10; + --ix-scrollbar-thumb-border-width: 0; + --ix-scrollbar-thumb-border-radius: 4px; + --ix-scrollbar-thumb-box-shadow: none; + --ix-scrollbar-track-background-color: unset; + --ix-scrollbar-track-border-radius: 0; + --ix-scrollbar-track-box-shadow: unset; + // Motion --ix-transition-duration-fast: 0.18s; --ix-transition-duration-medium: 0.24s; @@ -126,6 +139,7 @@ @border-color-inverse: @color-white; @border-color-split: @color-grey-l30; +// 临时兼容,后面需要移除 // Scrollbar @scrollbar-width: 8px; @scrollbar-height: 8px; diff --git a/packages/components/style/themes/seer.less b/packages/components/style/themes/seer.less index f9f40b907..264373b39 100644 --- a/packages/components/style/themes/seer.less +++ b/packages/components/style/themes/seer.less @@ -24,6 +24,15 @@ // Font-Size --ix-font-size: 12px; + + // Scrollbar + --ix-scrollbar-width: 12px; + --ix-scrollbar-height: 12px; + --ix-scrollbar-thumb-background-color: @color-graphite-l30; + --ix-scrollbar-thumb-background-color-hover: @color-graphite-l10; + --ix-scrollbar-thumb-background-color-active: @color-graphite-l10; + --ix-scrollbar-thumb-border-width: 2px; + --ix-scrollbar-thumb-border-radius: 6px; } // 临时兼容,后面需要移除 @@ -39,6 +48,7 @@ @border-color: @color-graphite-l20; @border-color-split: @color-graphite-l30; +// 临时兼容,后面需要移除 // Scrollbar @scrollbar-width: 12px; @scrollbar-height: 12px; diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less index 4690b1098..355f45e1f 100644 --- a/packages/components/table/style/index.less +++ b/packages/components/table/style/index.less @@ -334,28 +334,28 @@ position: sticky; bottom: 0; z-index: 3; - background-color: @scrollbar-track-background-color; - border-radius: @scrollbar-track-border-radius; - box-shadow: @scrollbar-track-box-shadow; + background-color: var(--ix-scrollbar-track-background-color); + border-radius: var(--ix-scrollbar-track-border-radius); + box-shadow: var(--ix-scrollbar-track-box-shadow); &:hover { transform-origin: center bottom; } &-thumb { - height: @scrollbar-height; + height: var(--ix-scrollbar-height); background-clip: padding-box; - background-color: @scrollbar-thumb-background-color; - border: @scrollbar-thumb-border solid transparent; - border-radius: @scrollbar-thumb-border-radius; - box-shadow: @scrollbar-thumb-box-shadow; + background-color: var(--ix-scrollbar-thumb-background-color); + border: var(--ix-scrollbar-thumb-border-width) solid transparent; + border-radius: var(--ix-scrollbar-thumb-border-radius); + box-shadow: var(--ix-scrollbar-thumb-box-shadow); &:hover { - background-color: @scrollbar-thumb-hover-background-color; + background-color: var(--ix-scrollbar-thumb-background-color-hover); } &&-active { - background-color: @scrollbar-thumb-active-background-color; + background-color: var(--ix-scrollbar-thumb-background-color-active); } } } diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx index 9fdadf5ab..a67e49f10 100644 --- a/packages/pro/search/src/ProSearch.tsx +++ b/packages/pro/search/src/ProSearch.tsx @@ -217,7 +217,7 @@ export default defineComponent({ const quickSelectOverlayProps = { ...commonOverlayProps.value, - class: `${mergedPrefixCls.value}-quick-select-overlay`, + class: `${mergedPrefixCls.value}-quick-select-overlay ${componentCommon.prefixCls}-scroll-min`, style: { width: convertCssPixel(elementWidth.value), }, diff --git a/packages/pro/search/style/quick-select.less b/packages/pro/search/style/quick-select.less index e5e3a246f..bfe80ede4 100644 --- a/packages/pro/search/style/quick-select.less +++ b/packages/pro/search/style/quick-select.less @@ -3,7 +3,7 @@ .@{pro-search-prefix}-quick-select { &-overlay { - .overlay() + .overlay(); } &-panel { @@ -69,7 +69,7 @@ height: 100%; max-width: calc(100% - 24px); color: @color-graphite; - .ellipsis() + .ellipsis(); } &-search-bar { position: absolute; @@ -136,4 +136,4 @@ } } } -} \ No newline at end of file +}