test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 04:30:06 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

docs: improve home page banner style (#45459)

Browse Source
This commit is contained in:
afc163 2023-10-20 23:05:04 +08:00 committed by GitHub
parent 29551aaaba
commit cd03c11727
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.dumi/pages/index/components/PreviewBanner/index.tsx
View File

@ -28,9 +28,16 @@ const useStyle = () => {
const { direction } = React.useContext(ConfigProvider.ConfigContext);
const isRTL = direction === 'rtl';
return createStyles(({ token, css }) => {
return createStyles(({ token, css, cx }) => {
const textShadow = `0 0 3px ${token.colorBgContainer}`;
const mask = cx(css`
position: absolute;
inset: 0;
backdrop-filter: blur(2.5px);
transition: all 1s ease;
`);
return {
holder: css`
height: 520px;
@ -42,8 +49,14 @@ const useStyle = () => {
overflow: hidden;
perspective: 800px;
row-gap: ${token.marginXL}px;
&:hover .${mask} {
backdrop-filter: none;
}
`,
mask,
typography: css`
text-align: center;
position: relative;
@ -117,6 +130,7 @@ const PreviewBanner: React.FC<PreviewBannerProps> = (props) => {
<div className={styles.holder}>
{/* Mobile not show the component preview */}
{!isMobile && <ComponentsBlock className={styles.block} style={componentsBlockStyle} />}
<div className={styles.mask} />
<Typography className={styles.typography}>
<h1>Ant Design 5.0</h1>