dragger.js 1.8 KB

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