mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat(theme): adjust font-size in compact mode (#23135)
* feat(theme): adjust font-size in compact mode With compact theme mode, we adjust default font-size from 14px to 12px. Closes #23015 * patch: update docs min font-size * patch * patch * patch * patch * patch * patch
This commit is contained in:
zefeng
GitHub
parent
a534e4a56a
commit
14417f1614
@ -26,3 +26,9 @@ ReactDOM.render(
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="compact"] .code-box-demo .ant-alert {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
|
||||
&&-no-icon {
|
||||
padding: @alert-no-icon-padding-vertical 15px;
|
||||
.@{alert-prefix-cls}-close-icon {
|
||||
top: @alert-no-icon-padding-vertical + @font-size-base * @line-height-base / 2 -
|
||||
@font-size-base / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&&-closable {
|
||||
@ -21,14 +25,14 @@
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
|
||||
top: @alert-icon-top;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&-description {
|
||||
display: none;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: @font-size-base + 8px;
|
||||
}
|
||||
|
||||
&-success {
|
||||
@ -71,12 +75,12 @@
|
||||
|
||||
&-close-icon {
|
||||
position: absolute;
|
||||
top: @padding-xs;
|
||||
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
|
||||
right: 16px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 22px;
|
||||
line-height: @font-size-sm;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
@ -101,7 +105,7 @@
|
||||
|
||||
&-with-description {
|
||||
position: relative;
|
||||
padding: 15px 15px 15px 64px;
|
||||
padding: @alert-with-description-padding;
|
||||
color: @alert-text-color;
|
||||
line-height: @line-height-base;
|
||||
border-radius: @border-radius-base;
|
||||
@ -113,15 +117,15 @@
|
||||
|
||||
&-with-description &-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 24px;
|
||||
font-size: 24px;
|
||||
top: @alert-with-description-icon-top;
|
||||
left: @alert-with-description-icon-size;
|
||||
font-size: @alert-with-description-icon-size;
|
||||
}
|
||||
|
||||
&-with-description &-close-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
top: @padding-xs;
|
||||
right: @padding-xs;
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
&-link {
|
||||
padding: 7px 0 7px 16px;
|
||||
padding: @anchor-link-padding;
|
||||
line-height: 1.143;
|
||||
|
||||
&-title {
|
||||
|
||||
@ -166,7 +166,7 @@
|
||||
display: block;
|
||||
min-width: 32px;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -171,7 +171,7 @@
|
||||
display: inline-block;
|
||||
&-item {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-right: @checkbox-group-item-margin-right;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
padding: @collapse-header-padding;
|
||||
padding-left: @collapse-header-padding-extra;
|
||||
color: @heading-color;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
.clearfix;
|
||||
@ -36,7 +36,7 @@
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: @padding-md;
|
||||
left: @collapse-header-arrow-left;
|
||||
display: inline-block;
|
||||
font-size: @font-size-sm;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
@import './panel';
|
||||
|
||||
@picker-prefix-cls: ~'@{ant-prefix}-picker';
|
||||
@picker-text-height: 40px;
|
||||
|
||||
.picker-padding(@input-height, @font-size, @padding-horizontal) {
|
||||
// font height probably 22.0001， So use floor better
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
.@{picker-prefix-cls} {
|
||||
@picker-arrow-size: 7px;
|
||||
@picker-panel-width: 280px;
|
||||
@picker-year-month-cell-width: 60px;
|
||||
@picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4;
|
||||
|
||||
&-panel {
|
||||
display: inline-block;
|
||||
@ -162,7 +162,7 @@
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
height: 24px;
|
||||
height: @picker-panel-cell-height;
|
||||
transform: translateY(-50%);
|
||||
content: '';
|
||||
}
|
||||
@ -172,9 +172,9 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
min-width: @picker-panel-cell-height;
|
||||
height: @picker-panel-cell-height;
|
||||
line-height: @picker-panel-cell-height;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background @animation-duration-slow, border @animation-duration-slow;
|
||||
}
|
||||
@ -378,7 +378,7 @@
|
||||
&-quarter-panel,
|
||||
&-month-panel {
|
||||
.@{picker-prefix-cls}-content {
|
||||
height: 265px;
|
||||
height: @picker-panel-without-time-cell-height * 4;
|
||||
}
|
||||
|
||||
.@{picker-cell-inner-cls} {
|
||||
@ -540,10 +540,10 @@
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-content {
|
||||
width: 36px * 7;
|
||||
width: @picker-panel-cell-width * 7;
|
||||
|
||||
th {
|
||||
width: 36px;
|
||||
width: @picker-panel-cell-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -99,9 +99,9 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
min-width: @picker-panel-cell-height;
|
||||
height: @picker-panel-cell-height;
|
||||
line-height: @picker-panel-cell-height;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background @animation-duration-slow, border @animation-duration-slow;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
&-row {
|
||||
> th,
|
||||
> td {
|
||||
padding-bottom: @padding-md;
|
||||
padding-bottom: @descriptions-item-padding-bottom;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
|
||||
@ -16,31 +16,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
|
||||
```jsx
|
||||
import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
|
||||
|
||||
const pStyle = {
|
||||
fontSize: 16,
|
||||
lineHeight: '24px',
|
||||
display: 'block',
|
||||
marginBottom: 16,
|
||||
};
|
||||
|
||||
const DescriptionItem = ({ title, content }) => (
|
||||
<div
|
||||
className="site-description-item-profile-wrapper"
|
||||
style={{
|
||||
fontSize: 14,
|
||||
lineHeight: '22px',
|
||||
marginBottom: 7,
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="site-description-item-profile-p"
|
||||
style={{
|
||||
marginRight: 8,
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
{title}:
|
||||
</p>
|
||||
<div className="site-description-item-profile-wrapper">
|
||||
<p className="site-description-item-profile-p-label">{title}:</p>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
@ -99,12 +77,10 @@ class App extends React.Component {
|
||||
onClose={this.onClose}
|
||||
visible={this.state.visible}
|
||||
>
|
||||
<p className="site-description-item-profile-p" style={{ ...pStyle, marginBottom: 24 }}>
|
||||
<p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
|
||||
User Profile
|
||||
</p>
|
||||
<p className="site-description-item-profile-p" style={pStyle}>
|
||||
Personal
|
||||
</p>
|
||||
<p className="site-description-item-profile-p">Personal</p>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<DescriptionItem title="Full Name" content="Lily" />
|
||||
@ -138,9 +114,7 @@ class App extends React.Component {
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider />
|
||||
<p className="site-description-item-profile-p" style={pStyle}>
|
||||
Company
|
||||
</p>
|
||||
<p className="site-description-item-profile-p">Company</p>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<DescriptionItem title="Position" content="Programmer" />
|
||||
@ -166,9 +140,7 @@ class App extends React.Component {
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider />
|
||||
<p className="site-description-item-profile-p" style={pStyle}>
|
||||
Contacts
|
||||
</p>
|
||||
<p className="site-description-item-profile-p">Contacts</p>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<DescriptionItem title="Email" content="AntDesign@example.com" />
|
||||
@ -201,8 +173,32 @@ ReactDOM.render(<App />, mountNode);
|
||||
```css
|
||||
.site-description-item-profile-wrapper {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.site-description-item-profile-p {
|
||||
|
||||
[data-theme='compact'] .site-description-item-profile-wrapper {
|
||||
font-size: 12px;
|
||||
line-height: 1.66667;
|
||||
}
|
||||
|
||||
.ant-drawer-body p.site-description-item-profile-p {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 16px;
|
||||
line-height: 1.5715;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
|
||||
font-size: 14px;
|
||||
line-height: 1.66667;
|
||||
}
|
||||
|
||||
.site-description-item-profile-p-label {
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
```
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
.@{empty-prefix-cls} {
|
||||
margin: 0 8px;
|
||||
font-size: @empty-font-size;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
|
||||
&-image {
|
||||
|
||||
@ -24,15 +24,9 @@ describe('Input.Password', () => {
|
||||
const wrapper = mount(<Input.Password />);
|
||||
wrapper.find('input').simulate('change', { target: { value: '111' } });
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('click');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('click');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -54,32 +48,13 @@ describe('Input.Password', () => {
|
||||
const wrapper = mount(<Input.Password defaultValue="111" autoFocus />, {
|
||||
attachTo: document.body,
|
||||
});
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(0)
|
||||
.getDOMNode(),
|
||||
);
|
||||
expect(document.activeElement).toBe(wrapper.find('input').at(0).getDOMNode());
|
||||
document.activeElement.setSelectionRange(2, 2);
|
||||
expect(document.activeElement.selectionStart).toBe(2);
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('mousedown');
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('mouseup');
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(0)
|
||||
.getDOMNode(),
|
||||
);
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('mousedown');
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('mouseup');
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('click');
|
||||
expect(document.activeElement).toBe(wrapper.find('input').at(0).getDOMNode());
|
||||
expect(document.activeElement.selectionStart).toBe(2);
|
||||
wrapper.unmount();
|
||||
});
|
||||
@ -92,13 +67,7 @@ describe('Input.Password', () => {
|
||||
.at('0')
|
||||
.simulate('change', { target: { value: 'value' } });
|
||||
await sleep();
|
||||
expect(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at('0')
|
||||
.getDOMNode()
|
||||
.getAttribute('value'),
|
||||
).toBeFalsy();
|
||||
expect(wrapper.find('input').at('0').getDOMNode().getAttribute('value')).toBeFalsy();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/20541
|
||||
@ -117,12 +86,6 @@ describe('Input.Password', () => {
|
||||
it('should not contain value attribute in input element with defautValue', async () => {
|
||||
const wrapper = mount(<Input.Password defaultValue="value" />);
|
||||
await sleep();
|
||||
expect(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at('0')
|
||||
.getDOMNode()
|
||||
.getAttribute('value'),
|
||||
).toBeFalsy();
|
||||
expect(wrapper.find('input').at('0').getDOMNode().getAttribute('value')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
margin-bottom: 4px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
> a {
|
||||
color: @text-color;
|
||||
transition: all 0.3s;
|
||||
@ -88,7 +88,7 @@
|
||||
&-description {
|
||||
color: @text-color-secondary;
|
||||
font-size: @list-item-meta-description-font-size;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
}
|
||||
&-action {
|
||||
@ -104,7 +104,7 @@
|
||||
padding: 0 @padding-xs;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
|
||||
@ -172,14 +172,14 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
padding: @menu-item-padding;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
|
||||
background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
|
||||
.@{iconfont-css-prefix} {
|
||||
min-width: 14px;
|
||||
margin-right: 10px;
|
||||
margin-right: @menu-item-icon-margin-right;
|
||||
font-size: @menu-icon-size;
|
||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
|
||||
+ span {
|
||||
@ -329,7 +329,7 @@
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
line-height: 46px;
|
||||
line-height: @menu-horizontal-line-height;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
|
||||
@notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
@notification-width: 384px;
|
||||
@notification-padding-vertical: 16px;
|
||||
@notification-padding-horizontal: 24px;
|
||||
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
|
||||
@notification-margin-bottom: 16px;
|
||||
|
||||
|
||||
@ -163,12 +163,21 @@ ReactDOM.render(
|
||||
}
|
||||
|
||||
#components-page-header-demo-content .example-link {
|
||||
line-height: 24px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
[data-theme='compact'] #components-page-header-demo-content .example-link {
|
||||
line-height: 20px;
|
||||
}
|
||||
#components-page-header-demo-content .example-link-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] #components-page-header-demo-content .example-link-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#components-page-header-demo-content .ant-page-header-rtl .example-link {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
margin-bottom: 0;
|
||||
color: @heading-color;
|
||||
font-weight: 600;
|
||||
font-size: @heading-4-size;
|
||||
font-size: @page-header-heading-title;
|
||||
line-height: 32px;
|
||||
.text-overflow-ellipsis;
|
||||
}
|
||||
@ -77,8 +77,8 @@
|
||||
&-sub-title {
|
||||
margin-right: @margin-sm;
|
||||
color: @text-color-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
font-size: @page-header-heading-sub-title;
|
||||
line-height: @line-height-base;
|
||||
.text-overflow-ellipsis;
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
.@{ant-prefix}-tabs-nav {
|
||||
.@{ant-prefix}-tabs-tab {
|
||||
padding: @tabs-horizontal-padding-sm;
|
||||
font-size: 16px;
|
||||
font-size: @page-header-tabs-tab-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
font-size: @font-size-base;
|
||||
> .@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: 8px; // 4px for padding-top, 4px for vertical middle;
|
||||
top: 4px + (@line-height-base * @font-size-base - @font-size-base)/2; // 4px for padding-top, 4px for vertical middle;
|
||||
color: @warning-color;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
width: 2em;
|
||||
margin-left: 8px;
|
||||
color: @text-color-secondary;
|
||||
font-size: 1em;
|
||||
font-size: @progress-text-font-size;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
@ -159,6 +159,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @progress-text-color;
|
||||
font-size: @progress-circle-text-font-size;
|
||||
line-height: 1;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-right: @radio-wrapper-margin-right;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -38,6 +38,7 @@
|
||||
.reset-component;
|
||||
|
||||
position: relative;
|
||||
top: @radio-top;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @rate-star-color;
|
||||
font-size: 20px;
|
||||
font-size: @rate-star-size;
|
||||
line-height: unset;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
|
||||
@ -34,26 +34,26 @@
|
||||
text-align: center;
|
||||
|
||||
> .anticon {
|
||||
font-size: 72px;
|
||||
font-size: @result-icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: @heading-color;
|
||||
font-size: 24px;
|
||||
font-size: @result-title-font-size;
|
||||
line-height: 1.8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
color: @text-color-secondary;
|
||||
font-size: 14px;
|
||||
font-size: @result-subtitle-font-size;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
margin-top: 32px;
|
||||
margin: @result-extra-margin;
|
||||
text-align: center;
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
|
||||
@ -31,12 +31,12 @@
|
||||
// Title
|
||||
.@{skeleton-title-prefix-cls} {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
height: @skeleton-title-height;
|
||||
margin-top: @margin-md;
|
||||
background: @skeleton-color;
|
||||
|
||||
+ .@{skeleton-paragraph-prefix-cls} {
|
||||
margin-top: @margin-lg;
|
||||
margin-top: @skeleton-title-paragraph-margin-top;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
> li {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
height: @skeleton-paragraph-li-height;
|
||||
list-style: none;
|
||||
background: @skeleton-color;
|
||||
|
||||
|
||||
@ -38,9 +38,9 @@
|
||||
|
||||
&-handle {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -5px;
|
||||
width: @slider-handle-size;
|
||||
height: @slider-handle-size;
|
||||
margin-top: @slider-handle-margin-top;
|
||||
background-color: @slider-handle-background-color;
|
||||
border: solid @slider-handle-border-width @slider-handle-color;
|
||||
border-radius: 50%;
|
||||
|
||||
@ -51,12 +51,11 @@
|
||||
width: @steps-desciption-max-width;
|
||||
}
|
||||
&-process .@{steps-prefix-cls}-item-icon {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
width: @steps-current-dot-size;
|
||||
height: @steps-current-dot-size;
|
||||
line-height: @steps-current-dot-size;
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
overflow: visible;
|
||||
&-icon {
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
margin: @steps-vertical-icon-margin;
|
||||
}
|
||||
&-content {
|
||||
display: block;
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
@import './default.less';
|
||||
|
||||
@line-height-base: 1.66667;
|
||||
@mode: compact;
|
||||
@font-size-base: 12px;
|
||||
@font-size-lg: @font-size-base + 2px;
|
||||
|
||||
// default paddings
|
||||
@default-padding-lg: 24px; // containers
|
||||
@ -41,19 +44,70 @@
|
||||
@btn-square-only-icon-size-sm: 14px;
|
||||
@btn-square-only-icon-size-lg: 16px;
|
||||
|
||||
// Breadcrumb
|
||||
// ---
|
||||
@breadcrumb-font-size: @font-size-base;
|
||||
@breadcrumb-icon-font-size: @font-size-base;
|
||||
|
||||
//Dropdown
|
||||
@dropdown-line-height: 18px;
|
||||
|
||||
// Menu
|
||||
@menu-item-padding: 0 12px;
|
||||
@menu-horizontal-line-height: 38px;
|
||||
@menu-inline-toplevel-item-height: 32px;
|
||||
@menu-item-height: 32px;
|
||||
@menu-item-vertical-margin: 0px;
|
||||
@menu-item-boundary-margin: 0px;
|
||||
@menu-item-icon-margin-right: 8px;
|
||||
|
||||
// Checkbox
|
||||
@checkbox-size: 14px;
|
||||
@checkbox-group-item-margin-right: 6px;
|
||||
|
||||
// picker
|
||||
@picker-panel-cell-height: 22px;
|
||||
@picker-panel-cell-width: 32px;
|
||||
@picker-text-height: 32px;
|
||||
@picker-time-panel-cell-height: 24px;
|
||||
@picker-panel-without-time-cell-height: 48px;
|
||||
|
||||
// Form
|
||||
// ---
|
||||
@form-item-margin-bottom: 16px;
|
||||
@form-vertical-label-padding: 0 0 4px;
|
||||
|
||||
// Rate
|
||||
// ---
|
||||
@rate-star-size: 16px;
|
||||
|
||||
// Radio
|
||||
// ---
|
||||
@radio-size: 14px;
|
||||
@radio-top: -2px;
|
||||
@radio-wrapper-margin-right: 6px;
|
||||
|
||||
// Switch
|
||||
// ---
|
||||
@switch-height: 20px;
|
||||
@switch-sm-height: 14px;
|
||||
@switch-min-width: 40px;
|
||||
@switch-sm-min-width: 24px;
|
||||
@switch-inner-margin: 0 22px 0 4px;
|
||||
|
||||
// Slider
|
||||
// ---
|
||||
@slider-handle-size: 12px;
|
||||
@slider-handle-margin-top: -4px;
|
||||
|
||||
// Input
|
||||
// ---
|
||||
@input-padding-vertical-base: max(
|
||||
round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 -
|
||||
@border-width-base,
|
||||
2px
|
||||
@input-padding-vertical-base: round(
|
||||
max(
|
||||
round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 -
|
||||
@border-width-base,
|
||||
2px
|
||||
)
|
||||
);
|
||||
@input-padding-horizontal-lg: 11px;
|
||||
|
||||
@ -61,10 +115,14 @@
|
||||
// ---
|
||||
@page-header-padding: 16px;
|
||||
@page-header-padding-vertical: 8px;
|
||||
@page-header-heading-title: 16px;
|
||||
@page-header-heading-sub-title: 12px;
|
||||
@page-header-tabs-tab-font-size: 14px;
|
||||
|
||||
// Pagination
|
||||
// ---
|
||||
@pagination-mini-options-size-changer-top: 1px;
|
||||
@pagination-item-size-sm: 22px;
|
||||
|
||||
// Cascader
|
||||
// ----
|
||||
@ -86,6 +144,7 @@
|
||||
// ---
|
||||
@transfer-item-padding-vertical: 3px;
|
||||
@transfer-list-search-icon-top: 8px;
|
||||
@transfer-header-height: 36px;
|
||||
|
||||
// Comment
|
||||
// ---
|
||||
@ -103,10 +162,13 @@
|
||||
@steps-icon-font-size: @font-size-base;
|
||||
@steps-dot-top: 4px;
|
||||
@steps-icon-top: 0px;
|
||||
@steps-small-icon-size: 20px;
|
||||
@steps-vertical-icon-margin: 0 12px 0 0;
|
||||
|
||||
// Collapse
|
||||
// ---
|
||||
@collapse-header-padding-extra: 32px;
|
||||
//@collapse-header-padding-extra: 32px;
|
||||
@collapse-content-padding: @padding-md @padding-lg;
|
||||
|
||||
// List
|
||||
// ---
|
||||
@ -127,6 +189,10 @@
|
||||
@modal-header-close-size: 44px;
|
||||
@modal-confirm-body-padding: 24px 24px 16px;
|
||||
|
||||
// Message
|
||||
// ---
|
||||
@message-notice-content-padding: 8px 16px;
|
||||
|
||||
// popover
|
||||
// --
|
||||
@popover-min-height: 28px;
|
||||
@ -137,11 +203,11 @@
|
||||
@card-padding-base: 16px;
|
||||
@card-head-height: 36px;
|
||||
@card-head-font-size: @card-head-font-size-sm;
|
||||
@card-head-padding: 8px;
|
||||
@card-head-padding: 8.5px;
|
||||
@card-padding-base: 12px;
|
||||
@card-padding-base-sm: @card-padding-base;
|
||||
@card-head-height-sm: 30px;
|
||||
@card-head-padding-sm: 4px;
|
||||
@card-head-padding-sm: 6px;
|
||||
@card-actions-li-margin: 4px 0;
|
||||
@card-head-tabs-margin-bottom: -9px;
|
||||
|
||||
@ -153,6 +219,8 @@
|
||||
@table-padding-horizontal-md: 8px;
|
||||
@table-padding-vertical-sm: 4px;
|
||||
@table-padding-horizontal-sm: 4px;
|
||||
@table-selection-column-width: 54px;
|
||||
@table-selection-extra-right: -4px;
|
||||
|
||||
// Statistic
|
||||
// ---
|
||||
@ -160,13 +228,63 @@
|
||||
|
||||
// Alert
|
||||
// ---
|
||||
@alert-with-description-no-icon-padding-vertical: 11px;
|
||||
@alert-with-description-no-icon-padding-vertical: 7px;
|
||||
@alert-with-description-padding-vertical: 11px;
|
||||
@alert-with-description-padding: @alert-with-description-padding-vertical 15px
|
||||
@alert-with-description-padding-vertical 48px;
|
||||
@alert-icon-top: 7px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
|
||||
@alert-with-description-icon-size: 20px;
|
||||
@alert-with-description-icon-top: @alert-with-description-padding-vertical;
|
||||
|
||||
// Skeleton
|
||||
// ---
|
||||
@skeleton-paragraph-margin-top: 20px;
|
||||
@skeleton-paragraph-li-margin-top: 12px;
|
||||
@skeleton-paragraph-li-height: 14px;
|
||||
@skeleton-title-height: 14px;
|
||||
@skeleton-title-paragraph-margin-top: 20px;
|
||||
|
||||
// Descriptions
|
||||
@descriptions-title-margin-bottom: 8px;
|
||||
@descriptions-default-padding: 12px @padding-lg;
|
||||
@descriptions-item-padding-bottom: @padding-xs;
|
||||
|
||||
// Avatar
|
||||
// ---
|
||||
@avatar-size-base: 28px;
|
||||
@avatar-size-lg: 32px;
|
||||
@avatar-size-sm: 22px;
|
||||
@avatar-font-size-base: 16px;
|
||||
@avatar-font-size-lg: 20px;
|
||||
@avatar-font-size-sm: 12px;
|
||||
|
||||
// Badge
|
||||
// ---
|
||||
@badge-height: 18px;
|
||||
|
||||
// Tag
|
||||
// ---
|
||||
@tag-line-height: 18px;
|
||||
|
||||
// Notification
|
||||
// ---
|
||||
@notification-padding-vertical: 12px;
|
||||
@notification-padding-horizontal: 16px;
|
||||
|
||||
// Result
|
||||
// ---
|
||||
@result-title-font-size: 20px;
|
||||
@result-icon-font-size: 64px;
|
||||
@result-extra-margin: 24px 0 0 0;
|
||||
|
||||
// Anchor
|
||||
// ---
|
||||
@anchor-link-padding: 4px 0 4px 16px;
|
||||
|
||||
// Tabs
|
||||
// ---
|
||||
@tabs-card-horizontal-padding: 4px @padding-md;
|
||||
|
||||
// Progress
|
||||
// ---
|
||||
@progress-circle-text-font-size: 0.833333em;
|
||||
|
||||
@ -226,6 +226,7 @@
|
||||
@checkbox-check-color: #fff;
|
||||
@checkbox-check-bg: @checkbox-check-color;
|
||||
@checkbox-border-width: @border-width-base;
|
||||
@checkbox-group-item-margin-right: 8px;
|
||||
|
||||
// Descriptions
|
||||
@descriptions-bg: #fafafa;
|
||||
@ -233,6 +234,7 @@
|
||||
@descriptions-default-padding: @padding-md @padding-lg;
|
||||
@descriptions-middle-padding: @padding-sm @padding-lg;
|
||||
@descriptions-small-padding: @padding-xs @padding-md;
|
||||
@descriptions-item-padding-bottom: @padding-md;
|
||||
|
||||
// Dropdown
|
||||
@dropdown-selected-color: @primary-color;
|
||||
@ -243,6 +245,7 @@
|
||||
|
||||
// Radio
|
||||
@radio-size: 16px;
|
||||
@radio-top: 0px;
|
||||
@radio-dot-color: @primary-color;
|
||||
@radio-dot-disabled-color: fade(@black, 20%);
|
||||
// solid text-color
|
||||
@ -258,6 +261,7 @@
|
||||
@radio-button-active-color: @primary-7;
|
||||
@radio-disabled-button-checked-bg: tint(@black, 90%);
|
||||
@radio-disabled-button-checked-color: @text-color-inverse;
|
||||
@radio-wrapper-margin-right: 8px;
|
||||
|
||||
// Media queries breakpoints
|
||||
// Extra small screen / phone
|
||||
@ -439,6 +443,7 @@
|
||||
// ---
|
||||
@anchor-bg: @component-background;
|
||||
@anchor-border-color: @border-color-split;
|
||||
@anchor-link-padding: 7px 0 7px 16px;
|
||||
|
||||
// Tooltip
|
||||
// ---
|
||||
@ -498,7 +503,8 @@
|
||||
@progress-text-color: @text-color;
|
||||
@progress-radius: 100px;
|
||||
@progress-steps-item-bg: #f3f3f3;
|
||||
|
||||
@progress-text-font-size: 1em;
|
||||
@progress-circle-text-font-size: 1em;
|
||||
// Menu
|
||||
// ---
|
||||
@menu-inline-toplevel-item-height: 40px;
|
||||
@ -518,6 +524,9 @@
|
||||
@menu-item-vertical-margin: 4px;
|
||||
@menu-item-font-size: @font-size-base;
|
||||
@menu-item-boundary-margin: 8px;
|
||||
@menu-item-padding: 0 20px;
|
||||
@menu-horizontal-line-height: 46px;
|
||||
@menu-item-icon-margin-right: 10px;
|
||||
|
||||
// dark theme
|
||||
@menu-dark-color: @text-color-secondary-dark;
|
||||
@ -566,12 +575,15 @@
|
||||
@table-filter-btns-bg: inherit;
|
||||
@table-filter-dropdown-bg: @component-background;
|
||||
@table-expand-icon-bg: @component-background;
|
||||
@table-selection-column-width: 60px;
|
||||
@table-selection-extra-right: -10px;
|
||||
|
||||
// Tag
|
||||
// --
|
||||
@tag-default-bg: @background-color-light;
|
||||
@tag-default-color: @text-color;
|
||||
@tag-font-size: @font-size-sm;
|
||||
@tag-line-height: 20px;
|
||||
|
||||
// TimePicker
|
||||
// ---
|
||||
@ -584,6 +596,10 @@
|
||||
@picker-date-hover-range-border-color: lighten(@primary-color, 20%);
|
||||
@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
|
||||
@picker-time-panel-cell-height: 28px;
|
||||
@picker-panel-cell-height: 24px;
|
||||
@picker-panel-cell-width: 36px;
|
||||
@picker-text-height: 40px;
|
||||
@picker-panel-without-time-cell-height: 66px;
|
||||
|
||||
// Calendar
|
||||
// ---
|
||||
@ -613,6 +629,7 @@
|
||||
// ---
|
||||
@rate-star-color: @yellow-6;
|
||||
@rate-star-bg: @border-color-split;
|
||||
@rate-star-size: 20px;
|
||||
|
||||
// Card
|
||||
// ---
|
||||
@ -707,6 +724,7 @@
|
||||
@switch-color: @primary-color;
|
||||
@switch-bg: @component-background;
|
||||
@switch-shadow-color: fade(#00230b, 20%);
|
||||
@switch-inner-margin: 0 24px 0 6px;
|
||||
|
||||
// Pagination
|
||||
// ---
|
||||
@ -730,6 +748,9 @@
|
||||
@page-header-content-padding-vertical: @padding-sm;
|
||||
@page-header-back-color: #000;
|
||||
@page-header-ghost-bg: inherit;
|
||||
@page-header-heading-title: @heading-4-size;
|
||||
@page-header-heading-sub-title: 14px;
|
||||
@page-header-tabs-tab-font-size: 16px;
|
||||
|
||||
// Breadcrumb
|
||||
// ---
|
||||
@ -756,6 +777,8 @@
|
||||
@slider-handle-color-focus: tint(@primary-color, 20%);
|
||||
@slider-handle-color-focus-shadow: fade(@primary-color, 12%);
|
||||
@slider-handle-color-tooltip-open: @primary-color;
|
||||
@slider-handle-size: 14px;
|
||||
@slider-handle-margin-top: -5px;
|
||||
@slider-handle-shadow: 0;
|
||||
@slider-dot-border-color: @border-color-split;
|
||||
@slider-dot-border-color-active: tint(@primary-color, 50%);
|
||||
@ -779,6 +802,7 @@
|
||||
@collapse-header-bg: @background-color-light;
|
||||
@collapse-content-padding: @padding-md;
|
||||
@collapse-content-bg: @component-background;
|
||||
@collapse-header-arrow-left: 16px;
|
||||
|
||||
// Skeleton
|
||||
// ---
|
||||
@ -786,6 +810,9 @@
|
||||
@skeleton-to-color: shade(@skeleton-color, 5%);
|
||||
@skeleton-paragraph-margin-top: 28px;
|
||||
@skeleton-paragraph-li-margin-top: @margin-md;
|
||||
@skeleton-paragraph-li-height: 16px;
|
||||
@skeleton-title-height: 16px;
|
||||
@skeleton-title-paragraph-margin-top: @margin-lg;
|
||||
|
||||
// Transfer
|
||||
// ---
|
||||
@ -825,6 +852,12 @@
|
||||
@alert-close-hover-color: @icon-color-hover;
|
||||
@alert-no-icon-padding-vertical: @padding-xs;
|
||||
@alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
|
||||
@alert-with-description-padding-vertical: @padding-md - 1px;
|
||||
@alert-with-description-padding: @alert-with-description-padding-vertical 15px
|
||||
@alert-with-description-no-icon-padding-vertical - 1px 64px;
|
||||
@alert-icon-top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
|
||||
@alert-with-description-icon-size: 24px;
|
||||
@alert-with-description-icon-top: @alert-with-description-padding-vertical;
|
||||
|
||||
// List
|
||||
// ---
|
||||
@ -895,7 +928,17 @@
|
||||
@steps-current-dot-size: 10px;
|
||||
@steps-desciption-max-width: 140px;
|
||||
@steps-nav-content-max-width: auto;
|
||||
@steps-vertical-icon-margin: 0 16px 0 0;
|
||||
|
||||
// Notification
|
||||
// ---
|
||||
@notification-bg: @component-background;
|
||||
@notification-padding-vertical: 16px;
|
||||
@notification-padding-horizontal: 24px;
|
||||
|
||||
// Result
|
||||
// ---
|
||||
@result-title-font-size: 24px;
|
||||
@result-subtitle-font-size: @font-size-base;
|
||||
@result-icon-font-size: 72px;
|
||||
@result-extra-margin: 32px 0 0 0;
|
||||
|
||||
@ -23,8 +23,7 @@
|
||||
|
||||
&-inner {
|
||||
display: block;
|
||||
margin-right: 6px;
|
||||
margin-left: 24px;
|
||||
margin: @switch-inner-margin;
|
||||
color: @text-color-inverse;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
@ -136,8 +135,7 @@
|
||||
background-color: @switch-color;
|
||||
|
||||
.@{switch-prefix-cls}-inner {
|
||||
margin-right: 24px;
|
||||
margin-left: 6px;
|
||||
margin: @switch-inner-margin;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
||||
@ -27,9 +27,6 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<col
|
||||
class="ant-table-expand-icon-col"
|
||||
/>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
@ -357,11 +354,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<table
|
||||
style="width:903px;min-width:100%;table-layout:fixed"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -641,11 +634,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<table
|
||||
style="width:903px;min-width:100%;table-layout:fixed"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -956,11 +945,7 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
|
||||
<table
|
||||
style="table-layout: auto;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width: 60px; min-width: 60px;"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -1283,11 +1268,7 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
|
||||
<table
|
||||
style="table-layout: auto;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width: 60px; min-width: 60px;"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -1610,11 +1591,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
|
||||
@ -2271,9 +2271,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
<col
|
||||
class="ant-table-expand-icon-col"
|
||||
/>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
@ -4828,9 +4825,7 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
<col />
|
||||
<col />
|
||||
<col
|
||||
style="width:12%;min-width:12%"
|
||||
@ -11750,11 +11745,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -12097,11 +12088,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -12684,11 +12671,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -13298,11 +13281,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
|
||||
@ -77,7 +77,7 @@ export default function useSelection<RecordType>(
|
||||
onSelectAll,
|
||||
onSelectInvert,
|
||||
onSelectMultiple,
|
||||
columnWidth: selectionColWidth = 60,
|
||||
columnWidth: selectionColWidth,
|
||||
type: selectionType,
|
||||
selections,
|
||||
fixed,
|
||||
|
||||
@ -9,8 +9,6 @@
|
||||
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
|
||||
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
|
||||
|
||||
@table-selection-column-width: 60px;
|
||||
|
||||
.@{table-prefix-cls}-wrapper {
|
||||
.clearfix;
|
||||
}
|
||||
@ -364,6 +362,8 @@
|
||||
|
||||
table tr th&-selection-column,
|
||||
table tr td&-selection-column {
|
||||
width: @table-selection-column-width;
|
||||
min-width: @table-selection-column-width;
|
||||
text-align: center;
|
||||
|
||||
.@{ant-prefix}-radio-wrapper {
|
||||
@ -377,7 +377,7 @@
|
||||
&-extra {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -10px;
|
||||
right: @table-selection-extra-right;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
|
||||
@ -59,4 +59,8 @@
|
||||
.@{table-prefix-cls}-thead > tr > th {
|
||||
background-color: @table-header-bg-sm;
|
||||
}
|
||||
.@{table-prefix-cls}-selection-column {
|
||||
width: 46px;
|
||||
min-width: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,11 +43,17 @@ ReactDOM.render(
|
||||
```
|
||||
|
||||
```css
|
||||
[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content,
|
||||
.card-container p {
|
||||
margin: 0;
|
||||
}
|
||||
.card-container > .ant-tabs-card > .ant-tabs-content {
|
||||
height: 120px;
|
||||
margin-top: -16px;
|
||||
}
|
||||
[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content {
|
||||
height: 120px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane,
|
||||
.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
|
||||
@ -79,6 +85,7 @@ ReactDOM.render(
|
||||
overflow: hidden;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
margin-right: 8px;
|
||||
padding: 0 7px;
|
||||
font-size: @tag-font-size;
|
||||
line-height: 20px;
|
||||
line-height: @tag-line-height;
|
||||
white-space: nowrap;
|
||||
background: @tag-default-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
|
||||
@ -388,9 +388,8 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle"
|
||||
class="anticon anticon-clock-circle timeline-clock-icon"
|
||||
role="img"
|
||||
style="font-size:16px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
||||
@ -21,7 +21,7 @@ ReactDOM.render(
|
||||
<Timeline>
|
||||
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
|
||||
<Timeline.Item dot={<ClockCircleOutlined className="timeline-clock-icon" />} color="red">
|
||||
Technical testing 2015-09-01
|
||||
</Timeline.Item>
|
||||
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
|
||||
@ -29,3 +29,13 @@ ReactDOM.render(
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
.timeline-clock-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .timeline-clock-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -2243,11 +2243,7 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -2924,11 +2920,7 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:60px;min-width:60px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
@transfer-header-vertical-padding: (
|
||||
@transfer-header-height - 1px - @font-size-base * @line-height-base
|
||||
) / 2;
|
||||
@transfer-header-vertical-padding: ceil(
|
||||
(@transfer-header-height - 1px - @font-size-base * @line-height-base) / 2
|
||||
);
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
.reset-component;
|
||||
@ -112,6 +112,7 @@
|
||||
min-height: @transfer-item-height;
|
||||
padding: @transfer-item-padding-vertical @control-padding-horizontal;
|
||||
overflow: hidden;
|
||||
line-height: @transfer-item-height - 2 * @transfer-item-padding-vertical;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 0.3s;
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
.@{upload-prefix-cls}-list {
|
||||
.reset-component;
|
||||
.clearfix;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
&-item-list-type-text {
|
||||
&:hover {
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
||||
@ -156,7 +156,7 @@
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
height: @line-height-base * @font-size-base;
|
||||
margin-top: @margin-xs;
|
||||
font-size: @font-size-base;
|
||||
&-name {
|
||||
@ -164,7 +164,7 @@
|
||||
width: 100%;
|
||||
padding-left: @font-size-base + 8px;
|
||||
overflow: hidden;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
color: @site-text-color;
|
||||
font-size: @font-size-base - 1px;
|
||||
font-size: max(@font-size-base - 1px, 12px);
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
background: #f5f5f5;
|
||||
@ -261,7 +261,7 @@
|
||||
table {
|
||||
min-width: 720px;
|
||||
margin: 2em 0;
|
||||
font-size: @font-size-base - 1px;
|
||||
font-size: max(@font-size-base - 1px, 12px);
|
||||
font-family: @code-family;
|
||||
line-height: @line-height-base;
|
||||
border: 1px solid @border-color-split;
|
||||
@ -294,12 +294,12 @@
|
||||
&:nth-child(3) {
|
||||
width: 22%;
|
||||
color: @magenta-7;
|
||||
font-size: @font-size-base - 1px;
|
||||
font-size: max(@font-size-base - 1px, 12px);
|
||||
word-break: break-all;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 16%;
|
||||
font-size: @font-size-base - 1px;
|
||||
font-size: max(@font-size-base - 1px, 12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,8 @@ const SourceImages = {
|
||||
const MORE_LIST: MoreProps[] = [
|
||||
{
|
||||
title: '揭密可视化专家配色秘笈',
|
||||
description: '颜色搭配不仅可以传递出美感，颜色还可以通过不同的组合排序，形成一门新的界面语言，讲述数据的故事。',
|
||||
description:
|
||||
'颜色搭配不仅可以传递出美感，颜色还可以通过不同的组合排序，形成一门新的界面语言，讲述数据的故事。',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*M7rLR5follIAAAAAAAAAAABkARQnAQ',
|
||||
date: '2020-04-02',
|
||||
source: 'zhihu',
|
||||
@ -36,8 +37,7 @@ const MORE_LIST: MoreProps[] = [
|
||||
},
|
||||
{
|
||||
title: '从常用图表到 DashBoard 页面模板，懒人套餐请享用吧！',
|
||||
description:
|
||||
'Ant Design 4.0 和 AntV 的重磅产品 G2 4.0 发布之际，图表的样式也跟着大升级了哦。',
|
||||
description: 'Ant Design 4.0 和 AntV 的重磅产品 G2 4.0 发布之际，图表的样式也跟着大升级了哦。',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*d_D0TLmwFLoAAAAAAAAAAABkARQnAQ',
|
||||
date: '2020-03-11',
|
||||
source: 'zhihu',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user