mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

chore: site code format (#39457)

Browse Source 
* format: site code format

* Conflicting

* lint

* rename
This commit is contained in:
lijianan 2022-12-19 13:23:28 +08:00 committed by GitHub
parent 0eaf2b40cf
commit ba999de764
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 1653 additions and 1649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.dumi/hooks/useLocale.tsx → .dumi/hooks/useLocale.ts
View File

0
.dumi/pages/index-cn/index.tsx → .dumi/pages/index-cn/index.ts
View File

11
.dumi/pages/index/components/SiteContext.ts Normal file
View File

@ -0,0 +1,11 @@
import * as React from 'react';
export interface SiteContextProps {
isMobile: boolean;
}
const SiteContext = React.createContext<SiteContextProps>({
isMobile: false,
});
export default SiteContext;

27
.dumi/pages/index/components/util.tsx → .dumi/pages/index/components/util.ts
View File

@ -1,4 +1,3 @@
/* eslint-disable import/prefer-default-export */
import * as React from 'react'; import * as React from 'react';
import { css } from '@emotion/react'; import { css } from '@emotion/react';
@ -102,25 +101,25 @@ export function useSiteData(): [Partial<SiteData>, boolean] {
export const useCarouselStyle = () => ({ export const useCarouselStyle = () => ({
carousel: css` carousel: css`
.slick-dots.slick-dots-bottom { .slick-dots.slick-dots-bottom {
bottom: -22px; bottom: -22px;
li { li {
width: 6px; width: 6px;
height: 6px;
background: #e1eeff;
border-radius: 50%;
button {
height: 6px; height: 6px;
background: #e1eeff; background: #e1eeff;
border-radius: 50%; border-radius: 50%;
}
&.slick-active {
background: #4b9cff;
button { button {
height: 6px;
background: #e1eeff;
border-radius: 50%;
}
&.slick-active {
background: #4b9cff; background: #4b9cff;
button {
background: #4b9cff;
}
} }
} }
} }
`, }
`,
}); });

0
.dumi/pages/theme-editor-cn/index.tsx → .dumi/pages/theme-editor-cn/index.ts
View File

1
.dumi/theme/builtins/ColorPaletteTool/index.tsx → .dumi/theme/builtins/ColorPaletteTool/index.ts
View File

@ -1,4 +1,3 @@
// @ts-ignore
import ColorPaletteTool from '../../common/Color/ColorPaletteTool'; import ColorPaletteTool from '../../common/Color/ColorPaletteTool';
export default ColorPaletteTool; export default ColorPaletteTool;

1
.dumi/theme/builtins/ColorPaletteToolDark/index.tsx → .dumi/theme/builtins/ColorPaletteToolDark/index.ts
View File

@ -1,4 +1,3 @@
// @ts-ignore
import ColorPaletteToolDark from '../../common/Color/ColorPaletteToolDark'; import ColorPaletteToolDark from '../../common/Color/ColorPaletteToolDark';
export default ColorPaletteToolDark; export default ColorPaletteToolDark;

1
.dumi/theme/builtins/ColorPalettes/index.tsx → .dumi/theme/builtins/ColorPalettes/index.ts
View File

@ -1,4 +1,3 @@
// @ts-ignore
import ColorPalettes from '../../common/Color/ColorPalettes'; import ColorPalettes from '../../common/Color/ColorPalettes';
export default ColorPalettes; export default ColorPalettes;

0
.dumi/theme/builtins/Palette/index.tsx → .dumi/theme/builtins/Palette/index.ts
View File

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

@ -1,4 +1,3 @@
/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
import { CheckOutlined, SnippetsOutlined, ThunderboltOutlined } from '@ant-design/icons'; import { CheckOutlined, SnippetsOutlined, ThunderboltOutlined } from '@ant-design/icons';
import stackblitzSdk from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk';
import type { Project } from '@stackblitz/sdk'; import type { Project } from '@stackblitz/sdk';

8
.dumi/theme/common/EditButton.tsx
View File

@ -19,12 +19,12 @@ const useStyle = () => {
return { return {
editButton: css` editButton: css`
a& { a& {
display: inline-block;
text-decoration: none;
margin-inline-start: 6px;
vertical-align: middle;
position: relative; position: relative;
top: -2px; top: -2px;
display: inline-block;
text-decoration: none;
vertical-align: middle;
margin-inline-start: 6px;
${iconCls} { ${iconCls} {
display: block; display: block;

92
.dumi/theme/common/styles/BrowserMockup.tsx
View File

@ -4,59 +4,59 @@ import React from 'react';
export default () => ( export default () => (
<Global <Global
styles={css` styles={css`
/* Browser mockup code /* Browser mockup code
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
* Live example: https://updown.io * Live example: https://updown.io
*/ */
.browser-mockup { .browser-mockup {
position: relative; position: relative;
border-top: 2em solid rgba(230, 230, 230, 0.7); border-top: 2em solid rgba(230, 230, 230, 0.7);
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28); box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
} }
.browser-mockup::before { .browser-mockup::before {
position: absolute; position: absolute;
top: -1.25em; top: -1.25em;
left: 1em; left: 1em;
display: block; display: block;
width: 0.5em; width: 0.5em;
height: 0.5em; height: 0.5em;
background-color: #f44; background-color: #f44;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
content: ''; content: '';
} }
.browser-mockup.with-tab::after { .browser-mockup.with-tab::after {
position: absolute; position: absolute;
top: -2em; top: -2em;
left: 5.5em; left: 5.5em;
display: block; display: block;
width: 20%; width: 20%;
height: 0; height: 0;
border-right: 0.8em solid transparent; border-right: 0.8em solid transparent;
border-bottom: 2em solid white; border-bottom: 2em solid white;
border-left: 0.8em solid transparent; border-left: 0.8em solid transparent;
content: ''; content: '';
} }
.browser-mockup.with-url::after { .browser-mockup.with-url::after {
position: absolute; position: absolute;
top: -1.6em; top: -1.6em;
left: 5.5em; left: 5.5em;
display: block; display: block;
width: ~'calc(100% - 6em)'; width: ~'calc(100% - 6em)';
height: 1.2em; height: 1.2em;
background-color: white; background-color: white;
border-radius: 2px; border-radius: 2px;
content: ''; content: '';
} }
.browser-mockup > * { .browser-mockup > * {
display: block; display: block;
} }
`} `}
/> />
); );

100
.dumi/theme/common/styles/Common.tsx
View File

@ -4,57 +4,57 @@ import React from 'react';
export default () => ( export default () => (
<Global <Global
styles={css` styles={css`
body, body,
div, div,
dl, dl,
dt, dt,
dd, dd,
ul, ul,
ol, ol,
li, li,
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6, h6,
pre, pre,
code, code,
form, form,
fieldset, fieldset,
legend, legend,
input, input,
textarea, textarea,
p, p,
blockquote, blockquote,
th, th,
td, td,
hr, hr,
button, button,
article, article,
aside, aside,
details, details,
figcaption, figcaption,
figure, figure,
footer, footer,
header, header,
hgroup, hgroup,
menu, menu,
nav, nav,
section { section {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul, ul,
ol { ol {
list-style: none; list-style: none;
} }
img { img {
vertical-align: middle; vertical-align: middle;
border-style: none; border-style: none;
} }
`} `}
/> />
); );

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

@ -10,366 +10,366 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
.code-boxes-col-1-1 { .code-boxes-col-1-1 {
width: 100%; width: 100%;
} }
.code-boxes-col-2-1 { .code-boxes-col-2-1 {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.code-box { .code-box {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
margin: 0 0 16px; margin: 0 0 16px;
overflow: hidden; overflow: hidden;
border: 1px solid ${token.colorSplit}; border: 1px solid ${token.colorSplit};
border-radius: ${token.borderRadius}px; border-radius: ${token.borderRadius}px;
transition: all 0.2s; transition: all 0.2s;
.code-box-title {
&,
a {
color: ${token.colorText} !important;
background: ${token.colorBgContainer};
}
}
.code-box-title {
&, &,
.code-box-demo { a {
background-color: ${token.colorBgContainer}; color: ${token.colorText} !important;
background: ${token.colorBgContainer};
}
}
&,
.code-box-demo {
background-color: ${token.colorBgContainer};
}
.markdown {
pre {
margin: 0.5em 0;
padding: 6px 12px;
} }
.markdown { pre code {
pre { margin: 0;
margin: 0.5em 0; background: #f5f5f5;
padding: 6px 12px; }
} }
pre code { &:target {
margin: 0; border: 1px solid ${token.colorPrimary};
background: #f5f5f5; }
}
&-expand-trigger {
position: relative;
margin-left: 12px;
color: #3b4357;
font-size: 20px;
cursor: pointer;
opacity: 0.75;
transition: all 0.3s;
&:hover {
opacity: 1;
} }
&:target { ${antCls}-row-rtl & {
border: 1px solid ${token.colorPrimary}; margin-right: 8px;
margin-left: 0;
}
}
&-title {
position: absolute;
top: -14px;
margin-left: 16px;
padding: 1px 8px;
color: #777;
background: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
transition: background-color 0.4s;
${antCls}-row-rtl & {
margin-right: 16px;
margin-left: 0;
border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px;
} }
&-expand-trigger { a,
position: relative; a:hover {
margin-left: 12px; color: ${token.colorText};
color: #3b4357; font-weight: 500;
font-size: 20px; font-size: ${token.fontSize}px;
cursor: pointer; }
opacity: 0.75; }
&-description {
padding: 18px 24px 12px;
}
a.edit-button {
position: absolute;
top: 7px;
right: -16px;
padding-right: 6px;
font-size: 12px;
text-decoration: none;
background: inherit;
transform: scale(0.9);
${iconCls} {
color: ${token.colorTextSecondary};
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
opacity: 1;
}
${antCls}-row-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
&-title {
position: absolute;
top: -14px;
margin-left: 16px;
padding: 1px 8px;
color: #777;
background: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
transition: background-color 0.4s;
${antCls}-row-rtl & {
margin-right: 16px;
margin-left: 0;
border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px;
}
a,
a:hover {
color: ${token.colorText}; color: ${token.colorText};
font-weight: 500;
font-size: ${token.fontSize}px;
} }
} }
&-description { ${antCls}-row${antCls}-row-rtl & {
padding: 18px 24px 12px; right: auto;
left: -22px;
margin-right: 0;
padding-right: 8px;
padding-left: 6px;
} }
}
a.edit-button { &-demo {
position: absolute; padding: 42px 24px 50px;
top: 7px; color: ${token.colorText};
right: -16px; border-bottom: 1px solid ${token.colorSplit};
padding-right: 6px; }
font-size: 12px;
text-decoration: none;
background: inherit;
transform: scale(0.9);
${iconCls} { iframe {
color: ${token.colorTextSecondary}; width: 100%;
transition: all 0.3s; border: 0;
}
&:hover { &-meta {
color: ${token.colorText}; &.markdown {
}
}
${antCls}-row${antCls}-row-rtl & {
right: auto;
left: -22px;
margin-right: 0;
padding-right: 8px;
padding-left: 6px;
}
}
&-demo {
padding: 42px 24px 50px;
color: ${token.colorText};
border-bottom: 1px solid ${token.colorSplit};
}
iframe {
width: 100%;
border: 0;
}
&-meta {
&.markdown {
position: relative;
width: 100%;
font-size: ${token.fontSize}px;
border-radius: 0 0 ${token.borderRadius}px ${token.borderRadius}px;
transition: background-color 0.4s;
}
blockquote {
line-height: 1.5;
}
h4,
section& p {
margin: 0;
}
> p {
width: 100%;
margin: 0.5em 0;
padding-right: 25px;
font-size: 12px;
word-break: break-word;
${antCls}-row-rtl & {
padding-right: 0;
padding-left: 25px;
}
}
}
&.expand &-meta {
border-bottom: 1px dashed ${token.colorSplit};
border-radius: 0;
}
.code-expand-icon {
width: 16px;
height: 16px;
position: relative; position: relative;
cursor: pointer;
}
.code-expand-icon-show,
.code-expand-icon-hide {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
max-width: 100%; font-size: ${token.fontSize}px;
margin: 0;
box-shadow: none;
transition: all 0.4s;
user-select: none;
${antCls}-row-rtl & {
right: 0;
left: auto;
}
}
.code-expand-icon-show {
opacity: 0.55;
pointer-events: auto;
&:hover {
opacity: 1;
}
}
.code-expand-icon${antCls}-tooltip-open .code-expand-icon-show {
opacity: 1;
}
.code-expand-icon-hide {
opacity: 0;
pointer-events: none;
}
.highlight-wrapper {
display: none;
overflow: auto;
border-radius: 0 0 ${token.borderRadius}px ${token.borderRadius}px; border-radius: 0 0 ${token.borderRadius}px ${token.borderRadius}px;
transition: background-color 0.4s;
&-expand {
display: block;
}
} }
.highlight { blockquote {
position: relative; line-height: 1.5;
pre {
margin: 0;
padding: 0;
background: ${token.colorBgContainer};
}
&:not(:first-child) {
border-top: 1px dashed ${token.colorSplit};
}
} }
&-actions { h4,
display: flex; section& p {
justify-content: center; margin: 0;
padding: 12px 0; }
border-top: 1px dashed ${token.colorSplit};
opacity: 0.7;
transition: opacity 0.3s;
&:hover { > p {
opacity: 1; width: 100%;
margin: 0.5em 0;
padding-right: 25px;
font-size: 12px;
word-break: break-word;
${antCls}-row-rtl & {
padding-right: 0;
padding-left: 25px;
} }
} }
}
&-actions &-code-action { &.expand &-meta {
position: relative; border-bottom: 1px dashed ${token.colorSplit};
display: flex; border-radius: 0;
align-items: center; }
width: 16px;
height: 16px;
color: ${token.colorTextSecondary};
cursor: pointer;
transition: all 0.24s;
&:hover { .code-expand-icon {
color: ${token.colorText}; position: relative;
} width: 16px;
height: 16px;
cursor: pointer;
}
${iconCls} { .code-expand-icon-show,
display: block; .code-expand-icon-hide {
} position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
margin: 0;
box-shadow: none;
transition: all 0.4s;
user-select: none;
${antCls}-row-rtl & {
right: 0;
left: auto;
} }
}
&-code-copy { .code-expand-icon-show {
width: 14px; opacity: 0.55;
height: 14px; pointer-events: auto;
font-size: 14px;
text-align: center;
background: ${token.colorBgContainer};
cursor: pointer;
transition: transform 0.24s;
&${iconCls}-check { &:hover {
color: ${token['green-6']} !important;
font-weight: bold;
}
}
&-codepen {
width: 14px;
height: 14px;
overflow: hidden;
border: 0;
cursor: pointer;
}
&-riddle {
width: 14px;
height: 14px;
overflow: hidden;
border: 0;
cursor: pointer;
}
&-codesandbox {
width: 16px;
height: 16px;
overflow: hidden;
border: 0;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.highlight-wrapper:hover &-code-copy,
.highlight-wrapper:hover &-codepen,
.highlight-wrapper:hover &-codesandbox,
.highlight-wrapper:hover &-riddle {
opacity: 1; opacity: 1;
} }
}
.code-expand-icon${antCls}-tooltip-open .code-expand-icon-show {
opacity: 1;
}
.code-expand-icon-hide {
opacity: 0;
pointer-events: none;
}
.highlight-wrapper {
display: none;
overflow: auto;
border-radius: 0 0 ${token.borderRadius}px ${token.borderRadius}px;
&-expand {
display: block;
}
}
.highlight {
position: relative;
pre { pre {
width: auto;
margin: 0; margin: 0;
padding: 0;
code { background: ${token.colorBgContainer};
background: ${token.colorBgContainer};
border: none;
box-shadow: unset;
}
} }
&-debug { &:not(:first-child) {
border-color: ${token['purple-3']}; border-top: 1px dashed ${token.colorSplit};
}
&-debug &-title a {
color: ${token['purple-6']};
} }
} }
.demo-wrapper { &-actions {
display: flex;
justify-content: center;
padding: 12px 0;
border-top: 1px dashed ${token.colorSplit};
opacity: 0.7;
transition: opacity 0.3s;
&:hover {
opacity: 1;
}
}
&-actions &-code-action {
position: relative; position: relative;
} display: flex;
align-items: center;
width: 16px;
height: 16px;
color: ${token.colorTextSecondary};
cursor: pointer;
transition: all 0.24s;
.all-code-box-controls { &:hover {
position: absolute; color: ${token.colorText};
top: -32px; }
inset-inline-end: 0;
}
${antCls}-row-rtl { ${iconCls} {
#components-tooltip-demo-placement, display: block;
#components-popover-demo-placement,
#components-popconfirm-demo-placement {
.code-box-demo {
direction: ltr;
}
} }
} }
`}
&-code-copy {
width: 14px;
height: 14px;
font-size: 14px;
text-align: center;
background: ${token.colorBgContainer};
cursor: pointer;
transition: transform 0.24s;
&${iconCls}-check {
color: ${token['green-6']} !important;
font-weight: bold;
}
}
&-codepen {
width: 14px;
height: 14px;
overflow: hidden;
border: 0;
cursor: pointer;
}
&-riddle {
width: 14px;
height: 14px;
overflow: hidden;
border: 0;
cursor: pointer;
}
&-codesandbox {
width: 16px;
height: 16px;
overflow: hidden;
border: 0;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.highlight-wrapper:hover &-code-copy,
.highlight-wrapper:hover &-codepen,
.highlight-wrapper:hover &-codesandbox,
.highlight-wrapper:hover &-riddle {
opacity: 1;
}
pre {
width: auto;
margin: 0;
code {
background: ${token.colorBgContainer};
border: none;
box-shadow: unset;
}
}
&-debug {
border-color: ${token['purple-3']};
}
&-debug &-title a {
color: ${token['purple-6']};
}
}
.demo-wrapper {
position: relative;
}
.all-code-box-controls {
position: absolute;
top: -32px;
inset-inline-end: 0;
}
${antCls}-row-rtl {
#components-tooltip-demo-placement,
#components-popover-demo-placement,
#components-popconfirm-demo-placement {
.code-box-demo {
direction: ltr;
}
}
}
`}
/> />
); );
}; };

60
.dumi/theme/common/styles/HeadingAnchor.tsx
View File

@ -4,40 +4,40 @@ import { css, Global } from '@emotion/react';
export default () => ( export default () => (
<Global <Global
styles={css` styles={css`
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
> a[aria-hidden]:first-child { > a[aria-hidden]:first-child {
float: left; float: left;
width: 20px; width: 20px;
padding-inline-end: 4px; padding-inline-end: 4px;
margin-inline-start: -24px; font-size: 0;
// hide phantom blank node line-height: inherit;
font-size: 0; text-align: right;
text-align: right; padding-inline-end: 4px;
line-height: inherit; margin-inline-start: -24px;
[data-direction='rtl'] & { [data-direction='rtl'] & {
float: right; float: right;
} }
&:hover { &:hover {
border: 0; border: 0;
} }
> .icon-link::before { > .icon-link::before {
content: '#'; font-size: 20px;
font-size: 20px; content: '#';
} }
} }
&:not(:hover) > a[aria-hidden]:first-child > .icon-link { &:not(:hover) > a[aria-hidden]:first-child > .icon-link {
visibility: hidden; visibility: hidden;
} }
} }
`} `}
/> />
); );

236
.dumi/theme/common/styles/Highlight.tsx
View File

@ -8,150 +8,150 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
/** /**
* prism.js default theme for JavaScript, CSS and HTML * prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com) * Based on dabblet (http://dabblet.com)
* @author Lea Verou * @author Lea Verou
*/ */
pre code { pre code {
display: block; display: block;
padding: 16px 32px; padding: 16px 32px;
color: ${token.colorText}; color: ${token.colorText};
font-size: ${token.fontSize}px; font-size: ${token.fontSize}px;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 2; line-height: 2;
white-space: pre; white-space: pre;
background: white; background: white;
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
border-radius: ${token.borderRadius}px; border-radius: ${token.borderRadius}px;
} }
code[class*='language-'],
pre[class*='language-'] {
color: black;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 1.5;
direction: ltr;
white-space: pre;
text-align: left;
word-wrap: normal;
word-break: normal;
word-spacing: normal;
tab-size: 4;
hyphens: none;
background: none;
}
code[class*='css'] {
direction: ltr;
}
pre[class*='language-'] ::selection,
code[class*='language-'] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*='language-'], code[class*='language-'],
pre[class*='language-'] { pre[class*='language-'] {
color: black;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 1.5;
direction: ltr;
white-space: pre;
text-align: left;
word-wrap: normal;
word-break: normal;
word-spacing: normal;
tab-size: 4;
hyphens: none;
background: none;
}
code[class*='css'] {
direction: ltr;
}
pre[class*='language-'] ::selection,
code[class*='language-'] ::selection {
text-shadow: none; text-shadow: none;
background: #b3d4fc; }
}
/* Code blocks */
pre[class*='language-'] {
margin: 16px 0;
padding: 12px 20px;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #f5f5f5;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
white-space: normal;
border-radius: 0.3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: 0.7;
}
.markdown {
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #f81d22;
} }
@media print { .token.selector,
code[class*='language-'], .token.attr-name,
pre[class*='language-'] { .token.string,
text-shadow: none; .token.char,
} .token.builtin,
.token.inserted {
color: #0b8235;
} }
/* Code blocks */ .token.operator,
pre[class*='language-'] { .token.entity,
margin: 16px 0; .token.url,
padding: 12px 20px; .language-css .token.string,
overflow: auto; .style .token.string {
color: #0b8235;
} }
:not(pre) > code[class*='language-'], .token.atrule,
pre[class*='language-'] { .token.attr-value,
background: #f5f5f5; .token.keyword {
color: #008dff;
} }
/* Inline code */ .token.function {
:not(pre) > code[class*='language-'] { color: #f81d22;
padding: 0.1em;
white-space: normal;
border-radius: 0.3em;
} }
.token.comment, .token.regex,
.token.prolog, .token.important,
.token.doctype, .token.variable {
.token.cdata { color: #e90;
color: slategray;
} }
.token.punctuation { .token.important,
color: #999; .token.bold {
font-weight: bold;
} }
.namespace { .token.italic {
opacity: 0.7; font-style: italic;
} }
.markdown { .token.entity {
.token.property, cursor: help;
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #f81d22;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #0b8235;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #0b8235;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #008dff;
}
.token.function {
color: #f81d22;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
} }
`} }
`}
/> />
); );
}; };

