dragger.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import { unit } from '@ant-design/cssinjs';
  2. const genDraggerStyle = token => {
  3. const {
  4. componentCls,
  5. iconCls
  6. } = token;
  7. return {
  8. [`${componentCls}-wrapper`]: {
  9. [`${componentCls}-drag`]: {
  10. position: 'relative',
  11. width: '100%',
  12. height: '100%',
  13. textAlign: 'center',
  14. background: token.colorFillAlter,
  15. border: `${unit(token.lineWidth)} dashed ${token.colorBorder}`,
  16. borderRadius: token.borderRadiusLG,
  17. cursor: 'pointer',
  18. transition: `border-color ${token.motionDurationSlow}`,
  19. [componentCls]: {
  20. padding: token.padding
  21. },
  22. [`${componentCls}-btn`]: {
  23. display: 'table',
  24. width: '100%',
  25. height: '100%',
  26. outline: 'none',
  27. borderRadius: token.borderRadiusLG,
  28. '&:focus-visible': {
  29. outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`
  30. }
  31. },
  32. [`${componentCls}-drag-container`]: {
  33. display: 'table-cell',
  34. verticalAlign: 'middle'
  35. },
  36. [`
  37. &:not(${componentCls}-disabled):hover,
  38. &-hover:not(${componentCls}-disabled)
  39. `]: {
  40. borderColor: token.colorPrimaryHover
  41. },
  42. [`p${componentCls}-drag-icon`]: {
  43. marginBottom: token.margin,
  44. [iconCls]: {
  45. color: token.colorPrimary,
  46. fontSize: token.uploadThumbnailSize
  47. }
  48. },
  49. [`p${componentCls}-text`]: {
  50. margin: `0 0 ${unit(token.marginXXS)}`,
  51. color: token.colorTextHeading,
  52. fontSize: token.fontSizeLG
  53. },
  54. [`p${componentCls}-hint`]: {
  55. color: token.colorTextDescription,
  56. fontSize: token.fontSize
  57. },
  58. // ===================== Disabled =====================
  59. [`&${componentCls}-disabled`]: {
  60. [`p${componentCls}-drag-icon ${iconCls},
  61. p${componentCls}-text,
  62. p${componentCls}-hint
  63. `]: {
  64. color: token.colorTextDisabled
  65. }
  66. }
  67. }
  68. }
  69. };
  70. };
  71. export default genDraggerStyle;