2022-05-19 10:06:58 +08:00
|
|
|
import type { UploadToken } from '.';
|
2022-06-27 14:25:59 +08:00
|
|
|
import type { GenerateStyle } from '../../theme';
|
2022-04-25 18:46:53 +08:00
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genDraggerStyle: GenerateStyle<UploadToken> = (token) => {
|
2022-04-25 18:46:53 +08:00
|
|
|
const { componentCls, iconCls } = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[`${componentCls}-wrapper`]: {
|
|
|
|
[`${componentCls}-drag`]: {
|
|
|
|
position: 'relative',
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
textAlign: 'center',
|
2022-07-21 17:00:42 +08:00
|
|
|
background: token.colorFillAlter,
|
2022-11-01 15:06:38 +08:00
|
|
|
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
|
|
|
|
borderRadius: token.borderRadiusLG,
|
2022-04-25 18:46:53 +08:00
|
|
|
cursor: 'pointer',
|
|
|
|
transition: `border-color ${token.motionDurationSlow}`,
|
|
|
|
|
|
|
|
[componentCls]: {
|
|
|
|
padding: `${token.padding}px 0`,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-btn`]: {
|
|
|
|
display: 'table',
|
2022-04-26 10:21:50 +08:00
|
|
|
width: '100%',
|
2022-04-25 18:46:53 +08:00
|
|
|
height: '100%',
|
|
|
|
outline: 'none',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-drag-container`]: {
|
|
|
|
display: 'table-cell',
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
},
|
|
|
|
|
2022-05-19 10:06:58 +08:00
|
|
|
[`&:not(${componentCls}-disabled):hover`]: {
|
2022-04-25 18:46:53 +08:00
|
|
|
borderColor: token.colorPrimaryHover,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`p${componentCls}-drag-icon`]: {
|
2022-05-19 10:06:58 +08:00
|
|
|
marginBottom: token.margin,
|
2022-04-25 18:46:53 +08:00
|
|
|
|
|
|
|
[iconCls]: {
|
|
|
|
color: token.colorPrimary,
|
2022-05-19 10:06:58 +08:00
|
|
|
fontSize: token.uploadThumbnailSize,
|
2022-04-25 18:46:53 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`p${componentCls}-text`]: {
|
|
|
|
margin: `0 0 ${token.marginXXS}px`,
|
|
|
|
color: token.colorTextHeading,
|
|
|
|
fontSize: token.fontSizeLG,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`p${componentCls}-hint`]: {
|
2022-08-04 16:16:50 +08:00
|
|
|
color: token.colorTextDescription,
|
2022-11-01 15:06:38 +08:00
|
|
|
fontSize: token.fontSize,
|
2022-04-25 18:46:53 +08:00
|
|
|
},
|
2022-05-19 10:06:58 +08:00
|
|
|
|
|
|
|
// ===================== Disabled =====================
|
|
|
|
[`&${componentCls}-disabled`]: {
|
|
|
|
cursor: 'not-allowed',
|
|
|
|
|
|
|
|
[`p${componentCls}-drag-icon ${iconCls},
|
|
|
|
p${componentCls}-text,
|
|
|
|
p${componentCls}-hint
|
|
|
|
`]: {
|
|
|
|
color: token.colorTextDisabled,
|
|
|
|
},
|
|
|
|
},
|
2022-04-25 18:46:53 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export default genDraggerStyle;
|