directory.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.genDirectoryStyle = void 0;
  6. // ============================ Directory =============================
  7. const genDirectoryStyle = ({
  8. treeCls,
  9. treeNodeCls,
  10. directoryNodeSelectedBg,
  11. directoryNodeSelectedColor,
  12. motionDurationMid,
  13. borderRadius,
  14. controlItemBgHover
  15. }) => ({
  16. [`${treeCls}${treeCls}-directory ${treeNodeCls}`]: {
  17. // >>> Title
  18. [`${treeCls}-node-content-wrapper`]: {
  19. position: 'static',
  20. [`&:has(${treeCls}-drop-indicator)`]: {
  21. position: 'relative'
  22. },
  23. [`> *:not(${treeCls}-drop-indicator)`]: {
  24. position: 'relative'
  25. },
  26. '&:hover': {
  27. background: 'transparent'
  28. },
  29. // Expand interactive area to whole line
  30. '&:before': {
  31. position: 'absolute',
  32. inset: 0,
  33. transition: `background-color ${motionDurationMid}`,
  34. content: '""',
  35. borderRadius
  36. },
  37. '&:hover:before': {
  38. background: controlItemBgHover
  39. }
  40. },
  41. [`${treeCls}-switcher, ${treeCls}-checkbox, ${treeCls}-draggable-icon`]: {
  42. zIndex: 1
  43. },
  44. // ============= Selected =============
  45. '&-selected': {
  46. background: directoryNodeSelectedBg,
  47. borderRadius,
  48. [`${treeCls}-switcher, ${treeCls}-draggable-icon`]: {
  49. color: directoryNodeSelectedColor
  50. },
  51. // >>> Title
  52. [`${treeCls}-node-content-wrapper`]: {
  53. color: directoryNodeSelectedColor,
  54. background: 'transparent',
  55. '&, &:hover': {
  56. color: directoryNodeSelectedColor
  57. },
  58. '&:before, &:hover:before': {
  59. background: directoryNodeSelectedBg
  60. }
  61. }
  62. }
  63. }
  64. });
  65. exports.genDirectoryStyle = genDirectoryStyle;