174
.dumi/theme/common/styles/Icon.tsx
View File

@ -10,102 +10,102 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
ul.anticons-list { ul.anticons-list {
margin: 10px 0; margin: 10px 0;
overflow: hidden; overflow: hidden;
direction: ltr; direction: ltr;
list-style: none; list-style: none;
li { li {
position: relative; position: relative;
float: left; float: left;
width: 16.66%; width: 16.66%;
height: 100px; height: 100px;
margin: 3px 0;
padding: 10px 0 0;
overflow: hidden;
color: #555;
text-align: center;
list-style: none;
background-color: inherit;
border-radius: 4px;
cursor: pointer;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
.rtl & {
margin: 3px 0; margin: 3px 0;
padding: 10px 0 0; padding: 10px 0 0;
overflow: hidden; }
color: #555;
${iconCls} {
margin: 12px 0 8px;
font-size: 36px;
transition: transform 0.3s ease-in-out;
will-change: transform;
}
.anticon-class {
display: block;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
monospace;
white-space: nowrap;
text-align: center; text-align: center;
list-style: none; transform: scale(0.83);
background-color: inherit;
border-radius: 4px;
cursor: pointer;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
.rtl & { ${antCls}-badge {
margin: 3px 0; transition: color 0.3s ease-in-out;
padding: 10px 0 0;
}
${iconCls} {
margin: 12px 0 8px;
font-size: 36px;
transition: transform 0.3s ease-in-out;
will-change: transform;
}
.anticon-class {
display: block;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
monospace;
white-space: nowrap;
text-align: center;
transform: scale(0.83);
${antCls}-badge {
transition: color 0.3s ease-in-out;
}
}
&:hover {
color: #fff;
background-color: ${token.colorPrimary};
${iconCls} {
transform: scale(1.4);
}
${antCls}-badge {
color: #fff;
}
}
&.TwoTone:hover {
background-color: #8ecafe;
}
&.copied:hover {
color: rgba(255, 255, 255, 0.2);
}
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
background: #1677ff;
line-height: 110px;
text-align: center;
opacity: 0;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
content: 'Copied!';
}
&.copied::after {
opacity: 1;
} }
} }
}
.copied-code { &:hover {
padding: 2px 4px; color: #fff;
font-size: 12px; background-color: ${token.colorPrimary};
background: #f5f5f5;
border-radius: 2px; ${iconCls} {
transform: scale(1.4);
}
${antCls}-badge {
color: #fff;
}
}
&.TwoTone:hover {
background-color: #8ecafe;
}
&.copied:hover {
color: rgba(255, 255, 255, 0.2);
}
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
line-height: 110px;
text-align: center;
background: #1677ff;
opacity: 0;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
content: 'Copied!';
}
&.copied::after {
opacity: 1;
}
} }
`} }
.copied-code {
padding: 2px 4px;
font-size: 12px;
background: #f5f5f5;
border-radius: 2px;
}
`}
/> />
); );
}; };

