mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

site: improve scrollbar style of site (#51220)

Browse Source
This commit is contained in:
lijianan 2024-10-16 21:25:14 +08:00 committed by GitHub
parent b2cbae293e
commit 706c0009a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dumi/global.css
View File

@ -16,5 +16,5 @@
html { html {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-color: #eaeaea transparent;
} }

4
.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
View File

@ -1,6 +1,6 @@
import React, { cloneElement, isValidElement } from 'react'; import React, { cloneElement, isValidElement } from 'react';
import { BugOutlined } from '@ant-design/icons'; import { BugOutlined } from '@ant-design/icons';
import { Drawer, Flex, Grid, Popover, Tag, Timeline, Typography, Button } from 'antd'; import { Button, Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd';
import type { TimelineItemProps } from 'antd'; import type { TimelineItemProps } from 'antd';
import { createStyles } from 'antd-style'; import { createStyles } from 'antd-style';
import semver from 'semver'; import semver from 'semver';
@ -76,7 +76,7 @@ const useStyle = createStyles(({ token, css }) => ({
position: 'relative', position: 'relative',
[`> ${token.antCls}-drawer-body`]: { [`> ${token.antCls}-drawer-body`]: {
scrollbarWidth: 'thin', scrollbarWidth: 'thin',
scrollbarColor: 'unset', scrollbarGutter: 'stable',
}, },
}, },
versionWrap: css` versionWrap: css`

2
.dumi/theme/common/LiveCode.tsx
View File

@ -15,7 +15,7 @@ const useStyle = createStyles(({ token, css }) => {
background: ${colorBgContainer}; background: ${colorBgContainer};
&-scroll-container { &-scroll-container {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-gutter: stable;
} }
} }
.dumi-default-source-code > pre, .dumi-default-source-code > pre,

4
.dumi/theme/common/styles/Markdown.tsx
View File

@ -169,7 +169,7 @@ const GlobalStyle: React.FC = () => {
border-radius: ${token.borderRadius}px; border-radius: ${token.borderRadius}px;
> pre.prism-code { > pre.prism-code {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-gutter: stable;
padding: ${token.paddingSM}px ${token.paddingMD}px; padding: ${token.paddingSM}px ${token.paddingMD}px;
font-size: ${token.fontSize}px; font-size: ${token.fontSize}px;
line-height: 2; line-height: 2;
@ -272,7 +272,7 @@ const GlobalStyle: React.FC = () => {
.markdown .dumi-default-table { .markdown .dumi-default-table {
&-content { &-content {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-gutter: stable;
} }
table { table {
margin: 0; margin: 0;

2
.dumi/theme/slots/Content/DocAnchor.tsx
View File

@ -10,7 +10,7 @@ export const useStyle = createStyles(({ token, css }) => {
return { return {
anchorToc: css` anchorToc: css`
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-gutter: stable;
${antCls}-anchor { ${antCls}-anchor {
${antCls}-anchor-link-title { ${antCls}-anchor-link-title {
font-size: ${token.fontSizeSM}px; font-size: ${token.fontSizeSM}px;

4
.dumi/theme/slots/Header/index.tsx
View File

@ -99,7 +99,7 @@ const useStyle = createStyles(({ token, css }) => {
} }
& > section { & > section {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-gutter: stable;
} }
} }
} }
@ -142,7 +142,7 @@ const useStyle = createStyles(({ token, css }) => {
.rc-virtual-list { .rc-virtual-list {
.rc-virtual-list-holder { .rc-virtual-list-holder {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-gutter: stable;
} }
} }
`, `,

23
.dumi/theme/slots/Sidebar/index.tsx
View File

@ -91,18 +91,17 @@ const useStyle = createStyles(({ token, css }) => {
`, `,
mainMenu: css` mainMenu: css`
z-index: 1; z-index: 1;
position: sticky; position: sticky;
top: ${token.headerHeight + token.contentMarginTop}px; top: ${token.headerHeight + token.contentMarginTop}px;
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px); max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
overflow: hidden; overflow: hidden;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-gutter: stable;
.ant-menu {
.ant-menu { padding: 0 4px;
padding: 0 4px; }
}
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;

2
components/affix/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -84,7 +84,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `
exports[`renders components/affix/demo/target.tsx correctly 1`] = ` exports[`renders components/affix/demo/target.tsx correctly 1`] = `
<div <div
style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-color:unset" style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-gutter:stable"
> >
<div <div
style="width:100%;height:1000px" style="width:100%;height:1000px"

2
components/affix/demo/target.tsx
View File

@ -7,7 +7,7 @@ const containerStyle: React.CSSProperties = {
overflow: 'auto', overflow: 'auto',
boxShadow: '0 0 0 1px #1677ff', boxShadow: '0 0 0 1px #1677ff',
scrollbarWidth: 'thin', scrollbarWidth: 'thin',
scrollbarColor: 'unset', scrollbarGutter: 'stable',
}; };
const style: React.CSSProperties = { const style: React.CSSProperties = {

2
components/layout/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -755,7 +755,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
> >
<aside <aside
class="ant-layout-sider ant-layout-sider-dark" class="ant-layout-sider ant-layout-sider-dark"
style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-color:unset;flex:0 0 200px;max-width:200px;min-width:200px;width:200px" style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-gutter:stable;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
> >
<div <div
class="ant-layout-sider-children" class="ant-layout-sider-children"

2
components/layout/demo/fixed-sider.tsx
View File

@ -22,7 +22,7 @@ const siderStyle: React.CSSProperties = {
top: 0, top: 0,
bottom: 0, bottom: 0,
scrollbarWidth: 'thin', scrollbarWidth: 'thin',
scrollbarColor: 'unset', scrollbarGutter: 'stable',
}; };
const items: MenuProps['items'] = [ const items: MenuProps['items'] = [

4
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -11853,7 +11853,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = ` exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = `
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -13218,7 +13218,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
exports[`renders components/table/demo/grouping-columns.tsx extend context correctly 1`] = ` exports[`renders components/table/demo/grouping-columns.tsx extend context correctly 1`] = `
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"

14
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -9490,7 +9490,7 @@ exports[`renders components/table/demo/filter-search.tsx correctly 1`] = `
exports[`renders components/table/demo/fixed-columns.tsx correctly 1`] = ` exports[`renders components/table/demo/fixed-columns.tsx correctly 1`] = `
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -10201,7 +10201,7 @@ exports[`renders components/table/demo/fixed-columns.tsx correctly 1`] = `
exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] = ` exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] = `
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -12113,7 +12113,7 @@ exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] =
exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] = ` exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] = `
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -12832,7 +12832,7 @@ exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] =
exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = ` exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -14092,7 +14092,7 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = ` exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -27849,7 +27849,7 @@ exports[`renders components/table/demo/summary.tsx correctly 1`] = `
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical" class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
> >
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -28032,7 +28032,7 @@ exports[`renders components/table/demo/summary.tsx correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-table-wrapper acss-6kbv1r" class="ant-table-wrapper acss-10ugdpo"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"

3
components/table/demo/fixed-columns-header.tsx
View File

@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
${antCls}-table-body, ${antCls}-table-body,
${antCls}-table-content { ${antCls}-table-content {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-color: #eaeaea transparent;
scrollbar-gutter: stable;
} }
} }
} }

3
components/table/demo/fixed-columns.tsx
View File

@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
${antCls}-table-body, ${antCls}-table-body,
${antCls}-table-content { ${antCls}-table-content {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-color: #eaeaea transparent;
scrollbar-gutter: stable;
} }
} }
} }

3
components/table/demo/fixed-gapped-columns.tsx
View File

@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
${antCls}-table-body, ${antCls}-table-body,
${antCls}-table-content { ${antCls}-table-content {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-color: #eaeaea transparent;
scrollbar-gutter: stable;
} }
} }
} }

3
components/table/demo/fixed-header.tsx
View File

@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
${antCls}-table-body, ${antCls}-table-body,
${antCls}-table-content { ${antCls}-table-content {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-color: #eaeaea transparent;
scrollbar-gutter: stable;
} }
} }
} }

3
components/table/demo/grouping-columns.tsx
View File

@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
${antCls}-table-body, ${antCls}-table-body,
${antCls}-table-content { ${antCls}-table-content {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-color: #eaeaea transparent;
scrollbar-gutter: stable;
} }
} }
} }

3
components/table/demo/summary.tsx
View File

@ -12,7 +12,8 @@ const useStyle = createStyles(({ css, token }) => {
${antCls}-table-body, ${antCls}-table-body,
${antCls}-table-content { ${antCls}-table-content {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: unset; scrollbar-color: #eaeaea transparent;
scrollbar-gutter: stable;
} }
} }
} }