compact-item.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // handle border collapse
  2. function compactItemBorder(token, parentCls, options, prefixCls) {
  3. const {
  4. focusElCls,
  5. focus,
  6. borderElCls
  7. } = options;
  8. const childCombinator = borderElCls ? '> *' : '';
  9. const hoverEffects = ['hover', focus ? 'focus' : null, 'active'].filter(Boolean).map(n => `&:${n} ${childCombinator}`).join(',');
  10. return {
  11. [`&-item:not(${parentCls}-last-item)`]: {
  12. marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal()
  13. },
  14. [`&-item:not(${prefixCls}-status-success)`]: {
  15. zIndex: 2
  16. },
  17. '&-item': Object.assign(Object.assign({
  18. [hoverEffects]: {
  19. zIndex: 3
  20. }
  21. }, focusElCls ? {
  22. [`&${focusElCls}`]: {
  23. zIndex: 3
  24. }
  25. } : {}), {
  26. [`&[disabled] ${childCombinator}`]: {
  27. zIndex: 0
  28. }
  29. })
  30. };
  31. }
  32. // handle border-radius
  33. function compactItemBorderRadius(prefixCls, parentCls, options) {
  34. const {
  35. borderElCls
  36. } = options;
  37. const childCombinator = borderElCls ? `> ${borderElCls}` : '';
  38. return {
  39. [`&-item:not(${parentCls}-first-item):not(${parentCls}-last-item) ${childCombinator}`]: {
  40. borderRadius: 0
  41. },
  42. [`&-item:not(${parentCls}-last-item)${parentCls}-first-item`]: {
  43. [`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]: {
  44. borderStartEndRadius: 0,
  45. borderEndEndRadius: 0
  46. }
  47. },
  48. [`&-item:not(${parentCls}-first-item)${parentCls}-last-item`]: {
  49. [`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]: {
  50. borderStartStartRadius: 0,
  51. borderEndStartRadius: 0
  52. }
  53. }
  54. };
  55. }
  56. export function genCompactItemStyle(token, options = {
  57. focus: true
  58. }) {
  59. const {
  60. componentCls
  61. } = token;
  62. const compactCls = `${componentCls}-compact`;
  63. return {
  64. [compactCls]: Object.assign(Object.assign({}, compactItemBorder(token, compactCls, options, componentCls)), compactItemBorderRadius(componentCls, compactCls, options))
  65. };
  66. }