82
.dumi/theme/common/styles/IconPickSearcher.tsx
View File

@ -10,63 +10,63 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
.icon-pic-searcher { .icon-pic-searcher {
display: inline-block; display: inline-block;
margin: 0 8px; margin: 0 8px;
.icon-pic-btn { .icon-pic-btn {
color: ${token.colorIcon}; color: ${token.colorIcon};
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
color: ${token.colorIconHover}; color: ${token.colorIconHover};
}
} }
} }
}
.icon-pic-preview { .icon-pic-preview {
width: 66px; width: 66px;
height: 66px; height: 66px;
margin-top: 10px; margin-top: 10px;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
border: 1px solid ${token.colorBorder}; border: 1px solid ${token.colorBorder};
border-radius: 4px; border-radius: 4px;
> img { > img {
max-width: 50px; max-width: 50px;
max-height: 50px; max-height: 50px;
} }
}
.icon-pic-search-result {
min-height: 50px;
padding: 0 10px;
> .result-tip {
padding: 10px 0;
color: ${token.colorTextSecondary};
} }
.icon-pic-search-result { > table {
min-height: 50px; width: 100%;
padding: 0 10px;
> .result-tip { .col-icon {
width: 80px;
padding: 10px 0; padding: 10px 0;
color: ${token.colorTextSecondary};
}
> table { > ${iconCls} {
width: 100%; font-size: 30px;
.col-icon { :hover {
width: 80px; color: ${token.colorLinkHover};
padding: 10px 0;
> ${iconCls} {
font-size: 30px;
:hover {
color: ${token.colorLinkHover};
}
} }
} }
} }
} }
`} }
`}
/> />
); );
}; };

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

