mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-23 18:50:06 +08:00
Code Issues Actions 14 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 {
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 { 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 { createStyles } from 'antd-style';
import semver from 'semver';
@ -76,7 +76,7 @@ const useStyle = createStyles(({ token, css }) => ({
position: 'relative',
[`> ${token.antCls}-drawer-body`]: {
scrollbarWidth: 'thin',
scrollbarColor: 'unset',
scrollbarGutter: 'stable',
},
},
versionWrap: css`

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

@ -15,7 +15,7 @@ const useStyle = createStyles(({ token, css }) => {
background: ${colorBgContainer};
&-scroll-container {
scrollbar-width: thin;
scrollbar-color: unset;
scrollbar-gutter: stable;
}
}
.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;
> pre.prism-code {
scrollbar-width: thin;
scrollbar-color: unset;
scrollbar-gutter: stable;
padding: ${token.paddingSM}px ${token.paddingMD}px;
font-size: ${token.fontSize}px;
line-height: 2;
@ -272,7 +272,7 @@ const GlobalStyle: React.FC = () => {
.markdown .dumi-default-table {
&-content {
scrollbar-width: thin;
scrollbar-color: unset;
scrollbar-gutter: stable;
}
table {
margin: 0;

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

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

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

@ -99,7 +99,7 @@ const useStyle = createStyles(({ token, css }) => {
}
& > section {
scrollbar-width: thin;
scrollbar-color: unset;
scrollbar-gutter: stable;
}
}
}
@ -142,7 +142,7 @@ const useStyle = createStyles(({ token, css }) => {
.rc-virtual-list {
.rc-virtual-list-holder {
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`
z-index: 1;
position: sticky;
top: ${token.headerHeight + token.contentMarginTop}px;
width: 100%;
height: 100%;
max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
overflow: hidden;
scrollbar-width: thin;
scrollbar-color: unset;
.ant-menu {
padding: 0 4px;
}
position: sticky;
top: ${token.headerHeight + token.contentMarginTop}px;
width: 100%;
height: 100%;
max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
overflow: hidden;
scrollbar-width: thin;
scrollbar-gutter: stable;
.ant-menu {
padding: 0 4px;
}
&:hover {
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`] = `
<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
style="width:100%;height:1000px"

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

@ -7,7 +7,7 @@ const containerStyle: React.CSSProperties = {
overflow: 'auto',
boxShadow: '0 0 0 1px #1677ff',
scrollbarWidth: 'thin',
scrollbarColor: 'unset',
scrollbarGutter: 'stable',
};
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
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
class="ant-layout-sider-children"

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

@ -22,7 +22,7 @@ const siderStyle: React.CSSProperties = {
top: 0,
bottom: 0,
scrollbarWidth: 'thin',
scrollbarColor: 'unset',
scrollbarGutter: 'stable',
};
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`] = `
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
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`] = `
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
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`] = `
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
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`] = `
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
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`] = `
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
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`] = `
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
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`] = `
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
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"
>
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
class="ant-spin-nested-loading"
@ -28032,7 +28032,7 @@ exports[`renders components/table/demo/summary.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-table-wrapper acss-6kbv1r"
class="ant-table-wrapper acss-10ugdpo"
>
<div
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-content {
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-content {
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-content {
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-content {
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-content {
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-content {
scrollbar-width: thin;
scrollbar-color: unset;
scrollbar-color: #eaeaea transparent;
scrollbar-gutter: stable;
}
}
}