columns.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import { unit } from '@ant-design/cssinjs';
  2. import { getStyle as getCheckboxStyle } from '../../checkbox/style';
  3. import { textEllipsis } from '../../style';
  4. const getColumnsStyle = token => {
  5. const {
  6. prefixCls,
  7. componentCls
  8. } = token;
  9. const cascaderMenuItemCls = `${componentCls}-menu-item`;
  10. const iconCls = `
  11. &${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
  12. ${cascaderMenuItemCls}-loading-icon
  13. `;
  14. return [
  15. // ==================== Checkbox ====================
  16. getCheckboxStyle(`${prefixCls}-checkbox`, token), {
  17. [componentCls]: {
  18. // ================== Checkbox ==================
  19. '&-checkbox': {
  20. top: 0,
  21. marginInlineEnd: token.paddingXS,
  22. pointerEvents: 'unset'
  23. },
  24. // ==================== Menu ====================
  25. // >>> Menus
  26. '&-menus': {
  27. display: 'flex',
  28. flexWrap: 'nowrap',
  29. alignItems: 'flex-start',
  30. [`&${componentCls}-menu-empty`]: {
  31. [`${componentCls}-menu`]: {
  32. width: '100%',
  33. height: 'auto',
  34. [cascaderMenuItemCls]: {
  35. color: token.colorTextDisabled
  36. }
  37. }
  38. }
  39. },
  40. // >>> Menu
  41. '&-menu': {
  42. flexGrow: 1,
  43. flexShrink: 0,
  44. minWidth: token.controlItemWidth,
  45. height: token.dropdownHeight,
  46. margin: 0,
  47. padding: token.menuPadding,
  48. overflow: 'auto',
  49. verticalAlign: 'top',
  50. listStyle: 'none',
  51. '-ms-overflow-style': '-ms-autohiding-scrollbar',
  52. // https://github.com/ant-design/ant-design/issues/11857
  53. '&:not(:last-child)': {
  54. borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
  55. },
  56. '&-item': Object.assign(Object.assign({}, textEllipsis), {
  57. display: 'flex',
  58. flexWrap: 'nowrap',
  59. alignItems: 'center',
  60. padding: token.optionPadding,
  61. lineHeight: token.lineHeight,
  62. cursor: 'pointer',
  63. transition: `all ${token.motionDurationMid}`,
  64. borderRadius: token.borderRadiusSM,
  65. '&:hover': {
  66. background: token.controlItemBgHover
  67. },
  68. '&-disabled': {
  69. color: token.colorTextDisabled,
  70. cursor: 'not-allowed',
  71. '&:hover': {
  72. background: 'transparent'
  73. },
  74. [iconCls]: {
  75. color: token.colorTextDisabled
  76. }
  77. },
  78. [`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
  79. '&, &:hover': {
  80. color: token.optionSelectedColor,
  81. fontWeight: token.optionSelectedFontWeight,
  82. backgroundColor: token.optionSelectedBg
  83. }
  84. },
  85. '&-content': {
  86. flex: 'auto'
  87. },
  88. [iconCls]: {
  89. marginInlineStart: token.paddingXXS,
  90. color: token.colorIcon,
  91. fontSize: token.fontSizeIcon
  92. },
  93. '&-keyword': {
  94. color: token.colorHighlight
  95. }
  96. })
  97. }
  98. }
  99. }];
  100. };
  101. export default getColumnsStyle;