@ -13,446 +13,446 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
.markdown { .markdown {
color: ${token.colorText}; color: ${token.colorText};
font-size: 14px; font-size: 14px;
line-height: 2;
}
.highlight {
line-height: 1.5;
}
.markdown img {
max-width: calc(100% - 32px);
max-height: 100%;
}
.markdown p > img {
margin: 34px 0;
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
}
.markdown p > img.markdown-inline-image {
margin: 0;
box-shadow: none;
}
.markdown h1 {
margin-top: 8px;
margin-bottom: 20px;
color: ${token.colorTextHeading};
font-weight: 500;
font-size: 30px;
font-family: Avenir, ${token.fontFamily}, sans-serif;
line-height: 38px;
.subtitle {
margin-left: 12px;
}
}
.markdown h2 {
font-size: 24px;
line-height: 32px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
clear: both;
margin: 1.6em 0 0.6em;
color: ${token.colorTextHeading};
font-weight: 500;
font-family: Avenir, ${token.fontFamily}, sans-serif;
}
.markdown h3 {
font-size: 18px;
}
.markdown h4 {
font-size: 16px;
}
.markdown h5 {
font-size: 14px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
clear: both;
height: 1px;
margin: 24px 0;
background: ${token.colorSplit};
border: 0;
}
.markdown p,
.markdown pre {
margin: 1em 0;
${antCls}-row-rtl & {
direction: rtl;
text-align: right;
}
}
.markdown ul > li {
margin-left: 20px;
padding-left: 4px;
list-style-type: circle;
.rtl & {
margin-right: 20px;
margin-left: 0;
padding-right: 4px;
padding-left: 0;
}
&:empty {
display: none;
}
}
.markdown ol > li {
margin-left: 20px;
padding-left: 4px;
list-style-type: decimal;
${antCls}-row-rtl & {
margin-right: 20px;
margin-left: 0;
padding-right: 4px;
padding-left: 0;
}
}
.markdown ul > li > p,
.markdown ol > li > p {
margin: 0.2em 0;
}
.markdown code {
margin: 0 1px;
padding: 0.2em 0.4em;
font-size: 0.9em;
background: ${token.siteMarkdownCodeBg};
border: 1px solid ${token.colorSplit};
border-radius: 3px;
}
.markdown pre {
font-family: ${token.codeFamily};
background: ${token.siteMarkdownCodeBg};
border-radius: ${token.borderRadius}px;
}
.markdown pre code {
margin: 0;
padding: 0;
overflow: auto;
color: ${token.colorText};
font-size: ${Math.max(token.fontSize - 1, 12)}px;
direction: ltr;
text-align: left;
background: #f5f5f5;
border: none;
}
.markdown strong,
.markdown b {
font-weight: 500;
}
.markdown .dumi-default-source-code {
margin: 1em 0;
background-color: ${token.siteMarkdownCodeBg};
border-radius: ${token.borderRadius}px;
> pre.prism-code {
padding: 12px 20px;
font-size: 13px;
line-height: 2; line-height: 2;
} }
}
.highlight { .markdown table td > a:not(:last-child) {
line-height: 1.5; margin-right: 0 !important;
&::after {
position: relative !important;
}
}
.markdown blockquote {
margin: 1em 0;
padding-left: 0.8em;
color: ${token.colorTextSecondary};
font-size: 90%;
border-left: 4px solid ${token.colorSplit};
.rtl & {
padding-right: 0.8em;
padding-left: 0;
border-right: 4px solid ${token.colorSplit};
border-left: none;
}
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
margin-left: 8px;
opacity: 0;
transition: opacity 0.3s;
.rtl & {
margin-right: 8px;
margin-left: 0;
}
}
.markdown .waiting {
color: #ccc;
cursor: not-allowed;
}
.markdown a.edit-button {
display: inline-block;
margin-left: 8px;
text-decoration: none;
.rtl & {
margin-right: 8px;
margin-left: 0;
transform: rotateY(180deg);
} }
.markdown img { ${antCls}icon {
max-width: calc(100% - 32px); display: block;
max-height: 100%;
}
.markdown p > img {
margin: 34px 0;
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
}
.markdown p > img.markdown-inline-image {
margin: 0;
box-shadow: none;
}
.markdown h1 {
margin-top: 8px;
margin-bottom: 20px;
color: ${token.colorTextHeading};
font-weight: 500;
font-size: 30px;
font-family: Avenir, ${token.fontFamily}, sans-serif;
line-height: 38px;
.subtitle {
margin-left: 12px;
}
}
.markdown h2 {
font-size: 24px;
line-height: 32px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
clear: both;
margin: 1.6em 0 0.6em;
color: ${token.colorTextHeading};
font-weight: 500;
font-family: Avenir, ${token.fontFamily}, sans-serif;
}
.markdown h3 {
font-size: 18px;
}
.markdown h4 {
font-size: 16px;
}
.markdown h5 {
font-size: 14px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
clear: both;
height: 1px;
margin: 24px 0;
background: ${token.colorSplit};
border: 0;
}
.markdown p,
.markdown pre {
margin: 1em 0;
${antCls}-row-rtl & {
direction: rtl;
text-align: right;
}
}
.markdown ul > li {
margin-left: 20px;
padding-left: 4px;
list-style-type: circle;
.rtl & {
margin-right: 20px;
margin-left: 0;
padding-right: 4px;
padding-left: 0;
}
&:empty {
display: none;
}
}
.markdown ol > li {
margin-left: 20px;
padding-left: 4px;
list-style-type: decimal;
${antCls}-row-rtl & {
margin-right: 20px;
margin-left: 0;
padding-right: 4px;
padding-left: 0;
}
}
.markdown ul > li > p,
.markdown ol > li > p {
margin: 0.2em 0;
}
.markdown code {
margin: 0 1px;
padding: 0.2em 0.4em;
font-size: 0.9em;
background: ${token.siteMarkdownCodeBg};
border: 1px solid ${token.colorSplit};
border-radius: 3px;
}
.markdown pre {
font-family: ${token.codeFamily};
background: ${token.siteMarkdownCodeBg};
border-radius: ${token.borderRadius}px;
}
.markdown pre code {
margin: 0;
padding: 0;
overflow: auto;
color: ${token.colorText};
font-size: ${Math.max(token.fontSize - 1, 12)}px;
direction: ltr;
text-align: left;
background: #f5f5f5;
border: none;
}
.markdown strong,
.markdown b {
font-weight: 500;
}
.markdown .dumi-default-source-code {
margin: 1em 0;
background-color: ${token.siteMarkdownCodeBg};
border-radius: ${token.borderRadius}px;
> pre.prism-code {
padding: 12px 20px;
font-size: 13px;
line-height: 2;
}
}
.markdown table td > a:not(:last-child) {
margin-right: 0 !important;
&::after {
position: relative !important;
}
}
.markdown blockquote {
margin: 1em 0;
padding-left: 0.8em;
color: ${token.colorTextSecondary}; color: ${token.colorTextSecondary};
font-size: 90%; font-size: 16px;
border-left: 4px solid ${token.colorSplit}; transition: all 0.3s;
.rtl & { &:hover {
padding-right: 0.8em; color: ${token.colorText};
padding-left: 0;
border-right: 4px solid ${token.colorSplit};
border-left: none;
} }
} }
}
.markdown blockquote p { .markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
display: inline-block;
opacity: 1;
}
.markdown > br,
.markdown > p > br {
clear: both;
}
.markdown .dumi-default-table {
table {
margin: 0; margin: 0;
} margin: 8px 0 16px;
overflow-x: auto;
overflow-y: hidden;
direction: ltr;
empty-cells: show;
border: 1px solid ${token.colorSplit};
border-collapse: collapse;
border-spacing: 0;
.markdown .anchor { th,
margin-left: 8px; td {
opacity: 0; padding: 12px 24px;
transition: opacity 0.3s; text-align: left;
border: 1px solid ${token.colorSplit};
.rtl & { &:first-child {
margin-right: 8px; border-left: 1px solid ${token.colorSplit};
margin-left: 0; }
}
}
.markdown .waiting { &:last-child {
color: #ccc; border-right: 1px solid ${token.colorSplit};
cursor: not-allowed; }
}
.markdown a.edit-button { img {
display: inline-block; max-width: unset;
margin-left: 8px; }
text-decoration: none;
.rtl & {
margin-right: 8px;
margin-left: 0;
transform: rotateY(180deg);
} }
${antCls}icon { th {
display: block; color: #5c6b77;
color: ${token.colorTextSecondary}; font-weight: 500;
font-size: 16px; white-space: nowrap;
background: rgba(0, 0, 0, 0.02);
border-width: 1px 1px 2px;
}
tbody tr {
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
color: ${token.colorText}; background: rgba(60, 90, 100, 0.04);
} }
} }
} }
.markdown h1:hover .anchor, table.component-api-table {
.markdown h2:hover .anchor, margin: 2em 0;
.markdown h3:hover .anchor, overflow-x: auto;
.markdown h4:hover .anchor, overflow-y: hidden;
.markdown h5:hover .anchor, font-size: ${Math.max(token.fontSize - 1, 12)}px;
.markdown h6:hover .anchor { font-family: ${token.codeFamily};
display: inline-block; line-height: ${token.lineHeight};
opacity: 1; border: 1px solid ${token.colorSplit};
} border-width: 0 1px;
.markdown > br, th {
.markdown > p > br { border-width: 1px 0 2px;
clear: both; }
}
.markdown .dumi-default-table { td {
table { border-width: 1px 0;
margin: 0; &:first-child {
overflow-x: auto; width: 18%;
overflow-y: hidden; min-width: 58px;
margin: 8px 0 16px; color: #595959;
direction: ltr; font-weight: 600;
empty-cells: show;
border: 1px solid ${token.colorSplit};
border-collapse: collapse;
border-spacing: 0;
th,
td {
padding: 12px 24px;
text-align: left;
border: 1px solid ${token.colorSplit};
&:first-child {
border-left: 1px solid ${token.colorSplit};
}
&:last-child {
border-right: 1px solid ${token.colorSplit};
}
img {
max-width: unset;
}
}
th {
color: #5c6b77;
border-width: 1px 1px 2px;
font-weight: 500;
white-space: nowrap; white-space: nowrap;
background: rgba(0, 0, 0, 0.02);
} }
tbody tr { &:nth-child(2) {
transition: all 0.3s; width: 55%;
min-width: 160px;
&:hover {
background: rgba(60, 90, 100, 0.04);
}
}
}
table.component-api-table {
margin: 2em 0;
overflow-x: auto;
overflow-y: hidden;
font-size: ${Math.max(token.fontSize - 1, 12)}px;
font-family: ${token.codeFamily};
line-height: ${token.lineHeight};
border: 1px solid ${token.colorSplit};
border-width: 0 1px;
th {
border-width: 1px 0 2px;
} }
td { &:nth-child(3) {
border-width: 1px 0; width: 22%;
&:first-child { color: ${token['magenta-7']};
width: 18%; font-size: ${Math.max(token.fontSize - 1, 12)}px;
min-width: 58px; }
color: #595959;
font-weight: 600;
white-space: nowrap;
}
&:nth-child(2) { &:nth-child(4) {
width: 55%; width: 15%;
min-width: 160px; font-size: ${Math.max(token.fontSize - 1, 12)}px;
} }
&:nth-child(3) { &:nth-child(5) {
width: 22%; width: 8%;
color: ${token['magenta-7']}; font-size: ${Math.max(token.fontSize - 1, 12)}px;
font-size: ${Math.max(token.fontSize - 1, 12)}px; }
}
&:nth-child(4) { &:nth-last-child(3):first-child {
width: 15%; width: 38%;
font-size: ${Math.max(token.fontSize - 1, 12)}px; }
}
&:nth-child(5) { &:nth-last-child(3):first-child ~ td:nth-last-child(2) {
width: 8%; width: 70%;
font-size: ${Math.max(token.fontSize - 1, 12)}px;
}
&:nth-last-child(3):first-child {
width: 38%;
}
&:nth-last-child(3):first-child ~ td:nth-last-child(2) {
width: 70%;
}
} }
} }
} }
}
.grid-demo, .grid-demo,
[id^='components-grid-demo-'] { [id^='components-grid-demo-'] {
${antCls}-row > div, ${antCls}-row > div,
.code-box-demo ${antCls}-row > div { .code-box-demo ${antCls}-row > div {
min-height: 30px; min-height: 30px;
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-radius: 0; border-radius: 0;
}
.code-box-demo ${antCls}-row > div:not(.gutter-row) {
padding: 16px 0;
background: ${demoGridColor};
&:nth-child(2n + 1) {
background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
} }
}
.code-box-demo ${antCls}-row > div:not(.gutter-row) { ${antCls}-row .demo-col,
padding: 16px 0;
background: ${demoGridColor};
&:nth-child(2n + 1) {
background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
}
}
${antCls}-row .demo-col,
.code-box-demo ${antCls}-row .demo-col { .code-box-demo ${antCls}-row .demo-col {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding: 30px 0; padding: 30px 0;
color: ${token.colorWhite}; color: ${token.colorWhite};
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
border: none; border: none;
} }
${antCls}-row .demo-col-1 { ${antCls}-row .demo-col-1 {
background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()}; background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
} }
${antCls}-row .demo-col-2, ${antCls}-row .demo-col-2,
.code-box-demo ${antCls}-row .demo-col-2 { .code-box-demo ${antCls}-row .demo-col-2 {
background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()}; background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
} }
${antCls}-row .demo-col-3, ${antCls}-row .demo-col-3,
.code-box-demo ${antCls}-row .demo-col-3 { .code-box-demo ${antCls}-row .demo-col-3 {
color: #999; color: #999;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
} }
${antCls}-row .demo-col-4, ${antCls}-row .demo-col-4,
.code-box-demo ${antCls}-row .demo-col-4 { .code-box-demo ${antCls}-row .demo-col-4 {
background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()}; background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()};
} }
${antCls}-row .demo-col-5, ${antCls}-row .demo-col-5,
.code-box-demo ${antCls}-row .demo-col-5 { .code-box-demo ${antCls}-row .demo-col-5 {
color: #999; color: #999;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
}
.code-box-demo .height-100 {
height: 100px;
line-height: 100px;
}
.code-box-demo .height-50 {
height: 50px;
line-height: 50px;
}
.code-box-demo .height-120 {
height: 120px;
line-height: 120px;
}
.code-box-demo .height-80 {
height: 80px;
line-height: 80px;
}
} }
[id='components-grid-demo-playground'], .code-box-demo .height-100 {
[id='components-grid-demo-gutter'] { height: 100px;
> .code-box-demo ${antCls}-row > div { line-height: 100px;
margin-top: 0;
margin-bottom: 0;
}
} }
`}
.code-box-demo .height-50 {
height: 50px;
line-height: 50px;
}
.code-box-demo .height-120 {
height: 120px;
line-height: 120px;
}
.code-box-demo .height-80 {
height: 80px;
line-height: 80px;
}
}
[id='components-grid-demo-playground'],
[id='components-grid-demo-gutter'] {
> .code-box-demo ${antCls}-row > div {
margin-top: 0;
margin-bottom: 0;
}
}
`}
/> />
); );
}; };

