mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
site: use css token (#48294)
* site: use css token * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix
This commit is contained in:
lijianan
GitHub
parent
fbbba6fa5e
commit
2acb7b217a
@ -12,7 +12,7 @@ function isVersionNumber(value?: string) {
|
||||
return value && /^\d+\.\d+\.\d+$/.test(value);
|
||||
}
|
||||
|
||||
const useStyle = createStyles(({ css }) => ({
|
||||
const useStyle = createStyles(({ css, token }) => ({
|
||||
link: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -21,6 +21,12 @@ const useStyle = createStyles(({ css }) => ({
|
||||
tag: css`
|
||||
margin-inline-end: 0;
|
||||
`,
|
||||
subtitle: css`
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
font-weight: normal;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
opacity: 0.8;
|
||||
`,
|
||||
}));
|
||||
|
||||
interface MenuItemLabelProps {
|
||||
@ -42,7 +48,7 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
|
||||
<Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
|
||||
<span>
|
||||
{title}
|
||||
{subtitle && <span className="chinese">{subtitle}</span>}
|
||||
{subtitle && <span className={styles.subtitle}>{subtitle}</span>}
|
||||
</span>
|
||||
{tag && (
|
||||
<Tag
|
||||
@ -60,7 +66,7 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
|
||||
<Link to={`${link}${search}`} className={className}>
|
||||
{before}
|
||||
{title}
|
||||
{subtitle && <span className="chinese">{subtitle}</span>}
|
||||
{subtitle && <span className={styles.subtitle}>{subtitle}</span>}
|
||||
{after}
|
||||
</Link>
|
||||
);
|
||||
@ -71,7 +77,7 @@ export interface UseMenuOptions {
|
||||
after?: React.ReactNode;
|
||||
}
|
||||
|
||||
const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
|
||||
const useMenu = (options: UseMenuOptions = {}): readonly [MenuProps['items'], string] => {
|
||||
const fullData = useFullSidebarData();
|
||||
const { pathname, search } = useLocation();
|
||||
const sidebarData = useSidebarData();
|
||||
@ -205,7 +211,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
|
||||
);
|
||||
}, [sidebarData, fullData, pathname, search, options]);
|
||||
|
||||
return [menuItems, pathname];
|
||||
return [menuItems, pathname] as const;
|
||||
};
|
||||
|
||||
export default useMenu;
|
||||
|
||||
@ -51,8 +51,7 @@
|
||||
top: 120px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 0 auto;
|
||||
width: 420px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -117,7 +116,7 @@
|
||||
.mirror-modal-cancel-btn {
|
||||
border: 1px solid #eee;
|
||||
color: #000;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.mirror-modal-cancel-btn:hover {
|
||||
|
||||
@ -7,7 +7,7 @@ import { Link, useLocation } from 'dumi';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import SiteContext from '../../../theme/slots/SiteContext';
|
||||
import * as utils from '../../../theme/utils';
|
||||
import { GroupMask } from './Group';
|
||||
import GroupMaskLayer from './GroupMaskLayer';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
@ -50,6 +50,39 @@ const useStyle = () => {
|
||||
btnWrap: css`
|
||||
margin-bottom: ${token.marginXL}px;
|
||||
`,
|
||||
layer: css`
|
||||
text-align: center;
|
||||
padding-top: ${token.marginFar - 16}px;
|
||||
padding-bottom: ${token.marginFarSM}px;
|
||||
`,
|
||||
mobileBg: css`
|
||||
width: 100%;
|
||||
`,
|
||||
videoWrap: css`
|
||||
height: 320px;
|
||||
background-color: #77c6ff;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
`,
|
||||
video: css`
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
`,
|
||||
bg: css`
|
||||
flex: auto;
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 100%;
|
||||
`,
|
||||
bg1: css`
|
||||
background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ);
|
||||
background-position: 100% 0;
|
||||
`,
|
||||
bg2: css`
|
||||
background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ);
|
||||
background-position: 0 0;
|
||||
margin-inline-start: -1px;
|
||||
`,
|
||||
}))();
|
||||
};
|
||||
|
||||
@ -65,51 +98,24 @@ const Banner: React.FC<React.PropsWithChildren> = ({ children }) => {
|
||||
{/* Banner Placeholder Motion */}
|
||||
{isMobile ? (
|
||||
<img
|
||||
className={styles.mobileBg}
|
||||
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JmlaR5oQn3MAAAAAAAAAAAAADrJ8AQ/original"
|
||||
style={{ width: '100%' }}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
height: 320,
|
||||
background: '#77C6FF',
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ)`,
|
||||
flex: 'auto',
|
||||
backgroundRepeat: 'repeat-x',
|
||||
backgroundPosition: '100% 0',
|
||||
backgroundSize: 'auto 100%',
|
||||
}}
|
||||
/>
|
||||
|
||||
<video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
|
||||
<div className={classNames(styles.videoWrap)}>
|
||||
<div className={classNames(styles.bg, styles.bg1)} />
|
||||
<video className={styles.video} autoPlay muted loop>
|
||||
<source
|
||||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
|
||||
type="video/webm"
|
||||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
|
||||
/>
|
||||
<source
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
|
||||
type="video/mp4"
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
|
||||
/>
|
||||
</video>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ)`,
|
||||
flex: 'auto',
|
||||
backgroundRepeat: 'repeat-x',
|
||||
backgroundPosition: '0 0',
|
||||
backgroundSize: 'auto 100%',
|
||||
marginLeft: -1,
|
||||
}}
|
||||
/>
|
||||
<div className={classNames(styles.bg, styles.bg2)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -121,14 +127,7 @@ const Banner: React.FC<React.PropsWithChildren> = ({ children }) => {
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/b3b8dc41-dce8-471f-9d81-9a0204f27d03.svg"
|
||||
alt="Ant Design"
|
||||
/>
|
||||
|
||||
<GroupMask
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
paddingTop: token.marginFar - 16,
|
||||
paddingBottom: token.marginFarSM,
|
||||
}}
|
||||
>
|
||||
<GroupMaskLayer className={styles.layer}>
|
||||
{/* Image Left Top */}
|
||||
<img
|
||||
style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
|
||||
@ -166,7 +165,7 @@ const Banner: React.FC<React.PropsWithChildren> = ({ children }) => {
|
||||
</Link>
|
||||
</Flex>
|
||||
{children}
|
||||
</GroupMask>
|
||||
</GroupMaskLayer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -69,7 +69,7 @@ const useStyle = () => {
|
||||
card: css`
|
||||
padding: ${token.paddingSM}px;
|
||||
border-radius: ${token.borderRadius * 2}px;
|
||||
background: ${isRootDark ? 'rgba(0,0,0,0.45)' : token.colorBgElevated};
|
||||
background: ${isRootDark ? 'rgba(0, 0, 0, 0.45)' : token.colorBgElevated};
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.03),
|
||||
0 1px 6px -1px rgba(0, 0, 0, 0.02),
|
||||
@ -86,8 +86,8 @@ const useStyle = () => {
|
||||
display: block;
|
||||
border-radius: ${token.borderRadius * 2}px;
|
||||
padding: ${token.paddingMD}px ${token.paddingLG}px;
|
||||
background: ${isRootDark ? 'rgba(0,0,0,0.25)' : 'rgba(0, 0, 0, 0.02)'};
|
||||
border: 1px solid ${isRootDark ? 'rgba(255,255,255, 0.45)' : 'rgba(0, 0, 0, 0.06)'};
|
||||
background: ${isRootDark ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.02)'};
|
||||
border: 1px solid ${isRootDark ? 'rgba(255, 255, 255, 0.45)' : 'rgba(0, 0, 0, 0.06)'};
|
||||
|
||||
img {
|
||||
height: 48px;
|
||||
@ -96,7 +96,7 @@ const useStyle = () => {
|
||||
}))();
|
||||
};
|
||||
|
||||
export default function DesignFramework() {
|
||||
const DesignFramework: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
const token = useTheme();
|
||||
const { styles } = useStyle();
|
||||
@ -174,4 +174,6 @@ export default function DesignFramework() {
|
||||
})}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default DesignFramework;
|
||||
|
||||
@ -1,68 +1,46 @@
|
||||
import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { Typography } from 'antd';
|
||||
import { useTheme } from 'antd-style';
|
||||
import { createStyles, useTheme } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import SiteContext from '../../../theme/slots/SiteContext';
|
||||
import GroupMaskLayer from './GroupMaskLayer';
|
||||
|
||||
export interface GroupMaskProps {
|
||||
style?: React.CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
|
||||
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
|
||||
onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
|
||||
}
|
||||
|
||||
export const GroupMask: React.FC<GroupMaskProps> = (props) => {
|
||||
const { children, style, disabled, onMouseMove, onMouseEnter, onMouseLeave } = props;
|
||||
const additionalStyle: React.CSSProperties = disabled
|
||||
? {}
|
||||
: {
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="site-mask"
|
||||
style={{ position: 'relative', ...style, ...additionalStyle }}
|
||||
onMouseMove={onMouseMove}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const useStyle = createStyles(({ css, token }) => ({
|
||||
box: css`
|
||||
position: relative;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
`,
|
||||
marginStyle: css`
|
||||
max-width: 1208px;
|
||||
margin-inline: auto;
|
||||
box-sizing: border-box;
|
||||
padding-inline: ${token.marginXXL}px;
|
||||
`,
|
||||
withoutChildren: css`
|
||||
min-height: 300px;
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
background-color: '#e9e9e9';
|
||||
`,
|
||||
}));
|
||||
|
||||
export interface GroupProps {
|
||||
id?: string;
|
||||
title?: React.ReactNode;
|
||||
titleColor?: string;
|
||||
description?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
background?: string;
|
||||
|
||||
/** 是否不使用两侧 margin */
|
||||
collapse?: boolean;
|
||||
|
||||
decoration?: React.ReactNode;
|
||||
}
|
||||
|
||||
const Group: React.FC<GroupProps> = (props) => {
|
||||
const Group: React.FC<React.PropsWithChildren<GroupProps>> = (props) => {
|
||||
const { id, title, titleColor, description, children, decoration, background, collapse } = props;
|
||||
const token = useTheme();
|
||||
const { styles } = useStyle();
|
||||
const { isMobile } = useContext(SiteContext);
|
||||
|
||||
const marginStyle: React.CSSProperties = collapse
|
||||
? {}
|
||||
: {
|
||||
maxWidth: 1208,
|
||||
marginInline: 'auto',
|
||||
boxSizing: 'border-box',
|
||||
paddingInline: isMobile ? token.margin : token.marginXXL,
|
||||
};
|
||||
const childNode = (
|
||||
<>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
@ -82,38 +60,22 @@ const Group: React.FC<GroupProps> = (props) => {
|
||||
<Typography.Paragraph
|
||||
style={{
|
||||
color: titleColor,
|
||||
marginBottom: isMobile ? token.marginXXL : (token as any).marginFarXS,
|
||||
marginBottom: isMobile ? token.marginXXL : token.marginFarXS,
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
|
||||
<div style={marginStyle}>
|
||||
{children ? (
|
||||
<div>{children}</div>
|
||||
) : (
|
||||
<div
|
||||
style={{ borderRadius: token.borderRadiusLG, minHeight: 300, background: '#e9e9e9' }}
|
||||
/>
|
||||
)}
|
||||
<div className={classNames({ [styles.marginStyle]: !collapse })}>
|
||||
{children ? <div>{children}</div> : <div className={styles.withoutChildren} />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ position: 'relative', background, transition: `all ${token.motionDurationSlow}` }}
|
||||
>
|
||||
<div style={{ backgroundColor: background }} className={styles.box}>
|
||||
<div style={{ position: 'absolute', inset: 0 }}>{decoration}</div>
|
||||
<GroupMask
|
||||
disabled={!!background}
|
||||
style={{
|
||||
paddingBlock: (token as any).marginFarSM,
|
||||
}}
|
||||
>
|
||||
{childNode}
|
||||
</GroupMask>
|
||||
<GroupMaskLayer style={{ paddingBlock: token.marginFarSM }}>{childNode}</GroupMaskLayer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
36
.dumi/pages/index/components/GroupMaskLayer.tsx
Normal file
36
.dumi/pages/index/components/GroupMaskLayer.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { createStyles } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const useStyle = createStyles(({ css }) => ({
|
||||
siteMask: css`
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
`,
|
||||
}));
|
||||
|
||||
export interface GroupMaskLayerProps {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
|
||||
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
|
||||
onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
|
||||
}
|
||||
|
||||
const GroupMaskLayer: React.FC<React.PropsWithChildren<GroupMaskLayerProps>> = (props) => {
|
||||
const { children, className, style, onMouseMove, onMouseEnter, onMouseLeave } = props;
|
||||
const { styles } = useStyle();
|
||||
return (
|
||||
<div
|
||||
style={style}
|
||||
className={classNames(className, styles.siteMask)}
|
||||
onMouseMove={onMouseMove}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupMaskLayer;
|
||||
@ -6,7 +6,7 @@ import { Link, useLocation } from 'dumi';
|
||||
import useLocale from '../../../../hooks/useLocale';
|
||||
import SiteContext from '../../../../theme/slots/SiteContext';
|
||||
import * as utils from '../../../../theme/utils';
|
||||
import { GroupMask } from '../Group';
|
||||
import GroupMaskLayer from '../GroupMaskLayer';
|
||||
|
||||
const ComponentsBlock = React.lazy(() => import('./ComponentsBlock'));
|
||||
|
||||
@ -28,7 +28,7 @@ const useStyle = () => {
|
||||
const { direction } = React.useContext(ConfigProvider.ConfigContext);
|
||||
const isRTL = direction === 'rtl';
|
||||
return createStyles(({ token, css, cx }) => {
|
||||
const textShadow = `0 0 3px ${token.colorBgContainer}`;
|
||||
const textShadow = `0 0 4px ${token.colorBgContainer}`;
|
||||
|
||||
const mask = cx(css`
|
||||
position: absolute;
|
||||
@ -114,7 +114,7 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
|
||||
const isZhCN = utils.isZhCN(pathname);
|
||||
|
||||
return (
|
||||
<GroupMask>
|
||||
<GroupMaskLayer>
|
||||
{/* Image Left Top */}
|
||||
<img
|
||||
style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
|
||||
@ -154,7 +154,7 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
|
||||
</Flex>
|
||||
<div className={styles.child}>{children}</div>
|
||||
</div>
|
||||
</GroupMask>
|
||||
</GroupMaskLayer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -23,12 +23,9 @@ const useStyle = createStyles(({ token }) => ({
|
||||
`,
|
||||
}));
|
||||
|
||||
const onShow = () => ({
|
||||
opacity: 1,
|
||||
});
|
||||
const onHide = () => ({
|
||||
opacity: 0,
|
||||
});
|
||||
const onShow = () => ({ opacity: 1 });
|
||||
|
||||
const onHide = () => ({ opacity: 0 });
|
||||
|
||||
const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight }) => {
|
||||
const activeColor = useMemo(() => getClosetColor(colorPrimary), [colorPrimary]);
|
||||
@ -68,10 +65,7 @@ const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight
|
||||
<source srcSet={entity.url} type="image/jpeg" />
|
||||
<img
|
||||
className={cls}
|
||||
style={{
|
||||
...style,
|
||||
opacity: isLight ? opacity : 0,
|
||||
}}
|
||||
style={{ ...style, opacity: isLight ? opacity : 0 }}
|
||||
src={entity.url}
|
||||
alt=""
|
||||
/>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { Carousel, Typography } from 'antd';
|
||||
import { createStyles, css, useTheme } from 'antd-style';
|
||||
import { Typography, Carousel } from 'antd';
|
||||
|
||||
import { getCarouselStyle } from '../util';
|
||||
|
||||
const useStyle = createStyles(() => {
|
||||
@ -75,7 +76,7 @@ export interface MobileCarouselProps {
|
||||
description?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function MobileCarousel(props: MobileCarouselProps) {
|
||||
const MobileCarousel: React.FC<MobileCarouselProps> = (props) => {
|
||||
const { styles } = useStyle();
|
||||
const { id, title, description } = props;
|
||||
const token = useTheme();
|
||||
@ -115,4 +116,6 @@ export default function MobileCarousel(props: MobileCarouselProps) {
|
||||
</Carousel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default MobileCarousel;
|
||||
|
||||
@ -134,8 +134,6 @@ const useStyle = createStyles(({ token, cx }) => {
|
||||
margin-inline-start: auto;
|
||||
`,
|
||||
|
||||
darkSideMenu: css``,
|
||||
|
||||
header: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -169,7 +167,7 @@ const useStyle = createStyles(({ token, cx }) => {
|
||||
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
`,
|
||||
@ -476,7 +474,7 @@ export default function Theme() {
|
||||
<Sider className={classNames(styles.transBg, 'site-layout-background')} width={200}>
|
||||
<Menu
|
||||
mode="inline"
|
||||
className={classNames(styles.transBg, !isLight && styles.darkSideMenu)}
|
||||
className={classNames(styles.transBg)}
|
||||
selectedKeys={['Themes']}
|
||||
openKeys={['Design']}
|
||||
style={{ height: '100%', borderRight: 0 }}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { enUS, zhCN } from 'antd-token-previewer';
|
||||
import { Helmet } from 'dumi';
|
||||
import React, { Suspense, useEffect } from 'react';
|
||||
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||
import { Button, message, Skeleton } from 'antd';
|
||||
import { enUS, zhCN } from 'antd-token-previewer';
|
||||
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||
import { Helmet } from 'dumi';
|
||||
|
||||
import useLocale from '../../hooks/useLocale';
|
||||
|
||||
const ThemeEditor = React.lazy(() => import('antd-token-previewer/lib/ThemeEditor'));
|
||||
@ -34,7 +35,7 @@ const locales = {
|
||||
|
||||
const ANT_DESIGN_V5_THEME_EDITOR_THEME = 'ant-design-v5-theme-editor-theme';
|
||||
|
||||
const CustomTheme = () => {
|
||||
const CustomTheme: React.FC = () => {
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [locale, lang] = useLocale(locales);
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
|
||||
import { createStyles } from 'antd-style';
|
||||
import * as React from 'react';
|
||||
|
||||
interface ColorChunkProps {
|
||||
children?: React.ReactNode;
|
||||
@ -9,20 +9,20 @@ interface ColorChunkProps {
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
codeSpan: css`
|
||||
padding: 0.2em 0.4em;
|
||||
font-size: 0.9em;
|
||||
background: ${token.siteMarkdownCodeBg};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
font-family: monospace;
|
||||
`,
|
||||
padding: 0.2em 0.4em;
|
||||
font-size: 0.9em;
|
||||
background: ${token.siteMarkdownCodeBg};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
font-family: monospace;
|
||||
`,
|
||||
dot: css`
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-inline-end: 4px;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
`,
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-inline-end: ${token.marginXXS}px;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
`,
|
||||
}));
|
||||
|
||||
const ColorChunk: React.FC<ColorChunkProps> = (props) => {
|
||||
|
||||
@ -41,7 +41,7 @@ const useStyle = createStyles(({ token }) => ({
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
column-gap: 4px;
|
||||
border-radius: 4px;
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
padding-inline: ${token.paddingXS}px;
|
||||
transition: all ${token.motionDurationSlow} !important;
|
||||
font-family: ${token.codeFamily};
|
||||
|
||||
@ -14,7 +14,7 @@ import proComponentsList from './ProComponentsList';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
componentsOverviewGroupTitle: css`
|
||||
margin-bottom: 24px !important;
|
||||
margin-bottom: ${token.marginLG}px !important;
|
||||
`,
|
||||
componentsOverviewTitle: css`
|
||||
overflow: hidden;
|
||||
@ -39,7 +39,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
`,
|
||||
componentsOverviewAffix: css`
|
||||
display: flex;
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
justify-content: space-between;
|
||||
`,
|
||||
componentsOverviewSearch: css`
|
||||
@ -52,7 +52,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
componentsOverviewContent: css`
|
||||
&:empty:after {
|
||||
display: block;
|
||||
padding: 16px 0 40px;
|
||||
padding: ${token.padding}px 0 ${token.paddingMD * 2}px;
|
||||
color: ${token.colorTextDisabled};
|
||||
text-align: center;
|
||||
border-bottom: 1px solid ${token.colorSplit};
|
||||
|
||||
@ -52,7 +52,7 @@ const locales = {
|
||||
},
|
||||
};
|
||||
|
||||
const useStyle = createStyles(() => ({
|
||||
const useStyle = createStyles(({ token }) => ({
|
||||
tableTitle: css`
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@ -62,15 +62,15 @@ const useStyle = createStyles(() => ({
|
||||
line-height: 40px;
|
||||
`,
|
||||
arrowIcon: css`
|
||||
font-size: 16px;
|
||||
margin-inline-end: 8px;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
margin-inline-end: ${token.marginXS}px;
|
||||
& svg {
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
}
|
||||
`,
|
||||
help: css`
|
||||
margin-inline-start: 8px;
|
||||
font-size: 12px;
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
a {
|
||||
@ -98,7 +98,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
|
||||
const token = useTheme();
|
||||
const columns = useColumns();
|
||||
|
||||
const [open, setOpen] = useState<boolean>(defaultOpen || process.env.NODE_ENV !== 'production');
|
||||
const [open, setOpen] = useState<boolean>(defaultOpen ?? process.env.NODE_ENV !== 'production');
|
||||
|
||||
const { styles } = useStyle();
|
||||
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
* copied: https://github.com/arvinxx/dumi-theme-antd-style/tree/master/src/builtins/Container
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { type FC, type ReactNode } from 'react';
|
||||
import { Alert } from 'antd';
|
||||
|
||||
import useStyles from './style';
|
||||
|
||||
const Container: FC<{
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
import { createStyles } from 'antd-style';
|
||||
|
||||
const useStyles = createStyles(({ prefixCls, css }) => ({
|
||||
const useStyles = createStyles(({ token, prefixCls, css }) => ({
|
||||
container: css`
|
||||
margin: 8px 0;
|
||||
`,
|
||||
margin: ${token.marginXS}px 0;
|
||||
`,
|
||||
|
||||
alert: css`
|
||||
.${prefixCls}-alert-message {
|
||||
font-weight: bold;
|
||||
}
|
||||
`,
|
||||
.${prefixCls}-alert-message {
|
||||
font-weight: bold;
|
||||
}
|
||||
`,
|
||||
|
||||
/* 使用 `&&` 加一点点权重 */
|
||||
desc: css`
|
||||
&& p {
|
||||
margin: 0;
|
||||
}
|
||||
`,
|
||||
&& p {
|
||||
margin: 0;
|
||||
}
|
||||
`,
|
||||
}));
|
||||
|
||||
export default useStyles;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { DumiDemoGrid, FormattedMessage } from 'dumi';
|
||||
import {
|
||||
BugFilled,
|
||||
BugOutlined,
|
||||
@ -8,11 +7,13 @@ import {
|
||||
ExperimentFilled,
|
||||
ExperimentOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigProvider, Tooltip } from 'antd';
|
||||
import DemoContext from '../../slots/DemoContext';
|
||||
import classNames from 'classnames';
|
||||
import { DumiDemoGrid, FormattedMessage } from 'dumi';
|
||||
|
||||
import useLayoutState from '../../../hooks/useLayoutState';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import DemoContext from '../../slots/DemoContext';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
@ -55,7 +56,9 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
|
||||
const { previewerProps } = item;
|
||||
const { debug } = previewerProps;
|
||||
|
||||
if (debug && !showDebug) return acc;
|
||||
if (debug && !showDebug) {
|
||||
return acc;
|
||||
}
|
||||
|
||||
return acc.concat({
|
||||
...item,
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import Icon, * as AntdIcons from '@ant-design/icons';
|
||||
import type { SegmentedProps } from 'antd';
|
||||
import { Affix, Empty, Input, Segmented } from 'antd';
|
||||
import { createStyles, useTheme } from 'antd-style';
|
||||
import { useIntl } from 'dumi';
|
||||
import debounce from 'lodash/debounce';
|
||||
import type { SegmentedProps } from 'antd';
|
||||
import { Affix, Empty, Input, Segmented } from 'antd';
|
||||
|
||||
import Category from './Category';
|
||||
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
|
||||
import type { CategoriesKeys } from './fields';
|
||||
import { categories } from './fields';
|
||||
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
|
||||
|
||||
export enum ThemeType {
|
||||
Filled = 'Filled',
|
||||
@ -19,10 +20,10 @@ export enum ThemeType {
|
||||
|
||||
const allIcons: { [key: string]: any } = AntdIcons;
|
||||
|
||||
const useStyle = createStyles(({ css }) => ({
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
iconSearchAffix: css`
|
||||
display: flex;
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
justify-content: space-between;
|
||||
`,
|
||||
}));
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { Suspense } from 'react';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { Skeleton } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
|
||||
const IconSearch = React.lazy(() => import('./IconSearch'));
|
||||
|
||||
const useStyle = createStyles(({ css }) => ({
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
searchWrapper: css`
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
@ -21,7 +21,7 @@ const useStyle = createStyles(({ css }) => ({
|
||||
justify-content: space-between;
|
||||
> * {
|
||||
flex: 0 0 15%;
|
||||
margin: 3px 0;
|
||||
margin: ${token.marginXXS}px 0;
|
||||
}
|
||||
`,
|
||||
skeletonWrapper: css`
|
||||
@ -33,7 +33,7 @@ const useStyle = createStyles(({ css }) => ({
|
||||
`,
|
||||
}));
|
||||
|
||||
const IconSearchFallback = () => {
|
||||
const IconSearchFallback: React.FC = () => {
|
||||
const { styles } = useStyle();
|
||||
|
||||
return (
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Link } from 'dumi';
|
||||
import * as React from 'react';
|
||||
import { Link } from 'dumi';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
|
||||
type LinkProps = Parameters<typeof Link>[0];
|
||||
@ -9,7 +10,7 @@ export interface LocaleLinkProps extends LinkProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function LocaleLink({ sourceType, to, ...props }: LocaleLinkProps) {
|
||||
const LocaleLink: React.FC<LocaleLinkProps> = ({ sourceType, to, ...props }) => {
|
||||
const Component = sourceType === 'a' ? 'a' : Link;
|
||||
|
||||
const [, localeType] = useLocale();
|
||||
@ -46,4 +47,6 @@ export default function LocaleLink({ sourceType, to, ...props }: LocaleLinkProps
|
||||
}
|
||||
|
||||
return <Component {...linkProps} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default LocaleLink;
|
||||
|
||||
@ -75,14 +75,14 @@ const useStyle = createStyles(({ token }) => {
|
||||
border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
|
||||
border-top: 1px solid ${token.colorSplit};
|
||||
color: ${token.colorTextSecondary};
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition: all ${token.motionDurationMid} ease-in-out;
|
||||
background-color: ${token.colorBgElevated};
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: ${token.colorPrimary};
|
||||
}
|
||||
span {
|
||||
margin-right: ${token.marginXXS}px;
|
||||
margin-inline-end: ${token.marginXXS}px;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
@ -10,10 +10,10 @@ import type { AntdPreviewerProps } from './Previewer';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
wrapper: css`
|
||||
position: relative;
|
||||
border: 1px solid ${token.colorBorderSecondary};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
padding: 20px 24px 40px;
|
||||
position: relative;
|
||||
padding: ${token.paddingMD}px ${token.paddingLG}px ${token.paddingMD * 2}px;
|
||||
margin-bottom: ${token.marginLG}px;
|
||||
`,
|
||||
title: css`
|
||||
@ -35,8 +35,8 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
`,
|
||||
copy: css`
|
||||
position: absolute;
|
||||
inset-inline-end: 20px;
|
||||
inset-block-start: 20px;
|
||||
inset-inline-end: ${token.paddingMD}px;
|
||||
inset-block-start: ${token.paddingMD}px;
|
||||
cursor: pointer;
|
||||
`,
|
||||
copyTip: css`
|
||||
@ -49,7 +49,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
`,
|
||||
tip: css`
|
||||
color: ${token.colorTextTertiary};
|
||||
margin-top: 40px;
|
||||
margin-top: ${token.marginMD * 2}px;
|
||||
`,
|
||||
}));
|
||||
|
||||
@ -86,12 +86,12 @@ const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description,
|
||||
{copied ? (
|
||||
<div className={styles.copiedTip}>
|
||||
<CheckOutlined />
|
||||
<span style={{ marginLeft: 8 }}>已复制，使用 Kitchen 插件即可粘贴</span>
|
||||
<span style={{ marginInlineStart: 8 }}>已复制，使用 Kitchen 插件即可粘贴</span>
|
||||
</div>
|
||||
) : (
|
||||
<div onClick={handleCopy} className={styles.copyTip}>
|
||||
<SketchOutlined />
|
||||
<span style={{ marginLeft: 8 }}>复制 Sketch JSON</span>
|
||||
<span style={{ marginInlineStart: 8 }}>复制 Sketch JSON</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -7,12 +7,12 @@ const { ErrorBoundary } = Alert;
|
||||
|
||||
const Previewer = React.lazy(() => import('./Previewer'));
|
||||
|
||||
const useStyle = createStyles(({ css }) => ({
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
skeletonWrapper: css`
|
||||
width: 100% !important;
|
||||
height: 250px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: ${token.margin}px;
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
`,
|
||||
}));
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
/* eslint-disable react/no-array-index-key */
|
||||
import * as React from 'react';
|
||||
import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import dayjs from 'dayjs';
|
||||
import { FormattedMessage } from 'dumi';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import type { Article, Authors, SiteData } from '../../../pages/index/components/util';
|
||||
import { useSiteData } from '../../../pages/index/components/util';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => {
|
||||
const { antCls } = token;
|
||||
@ -16,7 +17,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
h4 {
|
||||
margin: 40px 0 24px;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: ${token.fontSizeXL}px;
|
||||
}
|
||||
|
||||
${antCls}-skeleton {
|
||||
@ -26,7 +27,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
|
||||
ul li {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +45,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
li {
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
import { Col, Row, Tooltip } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => {
|
||||
@ -16,9 +17,9 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
color: inherit;
|
||||
list-style: none;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-radius: 2px;
|
||||
border-radius: ${token.borderRadiusXS}px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s;
|
||||
transition: box-shadow ${token.motionDurationSlow};
|
||||
|
||||
&:hover {
|
||||
box-shadow: ${boxShadowSecondary};
|
||||
@ -36,26 +37,26 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 4px 8px;
|
||||
padding: ${token.paddingXXS}px ${token.paddingXS}px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
line-height: 1;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
border-radius: 1px;
|
||||
border-radius: ${token.borderRadiusXS}px;
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
|
||||
display: inline-flex;
|
||||
column-gap: 4px;
|
||||
`,
|
||||
title: css`
|
||||
margin: 16px 20px 8px;
|
||||
margin: ${token.margin}px ${token.marginMD}px ${token.marginXS}px;
|
||||
opacity: 0.85;
|
||||
font-size: 20px;
|
||||
font-size: ${token.fontSizeXL}px;
|
||||
line-height: 28px;
|
||||
`,
|
||||
description: css`
|
||||
margin: 0 20px 20px;
|
||||
margin: 0 ${token.marginMD}px ${token.marginMD}px;
|
||||
opacity: 0.65;
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSizeXL}px;
|
||||
line-height: 22px;
|
||||
`,
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import type { FC, ReactNode } from 'react';
|
||||
import React, { Suspense } from 'react';
|
||||
import { useSearchParams } from 'dumi';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { Skeleton } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { useSearchParams } from 'dumi';
|
||||
|
||||
const OriginSandpack = React.lazy(() => import('./Sandpack'));
|
||||
|
||||
@ -20,12 +20,12 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
width: 100%;
|
||||
> * {
|
||||
width: 100% !important;
|
||||
border-radius: 8px;
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
}
|
||||
`,
|
||||
placeholder: css`
|
||||
color: ${token.colorTextDescription};
|
||||
font-size: 16px;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
`,
|
||||
}));
|
||||
|
||||
@ -41,12 +41,12 @@ const SandpackFallback = () => {
|
||||
);
|
||||
};
|
||||
|
||||
type SandpackProps = {
|
||||
interface SandpackProps {
|
||||
children?: ReactNode;
|
||||
dark?: boolean;
|
||||
autorun?: boolean;
|
||||
dependencies?: string;
|
||||
};
|
||||
}
|
||||
|
||||
const Sandpack: FC<SandpackProps> = ({
|
||||
children,
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import type { FC } from 'react';
|
||||
import * as React from 'react';
|
||||
import type { TableProps } from 'antd';
|
||||
import { Table } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { getDesignToken } from 'antd-token-previewer';
|
||||
import tokenMeta from 'antd/es/version/token-meta.json';
|
||||
import type { TableProps } from 'antd';
|
||||
import { Table } from 'antd';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import ColorChunk from '../ColorChunk';
|
||||
|
||||
@ -39,14 +40,14 @@ const locales = {
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
codeSpan: css`
|
||||
margin: 0 1px;
|
||||
padding: 0.2em 0.4em;
|
||||
font-size: 0.9em;
|
||||
background: ${token.siteMarkdownCodeBg};
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
`,
|
||||
margin: 0 1px;
|
||||
padding: 0.2em 0.4em;
|
||||
font-size: 0.9em;
|
||||
background: ${token.siteMarkdownCodeBg};
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
font-family: monospace;
|
||||
`,
|
||||
}));
|
||||
|
||||
export function useColumns(): Exclude<TableProps<TokenData>['columns'], undefined> {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
|
||||
import { createStyles, css } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
import { PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons';
|
||||
|
||||
const useStyles = createStyles(({ cx, token }) => {
|
||||
const play = css`
|
||||
@ -41,10 +41,10 @@ const useStyles = createStyles(({ cx, token }) => {
|
||||
};
|
||||
});
|
||||
|
||||
export default function VideoPlayer({
|
||||
const VideoPlayer: React.FC<React.HtmlHTMLAttributes<HTMLVideoElement>> = ({
|
||||
className,
|
||||
...restProps
|
||||
}: React.HtmlHTMLAttributes<HTMLVideoElement>) {
|
||||
}) => {
|
||||
const { styles } = useStyles();
|
||||
const videoRef = React.useRef<HTMLVideoElement>(null);
|
||||
const [playing, setPlaying] = React.useState(false);
|
||||
@ -69,9 +69,10 @@ export default function VideoPlayer({
|
||||
>
|
||||
<div className={classNames(styles.holder)}>
|
||||
<video ref={videoRef} className={styles.video} muted loop {...restProps} />
|
||||
|
||||
<div className={styles.play}>{playing ? <PauseCircleFilled /> : <PlayCircleFilled />}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default VideoPlayer;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import G6 from '@antv/g6';
|
||||
import { createStyles, css } from 'antd-style';
|
||||
import { useRouteMeta } from 'dumi';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
G6.registerNode('behavior-start-node', {
|
||||
draw: (cfg, group) => {
|
||||
@ -214,13 +214,13 @@ type BehaviorMapItem = {
|
||||
link?: string;
|
||||
};
|
||||
|
||||
const useStyle = createStyles(() => ({
|
||||
const useStyle = createStyles(({ token }) => ({
|
||||
container: css`
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
`,
|
||||
@ -228,7 +228,7 @@ const useStyle = createStyles(() => ({
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
font-size: 16px;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
`,
|
||||
tips: css`
|
||||
display: flex;
|
||||
@ -237,14 +237,14 @@ const useStyle = createStyles(() => ({
|
||||
right: 20px;
|
||||
`,
|
||||
mvp: css`
|
||||
margin-right: 20px;
|
||||
margin-inline-end: ${token.marginMD}px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: ${token.marginXS}px;
|
||||
background-color: #1677ff;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
@ -257,7 +257,7 @@ const useStyle = createStyles(() => ({
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: ${token.marginXS}px;
|
||||
background-color: #a0a0a0;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import type { FC } from 'react';
|
||||
import React, { Suspense } from 'react';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { Skeleton } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
|
||||
import type { BehaviorMapProps } from './BehaviorMap';
|
||||
|
||||
const InternalBehaviorMap = React.lazy(() => import('./BehaviorMap'));
|
||||
@ -11,18 +12,17 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
width: 100%;
|
||||
> * {
|
||||
width: 100% !important;
|
||||
border-radius: 8px;
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
}
|
||||
`,
|
||||
placeholder: css`
|
||||
color: ${token.colorTextDescription};
|
||||
font-size: 16px;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
`,
|
||||
}));
|
||||
|
||||
const BehaviorMapFallback = () => {
|
||||
const BehaviorMapFallback: React.FC = () => {
|
||||
const { styles } = useStyle();
|
||||
|
||||
return (
|
||||
<div className={styles.fallback}>
|
||||
<Skeleton.Node active style={{ height: 600, width: '100%' }}>
|
||||
|
||||
@ -13,7 +13,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
return {
|
||||
code: css`
|
||||
position: relative;
|
||||
margin-top: -16px;
|
||||
margin-top: -${token.margin}px;
|
||||
`,
|
||||
|
||||
copyButton: css`
|
||||
@ -21,7 +21,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 16px;
|
||||
inset-inline-end: 16px;
|
||||
inset-inline-end: ${token.padding}px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Global, css } from '@emotion/react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
const gray: { [key: number]: string } = {
|
||||
@ -18,7 +18,7 @@ const gray: { [key: number]: string } = {
|
||||
13: '#000',
|
||||
};
|
||||
|
||||
const ColorStyle = () => {
|
||||
const ColorStyle: React.FC = () => {
|
||||
const token = useTheme();
|
||||
|
||||
const makePalette = (color: string, index: number = 1): string => {
|
||||
@ -68,14 +68,14 @@ ${makeGrayPalette(index + 1)}
|
||||
margin: 45px 3.5% 45px 0;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.main-color-item {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
|
||||
&:hover {
|
||||
margin-right: -8px;
|
||||
margin-inline-end: -${token.paddingXS}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -88,41 +88,40 @@ ${makeGrayPalette(index + 1)}
|
||||
margin: 45px 1%;
|
||||
|
||||
&-pick {
|
||||
margin: 0 0 20px;
|
||||
font-size: 20px;
|
||||
margin: 0 0 ${token.marginMD}px;
|
||||
font-size: ${token.fontSizeXL}px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-picker {
|
||||
margin: 24px 0;
|
||||
margin: ${token.marginLG}px 0;
|
||||
|
||||
&-value {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 16px;
|
||||
font-size: 14px;
|
||||
margin-inline-start: ${token.margin}px;
|
||||
font-size: ${token.fontSize}px;
|
||||
font-family: Consolas, sans-serif;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
margin-inline-end: ${token.margin}px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-validation {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 16px;
|
||||
margin-inline-start: ${token.margin}px;
|
||||
color: ${token.colorError};
|
||||
font-size: 13px;
|
||||
font-size: ${token.fontSize}px;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
margin-inline-end: ${token.margin}px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
&-dark {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -148,31 +147,31 @@ ${makeGrayPalette(index + 1)}
|
||||
&-item {
|
||||
position: relative;
|
||||
height: 44px;
|
||||
margin-right: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
margin-inline-end: ${token.marginXXS}px;
|
||||
padding: 0 ${token.paddingSM}px;
|
||||
font-size: ${token.fontSize}px;
|
||||
font-family: Consolas, sans-serif;
|
||||
line-height: 44px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all ${token.motionDurationMid};
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 ${token.borderRadiusSM}px ${token.borderRadiusSM}px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
margin-right: -8px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-inline-end: -${token.marginXS}px;
|
||||
border-radius: 0 ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-item &-text {
|
||||
float: left;
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
}
|
||||
|
||||
&-item &-value {
|
||||
@ -182,12 +181,12 @@ ${makeGrayPalette(index + 1)}
|
||||
transform: scale(0.85);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
}
|
||||
}
|
||||
|
||||
.color-title {
|
||||
margin: 0 0 24px;
|
||||
margin: 0 0 ${token.marginLG}px;
|
||||
color: #5c6b77;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
@ -199,7 +198,7 @@ ${makeGrayPalette(index + 1)}
|
||||
display: block;
|
||||
color: #777;
|
||||
font-weight: lighter;
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
}
|
||||
|
||||
.main-color:hover {
|
||||
@ -215,7 +214,7 @@ ${makeGrayPalette(index + 1)}
|
||||
|
||||
&-dark {
|
||||
height: 303px;
|
||||
padding: 32px 28px;
|
||||
padding: ${token.paddingXL}px ${token.paddingXL - 4}px;
|
||||
background-color: #141414;
|
||||
|
||||
.color-palette-picker {
|
||||
@ -245,7 +244,7 @@ ${makeGrayPalette(index + 1)}
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
height: 86px;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
padding: 37px 0 0;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
@ -258,7 +257,7 @@ ${makeGrayPalette(index + 1)}
|
||||
&:hover {
|
||||
height: 96px;
|
||||
margin-top: -10px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -273,7 +272,7 @@ ${makeGrayPalette(index + 1)}
|
||||
|
||||
&:hover {
|
||||
.main-color-item {
|
||||
padding-top: 8px;
|
||||
padding-top: ${token.paddingXS}px;
|
||||
}
|
||||
|
||||
.main-color-value {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { presetDarkPalettes } from '@ant-design/colors';
|
||||
import React, { useEffect } from 'react';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { presetDarkPalettes } from '@ant-design/colors';
|
||||
import { message } from 'antd';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
|
||||
const rgbToHex = (rgbString: string): string => {
|
||||
const rgb = rgbString.match(/\d+/g);
|
||||
@ -55,7 +55,7 @@ const Palette: React.FC<PaletteProps> = (props) => {
|
||||
const colorName = `${english} / ${chinese}`;
|
||||
const colorPaletteMap = {
|
||||
dark: ['#fff', 'unset'],
|
||||
default: ['rgba(0,0,0,0.85)', '#fff'],
|
||||
default: ['rgba(0, 0, 0, 0.85)', '#fff'],
|
||||
};
|
||||
const [lastColor, firstColor] = dark ? colorPaletteMap.dark : colorPaletteMap.default;
|
||||
for (let i = 1; i <= count; i += 1) {
|
||||
|
||||
@ -42,7 +42,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
`,
|
||||
bug: css`
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
color: #aaa;
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
display: inline-block;
|
||||
|
||||
@ -21,14 +21,12 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
margin-inline-start: 6px;
|
||||
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
${iconCls} {
|
||||
display: block;
|
||||
color: ${colorIcon};
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
&:hover {
|
||||
color: ${colorText};
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
.dumi-default-source-code > pre,
|
||||
.dumi-default-source-code-scroll-content > pre,
|
||||
.dumi-default-source-code-editor-textarea {
|
||||
padding: 12px 16px;
|
||||
padding: ${token.paddingSM}px ${token.padding}px;
|
||||
}
|
||||
|
||||
.dumi-default-source-code > pre,
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import { createStyles } from 'antd-style';
|
||||
import type { ReactElement } from 'react';
|
||||
import React, { useMemo, useContext } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import useMenu from '../../hooks/useMenu';
|
||||
import SiteContext from '../slots/SiteContext';
|
||||
import type { SiteContextProps } from '../slots/SiteContext';
|
||||
@ -18,7 +19,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
margin-inline-end: 170px;
|
||||
margin-inline-start: 64px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
border-top: 1px solid ${colorSplit};
|
||||
display: flex;
|
||||
`,
|
||||
@ -31,11 +32,11 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
${iconCls} {
|
||||
color: #999;
|
||||
font-size: ${fontSizeIcon}px;
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
}
|
||||
|
||||
.chinese {
|
||||
margin-inline-start: 4px;
|
||||
margin-inline-start: ${token.marginXXS}px;
|
||||
}
|
||||
`,
|
||||
prevNav: css`
|
||||
@ -52,7 +53,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
vertical-align: middle;
|
||||
transition: inset-inline-end 0.3s;
|
||||
transition: inset-inline-end ${token.motionDurationSlow};
|
||||
margin-inline-end: 1em;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
@ -76,7 +77,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
margin-bottom: 1px;
|
||||
line-height: 0;
|
||||
vertical-align: middle;
|
||||
transition: inset-inline-start 0.3s;
|
||||
transition: inset-inline-start ${token.motionDurationSlow};
|
||||
margin-inline-start: 1em;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
@ -1,62 +1,68 @@
|
||||
import { css, Global } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
export default () => (
|
||||
<Global
|
||||
styles={css`
|
||||
/* Browser mockup code
|
||||
export default () => {
|
||||
const token = useTheme();
|
||||
return (
|
||||
<Global
|
||||
styles={css`
|
||||
/* Browser mockup code
|
||||
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
|
||||
* Live example: https://updown.io
|
||||
*/
|
||||
|
||||
.browser-mockup {
|
||||
position: relative;
|
||||
border-top: 2em solid rgba(230, 230, 230, 0.7);
|
||||
border-radius: 3px 3px 0 0;
|
||||
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.browser-mockup {
|
||||
position: relative;
|
||||
border-top: 2em solid rgba(230, 230, 230, 0.7);
|
||||
border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
|
||||
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.browser-mockup::before {
|
||||
position: absolute;
|
||||
top: -1.25em;
|
||||
left: 1em;
|
||||
display: block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
background-color: #f44;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
|
||||
content: '';
|
||||
}
|
||||
.browser-mockup::before {
|
||||
position: absolute;
|
||||
top: -1.25em;
|
||||
left: 1em;
|
||||
display: block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
background-color: #f44;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 0 2px #f44,
|
||||
1.5em 0 0 2px #9b3,
|
||||
3em 0 0 2px #fb5;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.browser-mockup.with-tab::after {
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: 5.5em;
|
||||
display: block;
|
||||
width: 20%;
|
||||
height: 0;
|
||||
border-right: 0.8em solid transparent;
|
||||
border-bottom: 2em solid white;
|
||||
border-left: 0.8em solid transparent;
|
||||
content: '';
|
||||
}
|
||||
.browser-mockup.with-tab::after {
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: 5.5em;
|
||||
display: block;
|
||||
width: 20%;
|
||||
height: 0;
|
||||
border-right: 0.8em solid transparent;
|
||||
border-bottom: 2em solid white;
|
||||
border-left: 0.8em solid transparent;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.browser-mockup.with-url::after {
|
||||
position: absolute;
|
||||
top: -1.6em;
|
||||
left: 5.5em;
|
||||
display: block;
|
||||
width: calc(100% - 6em);
|
||||
height: 1.2em;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.browser-mockup > * {
|
||||
display: block;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
.browser-mockup.with-url::after {
|
||||
position: absolute;
|
||||
top: -1.6em;
|
||||
left: 5.5em;
|
||||
display: block;
|
||||
width: calc(100% - 6em);
|
||||
height: 1.2em;
|
||||
background-color: #fff;
|
||||
border-radius: ${token.borderRadiusXS}px;
|
||||
content: '';
|
||||
}
|
||||
.browser-mockup > * {
|
||||
display: block;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -23,11 +23,11 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(100% - ${token.lineWidth * 2}px);
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 ${token.margin}px;
|
||||
background-color: ${token.colorBgContainer};
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
transition: all 0.2s;
|
||||
transition: all ${token.motionDurationMid};
|
||||
|
||||
&.code-box-simplify {
|
||||
border-radius: 0;
|
||||
@ -74,12 +74,10 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
&-expand-trigger {
|
||||
position: relative;
|
||||
color: #3b4357;
|
||||
font-size: 20px;
|
||||
font-size: ${token.fontSizeXL}px;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition: all 0.3s;
|
||||
margin-inline-start: 12px;
|
||||
|
||||
transition: all ${token.motionDurationSlow};
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -93,7 +91,7 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
background: ${token.colorBgContainer};
|
||||
border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
|
||||
transition: background-color 0.4s;
|
||||
margin-inline-start: 16px;
|
||||
margin-inline-start: ${token.margin}px;
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
@ -111,15 +109,15 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: -16px;
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
text-decoration: none;
|
||||
background: inherit;
|
||||
transform: scale(0.9);
|
||||
padding-inline-end: 6px;
|
||||
padding-inline-end: ${token.paddingXXS}px;
|
||||
|
||||
${iconCls} {
|
||||
color: ${token.colorTextSecondary};
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
|
||||
&:hover {
|
||||
color: ${token.colorText};
|
||||
@ -164,7 +162,7 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
> p {
|
||||
width: 100%;
|
||||
margin: 0.5em 0;
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
word-break: break-word;
|
||||
padding-inline-end: 25px;
|
||||
}
|
||||
@ -244,10 +242,10 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
&-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
padding: ${token.paddingSM}px 0;
|
||||
border-top: 1px dashed ${token.colorSplit};
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s;
|
||||
transition: opacity ${token.motionDurationSlow};
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@ -276,7 +274,7 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
&-code-copy {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
text-align: center;
|
||||
background: ${token.colorBgContainer};
|
||||
cursor: pointer;
|
||||
@ -331,8 +329,8 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
background: ${token.colorBgContainer};
|
||||
border: none;
|
||||
box-shadow: unset;
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
padding: ${token.paddingSM}px ${token.padding}px;
|
||||
font-size: ${token.fontSize}px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -353,6 +351,9 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
inset-inline-end: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: ${token.marginSM}px;
|
||||
}
|
||||
|
||||
${antCls}-row-rtl {
|
||||
|
||||
@ -1,43 +1,47 @@
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
export default () => (
|
||||
<Global
|
||||
styles={css`
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
> a[aria-hidden]:first-child {
|
||||
float: left;
|
||||
width: 20px;
|
||||
padding-inline-end: 4px;
|
||||
font-size: 0;
|
||||
line-height: inherit;
|
||||
text-align: right;
|
||||
padding-inline-end: 4px;
|
||||
margin-inline-start: -24px;
|
||||
export default () => {
|
||||
const token = useTheme();
|
||||
return (
|
||||
<Global
|
||||
styles={css`
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
> a[aria-hidden]:first-child {
|
||||
float: left;
|
||||
width: 20px;
|
||||
padding-inline-end: ${token.paddingXXS}px;
|
||||
font-size: 0;
|
||||
line-height: inherit;
|
||||
text-align: right;
|
||||
padding-inline-end: ${token.paddingXXS}px;
|
||||
margin-inline-start: -${token.marginLG}px;
|
||||
|
||||
[data-direction='rtl'] & {
|
||||
float: right;
|
||||
[data-direction='rtl'] & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
> .icon-link::before {
|
||||
font-size: ${token.fontSizeXL}px;
|
||||
content: '#';
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
> .icon-link::before {
|
||||
font-size: 20px;
|
||||
content: '#';
|
||||
&:not(:hover) > a[aria-hidden]:first-child > .icon-link {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover) > a[aria-hidden]:first-child > .icon-link {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -16,7 +16,7 @@ export default () => {
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
padding: 16px 32px;
|
||||
padding: ${token.padding}px ${token.paddingXL}px;
|
||||
color: ${token.colorText};
|
||||
font-size: ${token.fontSize}px;
|
||||
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
@ -31,7 +31,7 @@ export default () => {
|
||||
pre[class*='language-'] {
|
||||
color: ${token.colorText};
|
||||
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
line-height: 1.5;
|
||||
line-height: ${token.lineHeightLG};
|
||||
direction: ltr;
|
||||
white-space: pre;
|
||||
text-align: left;
|
||||
@ -62,14 +62,14 @@ export default () => {
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
margin: 16px 0;
|
||||
padding: 12px 20px;
|
||||
margin: ${token.margin}px 0;
|
||||
padding: ${token.paddingSM}px ${token.paddingMD}px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #f5f5f5;
|
||||
background: ${token.colorBgLayout};
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css, Global } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
export default () => {
|
||||
@ -28,9 +28,11 @@ export default () => {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
background-color: inherit;
|
||||
border-radius: 4px;
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
transition:
|
||||
color ${token.motionDurationSlow} ease-in-out,
|
||||
background-color ${token.motionDurationSlow} ease-in-out;
|
||||
|
||||
.rtl & {
|
||||
margin: 3px 0;
|
||||
@ -38,9 +40,9 @@ export default () => {
|
||||
}
|
||||
|
||||
${iconCls} {
|
||||
margin: 12px 0 8px;
|
||||
margin: ${token.marginSM}px 0 ${token.marginXS}px;
|
||||
font-size: 36px;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transition: transform ${token.motionDurationSlow} ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@ -53,7 +55,7 @@ export default () => {
|
||||
transform: scale(0.83);
|
||||
|
||||
${antCls}-badge {
|
||||
transition: color 0.3s ease-in-out;
|
||||
transition: color ${token.motionDurationSlow} ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,7 +91,7 @@ export default () => {
|
||||
text-align: center;
|
||||
background: #1677ff;
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
content: 'Copied!';
|
||||
}
|
||||
|
||||
@ -101,9 +103,9 @@ export default () => {
|
||||
|
||||
.copied-code {
|
||||
padding: 2px 4px;
|
||||
font-size: 12px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 2px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
background: ${token.colorBgLayout};
|
||||
border-radius: ${token.borderRadiusXS}px;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css, Global } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
export default () => {
|
||||
@ -12,12 +12,12 @@ export default () => {
|
||||
styles={css`
|
||||
.icon-pic-searcher {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
margin: 0 ${token.marginXS}px;
|
||||
|
||||
.icon-pic-btn {
|
||||
color: ${token.colorIcon};
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
|
||||
&:hover {
|
||||
color: ${token.colorIconHover};
|
||||
@ -29,10 +29,10 @@ export default () => {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
margin-top: 10px;
|
||||
padding: 8px;
|
||||
padding: ${token.paddingXS}px;
|
||||
text-align: center;
|
||||
border: 1px solid ${token.colorBorder};
|
||||
border-radius: 4px;
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
|
||||
> img {
|
||||
max-width: 50px;
|
||||
@ -57,8 +57,7 @@ export default () => {
|
||||
padding: 10px 0;
|
||||
|
||||
> ${iconCls} {
|
||||
font-size: 30px;
|
||||
|
||||
font-size: ${token.fontSizeHeading2}px;
|
||||
:hover {
|
||||
color: ${token.colorLinkHover};
|
||||
}
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
export default () => (
|
||||
<Global
|
||||
styles={css`
|
||||
.design-inline-cards {
|
||||
display: flex;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
.design-inline-cards > * {
|
||||
flex: 10%;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.design-inline-cards img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.design-inline-cards h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
export default () => {
|
||||
const token = useTheme();
|
||||
return (
|
||||
<Global
|
||||
styles={css`
|
||||
.design-inline-cards {
|
||||
display: flex;
|
||||
margin: 0 -${token.marginMD}px;
|
||||
}
|
||||
.design-inline-cards > * {
|
||||
flex: 10%;
|
||||
margin: 0 ${token.marginMD}px;
|
||||
}
|
||||
.design-inline-cards img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.design-inline-cards h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@ const GlobalStyle: React.FC = () => {
|
||||
styles={css`
|
||||
.markdown {
|
||||
color: ${token.colorText};
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
@ -47,8 +47,8 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: ${token.marginXS}px;
|
||||
margin-bottom: ${token.marginMD}px;
|
||||
color: ${token.colorTextHeading};
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
@ -56,7 +56,7 @@ const GlobalStyle: React.FC = () => {
|
||||
line-height: 38px;
|
||||
|
||||
.subtitle {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: ${token.marginSM}px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,21 +82,21 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 16px;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
clear: both;
|
||||
height: 1px;
|
||||
margin: 24px 0;
|
||||
margin: ${token.marginLG}px 0;
|
||||
background: ${token.colorSplit};
|
||||
border: 0;
|
||||
}
|
||||
@ -112,15 +112,15 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
|
||||
.markdown ul > li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
margin-inline-start: ${token.marginMD}px;
|
||||
padding-inline-start: ${token.paddingXXS}px;
|
||||
list-style-type: circle;
|
||||
|
||||
.rtl & {
|
||||
margin-right: 20px;
|
||||
margin-left: 0;
|
||||
padding-right: 4px;
|
||||
padding-left: 0;
|
||||
margin-inline-end: ${token.marginMD}px;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-end: ${token.paddingXXS}px;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
@ -129,15 +129,15 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
|
||||
.markdown ol > li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
margin-inline-start: ${token.marginMD}px;
|
||||
padding-inline-start: ${token.paddingXXS}px;
|
||||
list-style-type: decimal;
|
||||
|
||||
${antCls}-row-rtl & {
|
||||
margin-right: 20px;
|
||||
margin-left: 0;
|
||||
padding-right: 4px;
|
||||
padding-left: 0;
|
||||
margin-inline-end: ${token.marginMD}px;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-end: ${token.paddingXXS}px;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -152,7 +152,7 @@ const GlobalStyle: React.FC = () => {
|
||||
font-size: 0.9em;
|
||||
background: ${token.siteMarkdownCodeBg};
|
||||
border: 1px solid ${token.colorSplit};
|
||||
border-radius: 3px;
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
@ -169,7 +169,7 @@ const GlobalStyle: React.FC = () => {
|
||||
font-size: ${Math.max(token.fontSize - 1, 12)}px;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
background: #f5f5f5;
|
||||
background-color: ${token.colorBgLayout};
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -183,8 +183,8 @@ const GlobalStyle: React.FC = () => {
|
||||
background-color: ${token.siteMarkdownCodeBg};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
> pre.prism-code {
|
||||
padding: 12px 20px;
|
||||
font-size: 13px;
|
||||
padding: ${token.paddingSM}px ${token.paddingMD}px;
|
||||
font-size: ${token.fontSize}px;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
@ -194,14 +194,14 @@ const GlobalStyle: React.FC = () => {
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
margin: 0 20px;
|
||||
margin: 0 ${token.marginMD}px;
|
||||
color: #aaa;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown table td > a:not(:last-child) {
|
||||
margin-right: 0 !important;
|
||||
margin-inline-end: 0 !important;
|
||||
|
||||
&::after {
|
||||
position: relative !important;
|
||||
@ -210,14 +210,14 @@ const GlobalStyle: React.FC = () => {
|
||||
|
||||
.markdown blockquote {
|
||||
margin: 1em 0;
|
||||
padding-left: 0.8em;
|
||||
padding-inline-start: 0.8em;
|
||||
color: ${token.colorTextSecondary};
|
||||
font-size: 90%;
|
||||
border-left: 4px solid ${token.colorSplit};
|
||||
|
||||
.rtl & {
|
||||
padding-right: 0.8em;
|
||||
padding-left: 0;
|
||||
padding-inline-end: 0.8em;
|
||||
padding-inline-start: 0;
|
||||
border-right: 4px solid ${token.colorSplit};
|
||||
border-left: none;
|
||||
}
|
||||
@ -228,13 +228,13 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
transition: opacity ${token.motionDurationSlow};
|
||||
|
||||
.rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
margin-inline-end: ${token.marginXS}px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -245,20 +245,20 @@ const GlobalStyle: React.FC = () => {
|
||||
|
||||
.markdown a.edit-button {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
margin-inline-start: ${token.marginXS}px;
|
||||
text-decoration: none;
|
||||
|
||||
.rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
margin-inline-end: ${token.marginXS}px;
|
||||
margin-inline-start: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
${antCls}icon {
|
||||
display: block;
|
||||
color: ${token.colorTextSecondary};
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
|
||||
&:hover {
|
||||
color: ${token.colorText};
|
||||
@ -294,7 +294,7 @@ const GlobalStyle: React.FC = () => {
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 24px;
|
||||
padding: ${token.paddingSM}px ${token.paddingLG}px;
|
||||
text-align: left;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
|
||||
@ -320,7 +320,7 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
|
||||
&:hover {
|
||||
background: rgba(60, 90, 100, 0.04);
|
||||
@ -348,7 +348,7 @@ const GlobalStyle: React.FC = () => {
|
||||
width: 18%;
|
||||
min-width: 58px;
|
||||
color: ${token.colorText};
|
||||
font-weight: 600;
|
||||
font-weight: ${token.fontWeightStrong};
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -388,15 +388,15 @@ const GlobalStyle: React.FC = () => {
|
||||
${antCls}-row > div,
|
||||
.code-box-demo ${antCls}-row > div {
|
||||
min-height: 30px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: ${token.marginXS}px;
|
||||
margin-bottom: ${token.marginXS}px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.code-box-demo ${antCls}-row > div:not(.gutter-row) {
|
||||
padding: 16px 0;
|
||||
padding: ${token.padding}px 0;
|
||||
background: ${demoGridColor};
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css, Global } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
export default () => {
|
||||
@ -39,11 +39,11 @@ export default () => {
|
||||
}
|
||||
|
||||
.preview-image-box + .preview-image-box {
|
||||
margin-left: 24px;
|
||||
margin-inline-start: ${token.marginLG}px;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 24px;
|
||||
margin-left: 0;
|
||||
margin-inline-end: ${token.marginLG}px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,7 +51,7 @@ export default () => {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
padding: ${token.padding}px;
|
||||
text-align: center;
|
||||
background: #f2f4f5;
|
||||
box-sizing: border-box;
|
||||
@ -97,15 +97,15 @@ export default () => {
|
||||
}
|
||||
|
||||
.preview-image-title {
|
||||
margin-top: 20px;
|
||||
margin-top: ${token.marginMD}px;
|
||||
color: ${token.colorText};
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
}
|
||||
|
||||
.preview-image-description {
|
||||
margin-top: 2px;
|
||||
color: ${token.colorTextSecondary};
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -118,11 +118,11 @@ export default () => {
|
||||
.preview-image-box img {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
padding: 12px;
|
||||
padding: ${token.paddingSM}px;
|
||||
background: ${token.colorBgContainer};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
@ -132,8 +132,12 @@ export default () => {
|
||||
|
||||
.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;
|
||||
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 {
|
||||
@ -162,7 +166,7 @@ export default () => {
|
||||
.motion-principle-wrapper {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 48px 0 24px;
|
||||
margin: ${token.marginXXL}px 0 ${token.marginLG}px;
|
||||
}
|
||||
|
||||
.principle-wrapper {
|
||||
@ -173,24 +177,24 @@ export default () => {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 180px;
|
||||
margin-right: 12.5%;
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
margin-inline-end: 12.5%;
|
||||
margin-bottom: ${token.marginLG}px;
|
||||
padding: ${token.paddingLG}px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 4px;
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 16px 0 8px;
|
||||
margin: ${token.margin}px 0 ${token.marginXS}px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css, Global } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import { useTheme } from 'antd-style';
|
||||
|
||||
export default () => {
|
||||
@ -70,10 +70,10 @@ export default () => {
|
||||
}
|
||||
|
||||
.ant-row-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-end: ${token.padding}px;
|
||||
padding-inline-start: ${token.padding}px;
|
||||
|
||||
> .markdown > * {
|
||||
width: 100% !important;
|
||||
@ -88,11 +88,10 @@ export default () => {
|
||||
|
||||
.prev-next-nav {
|
||||
width: calc(100% - 32px);
|
||||
margin-left: 16px;
|
||||
|
||||
margin-inline-start: ${token.margin}px;
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 64px;
|
||||
margin-inline-end: ${token.margin}px;
|
||||
margin-inline-start: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,7 +136,7 @@ export default () => {
|
||||
|
||||
.img-wrapper {
|
||||
position: initial;
|
||||
margin-top: 20px;
|
||||
margin-top: ${token.marginMD}px;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
@ -150,7 +149,7 @@ export default () => {
|
||||
|
||||
.text-wrapper {
|
||||
min-height: 200px;
|
||||
margin-top: 32px;
|
||||
margin-top: ${token.marginXL}px;
|
||||
padding: 0;
|
||||
|
||||
h1 {
|
||||
@ -159,7 +158,7 @@ export default () => {
|
||||
|
||||
p {
|
||||
color: #314659;
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@ -170,21 +169,21 @@ export default () => {
|
||||
text-align: center;
|
||||
|
||||
.banner-btn {
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
padding: 0 ${token.paddingMD}px;
|
||||
font-size: ${token.fontSize}px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-promote {
|
||||
min-width: 100%;
|
||||
margin-top: 32px;
|
||||
margin-top: ${token.marginXL}px;
|
||||
|
||||
.ant-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
white-space: nowrap;
|
||||
|
||||
img {
|
||||
@ -200,7 +199,6 @@ export default () => {
|
||||
|
||||
.ant-row {
|
||||
margin: 24px auto 64px;
|
||||
|
||||
> div {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
@ -221,7 +219,7 @@ export default () => {
|
||||
|
||||
&-product {
|
||||
min-height: auto;
|
||||
padding: 0 16px;
|
||||
padding: 0 ${token.padding}px;
|
||||
|
||||
.product-block {
|
||||
margin-bottom: 34px;
|
||||
@ -229,7 +227,7 @@ export default () => {
|
||||
border-bottom: 1px solid ${token.colorSplit};
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: ${token.marginXL}px;
|
||||
border-bottom: none;
|
||||
|
||||
.block-text-wrapper {
|
||||
@ -250,14 +248,14 @@ export default () => {
|
||||
border-bottom: none;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: ${token.marginXXS}px;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
margin-bottom: ${token.marginXS}px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@ -266,8 +264,8 @@ export default () => {
|
||||
}
|
||||
|
||||
.components-button-wrapper {
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
margin-top: ${token.margin}px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
@ -291,19 +289,18 @@ export default () => {
|
||||
|
||||
.page3 {
|
||||
min-height: 688px;
|
||||
background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg')
|
||||
no-repeat;
|
||||
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.ant-row {
|
||||
margin: 0 8px;
|
||||
margin: 0 ${token.marginXS}px;
|
||||
}
|
||||
|
||||
.page3-block {
|
||||
margin-bottom: 32px;
|
||||
padding: 24px;
|
||||
margin-bottom: ${token.marginXL}px;
|
||||
padding: ${token.paddingLG}px;
|
||||
background: ${token.colorBgContainer};
|
||||
border-radius: 4px;
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
|
||||
|
||||
&:nth-child(2) {
|
||||
@ -315,7 +312,7 @@ export default () => {
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
}
|
||||
|
||||
.page3-img-wrapper {
|
||||
@ -330,7 +327,7 @@ export default () => {
|
||||
width: 80%;
|
||||
max-width: initial;
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
padding-inline-start: ${token.padding}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,8 +24,8 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.3s,
|
||||
transform 0.3s;
|
||||
opacity ${token.motionDurationSlow},
|
||||
transform ${token.motionDurationSlow};
|
||||
|
||||
${antCls}-tabs {
|
||||
max-width: 1208px;
|
||||
|
||||
@ -31,8 +31,8 @@ const useStyle = () => {
|
||||
.rc-footer-container {
|
||||
max-width: ${articleMaxWidth}px;
|
||||
margin: 0 auto;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
padding-inline-end: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
`,
|
||||
@ -48,10 +48,9 @@ const useStyle = () => {
|
||||
article {
|
||||
padding: 0 ${resourcePaddingXS}px;
|
||||
}
|
||||
|
||||
${antCls}-col {
|
||||
padding-top: 16px !important;
|
||||
padding-bottom: 16px !important;
|
||||
padding-top: ${token.padding}px !important;
|
||||
padding-bottom: ${token.padding}px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -76,7 +75,7 @@ const useStyle = () => {
|
||||
max-width: ${articleMaxWidth}px;
|
||||
margin: 0 auto 56px;
|
||||
font-weight: 200;
|
||||
font-size: 16px;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
|
||||
@ -12,15 +12,15 @@ const ANTD_IMG_URL =
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
card: css`
|
||||
width: 100%;
|
||||
margin: 40px 0;
|
||||
transition: all 0.2s;
|
||||
margin: ${token.marginMD * 2}px 0;
|
||||
transition: all ${token.motionDurationMid};
|
||||
background-color: ${token.colorFillQuaternary};
|
||||
`,
|
||||
bigTitle: css`
|
||||
font-size: 16px;
|
||||
color: #121212;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 600;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
margin-bottom: ${token.marginLG}px;
|
||||
font-weight: ${token.fontWeightStrong};
|
||||
`,
|
||||
cardBody: css`
|
||||
display: flex;
|
||||
@ -33,24 +33,24 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
align-items: center;
|
||||
img {
|
||||
width: 200px;
|
||||
margin-right: 24px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
margin-inline-end: ${token.marginLG}px;
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
}
|
||||
`,
|
||||
title: css`
|
||||
color: #444;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-size: ${token.fontSizeLG}px;
|
||||
font-weight: ${token.fontWeightStrong};
|
||||
`,
|
||||
subTitle: css`
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: #646464;
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
font-weight: 400;
|
||||
margin-top: 8px;
|
||||
margin-top: ${token.marginXS}px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -69,9 +69,9 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
}
|
||||
}
|
||||
.arrowIcon {
|
||||
margin: 0 8px;
|
||||
color: #8a8f8d;
|
||||
font-size: 12px;
|
||||
margin: 0 ${token.marginXS}px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
}
|
||||
.zl-btn {
|
||||
display: flex;
|
||||
|
||||
@ -15,9 +15,9 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
margin: 1em 0 !important;
|
||||
`,
|
||||
title: css`
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: ${token.marginXS}px;
|
||||
`,
|
||||
list: css`
|
||||
display: flex;
|
||||
@ -26,7 +26,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
li {
|
||||
height: 24px;
|
||||
transition: all ${token.motionDurationSlow};
|
||||
margin-inline-end: -8px;
|
||||
margin-inline-end: -${token.marginXS}px;
|
||||
}
|
||||
&:hover {
|
||||
li {
|
||||
|
||||
@ -11,7 +11,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
toc: css`
|
||||
${antCls}-anchor {
|
||||
${antCls}-anchor-link-title {
|
||||
font-size: 12px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
@ -55,7 +55,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
@media only screen and (max-width: ${token.screenLG}px) {
|
||||
&,
|
||||
&.rtl {
|
||||
padding: 0 48px;
|
||||
padding: 0 ${token.paddingLG * 2}px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
@ -30,7 +30,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
@media only screen and (max-width: ${token.screenLG}px) {
|
||||
&,
|
||||
&.rtl {
|
||||
padding: 0 48px;
|
||||
padding: 0 ${token.paddingLG * 2}px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
|
||||
import * as React from 'react';
|
||||
import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
|
||||
const whereCls = 'ant-where-checker';
|
||||
@ -20,7 +21,7 @@ const locales = {
|
||||
|
||||
// Check for browser support `:where` or not
|
||||
// Warning user if not support to modern browser
|
||||
export default function InfoNewVersion() {
|
||||
function InfoNewVersion() {
|
||||
const [location] = useLocale(locales);
|
||||
const [supportWhere, setSupportWhere] = React.useState(true);
|
||||
|
||||
@ -84,3 +85,5 @@ export default function InfoNewVersion() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InfoNewVersion;
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import React, { useContext } from 'react';
|
||||
import {
|
||||
AntDesignOutlined,
|
||||
BgColorsOutlined,
|
||||
@ -14,11 +15,11 @@ import {
|
||||
} from '@ant-design/icons';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import { createStyles } from 'antd-style';
|
||||
import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
|
||||
import { FormattedMessage, Link } from 'dumi';
|
||||
import RcFooter from 'rc-footer';
|
||||
import type { FooterColumn } from 'rc-footer/lib/column';
|
||||
import React, { useContext } from 'react';
|
||||
import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import useLocation from '../../../hooks/useLocation';
|
||||
import SiteContext from '../SiteContext';
|
||||
@ -42,47 +43,47 @@ const useStyle = () => {
|
||||
|
||||
return {
|
||||
holder: css`
|
||||
background: ${background};
|
||||
`,
|
||||
background: ${background};
|
||||
`,
|
||||
|
||||
footer: css`
|
||||
background: ${background};
|
||||
color: ${token.colorTextSecondary};
|
||||
box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h2,
|
||||
a {
|
||||
color: ${token.colorText};
|
||||
}
|
||||
|
||||
.rc-footer-column {
|
||||
margin-bottom: ${isMobile ? 60 : 0}px;
|
||||
:last-child {
|
||||
margin-bottom: ${isMobile ? 20 : 0}px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-footer-item-icon {
|
||||
top: -1.5px;
|
||||
}
|
||||
|
||||
.rc-footer-container {
|
||||
max-width: 1208px;
|
||||
margin-inline: auto;
|
||||
padding-inline: ${token.marginXXL}px;
|
||||
}
|
||||
|
||||
.rc-footer-bottom {
|
||||
background: ${background};
|
||||
color: ${token.colorTextSecondary};
|
||||
box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);
|
||||
.rc-footer-bottom-container {
|
||||
font-size: ${token.fontSize}px;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
h2,
|
||||
a {
|
||||
color: ${token.colorText};
|
||||
}
|
||||
|
||||
.rc-footer-column {
|
||||
margin-bottom: ${isMobile ? 60 : 0}px;
|
||||
:last-child {
|
||||
margin-bottom: ${isMobile ? 20 : 0}px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-footer-item-icon {
|
||||
top: -1.5px;
|
||||
}
|
||||
|
||||
.rc-footer-container {
|
||||
max-width: 1208px;
|
||||
margin-inline: auto;
|
||||
padding-inline: ${token.marginXXL}px;
|
||||
}
|
||||
|
||||
.rc-footer-bottom {
|
||||
box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);
|
||||
.rc-footer-bottom-container {
|
||||
font-size: ${token.fontSize}px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
})();
|
||||
};
|
||||
@ -246,7 +247,7 @@ const Footer: React.FC = () => {
|
||||
en: 'JoinUs',
|
||||
}),
|
||||
LinkComponent: Link,
|
||||
} as unknown as typeof col2['items'][number]);
|
||||
} as unknown as (typeof col2)['items'][number]);
|
||||
}
|
||||
|
||||
const col3 = {
|
||||
|
||||
@ -30,7 +30,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
img {
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
margin-inline-end: 12px;
|
||||
margin-inline-end: ${token.marginSM}px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: ${mobileMaxWidth}px) {
|
||||
|
||||
@ -30,13 +30,21 @@ const locales = {
|
||||
|
||||
// ============================= Style =============================
|
||||
const useStyle = createStyles(({ token }) => {
|
||||
const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } =
|
||||
token;
|
||||
const {
|
||||
antCls,
|
||||
iconCls,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
headerHeight,
|
||||
menuItemBorder,
|
||||
colorPrimary,
|
||||
colorText,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
nav: css`
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
font-size: ${fontSize}px;
|
||||
font-family: Avenir, ${fontFamily}, sans-serif;
|
||||
border: 0;
|
||||
|
||||
@ -46,8 +54,8 @@ const useStyle = createStyles(({ token }) => {
|
||||
& > ${antCls}-menu-item, & > ${antCls}-menu-submenu {
|
||||
min-width: ${40 + 12 * 2}px;
|
||||
height: ${headerHeight}px;
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
padding-inline-end: ${token.paddingSM}px;
|
||||
padding-inline-start: ${token.paddingSM}px;
|
||||
line-height: ${headerHeight}px;
|
||||
|
||||
&::after {
|
||||
@ -92,11 +100,11 @@ const useStyle = createStyles(({ token }) => {
|
||||
}
|
||||
|
||||
${antCls}-menu-item-group-title {
|
||||
padding-left: 24px;
|
||||
padding-inline-start: ${token.paddingLG}px;
|
||||
}
|
||||
|
||||
${antCls}-menu-item-group-list {
|
||||
padding: 0 16px;
|
||||
padding: 0 ${token.paddingLG}px;
|
||||
}
|
||||
|
||||
${antCls}-menu-item,
|
||||
|
||||
@ -83,7 +83,7 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
color: ${searchIconColor};
|
||||
background-color: rgba(150, 150, 150, 0.06);
|
||||
border-color: rgba(100, 100, 100, 0.2);
|
||||
border-radius: 4px;
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
}
|
||||
|
||||
.dumi-default-search-popover {
|
||||
|
||||
@ -21,14 +21,14 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
> ${antCls}-menu-item,
|
||||
${antCls}-menu-item a {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-size: ${token.fontSize}px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> ${antCls}-menu-item-group > ${antCls}-menu-item-group-title {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
margin-top: ${token.margin}px;
|
||||
margin-bottom: ${token.margin}px;
|
||||
font-size: ${token.fontSize}px;
|
||||
|
||||
&::after {
|
||||
position: relative;
|
||||
@ -53,32 +53,32 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
> ${antCls}-menu-item-group
|
||||
> ${antCls}-menu-item-group-list
|
||||
> ${antCls}-menu-item {
|
||||
padding-left: 40px !important;
|
||||
padding-inline-start: 40px !important;
|
||||
|
||||
${antCls}-row-rtl & {
|
||||
padding-right: 40px !important;
|
||||
padding-left: 16px !important;
|
||||
padding-inline-end: 40px !important;
|
||||
padding-inline-start: ${token.padding}px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Nest Category > Type > Article
|
||||
&${antCls}-menu-inline {
|
||||
${antCls}-menu-item-group-title {
|
||||
margin-left: 4px;
|
||||
padding-left: 60px;
|
||||
margin-inline-start: ${token.marginXXS}px;
|
||||
padding-inline-start: 60px;
|
||||
|
||||
${antCls}-row-rtl & {
|
||||
padding-right: 60px;
|
||||
padding-left: 16px;
|
||||
padding-inline-end: 60px;
|
||||
padding-inline-start: ${token.padding}px;
|
||||
}
|
||||
}
|
||||
|
||||
${antCls}-menu-item-group-list > ${antCls}-menu-item {
|
||||
padding-left: 80px !important;
|
||||
padding-inline-start: 80px !important;
|
||||
|
||||
${antCls}-row-rtl & {
|
||||
padding-right: 80px !important;
|
||||
padding-left: 16px !important;
|
||||
padding-inline-end: 80px !important;
|
||||
padding-inline-start: ${token.padding}px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -93,13 +93,6 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
a[disabled] {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.chinese {
|
||||
margin-left: 6px;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
opacity: 0.67;
|
||||
}
|
||||
`,
|
||||
mainMenu: css`
|
||||
z-index: 1;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user