horizontal.js 1.4 KB

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