28
.dumi/theme/common/styles/NProgress.tsx
View File

@ -7,21 +7,21 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
#nprogress { #nprogress {
.bar { .bar {
background: ${token.colorPrimary}; background: ${token.colorPrimary};
}
.peg {
box-shadow: 0 0 10px ${token.colorPrimary}, 0 0 5px ${token.colorPrimary};
}
.spinner-icon {
border-top-color: ${token.colorPrimary};
border-left-color: ${token.colorPrimary};
}
} }
`}
.peg {
box-shadow: 0 0 10px ${token.colorPrimary}, 0 0 5px ${token.colorPrimary};
}
.spinner-icon {
border-top-color: ${token.colorPrimary};
border-left-color: ${token.colorPrimary};
}
}
`}
/> />
); );
}; };

414
.dumi/theme/common/styles/PreviewImage.tsx
View File

@ -8,237 +8,237 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
.preview-image-boxes { .preview-image-boxes {
display: flex; display: flex;
float: right; float: right;
clear: both; clear: both;
width: 496px; width: 496px;
margin: 0 0 70px 64px; margin: 0 0 70px 64px;
&-with-carousel { &-with-carousel {
width: 420px; width: 420px;
.preview-image-box img { .preview-image-box img {
padding: 0; padding: 0;
}
}
.ant-row-rtl & {
float: left;
margin: 0 64px 70px 0;
}
}
.preview-image-boxes + .preview-image-boxes {
margin-top: -35px;
}
.preview-image-box {
float: left;
width: 100%;
}
.preview-image-box + .preview-image-box {
margin-left: 24px;
.ant-row-rtl & {
margin-right: 24px;
margin-left: 0;
}
}
.preview-image-wrapper {
position: relative;
display: inline-block;
width: 100%;
padding: 16px;
text-align: center;
background: #f2f4f5;
}
.preview-image-wrapper.video {
display: block;
padding: 0;
background: 0;
}
.preview-image-wrapper video {
display: block;
width: 100%;
+ svg {
position: absolute;
top: 0;
left: 0;
}
}
.preview-image-wrapper.good::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 3px;
background: ${token.colorPrimary};
content: '';
}
.preview-image-wrapper.bad::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 3px;
background: ${token.colorError};
content: '';
}
.preview-image-title {
margin-top: 20px;
color: ${token.colorText};
font-size: 12px;
}
.preview-image-description {
margin-top: 2px;
color: ${token.colorTextSecondary};
font-size: 12px;
line-height: 1.5;
}
.preview-image-description hr {
margin: 2px 0;
background: none;
border: 0;
}
.preview-image-box img {
max-width: 100%;
padding: 12px;
background: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px;
cursor: pointer;
transition: all 0.3s;
&.no-padding {
padding: 0;
background: none;
}
}
.preview-image-boxes.preview-image-boxes-with-carousel img {
padding: 0;
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 ${token.colorBgContainer}, 0 4px 0 0 #ddd,
0 6px 0 0 ${token.colorBgContainer}, 0 7px 0 0 #ddd;
}
.preview-image-box img:hover {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}
.preview-img {
float: right;
clear: both;
max-width: 496px !important;
margin: 0 0 70px 64px;
padding: 16px;
background-color: #f2f4f5;
}
.image-modal {
text-align: center;
&-container {
position: relative;
text-align: center;
}
.ant-carousel {
.slick-slider {
padding-bottom: 24px;
img {
display: inline;
max-width: 100%;
} }
} }
.ant-row-rtl & { .slick-dots {
float: left; bottom: 4px;
margin: 0 64px 70px 0;
li button {
background: #888;
}
} }
} }
.preview-image-boxes + .preview-image-boxes { .image-modal-single.slick-slider {
margin-top: -35px; padding-bottom: 0;
} }
.preview-image-box { .image-modal-single .slick-dots {
float: left; display: none !important;
width: 100%;
} }
}
.preview-image-box + .preview-image-box { .transition-video-player,
margin-left: 24px; .motion-video-min {
float: right;
.ant-row-rtl & { width: 600px;
margin-right: 24px; padding: 0 0 70px 20px;
margin-left: 0;
}
}
.preview-image-wrapper { .preview-image-wrapper {
position: relative; padding: 0;
}
.ant-row-rtl & {
float: left;
}
}
.motion-video-min {
width: 390px;
}
.motion-principle-wrapper {
width: 100%;
max-width: 900px;
margin: 48px 0 24px;
}
.principle-wrapper {
width: 100%;
.principle {
display: inline-block; display: inline-block;
box-sizing: border-box;
width: 100%; width: 100%;
padding: 16px; min-height: 180px;
margin-right: 12.5%;
margin-bottom: 24px;
padding: 24px;
font-size: 24px;
text-align: center; text-align: center;
background: #f2f4f5; border: 1px solid #e8e8e8;
} border-radius: 4px;
.preview-image-wrapper.video { &:last-child {
display: block; margin-right: 0;
padding: 0;
background: 0;
}
.preview-image-wrapper video {
display: block;
width: 100%;
+ svg {
position: absolute;
top: 0;
left: 0;
}
}
.preview-image-wrapper.good::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 3px;
background: ${token.colorPrimary};
content: '';
}
.preview-image-wrapper.bad::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 3px;
background: ${token.colorError};
content: '';
}
.preview-image-title {
margin-top: 20px;
color: ${token.colorText};
font-size: 12px;
}
.preview-image-description {
margin-top: 2px;
color: ${token.colorTextSecondary};
font-size: 12px;
line-height: 1.5;
}
.preview-image-description hr {
margin: 2px 0;
background: none;
border: 0;
}
.preview-image-box img {
max-width: 100%;
padding: 12px;
background: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px;
cursor: pointer;
transition: all 0.3s;
&.no-padding {
padding: 0;
background: none;
}
}
.preview-image-boxes.preview-image-boxes-with-carousel img {
padding: 0;
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 ${token.colorBgContainer}, 0 4px 0 0 #ddd,
0 6px 0 0 ${token.colorBgContainer}, 0 7px 0 0 #ddd;
}
.preview-image-box img:hover {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}
.preview-img {
float: right;
clear: both;
max-width: 496px !important;
margin: 0 0 70px 64px;
padding: 16px;
background-color: #f2f4f5;
}
.image-modal {
text-align: center;
&-container {
position: relative;
text-align: center;
} }
.ant-carousel { h4 {
.slick-slider { margin: 16px 0 8px;
padding-bottom: 24px;
img {
display: inline;
max-width: 100%;
}
}
.slick-dots {
bottom: 4px;
li button {
background: #888;
}
}
} }
.image-modal-single.slick-slider { p {
padding-bottom: 0; font-size: 12px;
} line-height: 24px;
.image-modal-single .slick-dots {
display: none !important;
} }
} }
}
.transition-video-player, `}
.motion-video-min {
float: right;
width: 600px;
padding: 0 0 70px 20px;
.preview-image-wrapper {
padding: 0;
}
.ant-row-rtl & {
float: left;
}
}
.motion-video-min {
width: 390px;
}
.motion-principle-wrapper {
width: 100%;
max-width: 900px;
margin: 48px 0 24px;
}
.principle-wrapper {
width: 100%;
.principle {
display: inline-block;
box-sizing: border-box;
width: 100%;
min-height: 180px;
margin-right: 12.5%;
margin-bottom: 24px;
padding: 24px;
font-size: 24px;
text-align: center;
border: 1px solid #e8e8e8;
border-radius: 4px;
&:last-child {
margin-right: 0;
}
h4 {
margin: 16px 0 8px;
}
p {
font-size: 12px;
line-height: 24px;
}
}
}
`}
/> />
); );
}; };

