mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-19 00:41:03 +08:00

Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
// Style as inline component
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
|
|
|
import { genCompactItemStyle } from '../../style/compact-item';
|
|
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
|
|
import type { GenerateStyle } from '../../theme/internal';
|
|
import { genSubStyleComponent } from '../../theme/internal';
|
|
import type { ButtonToken } from './token';
|
|
import { prepareComponentToken, prepareToken } from './token';
|
|
|
|
const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
|
|
const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
|
|
const insetOffset = calc(lineWidth).mul(-1).equal();
|
|
const getCompactBorderStyle = (vertical?: boolean) => {
|
|
const selector = `${componentCls}-compact${vertical ? '-vertical' : ''}-item${componentCls}-primary:not([disabled])`;
|
|
return {
|
|
[`${selector} + ${selector}::before`]: {
|
|
position: 'absolute',
|
|
top: vertical ? insetOffset : 0,
|
|
insetInlineStart: vertical ? 0 : insetOffset,
|
|
backgroundColor: colorPrimaryHover,
|
|
content: '""',
|
|
width: vertical ? '100%' : lineWidth,
|
|
height: vertical ? lineWidth : '100%',
|
|
} as CSSObject,
|
|
};
|
|
};
|
|
// Special styles for Primary Button
|
|
return {
|
|
...getCompactBorderStyle(),
|
|
...getCompactBorderStyle(true),
|
|
};
|
|
};
|
|
|
|
// ============================== Export ==============================
|
|
export default genSubStyleComponent(
|
|
['Button', 'compact'],
|
|
(token) => {
|
|
const buttonToken = prepareToken(token);
|
|
|
|
return [
|
|
// Space Compact
|
|
genCompactItemStyle(buttonToken),
|
|
genCompactItemVerticalStyle(buttonToken),
|
|
genButtonCompactStyle(buttonToken),
|
|
];
|
|
},
|
|
prepareComponentToken,
|
|
);
|