compact.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536
  1. import { genCompactItemStyle } from '../../style/compact-item';
  2. import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
  3. import { genSubStyleComponent } from '../../theme/internal';
  4. import { prepareComponentToken, prepareToken } from './token';
  5. const genButtonCompactStyle = token => {
  6. const {
  7. componentCls,
  8. colorPrimaryHover,
  9. lineWidth,
  10. calc
  11. } = token;
  12. const insetOffset = calc(lineWidth).mul(-1).equal();
  13. const getCompactBorderStyle = vertical => {
  14. const selector = `${componentCls}-compact${vertical ? '-vertical' : ''}-item${componentCls}-primary:not([disabled])`;
  15. return {
  16. [`${selector} + ${selector}::before`]: {
  17. position: 'absolute',
  18. top: vertical ? insetOffset : 0,
  19. insetInlineStart: vertical ? 0 : insetOffset,
  20. backgroundColor: colorPrimaryHover,
  21. content: '""',
  22. width: vertical ? '100%' : lineWidth,
  23. height: vertical ? lineWidth : '100%'
  24. }
  25. };
  26. };
  27. // Special styles for Primary Button
  28. return Object.assign(Object.assign({}, getCompactBorderStyle()), getCompactBorderStyle(true));
  29. };
  30. // ============================== Export ==============================
  31. export default genSubStyleComponent(['Button', 'compact'], token => {
  32. const buttonToken = prepareToken(token);
  33. return [
  34. // Space Compact
  35. genCompactItemStyle(buttonToken), genCompactItemVerticalStyle(buttonToken), genButtonCompactStyle(buttonToken)];
  36. }, prepareComponentToken);