86
.dumi/theme/common/styles/Reset.tsx
View File

@ -8,56 +8,54 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
@font-face { @font-face {
font-weight: normal; font-weight: normal;
font-family: PuHuiTi; font-family: PuHuiTi;
src: url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'), src: url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
url('//at.alicdn.com/t/webfont_6e11e43nfj.woff') format('woff'), url('//at.alicdn.com/t/webfont_6e11e43nfj.woff') format('woff'),
/* chrome、firefox */ url('//at.alicdn.com/t/webfont_6e11e43nfj.ttf') /* chrome、firefox */ url('//at.alicdn.com/t/webfont_6e11e43nfj.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ font-display: swap;
font-display: swap; }
}
@font-face { @font-face {
font-weight: bold; font-weight: bold;
font-family: PuHuiTi; font-family: PuHuiTi;
src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'), src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'), url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),
/* chrome、firefox */ url('//at.alicdn.com/t/webfont_exesdog9toj.ttf') /* chrome、firefox */ url('//at.alicdn.com/t/webfont_exesdog9toj.ttf')
format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
font-display: swap; font-display: swap;
} }
// 组件丰富，选用自如定制主题随心所欲设计语言与研发框架1234567890 QWERTYUIOPLKJHGFDSAZXCVBNM,.mnbvcxzasdfghjklpoiuytrewq // 组件丰富，选用自如定制主题随心所欲设计语言与研发框架1234567890 QWERTYUIOPLKJHGFDSAZXCVBNM,.mnbvcxzasdfghjklpoiuytrewq
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face { @font-face {
font-weight: 900; font-weight: 900;
font-family: 'AliPuHui'; font-family: 'AliPuHui';
src: url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2') src: url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2')
format('woff2'), format('woff2'),
url('//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') url('//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');
format('woff'); font-display: swap;
font-display: swap; }
}
html { html {
direction: initial; direction: initial;
&.rtl { &.rtl {
direction: rtl; direction: rtl;
}
} }
}
body { body {
overflow-x: hidden; overflow-x: hidden;
color: ${token.colorText}; color: ${token.colorText};
font-size: ${token.fontSize}px; font-size: ${token.fontSize}px;
font-family: ${token.fontFamily}; font-family: ${token.fontFamily};
line-height: ${token.lineHeight}; line-height: ${token.lineHeight};
background: ${token.colorBgContainer}; background: ${token.colorBgContainer};
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
} }
`} `}
/> />
); );
}; };

