You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.4 KiB
130 lines
3.4 KiB
import type { UploadToken } from '.';
|
|
import type { GenerateStyle } from '../../theme/internal';
|
|
import { clearFix, textEllipsis } from '../../style';
|
|
|
|
const genListStyle: GenerateStyle<UploadToken> = token => {
|
|
const { componentCls, antCls, iconCls, fontSize, lineHeight } = token;
|
|
const itemCls = `${componentCls}-list-item`;
|
|
const actionsCls = `${itemCls}-actions`;
|
|
const actionCls = `${itemCls}-action`;
|
|
const listItemHeightSM = Math.round(fontSize * lineHeight);
|
|
|
|
return {
|
|
[`${componentCls}-wrapper`]: {
|
|
[`${componentCls}-list`]: {
|
|
...clearFix(),
|
|
lineHeight: token.lineHeight,
|
|
|
|
[itemCls]: {
|
|
position: 'relative',
|
|
height: token.lineHeight * fontSize,
|
|
marginTop: token.marginXS,
|
|
fontSize,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
transition: `background-color ${token.motionDurationSlow}`,
|
|
|
|
'&:hover': {
|
|
backgroundColor: token.controlItemBgHover,
|
|
},
|
|
|
|
[`${itemCls}-name`]: {
|
|
...textEllipsis,
|
|
padding: `0 ${token.paddingXS}px`,
|
|
lineHeight,
|
|
flex: 'auto',
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
},
|
|
|
|
[actionsCls]: {
|
|
[actionCls]: {
|
|
opacity: 0,
|
|
},
|
|
|
|
[`${actionCls}${antCls}-btn-sm`]: {
|
|
height: listItemHeightSM,
|
|
border: 0,
|
|
lineHeight: 1,
|
|
// FIXME: should not override small button
|
|
'> span': {
|
|
transform: 'scale(1)',
|
|
},
|
|
},
|
|
|
|
[`
|
|
${actionCls}:focus,
|
|
&.picture ${actionCls}
|
|
`]: {
|
|
opacity: 1,
|
|
},
|
|
|
|
[iconCls]: {
|
|
color: token.colorTextDescription,
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
},
|
|
|
|
[`&:hover ${iconCls}`]: {
|
|
color: token.colorText,
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-icon ${iconCls}`]: {
|
|
color: token.colorTextDescription,
|
|
fontSize,
|
|
},
|
|
|
|
[`${itemCls}-progress`]: {
|
|
position: 'absolute',
|
|
bottom: -token.uploadProgressOffset,
|
|
width: '100%',
|
|
paddingInlineStart: fontSize + token.paddingXS,
|
|
fontSize,
|
|
lineHeight: 0,
|
|
pointerEvents: 'none',
|
|
|
|
'> div': {
|
|
margin: 0,
|
|
},
|
|
},
|
|
},
|
|
|
|
[`${itemCls}:hover ${actionCls}`]: {
|
|
opacity: 1,
|
|
color: token.colorText,
|
|
},
|
|
|
|
[`${itemCls}-error`]: {
|
|
color: token.colorError,
|
|
[`${itemCls}-name, ${componentCls}-icon ${iconCls}`]: {
|
|
color: token.colorError,
|
|
},
|
|
|
|
[actionsCls]: {
|
|
[`${iconCls}, ${iconCls}:hover`]: {
|
|
color: token.colorError,
|
|
},
|
|
|
|
[actionCls]: {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-list-item-container`]: {
|
|
transition: `opacity ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
|
|
|
|
// For smooth removing animation
|
|
'&::before': {
|
|
display: 'table',
|
|
width: 0,
|
|
height: 0,
|
|
content: '""',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
export default genListStyle;
|