mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-30 12:28:33 +08:00
e8fa5938ab
* site: use CSS logical properties * Update components/anchor/demo/targetOffset.tsx Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * chore: fix * fix: add more * fix: add more --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
206 lines
4.7 KiB
TypeScript
206 lines
4.7 KiB
TypeScript
import React from 'react';
|
|
import { css, Global } from '@emotion/react';
|
|
import { useTheme } from 'antd-style';
|
|
|
|
export default () => {
|
|
const token = useTheme();
|
|
|
|
return (
|
|
<Global
|
|
styles={css`
|
|
.preview-image-boxes {
|
|
display: flex;
|
|
float: right;
|
|
clear: both;
|
|
width: 496px;
|
|
margin: 0 0 70px 64px;
|
|
|
|
&-with-carousel {
|
|
width: 420px;
|
|
|
|
.preview-image-box img {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.ant-row-rtl & {
|
|
float: left;
|
|
margin: 0 64px 70px 0;
|
|
}
|
|
}
|
|
|
|
.preview-image-boxes + .preview-image-boxes {
|
|
margin-top: -35px;
|
|
}
|
|
|
|
.preview-image-box {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.preview-image-box + .preview-image-box {
|
|
margin-inline-start: ${token.marginLG}px;
|
|
|
|
.ant-row-rtl & {
|
|
margin-inline-end: ${token.marginLG}px;
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
.preview-image-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: ${token.padding}px;
|
|
text-align: center;
|
|
background: #f2f4f5;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.preview-image-wrapper.video {
|
|
display: block;
|
|
padding: 0;
|
|
background: 0;
|
|
}
|
|
|
|
.preview-image-wrapper video {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
+ svg {
|
|
position: absolute;
|
|
top: 0;
|
|
inset-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
.preview-image-wrapper.good::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
inset-inline-start: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: ${token.colorPrimary};
|
|
content: '';
|
|
}
|
|
|
|
.preview-image-wrapper.bad::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
inset-inline-start: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: ${token.colorError};
|
|
content: '';
|
|
}
|
|
|
|
.preview-image-title {
|
|
margin-top: ${token.marginMD}px;
|
|
color: ${token.colorText};
|
|
font-size: ${token.fontSizeSM}px;
|
|
}
|
|
|
|
.preview-image-description {
|
|
margin-top: 2px;
|
|
color: ${token.colorTextSecondary};
|
|
font-size: ${token.fontSizeSM}px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.preview-image-description hr {
|
|
margin: 2px 0;
|
|
background: none;
|
|
border: 0;
|
|
}
|
|
|
|
.preview-image-box img {
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
padding: ${token.paddingSM}px;
|
|
background: ${token.colorBgContainer};
|
|
border-radius: ${token.borderRadius}px;
|
|
cursor: pointer;
|
|
transition: all ${token.motionDurationSlow};
|
|
|
|
&.no-padding {
|
|
padding: 0;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.preview-image-boxes.preview-image-boxes-with-carousel img {
|
|
padding: 0;
|
|
box-shadow:
|
|
0 1px 0 0 #ddd,
|
|
0 3px 0 0 ${token.colorBgContainer},
|
|
0 4px 0 0 #ddd,
|
|
0 6px 0 0 ${token.colorBgContainer},
|
|
0 7px 0 0 #ddd;
|
|
}
|
|
|
|
.preview-image-box img:hover {
|
|
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.transition-video-player,
|
|
.motion-video-min {
|
|
float: right;
|
|
width: 600px;
|
|
padding: 0 0 70px 20px;
|
|
|
|
.preview-image-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
.ant-row-rtl & {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.motion-video-min {
|
|
width: 390px;
|
|
}
|
|
|
|
.motion-principle-wrapper {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: ${token.marginXXL}px 0 ${token.marginLG}px;
|
|
}
|
|
|
|
.principle-wrapper {
|
|
width: 100%;
|
|
|
|
.principle {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 180px;
|
|
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: ${token.borderRadiusSM}px;
|
|
|
|
&:last-child {
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
h4 {
|
|
margin: ${token.margin}px 0 ${token.marginXS}px;
|
|
}
|
|
|
|
p {
|
|
font-size: ${token.fontSizeSM}px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
}
|
|
`}
|
|
/>
|
|
);
|
|
};
|