group.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. const genButtonBorderStyle = (buttonTypeCls, borderColor) => ({
  2. // Border
  3. [`> span, > ${buttonTypeCls}`]: {
  4. '&:not(:last-child)': {
  5. [`&, & > ${buttonTypeCls}`]: {
  6. '&:not(:disabled)': {
  7. borderInlineEndColor: borderColor
  8. }
  9. }
  10. },
  11. '&:not(:first-child)': {
  12. [`&, & > ${buttonTypeCls}`]: {
  13. '&:not(:disabled)': {
  14. borderInlineStartColor: borderColor
  15. }
  16. }
  17. }
  18. }
  19. });
  20. const genGroupStyle = token => {
  21. const {
  22. componentCls,
  23. fontSize,
  24. lineWidth,
  25. groupBorderColor,
  26. colorErrorHover
  27. } = token;
  28. return {
  29. [`${componentCls}-group`]: [{
  30. position: 'relative',
  31. display: 'inline-flex',
  32. // Border
  33. [`> span, > ${componentCls}`]: {
  34. '&:not(:last-child)': {
  35. [`&, & > ${componentCls}`]: {
  36. borderStartEndRadius: 0,
  37. borderEndEndRadius: 0
  38. }
  39. },
  40. '&:not(:first-child)': {
  41. marginInlineStart: token.calc(lineWidth).mul(-1).equal(),
  42. [`&, & > ${componentCls}`]: {
  43. borderStartStartRadius: 0,
  44. borderEndStartRadius: 0
  45. }
  46. }
  47. },
  48. [componentCls]: {
  49. position: 'relative',
  50. zIndex: 1,
  51. '&:hover, &:focus, &:active': {
  52. zIndex: 2
  53. },
  54. '&[disabled]': {
  55. zIndex: 0
  56. }
  57. },
  58. [`${componentCls}-icon-only`]: {
  59. fontSize
  60. }
  61. },
  62. // Border Color
  63. genButtonBorderStyle(`${componentCls}-primary`, groupBorderColor), genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover)]
  64. };
  65. };
  66. export default genGroupStyle;