horizontal.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. const getHorizontalStyle = token => {
  2. const {
  3. componentCls,
  4. motionDurationSlow,
  5. menuHorizontalHeight,
  6. colorSplit,
  7. lineWidth,
  8. lineType,
  9. menuItemPaddingInline
  10. } = token;
  11. return {
  12. [`${componentCls}-horizontal`]: {
  13. lineHeight: `${menuHorizontalHeight}px`,
  14. border: 0,
  15. borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
  16. boxShadow: 'none',
  17. '&::after': {
  18. display: 'block',
  19. clear: 'both',
  20. height: 0,
  21. content: '"\\20"'
  22. },
  23. // ======================= Item =======================
  24. [`${componentCls}-item, ${componentCls}-submenu`]: {
  25. position: 'relative',
  26. display: 'inline-block',
  27. verticalAlign: 'bottom',
  28. paddingInline: menuItemPaddingInline
  29. },
  30. [`> ${componentCls}-item:hover,
  31. > ${componentCls}-item-active,
  32. > ${componentCls}-submenu ${componentCls}-submenu-title:hover`]: {
  33. backgroundColor: 'transparent'
  34. },
  35. [`${componentCls}-item, ${componentCls}-submenu-title`]: {
  36. transition: [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`].join(',')
  37. },
  38. // ===================== Sub Menu =====================
  39. [`${componentCls}-submenu-arrow`]: {
  40. display: 'none'
  41. }
  42. }
  43. };
  44. };
  45. export default getHorizontalStyle;