596
.dumi/theme/common/styles/Responsive.tsx
View File

@ -8,334 +8,334 @@ export default () => {
return ( return (
<Global <Global
styles={css` styles={css`
.nav-phone-icon { .nav-phone-icon {
position: absolute; position: absolute;
top: 25px; top: 25px;
right: 30px; right: 30px;
z-index: 1; z-index: 1;
display: none;
width: 16px;
height: 22px;
cursor: pointer;
}
@media only screen and (max-width: ${token.screenLG}px) {
.code-boxes-col-2-1,
.code-boxes-col-1-1 {
float: none;
width: 100%;
max-width: unset;
}
}
@media only screen and (max-width: 767.99px) {
.preview-image-boxes {
float: none;
width: 100%;
margin: 0 !important;
}
.preview-image-box {
width: 100%;
margin: 10px 0;
padding: 0;
}
.image-wrapper {
display: none; display: none;
width: 16px;
height: 22px;
cursor: pointer;
} }
@media only screen and (max-width: ${token.screenLG}px) { div.version {
.code-boxes-col-2-1, display: block;
.code-boxes-col-1-1 { margin: 29px auto 16px;
float: none; }
.toc {
display: none;
}
.nav-phone-icon {
display: block;
}
.main {
height: calc(100% - 86px);
}
.aside-container {
float: none;
width: auto;
padding-bottom: 30px;
border-right: 0;
}
.ant-row-rtl {
margin-right: 0;
margin-left: 0;
padding-right: 16px;
padding-left: 16px;
> .markdown > * {
width: 100% !important;
}
}
.main-wrapper {
width: 100%;
margin: 0;
border-radius: 0;
}
.prev-next-nav {
width: ~'calc(100% - 32px)';
margin-left: 16px;
.ant-row-rtl & {
margin-right: 16px;
margin-left: 64px;
}
}
.drawer {
.ant-menu-inline .ant-menu-item::after,
.ant-menu-vertical .ant-menu-item::after {
right: auto;
left: 0;
}
}
/** home 区块 **/
.home-page-wrapper {
.page {
h2 {
margin: 80px auto 64px;
}
}
.parallax-bg {
display: none;
}
}
.banner {
display: block;
height: 632px;
&-bg-wrapper {
display: none;
}
.img-wrapper,
.text-wrapper {
display: inline-block;
width: 100%; width: 100%;
min-width: unset;
max-width: unset; max-width: unset;
} margin: auto;
} text-align: center;
@media only screen and (max-width: 767.99px) {
.preview-image-boxes {
float: none;
width: 100%;
margin: 0 !important;
} }
.preview-image-box { .img-wrapper {
width: 100%; position: initial;
margin: 10px 0; margin-top: 20px;
padding: 0; text-align: center;
}
.image-wrapper { svg {
display: none;
}
div.version {
display: block;
margin: 29px auto 16px;
}
.toc {
display: none;
}
.nav-phone-icon {
display: block;
}
.main {
height: calc(100% - 86px);
}
.aside-container {
float: none;
width: auto;
padding-bottom: 30px;
border-right: 0;
}
.ant-row-rtl {
margin-right: 0;
margin-left: 0;
padding-right: 16px;
padding-left: 16px;
> .markdown > * {
width: 100% !important;
}
}
.main-wrapper {
width: 100%;
margin: 0;
border-radius: 0;
}
.prev-next-nav {
width: ~'calc(100% - 32px)';
margin-left: 16px;
.ant-row-rtl & {
margin-right: 16px;
margin-left: 64px;
}
}
.drawer {
.ant-menu-inline .ant-menu-item::after,
.ant-menu-vertical .ant-menu-item::after {
right: auto;
left: 0;
}
}
/** home 区块 **/
.home-page-wrapper {
.page {
h2 {
margin: 80px auto 64px;
}
}
.parallax-bg {
display: none;
}
}
.banner {
display: block;
height: 632px;
&-bg-wrapper {
display: none;
}
.img-wrapper,
.text-wrapper {
display: inline-block;
width: 100%; width: 100%;
min-width: unset; max-width: 260px;
max-width: unset; height: auto;
margin: auto; margin: 0 auto;
text-align: center; }
}
.text-wrapper {
min-height: 200px;
margin-top: 32px;
padding: 0;
h1 {
display: none;
} }
.img-wrapper { p {
position: initial; color: #314659;
margin-top: 20px; font-size: 14px;
line-height: 28px;
}
.banner-btns {
display: block;
min-width: 100%;
white-space: nowrap;
text-align: center; text-align: center;
svg { .banner-btn {
width: 100%; padding: 0 20px;
max-width: 260px; font-size: 14px;
height: auto;
margin: 0 auto;
} }
} }
.text-wrapper { .banner-promote {
min-height: 200px; min-width: 100%;
margin-top: 32px; margin-top: 32px;
padding: 0;
h1 { .ant-divider {
display: none; display: none;
} }
p { a {
color: #314659;
font-size: 14px; font-size: 14px;
line-height: 28px;
}
.banner-btns {
display: block;
min-width: 100%;
white-space: nowrap; white-space: nowrap;
text-align: center;
.banner-btn {
padding: 0 20px;
font-size: 14px;
}
}
.banner-promote {
min-width: 100%;
margin-top: 32px;
.ant-divider {
display: none;
}
a {
font-size: 14px;
white-space: nowrap;
img {
width: 20px;
}
}
}
}
}
.page1 {
min-height: 1300px;
.ant-row {
margin: 24px auto 64px;
> div {
margin-bottom: 48px;
}
}
}
.page2 {
min-height: 840px;
background: ${token.colorBgContainer};
&-content {
box-shadow: none;
}
&-components {
display: none;
}
&-product {
min-height: auto;
padding: 0 16px;
.product-block {
margin-bottom: 34px;
padding-bottom: 35px;
border-bottom: 1px solid ${token.colorSplit};
&:last-child {
margin-bottom: 32px;
border-bottom: none;
.block-text-wrapper {
height: auto;
}
}
.block-image-wrapper {
height: 88px;
img {
height: 100%;
}
}
.block-text-wrapper {
padding-bottom: 0;
border-bottom: none;
h4 {
margin-bottom: 4px;
font-size: 18px;
line-height: 24px;
}
p {
margin-bottom: 8px;
font-size: 12px;
line-height: 20px;
}
a {
line-height: 20px;
}
.components-button-wrapper {
margin-top: 16px;
font-size: 12px;
a {
display: block;
}
}
a.more-mobile-react,
a.more-mobile-angular {
margin-top: 0;
color: ${token.colorLink};
}
a.more-mobile-react:hover,
a.more-mobile-angular:hover {
color: #40a9ff;
}
}
}
}
}
.page3 {
min-height: 688px;
background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg')
no-repeat;
background-size: cover;
.ant-row {
margin: 0 8px;
}
.page3-block {
margin-bottom: 32px;
padding: 24px;
background: ${token.colorBgContainer};
border-radius: 4px;
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
&:nth-child(2) {
.page3-img-wrapper img {
display: block;
width: 70%;
margin: auto;
}
}
p {
font-size: 12px;
}
.page3-img-wrapper {
width: 20%;
img { img {
width: 100%; width: 20px;
} }
} }
.page3-text-wrapper {
width: 80%;
max-width: initial;
margin: 0;
padding-left: 16px;
}
} }
} }
} }
`}
.page1 {
min-height: 1300px;
.ant-row {
margin: 24px auto 64px;
> div {
margin-bottom: 48px;
}
}
}
.page2 {
min-height: 840px;
background: ${token.colorBgContainer};
&-content {
box-shadow: none;
}
&-components {
display: none;
}
&-product {
min-height: auto;
padding: 0 16px;
.product-block {
margin-bottom: 34px;
padding-bottom: 35px;
border-bottom: 1px solid ${token.colorSplit};
&:last-child {
margin-bottom: 32px;
border-bottom: none;
.block-text-wrapper {
height: auto;
}
}
.block-image-wrapper {
height: 88px;
img {
height: 100%;
}
}
.block-text-wrapper {
padding-bottom: 0;
border-bottom: none;
h4 {
margin-bottom: 4px;
font-size: 18px;
line-height: 24px;
}
p {
margin-bottom: 8px;
font-size: 12px;
line-height: 20px;
}
a {
line-height: 20px;
}
.components-button-wrapper {
margin-top: 16px;
font-size: 12px;
a {
display: block;
}
}
a.more-mobile-react,
a.more-mobile-angular {
margin-top: 0;
color: ${token.colorLink};
}
a.more-mobile-react:hover,
a.more-mobile-angular:hover {
color: #40a9ff;
}
}
}
}
}
.page3 {
min-height: 688px;
background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg')
no-repeat;
background-size: cover;
.ant-row {
margin: 0 8px;
}
.page3-block {
margin-bottom: 32px;
padding: 24px;
background: ${token.colorBgContainer};
border-radius: 4px;
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
&:nth-child(2) {
.page3-img-wrapper img {
display: block;
width: 70%;
margin: auto;
}
}
p {
font-size: 12px;
}
.page3-img-wrapper {
width: 20%;
img {
width: 100%;
}
}
.page3-text-wrapper {
width: 80%;
max-width: initial;
margin: 0;
padding-left: 16px;
}
}
}
}
`}
/> />
); );
}; };

0
.dumi/theme/slots/DemoContext.tsx → .dumi/theme/slots/DemoContext.ts
View File

0
.dumi/theme/slots/Header/interface.tsx → .dumi/theme/slots/Header/interface.ts
View File

0
.dumi/theme/slots/SiteContext.tsx → .dumi/theme/slots/SiteContext.ts
View File

0
.dumi/theme/static/style.js → .dumi/theme/static/style.ts
View File

0
.dumi/theme/utils.tsx → .dumi/theme/utils.ts
View File