group.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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. colorPrimaryHover,
  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: -lineWidth,
  42. [`&, & > ${componentCls}`]: {
  43. borderStartStartRadius: 0,
  44. borderEndStartRadius: 0
  45. }
  46. }
  47. },
  48. [componentCls]: {
  49. position: 'relative',
  50. zIndex: 1,
  51. [`&:hover,
  52. &:focus,
  53. &:active`]: {
  54. zIndex: 2
  55. },
  56. '&[disabled]': {
  57. zIndex: 0
  58. }
  59. },
  60. [`${componentCls}-icon-only`]: {
  61. fontSize
  62. }
  63. },
  64. // Border Color
  65. genButtonBorderStyle(`${componentCls}-primary`, colorPrimaryHover), genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover)]
  66. };
  67. };
  68. export default genGroupStyle;