test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

docs: improve document loading style (#46459)

Browse Source
This commit is contained in:
afc163 2023-12-14 19:19:28 +08:00 committed by GitHub
parent 984527f04f
commit fc432311f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.dumi/theme/builtins/Previewer/index.tsx
View File

@ -10,8 +10,9 @@ const Previewer = React.lazy(() => import('./Previewer'));
const useStyle = createStyles(({ css }) => ({
skeletonWrapper: css`
width: 100% !important;
height: 500px;
height: 250px;
margin-bottom: 16px;
border-radius: 8px;
`,
}));

12
.dumi/theme/common/Loading.tsx
View File

@ -11,10 +11,16 @@ const Loading: React.FC = () => {
pathname.startsWith('/changelog')
) {
return (
<Space direction="vertical" style={{ width: '100%', marginTop: 24 }} size={40}>
<Skeleton title={false} active paragraph={{ rows: 3 }} />
<div style={{ maxWidth: '70vw', width: '100%', margin: '80px auto 0', textAlign: 'center' }}>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
width={40}
alt="loading"
style={{ marginBottom: 24, filter: 'grayscale(1)', opacity: 0.33 }}
/>
<Skeleton active paragraph={{ rows: 3 }} />
</Space>
<Skeleton active paragraph={{ rows: 4 }} style={{ marginTop: 32 }} />
</div>
);
}

6
.dumi/theme/common/styles/Demo.tsx
View File

@ -39,7 +39,7 @@ const GlobalDemoStyles: React.FC = () => {
.code-box-demo {
background-color: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
border-radius: ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0;
> .demo {
overflow: auto;
}
@ -85,10 +85,6 @@ const GlobalDemoStyles: React.FC = () => {
transition: background-color 0.4s;
margin-inline-start: 16px;
${antCls}-row-rtl & {
border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px;
}
a,
a:hover {
color: ${token.colorText};