mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

New component styles (#7731)

Browse Source 
* Tweak button padding

* upgrade input and button size

* update form controls size

* update components size

* Add lemon color and update rate color

* Add new icons

* update layout style

* breadcrumb and dropdown

* update menu arrow width

* update layout and menu

* update steps

* fix var name

* update cascasder style

* Update DatePicker

* update InputNumber and Mention

* radio and switch

* select and transfer

* TimePicker & Upload

* more components

* calendar and list

* Tree Timeline Popover Tag

* divider modal popover

* update search input

* update card style

* update switch disabled opacity

* update shoadow and mask

* Add v2-compatible-reset.less

* Fix undefined className

* update snahshotssssssssssssssssss 👻
This commit is contained in:
偏右 2017-09-27 22:32:49 +08:00 committed by GitHub
parent b4bf7198e7
commit 2bced36f0c
108 changed files with 846 additions and 764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/alert/style/index.less
View File

@ -9,11 +9,11 @@
.@{alert-prefix-cls} { .@{alert-prefix-cls} {
.reset-component; .reset-component;
position: relative; position: relative;
padding: 8px 48px 8px 38px; padding: 8px 16px 8px 38px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
&&-no-icon { &&-no-icon {
padding: 8px 48px 8px 16px; padding: 8px 16px;
} }
&-icon { &-icon {
@ -30,7 +30,7 @@
} }
&-success { &-success {
border: @border-width-base @border-style-base @green-2; border: @border-width-base @border-style-base @green-3;
background-color: @green-1; background-color: @green-1;
.@{alert-prefix-cls}-icon { .@{alert-prefix-cls}-icon {
color: @success-color; color: @success-color;
@ -38,7 +38,7 @@
} }
&-info { &-info {
border: @border-width-base @border-style-base @primary-2; border: @border-width-base @border-style-base @primary-3;
background-color: @primary-1; background-color: @primary-1;
.@{alert-prefix-cls}-icon { .@{alert-prefix-cls}-icon {
color: @info-color; color: @info-color;
@ -46,7 +46,7 @@
} }
&-warning { &-warning {
border: @border-width-base @border-style-base @yellow-2; border: @border-width-base @border-style-base @yellow-3;
background-color: @yellow-1; background-color: @yellow-1;
.@{alert-prefix-cls}-icon { .@{alert-prefix-cls}-icon {
color: @warning-color; color: @warning-color;
@ -54,7 +54,7 @@
} }
&-error { &-error {
border: @border-width-base @border-style-base @red-2; border: @border-width-base @border-style-base @red-3;
background-color: @red-1; background-color: @red-1;
.@{alert-prefix-cls}-icon { .@{alert-prefix-cls}-icon {
color: @error-color; color: @error-color;
@ -62,18 +62,17 @@
} }
&-close-icon { &-close-icon {
font-size: @font-size-base; font-size: @font-size-sm;
position: absolute; position: absolute;
right: 16px; right: 16px;
top: 10px; top: 8px;
height: 12px; line-height: 22px;
line-height: 12px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
.@{iconfont-css-prefix}-cross { .@{iconfont-css-prefix}-cross {
color: @text-color-secondary; color: @text-color-secondary;
transition: color .3s ease; transition: color .3s;
&:hover { &:hover {
color: #404040; color: #404040;
} }

9
components/badge/style/index.less
View File

@ -27,6 +27,7 @@
white-space: nowrap; white-space: nowrap;
transform-origin: -10% center; transform-origin: -10% center;
font-family: tahoma; font-family: tahoma;
box-shadow: 0 0 0 1px #fff;
a, a,
a:hover { a:hover {
color: #fff; color: #fff;
@ -51,10 +52,13 @@
vertical-align: baseline; vertical-align: baseline;
&-dot { &-dot {
width: 8px; width: @badge-status-size;
height: 8px; height: @badge-status-size;
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
vertical-align: middle;
position: relative;
top: -1px;
} }
&-success { &-success {
background-color: @success-color; background-color: @success-color;
@ -128,6 +132,7 @@
height: @badge-height; height: @badge-height;
> p { > p {
height: @badge-height; height: @badge-height;
margin: 0;
} }
} }
} }

8
components/breadcrumb/style/index.less
View File

@ -6,6 +6,10 @@
.@{breadcrumb-prefix-cls} { .@{breadcrumb-prefix-cls} {
.reset-component; .reset-component;
.@{iconfont-css-prefix} {
font-size: @font-size-sm;
}
a { a {
color: @text-color; color: @text-color;
transition: color .3s; transition: color .3s;
@ -24,8 +28,8 @@
} }
&-separator { &-separator {
margin: 0 8px; margin: 0 @padding-xs;
color: rgba(0, 0, 0, 0.3); color: @text-color-secondary;
} }
&-link { &-link {

6
components/button/style/mixin.less
View File

@ -185,7 +185,7 @@
} }
&-sm { &-sm {
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm); .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
} }
} }
@ -251,8 +251,6 @@
.@{btnClassName}:not(:first-child):not(:last-child) { .@{btnClassName}:not(:first-child):not(:last-child) {
border-radius: 0; border-radius: 0;
padding-left: 8px;
padding-right: 8px;
} }
> .@{btnClassName}:first-child { > .@{btnClassName}:first-child {
@ -260,14 +258,12 @@
&:not(:last-child) { &:not(:last-child) {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
padding-right: 8px;
} }
} }
> .@{btnClassName}:last-child:not(:first-child) { > .@{btnClassName}:last-child:not(:first-child) {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
padding-left: 8px;
} }
& > & { & > & {

2
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1006,7 +1006,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
exports[`renders ./components/calendar/demo/card.md correctly 1`] = ` exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
<div <div
style="width:290px;border:1px solid #d9d9d9;border-radius:4px;" style="width:300px;border:1px solid #d9d9d9;border-radius:4px;"
> >
<div <div
class="" class=""

4
components/calendar/demo/card.md
View File

@ -1,6 +1,6 @@
--- ---
order: 2 order: 2
title: title:
zh-CN: 卡片模式 zh-CN: 卡片模式
en-US: Card en-US: Card
--- ---
@ -21,7 +21,7 @@ function onPanelChange(value, mode) {
} }
ReactDOM.render( ReactDOM.render(
<div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}> <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar fullscreen={false} onPanelChange={onPanelChange} /> <Calendar fullscreen={false} onPanelChange={onPanelChange} />
</div> </div>
, mountNode); , mountNode);

14
components/calendar/style/index.less
View File

@ -38,7 +38,7 @@
} }
&-calendar-body { &-calendar-body {
padding: 8px 8px 14px; padding: 8px 12px;
} }
table { table {
@ -46,7 +46,7 @@
max-width: 100%; max-width: 100%;
background-color: transparent; background-color: transparent;
width: 100%; width: 100%;
height: 246px; height: 256px;
} }
table, table,
@ -91,12 +91,12 @@
display: block; display: block;
margin: 0 auto; margin: 0 auto;
color: @text-color; color: @text-color;
border-radius: @border-radius-base; border-radius: @border-radius-sm;
width: 22px; width: 24px;
height: 22px; height: 24px;
padding: 0; padding: 0;
background: transparent; background: transparent;
line-height: 22px; line-height: 24px;
transition: all .3s; transition: all .3s;
&:hover { &:hover {
@ -116,7 +116,7 @@
&-today &-value, &-today &-value,
&-month-panel-current-cell &-value { &-month-panel-current-cell &-value {
box-shadow: 0 0 0 1px @primary-color; box-shadow: 0 0 0 1px @primary-color inset;
} }
&-selected-day &-value, &-selected-day &-value,

2
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -52,7 +52,7 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
style="background:#ECECEC;padding:30px;" style="background:#ECECEC;padding:30px;"
> >
<div <div
class="ant-card" class="ant-card ant-card-hoverable"
style="width:300px;" style="width:300px;"
> >
<div> <div>

2
components/card/demo/border-less.md
View File

@ -18,7 +18,7 @@ import { Card } from 'antd';
ReactDOM.render( ReactDOM.render(
<div style={{ background: '#ECECEC', padding: '30px' }}> <div style={{ background: '#ECECEC', padding: '30px' }}>
<Card title="Card title" bordered={false} style={{ width: 300 }}> <Card title="Card title" bordered={false} style={{ width: 300 }} noHovering={false}>
<p>Card content</p> <p>Card content</p>
<p>Card content</p> <p>Card content</p>
<p>Card content</p> <p>Card content</p>

5
components/card/style/index.less
View File

@ -14,7 +14,7 @@
&-hoverable { &-hoverable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
box-shadow: @box-shadow-base; box-shadow: @card-shadow;
border-color: transparent; border-color: transparent;
} }
} }
@ -132,6 +132,9 @@
border-top: @border-width-base @border-style-base @border-color-split; border-top: @border-width-base @border-style-base @border-color-split;
background: @card-actions-background; background: @card-actions-background;
.clearfix; .clearfix;
list-style: none;
margin: 0;
padding: 0;
& > li { & > li {
float: left; float: left;

2
components/carousel/style/index.less
View File

@ -143,6 +143,7 @@
list-style: none; list-style: none;
display: block; display: block;
text-align: center; text-align: center;
margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: @carousel-dot-height; height: @carousel-dot-height;
@ -166,6 +167,7 @@
font-size: 0; font-size: 0;
color: transparent; color: transparent;
transition: all .5s; transition: all .5s;
padding: 0;
&:hover, &:hover,
&:focus { &:focus {
opacity: 0.75; opacity: 0.75;

6
components/cascader/__tests__/__snapshots__/demo.test.js.snap
View File

@ -47,7 +47,7 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = ` exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
<span <span
class="ant-cascader-picker" class="ant-cascader-picker"
style="width:270px;" style="width:100%;"
tabindex="0" tabindex="0"
> >
<span <span
@ -211,7 +211,7 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
exports[`renders ./components/cascader/demo/size.md correctly 1`] = ` exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
<div> <div>
<span <span
class="ant-cascader-picker" class="ant-cascader-picker ant-cascader-picker-large"
tabindex="0" tabindex="0"
> >
<span <span
@ -253,7 +253,7 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
<br /> <br />
<br /> <br />
<span <span
class="ant-cascader-picker" class="ant-cascader-picker ant-cascader-picker-small"
tabindex="0" tabindex="0"
> >
<span <span

2
components/cascader/demo/custom-render.md
View File

@ -64,7 +64,7 @@ ReactDOM.render(
options={options} options={options}
defaultValue={['zhejiang', 'hangzhou', 'xihu']} defaultValue={['zhejiang', 'hangzhou', 'xihu']}
displayRender={displayRender} displayRender={displayRender}
style={{ width: 270 }} style={{ width: '100%' }}
/> />
, mountNode); , mountNode);
```` ````

5
components/cascader/index.tsx
View File

@ -276,10 +276,11 @@ export default class Cascader extends React.Component<CascaderProps, any> {
[`${prefixCls}-picker-arrow`]: true, [`${prefixCls}-picker-arrow`]: true,
[`${prefixCls}-picker-arrow-expand`]: state.popupVisible, [`${prefixCls}-picker-arrow-expand`]: state.popupVisible,
}); });
const pickerCls = classNames(className, { const pickerCls = classNames(
[`${prefixCls}-picker`]: true, className, `${prefixCls}-picker`, {
[`${prefixCls}-picker-with-value`]: state.inputValue, [`${prefixCls}-picker-with-value`]: state.inputValue,
[`${prefixCls}-picker-disabled`]: disabled, [`${prefixCls}-picker-disabled`]: disabled,
[`${prefixCls}-picker-${size}`]: !!size,
}); });
// Fix bug of https://github.com/facebook/react/pull/5004 // Fix bug of https://github.com/facebook/react/pull/5004

19
components/cascader/style/index.less
View File

@ -53,17 +53,17 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
padding: 0 12px 0 8px; padding: 0 @control-padding-horizontal;
} }
&-clear { &-clear {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 8px; right: @control-padding-horizontal;
z-index: 2; z-index: 2;
background: @component-background; background: @component-background;
top: 50%; top: 50%;
font-size: @font-size-base; font-size: @font-size-sm;
color: @disabled-color; color: @disabled-color;
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -85,7 +85,7 @@
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 50%; top: 50%;
right: 8px; right: @control-padding-horizontal;
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-top: -6px; margin-top: -6px;
@ -102,6 +102,12 @@
} }
} }
} }
&-picker-small &-picker-clear,
&-picker-small &-picker-arrow {
right: @control-padding-horizontal-sm;
}
&-menus { &-menus {
font-size: @font-size-base; font-size: @font-size-base;
background: @component-background; background: @component-background;
@ -163,7 +169,8 @@
} }
} }
&-menu-item { &-menu-item {
padding: 7px 8px; padding: 5px @control-padding-horizontal;
line-height: 22px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: all 0.3s; transition: all 0.3s;
@ -192,7 +199,7 @@
.iconfont-size-under-12px(8px); .iconfont-size-under-12px(8px);
color: @text-color-secondary; color: @text-color-secondary;
position: absolute; position: absolute;
right: 8px; right: @control-padding-horizontal;
} }
} }
&-loading:after { &-loading:after {

3
components/checkbox/style/mixin.less
View File

@ -12,7 +12,7 @@
line-height: 1; line-height: 1;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
top: -0.8px; top: -0.09em;
.@{checkbox-prefix-cls}-wrapper:hover &-inner, .@{checkbox-prefix-cls}-wrapper:hover &-inner,
&:hover &-inner, &:hover &-inner,
@ -151,6 +151,7 @@
.@{checkbox-prefix-cls}-wrapper { .@{checkbox-prefix-cls}-wrapper {
.reset-component; .reset-component;
line-height: unset;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
& + & { & + & {

8
components/collapse/demo/basic.md
View File

@ -1,6 +1,6 @@
--- ---
order: 0 order: 0
title: title:
zh-CN: 折叠面板 zh-CN: 折叠面板
en-US: Collapse en-US: Collapse
--- ---
@ -41,3 +41,9 @@ ReactDOM.render(
</Collapse> </Collapse>
, mountNode); , mountNode);
```` ````
<style>
p {
margin: 0;
}
</style>

41
components/collapse/style/index.less
View File

@ -3,14 +3,14 @@
@collapse-prefix-cls: ~"@{ant-prefix}-collapse"; @collapse-prefix-cls: ~"@{ant-prefix}-collapse";
@collapse-header-bg: @background-color-base; @collapse-header-bg: @background-color-light;
@collapse-active-bg: @background-color-active; @collapse-active-bg: @background-color-base;
.collapse-close() { .collapse-close() {
.iconfont-size-under-12px(9px, 0); transform: rotate(0);
} }
.collapse-open() { .collapse-open() {
.iconfont-size-under-12px(9px, 90deg); transform: rotate(90deg);
} }
.@{collapse-prefix-cls} { .@{collapse-prefix-cls} {
@ -32,24 +32,23 @@
> .@{collapse-prefix-cls}-header { > .@{collapse-prefix-cls}-header {
line-height: 22px; line-height: 22px;
padding: 8px 0 8px 32px; padding: 12px 0 12px 40px;
color: @heading-color; color: @heading-color;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: all .3s; transition: all .3s;
.arrow { .arrow {
.collapse-close();
.iconfont-mixin(); .iconfont-mixin();
.collapse-close();
font-size: @font-size-sm;
position: absolute; position: absolute;
color: @text-color-secondary;
display: inline-block; display: inline-block;
font-weight: bold; line-height: 46px;
line-height: 40px;
vertical-align: top; vertical-align: top;
transition: transform 0.24s; transition: transform 0.24s;
top: 0; top: 0;
left: 16px; left: @padding-md;
&:before { &:before {
content: "\E61F"; content: "\E61F";
} }
@ -64,12 +63,12 @@
&-content { &-content {
overflow: hidden; overflow: hidden;
color: @text-color; color: @text-color;
padding: 0 16px; padding: 0 @padding-md;
background-color: @component-background; background-color: @component-background;
& > &-box { & > &-box {
padding-top: 16px; padding-top: @padding-md;
padding-bottom: 16px; padding-bottom: @padding-md;
} }
&-inactive { &-inactive {
@ -94,6 +93,10 @@
border: 0; border: 0;
} }
&-borderless > &-item {
border: 0;
}
&-borderless > &-item:last-child, &-borderless > &-item:last-child,
&-borderless > &-item:last-child &-header { &-borderless > &-item:last-child &-header {
border-radius: 0; border-radius: 0;
@ -105,14 +108,10 @@
&-borderless > &-item > &-content { &-borderless > &-item > &-content {
background-color: transparent; background-color: transparent;
border-top: @border-width-base @border-style-base @border-color-base;
} }
&-borderless > &-item > &-header { &-borderless > &-item > &-content > &-content-box {
transition: all .3s; padding-top: 4px;
&:hover {
background-color: @collapse-header-bg;
}
} }
& &-item-disabled > &-header { & &-item-disabled > &-header {
@ -123,8 +122,4 @@
background-color: @disabled-bg; background-color: @disabled-bg;
} }
} }
& > &-item:not(&-item-disabled) > .@{collapse-prefix-cls}-header:active {
background-color: @collapse-active-bg;
}
} }

14
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -202,7 +202,6 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
<div> <div>
<span <span
class="ant-calendar-picker" class="ant-calendar-picker"
style="width:154px;"
> >
<div> <div>
<input <input
@ -284,7 +283,6 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
</span> </span>
<span <span
class="ant-calendar-picker" class="ant-calendar-picker"
style="width:154px;"
> >
<div> <div>
<input <input
@ -436,7 +434,6 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
<div> <div>
<span <span
class="ant-calendar-picker" class="ant-calendar-picker"
style="width:154px;"
> >
<div> <div>
<input <input
@ -609,7 +606,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
<br /> <br />
<br /> <br />
<span <span
class="ant-calendar-picker" class="ant-calendar-picker ant-calendar-picker-default"
> >
<div> <div>
<input <input
@ -625,7 +622,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
</span> </span>
<br /> <br />
<span <span
class="ant-calendar-picker" class="ant-calendar-picker ant-calendar-picker-default"
> >
<div> <div>
<input <input
@ -641,7 +638,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
</span> </span>
<br /> <br />
<span <span
class="ant-calendar-picker" class="ant-calendar-picker ant-calendar-picker-default"
> >
<span <span
class="ant-calendar-picker-input ant-input" class="ant-calendar-picker-input ant-input"
@ -670,7 +667,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
</span> </span>
<br /> <br />
<span <span
class="ant-calendar-picker" class="ant-calendar-picker ant-calendar-picker-default"
> >
<span> <span>
<input <input
@ -691,7 +688,6 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
<div> <div>
<span <span
class="ant-calendar-picker" class="ant-calendar-picker"
style="width:154px;"
> >
<div> <div>
<input <input
@ -707,7 +703,6 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
</span> </span>
<span <span
class="ant-calendar-picker" class="ant-calendar-picker"
style="width:154px;"
> >
<div> <div>
<input <input
@ -728,7 +723,6 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
<div> <div>
<span <span
class="ant-calendar-picker" class="ant-calendar-picker"
style="width:154px;"
> >
<div> <div>
<input <input

12
components/date-picker/createPicker.tsx
View File

@ -124,12 +124,6 @@ export default function createPicker(TheCalendar): any {
/> />
); );
// default width for showTime
const pickerStyle = {} as any;
if (props.showTime) {
pickerStyle.width = (props.style && props.style.width) || 154;
}
const clearIcon = (!props.disabled && props.allowClear && value) ? ( const clearIcon = (!props.disabled && props.allowClear && value) ? (
<Icon <Icon
type="cross-circle" type="cross-circle"
@ -157,12 +151,8 @@ export default function createPicker(TheCalendar): any {
if (pickerValue && localeCode) { if (pickerValue && localeCode) {
pickerValue.locale(localeCode); pickerValue.locale(localeCode);
} }
const style = {
...props.style,
...pickerStyle,
};
return ( return (
<span className={classNames(props.className, props.pickerClass)} style={style}> <span className={classNames(props.className, props.pickerClass)} style={props.style}>
<RcDatePicker <RcDatePicker
{...props} {...props}
{...pickerProps} {...pickerProps}

2
components/date-picker/index.en-US.md
View File

@ -41,7 +41,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
| className | picker className | string | '' | | className | picker className | string | '' |
| style | to customize the style of the input box | object | {} | | style | to customize the style of the input box | object | {} |
| popupStyle | to customize the style of the popup calendar | object | {} | | popupStyle | to customize the style of the popup calendar | object | {} |
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | string | - | | size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - | | disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |

2
components/date-picker/index.zh-CN.md
View File

@ -42,7 +42,7 @@ subtitle: 日期选择框
| className | 选择器 className | string | '' | | className | 选择器 className | string | '' |
| style | 自定义输入框样式 | object | {} | | style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} | | popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 | | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |

34
components/date-picker/style/Calendar.less
View File

@ -1,6 +1,6 @@
.calendarPanelHeader(@calendar-prefix-cls) { .calendarPanelHeader(@calendar-prefix-cls) {
height: 34px; height: 40px;
line-height: 34px; line-height: 40px;
text-align: center; text-align: center;
user-select: none; user-select: none;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
@ -14,10 +14,10 @@
.@{calendar-prefix-cls}-year-select, .@{calendar-prefix-cls}-year-select,
.@{calendar-prefix-cls}-month-select { .@{calendar-prefix-cls}-month-select {
padding: 0 2px; padding: 0 2px;
font-weight: bold; font-weight: 500;
display: inline-block; display: inline-block;
color: @text-color; color: @heading-color;
line-height: 34px; line-height: 40px;
} }
.@{calendar-prefix-cls}-century-select-arrow, .@{calendar-prefix-cls}-century-select-arrow,
@ -42,7 +42,7 @@
padding: 0 5px; padding: 0 5px;
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
line-height: 34px; line-height: 40px;
} }
.@{calendar-prefix-cls}-prev-century-btn, .@{calendar-prefix-cls}-prev-century-btn,
@ -85,7 +85,7 @@
.@{calendar-prefix-cls} { .@{calendar-prefix-cls} {
position: relative; position: relative;
outline: none; outline: none;
width: 231px; width: 280px;
border: @border-width-base @border-style-base #fff; border: @border-width-base @border-style-base #fff;
list-style: none; list-style: none;
font-size: @font-size-base; font-size: @font-size-base;
@ -98,7 +98,7 @@
&-input-wrap { &-input-wrap {
height: 34px; height: 34px;
padding: 6px; padding: 6px @control-padding-horizontal - 2px;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
} }
@ -126,7 +126,7 @@
} }
&-body { &-body {
padding: 4px 8px; padding: 8px 12px;
} }
table { table {
@ -140,6 +140,7 @@
th, th,
td { td {
border: 0; border: 0;
text-align: center;
} }
&-calendar-table { &-calendar-table {
@ -165,7 +166,8 @@
} }
&-cell { &-cell {
padding: 4px 0; padding: 3px 0;
height: 30px;
} }
&-date { &-date {
@ -173,9 +175,9 @@
margin: 0 auto; margin: 0 auto;
color: @text-color; color: @text-color;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
width: 20px; width: 24px;
height: 20px; height: 24px;
line-height: 18px; line-height: 22px;
border: @border-width-base @border-style-base transparent; border: @border-width-base @border-style-base transparent;
padding: 0; padding: 0;
background: transparent; background: transparent;
@ -239,10 +241,10 @@
position: absolute; position: absolute;
top: -1px; top: -1px;
left: 5px; left: 5px;
width: 20px; width: 24px;
height: 20px; height: 24px;
border: @border-width-base @border-style-base #bcbcbc; border: @border-width-base @border-style-base #bcbcbc;
border-radius: @border-radius-base; border-radius: @border-radius-sm;
} }
} }

4
components/date-picker/style/DecadePanel.less
View File

@ -19,7 +19,7 @@
} }
.@{calendar-prefix-cls}-decade-panel-body { .@{calendar-prefix-cls}-decade-panel-body {
height: ~"calc(100% - 34px)"; height: ~"calc(100% - 40px)";
} }
.@{calendar-prefix-cls}-decade-panel-table { .@{calendar-prefix-cls}-decade-panel-table {
@ -43,7 +43,7 @@
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0 6px; padding: 0 6px;
border-radius: 4px; border-radius: @border-radius-sm;
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {

6
components/date-picker/style/MonthPanel.less
View File

@ -23,7 +23,7 @@
} }
.@{calendar-prefix-cls}-month-panel-body { .@{calendar-prefix-cls}-month-panel-body {
height: ~"calc(100% - 34px)"; height: ~"calc(100% - 40px)";
} }
.@{calendar-prefix-cls}-month-panel-table { .@{calendar-prefix-cls}-month-panel-table {
@ -64,8 +64,8 @@
text-align: center; text-align: center;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0 6px; padding: 0 8px;
border-radius: 4px; border-radius: @border-radius-sm;
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {

9
components/date-picker/style/Picker.less
View File

@ -49,11 +49,11 @@
position: absolute; position: absolute;
width: 14px; width: 14px;
height: 14px; height: 14px;
right: 8px; right: @control-padding-horizontal;
top: 50%; top: 50%;
margin-top: -7px; margin-top: -7px;
line-height: 14px; line-height: 14px;
font-size: @font-size-base; font-size: @font-size-sm;
transition: all .3s; transition: all .3s;
user-select: none; user-select: none;
} }
@ -86,4 +86,9 @@
line-height: 1; line-height: 1;
} }
} }
&-small &-clear,
&-small &-icon {
right: @control-padding-horizontal-sm;
}
} }

14
components/date-picker/style/RangePicker.less
View File

@ -19,12 +19,12 @@
color: @text-color-secondary; color: @text-color-secondary;
width: 8px; width: 8px;
display: inline-block; display: inline-block;
line-height: 18px; height: 100%;
vertical-align: top; vertical-align: top;
} }
.@{calendar-prefix-cls}-range { .@{calendar-prefix-cls}-range {
width: 470px; width: 552px;
overflow: hidden; overflow: hidden;
.@{calendar-prefix-cls}-date-panel { .@{calendar-prefix-cls}-date-panel {
@ -45,7 +45,7 @@
float: left; float: left;
.@{calendar-prefix-cls} { .@{calendar-prefix-cls} {
&-time-picker-inner { &-time-picker-inner {
border-right: 2px solid @border-color-split; border-right: 1.5px solid @border-color-split;
} }
} }
} }
@ -54,7 +54,7 @@
float: right; float: right;
.@{calendar-prefix-cls} { .@{calendar-prefix-cls} {
&-time-picker-inner { &-time-picker-inner {
border-left: 2px solid @border-color-split; border-left: 1.5px solid @border-color-split;
} }
} }
} }
@ -93,6 +93,8 @@
height: @input-height-sm; height: @input-height-sm;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
padding-left: 0;
padding-right: 0;
&:focus { &:focus {
box-shadow: none; box-shadow: none;
@ -173,12 +175,12 @@
top: 68px; top: 68px;
z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1) z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
&-panel { &-panel {
height: 241px; height: 267px;
margin-top: -34px; margin-top: -34px;
} }
&-inner { &-inner {
padding-top: 34px; padding-top: 40px;
height: 100%; height: 100%;
background: none; background: none;
} }

10
components/date-picker/style/TimePicker.less
View File

@ -1,7 +1,7 @@
.@{calendar-timepicker-prefix-cls} { .@{calendar-timepicker-prefix-cls} {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 34px; top: 40px;
background-color: @component-background; background-color: @component-background;
&-panel { &-panel {
@ -52,7 +52,7 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
position: relative; // Fix chrome weird render bug position: relative; // Fix chrome weird render bug
height: 206px; height: 226px;
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;
@ -91,7 +91,7 @@
li:last-child:after { li:last-child:after {
content: ''; content: '';
height: 182px; height: 202px;
display: block; display: block;
} }
@ -117,9 +117,9 @@
.@{calendar-prefix-cls}-time { .@{calendar-prefix-cls}-time {
.@{calendar-prefix-cls}-day-select { .@{calendar-prefix-cls}-day-select {
padding: 0 2px; padding: 0 2px;
font-weight: bold; font-weight: 500;
display: inline-block; display: inline-block;
color: @text-color; color: @heading-color;
line-height: 34px; line-height: 34px;
} }

2
components/date-picker/style/WeekPicker.less
View File

@ -10,7 +10,7 @@
} }
&.@{calendar-prefix-cls}-active-week { &.@{calendar-prefix-cls}-active-week {
background: @primary-2; background: @primary-2;
font-weight: 500; font-weight: bold;
} }
.@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date, .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
.@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date { .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {

6
components/date-picker/style/YearPanel.less
View File

@ -23,7 +23,7 @@
} }
.@{calendar-prefix-cls}-year-panel-body { .@{calendar-prefix-cls}-year-panel-body {
height: ~"calc(100% - 34px)"; height: ~"calc(100% - 40px)";
} }
.@{calendar-prefix-cls}-year-panel-table { .@{calendar-prefix-cls}-year-panel-table {
@ -45,8 +45,8 @@
text-align: center; text-align: center;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0 6px; padding: 0 8px;
border-radius: 4px; border-radius: @border-radius-sm;
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {

4
components/date-picker/wrapPicker.tsx
View File

@ -62,8 +62,8 @@ export default function wrapPicker(Picker, defaultFormat?: string): any {
render() { render() {
const props = this.props; const props = this.props;
const { prefixCls, inputPrefixCls } = props; const { prefixCls, inputPrefixCls } = props;
const pickerClass = classNames({ const pickerClass = classNames(`${prefixCls}-picker`, {
[`${prefixCls}-picker`]: true, [`${prefixCls}-picker-${props.size}`]: !!props.size,
}); });
const pickerInputClass = classNames(`${prefixCls}-picker-input`, inputPrefixCls, { const pickerInputClass = classNames(`${prefixCls}-picker-input`, inputPrefixCls, {
[`${inputPrefixCls}-lg`]: props.size === 'large', [`${inputPrefixCls}-lg`]: props.size === 'large',

2
components/divider/style/index.less
View File

@ -30,7 +30,7 @@
background: transparent; background: transparent;
font-weight: 500; font-weight: 500;
color: @heading-color; color: @heading-color;
font-size: 16px; font-size: @font-size-lg;
margin: 16px 0; margin: 16px 0;
&:before, &:before,

24
components/dropdown/style/index.less
View File

@ -19,7 +19,7 @@
} }
.@{iconfont-css-prefix}-down:before { .@{iconfont-css-prefix}-down:before {
transition: transform 0.2s ease; transition: transform .2s;
} }
} }
@ -48,13 +48,13 @@
&-item-group-title { &-item-group-title {
color: @text-color-secondary; color: @text-color-secondary;
padding: 6px 8px; padding: 5px @control-padding-horizontal;
transition: all .3s; transition: all .3s;
} }
&-item, &-item,
&-submenu-title { &-submenu-title {
padding: 7px 8px; padding: 5px @control-padding-horizontal;
margin: 0; margin: 0;
clear: both; clear: both;
font-size: @font-size-base; font-size: @font-size-base;
@ -63,12 +63,13 @@
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: all .3s; transition: all .3s;
line-height: 22px;
> a { > a {
color: @text-color; color: @text-color;
display: block; display: block;
padding: 7px 8px; padding: 5px @control-padding-horizontal;
margin: -7px -8px; margin: -5px -@control-padding-horizontal;
transition: all .3s; transition: all .3s;
&:focus { &:focus {
text-decoration: none; text-decoration: none;
@ -119,7 +120,7 @@
} }
.@{dropdown-prefix-cls}-menu-submenu-arrow { .@{dropdown-prefix-cls}-menu-submenu-arrow {
position: absolute; position: absolute;
right: 8px; right: @padding-xs;
&:after { &:after {
font-family: "anticon" !important; font-family: "anticon" !important;
font-style: normal; font-style: normal;
@ -130,6 +131,14 @@
} }
} }
&-submenu-title {
padding-right: 26px;
&:first-child,
&:last-child {
border-radius: 0;
}
}
&-submenu-vertical { &-submenu-vertical {
position: relative; position: relative;
} }
@ -200,7 +209,8 @@
white-space: nowrap; white-space: nowrap;
&.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) { &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
padding-right: 8px; padding-left: @padding-xs;
padding-right: @padding-xs;
} }
.@{iconfont-css-prefix}-down { .@{iconfont-css-prefix}-down {
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);

8
components/form/FormItem.tsx
View File

@ -272,13 +272,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
} }
renderChildren() { renderChildren() {
const props = this.props; const { children } = this.props;
const children = React.Children.map(props.children as React.ReactNode, (child: React.ReactElement<any>) => {
if (child && typeof child.type === 'function' && !child.props.size) {
return React.cloneElement(child, { size: 'large' });
}
return child;
});
return [ return [
this.renderLabel(), this.renderLabel(),
this.renderWrapper( this.renderWrapper(

139
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -34,7 +34,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-0" id="field-0"
placeholder="placeholder" placeholder="placeholder"
@ -70,7 +70,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-1" id="field-1"
placeholder="placeholder" placeholder="placeholder"
@ -106,7 +106,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-2" id="field-2"
placeholder="placeholder" placeholder="placeholder"
@ -142,7 +142,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-3" id="field-3"
placeholder="placeholder" placeholder="placeholder"
@ -178,7 +178,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-4" id="field-4"
placeholder="placeholder" placeholder="placeholder"
@ -214,7 +214,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-5" id="field-5"
placeholder="placeholder" placeholder="placeholder"
@ -250,7 +250,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-6" id="field-6"
placeholder="placeholder" placeholder="placeholder"
@ -286,7 +286,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-7" id="field-7"
placeholder="placeholder" placeholder="placeholder"
@ -322,7 +322,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-8" id="field-8"
placeholder="placeholder" placeholder="placeholder"
@ -358,7 +358,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="field-9" id="field-9"
placeholder="placeholder" placeholder="placeholder"
@ -438,7 +438,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="note" id="note"
type="text" type="text"
@ -468,7 +468,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<div <div
class="ant-select-lg ant-select ant-select-enabled" class="ant-select ant-select-enabled"
> >
<div <div
aria-autocomplete="list" aria-autocomplete="list"
@ -512,7 +512,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="submit" type="submit"
> >
<span> <span>
@ -551,13 +551,13 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
> >
<span> <span>
<input <input
class="ant-input ant-input-lg" class="ant-input"
style="width:65%;margin-right:3%;" style="width:65%;margin-right:3%;"
type="text" type="text"
value="0" value="0"
/> />
<div <div
class="ant-select-lg ant-select ant-select-enabled" class="ant-select ant-select-enabled"
style="width:32%;" style="width:32%;"
> >
<div <div
@ -603,7 +603,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="submit" type="submit"
> >
<span> <span>
@ -630,7 +630,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-dashed ant-btn-lg" class="ant-btn ant-btn-dashed"
style="width:60%;" style="width:60%;"
type="button" type="button"
> >
@ -654,7 +654,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="submit" type="submit"
> >
<span> <span>
@ -690,7 +690,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="username" id="username"
placeholder="Please input your name" placeholder="Please input your name"
@ -721,7 +721,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="nickname" id="nickname"
placeholder="Please input your nickname" placeholder="Please input your nickname"
@ -771,7 +771,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="button" type="button"
> >
<span> <span>
@ -823,7 +823,7 @@ exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
class="ant-form-item-control has-success" class="ant-form-item-control has-success"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="username" id="username"
type="text" type="text"
@ -870,7 +870,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
/> />
</span> </span>
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="userName" id="userName"
placeholder="Username" placeholder="Username"
@ -902,7 +902,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
/> />
</span> </span>
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="password" id="password"
placeholder="Password" placeholder="Password"
@ -923,7 +923,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="submit" type="submit"
> >
<span> <span>
@ -961,7 +961,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<div <div
class="ant-radio-group ant-radio-group-large" class="ant-radio-group"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -1042,7 +1042,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
placeholder="input placeholder" placeholder="input placeholder"
type="text" type="text"
/> />
@ -1069,7 +1069,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
placeholder="input placeholder" placeholder="input placeholder"
type="text" type="text"
/> />
@ -1086,7 +1086,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="button" type="button"
> >
<span> <span>
@ -1125,7 +1125,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
/> />
</span> </span>
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="userName" id="userName"
placeholder="Username" placeholder="Username"
@ -1157,7 +1157,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
/> />
</span> </span>
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="password" id="password"
placeholder="Password" placeholder="Password"
@ -1204,7 +1204,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
Forgot password Forgot password
</a> </a>
<button <button
class="ant-btn login-form-button ant-btn-primary ant-btn-lg" class="ant-btn login-form-button ant-btn-primary"
type="submit" type="submit"
> >
<span> <span>
@ -1248,7 +1248,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="email" id="email"
type="text" type="text"
@ -1278,7 +1278,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="password" id="password"
type="password" type="password"
@ -1308,7 +1308,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="confirm" id="confirm"
type="password" type="password"
@ -1343,7 +1343,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="nickname" id="nickname"
type="text" type="text"
@ -1383,7 +1383,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</span> </span>
<input <input
autocomplete="off" autocomplete="off"
class="ant-input ant-cascader-input ant-input-lg" class="ant-input ant-cascader-input "
data-__meta="[object Object]" data-__meta="[object Object]"
id="residence" id="residence"
readonly="" readonly=""
@ -1465,7 +1465,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</span> </span>
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="phone" id="phone"
type="text" type="text"
@ -1497,7 +1497,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<div <div
class="ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled" class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
> >
<div <div
aria-autocomplete="list" aria-autocomplete="list"
@ -1579,7 +1579,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
style="padding-left:4px;padding-right:4px;" style="padding-left:4px;padding-right:4px;"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
data-__meta="[object Object]" data-__meta="[object Object]"
id="captcha" id="captcha"
type="text" type="text"
@ -1591,7 +1591,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
style="padding-left:4px;padding-right:4px;" style="padding-left:4px;padding-right:4px;"
> >
<button <button
class="ant-btn ant-btn-lg" class="ant-btn"
type="button" type="button"
> >
<span> <span>
@ -1655,7 +1655,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="submit" type="submit"
> >
<span> <span>
@ -1697,7 +1697,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
> >
<div> <div>
<input <input
class="ant-calendar-picker-input ant-input ant-input-lg" class="ant-calendar-picker-input ant-input"
placeholder="Select date" placeholder="Select date"
readonly="" readonly=""
value="" value=""
@ -1732,11 +1732,10 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
> >
<span <span
class="ant-calendar-picker" class="ant-calendar-picker"
style="width:154px;"
> >
<div> <div>
<input <input
class="ant-calendar-picker-input ant-input ant-input-lg" class="ant-calendar-picker-input ant-input"
placeholder="Select date" placeholder="Select date"
readonly="" readonly=""
value="" value=""
@ -1774,7 +1773,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
> >
<div> <div>
<input <input
class="ant-calendar-picker-input ant-input ant-input-lg" class="ant-calendar-picker-input ant-input"
placeholder="Select date" placeholder="Select date"
readonly="" readonly=""
value="" value=""
@ -1811,7 +1810,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
class="ant-calendar-picker" class="ant-calendar-picker"
> >
<span <span
class="ant-calendar-picker-input ant-input ant-input-lg" class="ant-calendar-picker-input ant-input"
> >
<input <input
class="ant-calendar-range-picker-input" class="ant-calendar-range-picker-input"
@ -1863,7 +1862,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
style="width:300px;" style="width:300px;"
> >
<span <span
class="ant-calendar-picker-input ant-input ant-input-lg" class="ant-calendar-picker-input ant-input"
> >
<input <input
class="ant-calendar-range-picker-input" class="ant-calendar-range-picker-input"
@ -1911,7 +1910,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
class="ant-form-item-control " class="ant-form-item-control "
> >
<span <span
class="ant-time-picker ant-time-picker-large" class="ant-time-picker "
> >
<input <input
class="ant-time-picker-input" class="ant-time-picker-input"
@ -1937,7 +1936,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="submit" type="submit"
> >
<span> <span>
@ -2002,7 +2001,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<div <div
class="ant-select-lg ant-select ant-select-enabled" class="ant-select ant-select-enabled"
> >
<div <div
aria-autocomplete="list" aria-autocomplete="list"
@ -2057,7 +2056,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<div <div
class="ant-select-lg ant-select ant-select-enabled" class="ant-select ant-select-enabled"
> >
<div <div
aria-autocomplete="list" aria-autocomplete="list"
@ -2125,7 +2124,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control has-success" class="ant-form-item-control has-success"
> >
<div <div
class="ant-input-number ant-input-number-lg" class="ant-input-number"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -2347,7 +2346,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<div <div
class="ant-radio-group ant-radio-group-large" class="ant-radio-group"
> >
<label <label
class="ant-radio-wrapper" class="ant-radio-wrapper"
@ -2428,7 +2427,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<div <div
class="ant-radio-group ant-radio-group-large" class="ant-radio-group"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper"
@ -2574,7 +2573,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="submit" type="submit"
> >
<span> <span>
@ -2611,7 +2610,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-error" class="ant-form-item-control has-error"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
id="error" id="error"
placeholder="unavailable choice" placeholder="unavailable choice"
type="text" type="text"
@ -2644,7 +2643,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-warning" class="ant-form-item-control has-warning"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
id="warning" id="warning"
placeholder="Warning" placeholder="Warning"
type="text" type="text"
@ -2672,7 +2671,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-feedback is-validating" class="ant-form-item-control has-feedback is-validating"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
id="validating" id="validating"
placeholder="I'm the content is being validated" placeholder="I'm the content is being validated"
type="text" type="text"
@ -2705,7 +2704,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-feedback has-success" class="ant-form-item-control has-feedback has-success"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
id="success" id="success"
placeholder="I'm the content" placeholder="I'm the content"
type="text" type="text"
@ -2733,7 +2732,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-feedback has-warning" class="ant-form-item-control has-feedback has-warning"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
id="warning" id="warning"
placeholder="Warning" placeholder="Warning"
type="text" type="text"
@ -2761,7 +2760,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-feedback has-error" class="ant-form-item-control has-feedback has-error"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input"
id="error" id="error"
placeholder="unavailable choice" placeholder="unavailable choice"
type="text" type="text"
@ -2799,7 +2798,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
> >
<div> <div>
<input <input
class="ant-calendar-picker-input ant-input ant-input-lg" class="ant-calendar-picker-input ant-input"
placeholder="Select date" placeholder="Select date"
readonly="" readonly=""
value="" value=""
@ -2832,7 +2831,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-feedback has-warning" class="ant-form-item-control has-feedback has-warning"
> >
<span <span
class="ant-time-picker ant-time-picker-large" class="ant-time-picker "
style="width:100%;" style="width:100%;"
> >
<input <input
@ -2869,7 +2868,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-feedback has-error" class="ant-form-item-control has-feedback has-error"
> >
<div <div
class="ant-select-lg ant-select ant-select-enabled" class="ant-select ant-select-enabled"
> >
<div <div
aria-autocomplete="list" aria-autocomplete="list"
@ -2931,7 +2930,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
/> />
<input <input
autocomplete="off" autocomplete="off"
class="ant-input ant-cascader-input ant-input-lg" class="ant-input ant-cascader-input "
readonly="" readonly=""
type="text" type="text"
value="" value=""
@ -2987,7 +2986,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
> >
<div> <div>
<input <input
class="ant-calendar-picker-input ant-input ant-input-lg" class="ant-calendar-picker-input ant-input"
placeholder="Select date" placeholder="Select date"
readonly="" readonly=""
value="" value=""
@ -3032,7 +3031,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
> >
<div> <div>
<input <input
class="ant-calendar-picker-input ant-input ant-input-lg" class="ant-calendar-picker-input ant-input"
placeholder="Select date" placeholder="Select date"
readonly="" readonly=""
value="" value=""
@ -3069,7 +3068,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control has-feedback has-success" class="ant-form-item-control has-feedback has-success"
> >
<div <div
class="ant-input-number ant-input-number-lg" class="ant-input-number"
style="width:100%;" style="width:100%;"
> >
<div <div
@ -3146,7 +3145,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
class="ant-form-item-control " class="ant-form-item-control "
> >
<div <div
class="ant-input-number ant-input-number-lg" class="ant-input-number"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"

4
components/form/demo/register.md
View File

@ -237,11 +237,11 @@ class RegistrationForm extends React.Component {
{getFieldDecorator('captcha', { {getFieldDecorator('captcha', {
rules: [{ required: true, message: 'Please input the captcha you got!' }], rules: [{ required: true, message: 'Please input the captcha you got!' }],
})( })(
<Input size="large" /> <Input />
)} )}
</Col> </Col>
<Col span={12}> <Col span={12}>
<Button size="large">Get captcha</Button> <Button>Get captcha</Button>
</Col> </Col>
</Row> </Row>
</FormItem> </FormItem>

2
components/form/demo/validate-other.md
View File

@ -172,7 +172,7 @@ class Demo extends React.Component {
<Icon type="inbox" /> <Icon type="inbox" />
</p> </p>
<p className="ant-upload-text">Click or drag file to this area to upload</p> <p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> <p className="ant-upload-hint">Support for a single or bulk upload.</p>
</Upload.Dragger> </Upload.Dragger>
)} )}
</div> </div>

9
components/form/style/index.less
View File

@ -6,7 +6,7 @@
@import "./mixin"; @import "./mixin";
@form-prefix-cls: ~"@{ant-prefix}-form"; @form-prefix-cls: ~"@{ant-prefix}-form";
@form-component-height: @input-height-lg; @form-component-height: @input-height-base;
@form-feedback-icon-size: 14px; @form-feedback-icon-size: 14px;
.@{form-prefix-cls} { .@{form-prefix-cls} {
@ -83,7 +83,6 @@ input[type="checkbox"] {
line-height: @form-component-height; line-height: @form-component-height;
position: relative; position: relative;
.clearfix; .clearfix;
font-size: 0;
* { * {
font-size: @font-size-base; font-size: @font-size-base;
} }
@ -269,7 +268,7 @@ form {
.@{ant-prefix}-select-selection--single { .@{ant-prefix}-select-selection--single {
margin-left: -1px; margin-left: -1px;
height: @input-height-lg; height: @input-height-base;
background-color: #eee; background-color: #eee;
.@{ant-prefix}-select-selection__rendered { .@{ant-prefix}-select-selection__rendered {
padding-left: 8px; padding-left: 8px;
@ -388,8 +387,8 @@ form {
right: 0; right: 0;
visibility: visible; visibility: visible;
pointer-events: none; pointer-events: none;
.square(@input-height-lg); .square(@input-height-base);
line-height: @input-height-lg; line-height: @input-height-base;
text-align: center; text-align: center;
font-size: @form-feedback-icon-size; font-size: @form-feedback-icon-size;
animation: zoomIn .3s @ease-out-back; animation: zoomIn .3s @ease-out-back;

6
components/input-number/demo/size.md
View File

@ -1,17 +1,17 @@
--- ---
order: 1 order: 1
title: title:
zh-CN: 三种大小 zh-CN: 三种大小
en-US: Sizes en-US: Sizes
--- ---
## zh-CN ## zh-CN
三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` 三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `40px` 和 `24px` ，默认高度为 `32px`。
## en-US ## en-US
There are three sizes available to a numeric input box. By default, the size is `28px`. The two additional sizes are `large` and `small` which means `32px` and `22px`, respectively. There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
````jsx ````jsx
import { InputNumber } from 'antd'; import { InputNumber } from 'antd';

24
components/input-number/style/index.less
View File

@ -4,12 +4,6 @@
@input-number-prefix-cls: ~"@{ant-prefix}-input-number"; @input-number-prefix-cls: ~"@{ant-prefix}-input-number";
.handler-disabled() {
opacity: 0.72;
color: #ccc !important;
cursor: not-allowed;
}
.@{input-number-prefix-cls} { .@{input-number-prefix-cls} {
.reset-component; .reset-component;
.input; .input;
@ -18,7 +12,7 @@
display: inline-block; display: inline-block;
border: @border-width-base @border-style-base @border-color-base; border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base; border-radius: @border-radius-base;
width: 80px; width: 90px;
&-handler { &-handler {
text-align: center; text-align: center;
@ -77,7 +71,7 @@
background-color: @input-bg; background-color: @input-bg;
border: 0; border: 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
padding: 0 7px; padding: 0 @control-padding-horizontal - 1px;
display: block; display: block;
.placeholder(); .placeholder();
@ -99,6 +93,7 @@
input { input {
height: @input-height-sm - 2px; height: @input-height-sm - 2px;
padding: 0 @control-padding-horizontal-sm - 1px;
} }
} }
@ -156,26 +151,13 @@
} }
} }
&-handler-down-disabled,
&-handler-up-disabled,
&-disabled {
.@{input-number-prefix-cls}-handler-down-inner,
.@{input-number-prefix-cls}-handler-up-inner {
.handler-disabled();
}
}
&-disabled { &-disabled {
.@{input-number-prefix-cls}-input { .@{input-number-prefix-cls}-input {
opacity: 0.72;
cursor: not-allowed; cursor: not-allowed;
background-color: @disabled-bg; background-color: @disabled-bg;
} }
.@{input-number-prefix-cls}-handler-wrap { .@{input-number-prefix-cls}-handler-wrap {
display: none; display: none;
} }
.@{input-number-prefix-cls}-handler {
.handler-disabled();
}
} }
} }

1
components/input/Search.tsx
View File

@ -45,6 +45,7 @@ export default class Search extends React.Component<SearchProps, any> {
) : <Icon className={`${prefixCls}-icon`} type="search" />; ) : <Icon className={`${prefixCls}-icon`} type="search" />;
const inputClassName = classNames(prefixCls, className, { const inputClassName = classNames(prefixCls, className, {
[`${prefixCls}-enter-button`]: !!enterButton, [`${prefixCls}-enter-button`]: !!enterButton,
[`${prefixCls}-${size}`]: !!size,
}); });
return ( return (
<Input <Input

2
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -711,7 +711,7 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
<br /> <br />
<br /> <br />
<span <span
class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper" class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-affix-wrapper"
> >
<input <input
class="ant-input ant-input-lg" class="ant-input ant-input-lg"

6
components/input/demo/size.md
View File

@ -1,19 +1,19 @@
--- ---
order: 1 order: 1
title: title:
zh-CN: 三种大小 zh-CN: 三种大小
en-US: Three sizes of Input en-US: Three sizes of Input
--- ---
## zh-CN ## zh-CN
我们为 `<Input />` 输入框定义了三种尺寸（大、默认、小），高度分别为 `32px`、`28px` 和 `22px`。 我们为 `<Input />` 输入框定义了三种尺寸（大、默认、小），高度分别为 `40px`、`32px` 和 `24px`。
注意： 在表单里面，我们只使用大尺寸的输入框。 注意： 在表单里面，我们只使用大尺寸的输入框。
## en-US ## en-US
There are three sizes of an Input box: `large` (32px)、`default` (28px) and `small` (22px). There are three sizes of an Input box: `large` (40px)、`default` (32px) and `small` (24px).
Note: Inside of forms, only the large size is used. Note: Inside of forms, only the large size is used.

6
components/input/style/mixin.less
View File

@ -10,7 +10,7 @@
} }
.input-sm() { .input-sm() {
padding: @input-padding-vertical-sm @input-padding-horizontal; padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
height: @input-height-sm; height: @input-height-sm;
} }
@ -328,11 +328,11 @@
} }
.@{inputClass}-prefix { .@{inputClass}-prefix {
left: @input-padding-horizontal; left: @padding-xs;
} }
.@{inputClass}-suffix { .@{inputClass}-suffix {
right: @input-padding-horizontal; right: @padding-xs;
} }
.@{inputClass}:not(:first-child) { .@{inputClass}:not(:first-child) {

4
components/input/style/search-input.less
View File

@ -11,6 +11,10 @@
color: @text-color-secondary; color: @text-color-secondary;
} }
&:not(&-small) > .@{ant-prefix}-input-suffix {
right: @control-padding-horizontal;
}
> .@{ant-prefix}-input-suffix > .@{search-prefix}-button { > .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;

2
components/layout/Sider.tsx
View File

@ -28,7 +28,7 @@ export default class Sider extends React.Component<SiderProps, any> {
defaultCollapsed: false, defaultCollapsed: false,
reverseArrow: false, reverseArrow: false,
width: 200, width: 200,
collapsedWidth: 64, collapsedWidth: 80,
style: {}, style: {},
}; };

7
components/layout/demo/custom-trigger.md
View File

@ -74,19 +74,18 @@ ReactDOM.render(<SiderDemo />, mountNode);
#components-layout-demo-custom-trigger .trigger { #components-layout-demo-custom-trigger .trigger {
font-size: 18px; font-size: 18px;
line-height: 64px; line-height: 64px;
padding: 0 16px; padding: 0 24px;
cursor: pointer; cursor: pointer;
transition: color .3s; transition: color .3s;
} }
#components-layout-demo-custom-trigger .trigger:hover { #components-layout-demo-custom-trigger .trigger:hover {
color: #108ee9; color: #1890ff;
} }
#components-layout-demo-custom-trigger .logo { #components-layout-demo-custom-trigger .logo {
height: 32px; height: 32px;
background: #333; background: rgba(255,255,255,.2);
border-radius: 6px;
margin: 16px; margin: 16px;
} }
```` ````

3
components/layout/demo/fixed-sider.md
View File

@ -87,8 +87,7 @@ ReactDOM.render(
````css ````css
#components-layout-demo-fixed-sider .logo { #components-layout-demo-fixed-sider .logo {
height: 32px; height: 32px;
background: #333; background: rgba(255,255,255,.2);
border-radius: 6px;
margin: 16px; margin: 16px;
} }
```` ````

3
components/layout/demo/fixed.md
View File

@ -52,8 +52,7 @@ ReactDOM.render(
#components-layout-demo-fixed .logo { #components-layout-demo-fixed .logo {
width: 120px; width: 120px;
height: 31px; height: 31px;
background: #333; background: rgba(255,255,255,.2);
border-radius: 6px;
margin: 16px 24px 16px 0; margin: 16px 24px 16px 0;
float: left; float: left;
} }

3
components/layout/demo/responsive.md
View File

@ -64,8 +64,7 @@ ReactDOM.render(<Layout>
````css ````css
#components-layout-demo-responsive .logo { #components-layout-demo-responsive .logo {
height: 32px; height: 32px;
background: #333; background: rgba(255,255,255,.2);
border-radius: 6px;
margin: 16px; margin: 16px;
} }
```` ````

3
components/layout/demo/side.md
View File

@ -98,8 +98,7 @@ ReactDOM.render(<SiderDemo />, mountNode);
````css ````css
#components-layout-demo-side .logo { #components-layout-demo-side .logo {
height: 32px; height: 32px;
background: #333; background: rgba(255,255,255,.2);
border-radius: 6px;
margin: 16px; margin: 16px;
} }
```` ````

3
components/layout/demo/top-side-2.md
View File

@ -80,8 +80,7 @@ ReactDOM.render(
#components-layout-demo-top-side-2 .logo { #components-layout-demo-top-side-2 .logo {
width: 120px; width: 120px;
height: 31px; height: 31px;
background: #333; background: rgba(255,255,255,.2);
border-radius: 6px;
margin: 16px 28px 16px 0; margin: 16px 28px 16px 0;
float: left; float: left;
} }

3
components/layout/demo/top-side.md
View File

@ -83,8 +83,7 @@ ReactDOM.render(
#components-layout-demo-top-side .logo { #components-layout-demo-top-side .logo {
width: 120px; width: 120px;
height: 31px; height: 31px;
background: #333; background: rgba(255,255,255,.2);
border-radius: 6px;
margin: 16px 28px 16px 0; margin: 16px 28px 16px 0;
float: left; float: left;
} }

3
components/layout/demo/top.md
View File

@ -58,8 +58,7 @@ ReactDOM.render(
#components-layout-demo-top .logo { #components-layout-demo-top .logo {
width: 120px; width: 120px;
height: 31px; height: 31px;
background: #333; background: rgba(255,255,255,.2);
border-radius: 6px;
margin: 16px 24px 16px 0; margin: 16px 24px 16px 0;
float: left; float: left;
} }

4
components/layout/style/index.less
View File

@ -72,9 +72,9 @@
height: @layout-trigger-height; height: @layout-trigger-height;
line-height: @layout-trigger-height; line-height: @layout-trigger-height;
color: @layout-trigger-color; color: @layout-trigger-color;
background: fade(@layout-trigger-background, 100); background: @layout-trigger-background;
z-index: 1; z-index: 1;
transition: all .15s @ease-in-out; transition: all .2s;
} }
&-zero-width { &-zero-width {

146
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -807,63 +807,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
exports[`renders ./components/list/demo/simple.md correctly 1`] = ` exports[`renders ./components/list/demo/simple.md correctly 1`] = `
<div> <div>
<h3 <h3
style="margin:16px 0;" style="margin-bottom:16px;"
>
Small Size
</h3>
<div
class="ant-list ant-list-sm ant-list-split ant-list-bordered"
>
<div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Racing car sprays burning fuel into crowd.
</div>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Japanese princess to wed commoner.
</div>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Australian walks 100km after outback crash.
</div>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Man charged over missing wedding girl.
</div>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Los Angeles battles huge wildfires.
</div>
</div>
</div>
</div>
<h3
style="margin:16px 0;"
> >
Default Size Default Size
</h3> </h3>
@ -935,11 +879,18 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
<h3 <h3
style="margin:16px 0;" style="margin:16px 0;"
> >
Large Size Small Size
</h3> </h3>
<div <div
class="ant-list ant-list-lg ant-list-split ant-list-bordered" class="ant-list ant-list-sm ant-list-split ant-list-bordered"
> >
<div
class="ant-list-header"
>
<div>
Header
</div>
</div>
<div> <div>
<div <div
class="ant-list-item" class="ant-list-item"
@ -987,6 +938,83 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-list-footer"
>
<div>
Footer
</div>
</div>
</div>
<h3
style="margin:16px 0;"
>
Large Size
</h3>
<div
class="ant-list ant-list-lg ant-list-split ant-list-bordered"
>
<div
class="ant-list-header"
>
<div>
Header
</div>
</div>
<div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Racing car sprays burning fuel into crowd.
</div>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Japanese princess to wed commoner.
</div>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Australian walks 100km after outback crash.
</div>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Man charged over missing wedding girl.
</div>
</div>
<div
class="ant-list-item"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
Los Angeles battles huge wildfires.
</div>
</div>
</div>
<div
class="ant-list-footer"
>
<div>
Footer
</div>
</div>
</div> </div>
</div> </div>
`; `;

12
components/list/demo/simple.md
View File

@ -30,15 +30,17 @@ const data = [
ReactDOM.render( ReactDOM.render(
<div> <div>
<h3 style={{ margin: '16px 0' }}>Small Size</h3> <h3 style={{ marginBottom: 16 }}>Default Size</h3>
<List <List
header={<div>Header</div>}
footer={<div>Footer</div>}
bordered bordered
dataSource={data} dataSource={data}
size="small"
renderItem={item => (<List.Item>{item}</List.Item>)} renderItem={item => (<List.Item>{item}</List.Item>)}
/> />
<h3 style={{ margin: '16px 0' }}>Default Size</h3> <h3 style={{ margin: '16px 0' }}>Small Size</h3>
<List <List
size="small"
header={<div>Header</div>} header={<div>Header</div>}
footer={<div>Footer</div>} footer={<div>Footer</div>}
bordered bordered
@ -47,9 +49,11 @@ ReactDOM.render(
/> />
<h3 style={{ margin: '16px 0' }}>Large Size</h3> <h3 style={{ margin: '16px 0' }}>Large Size</h3>
<List <List
size="large"
header={<div>Header</div>}
footer={<div>Footer</div>}
bordered bordered
dataSource={data} dataSource={data}
size="large"
renderItem={item => (<List.Item>{item}</List.Item>)} renderItem={item => (<List.Item>{item}</List.Item>)}
/> />
</div> </div>

14
components/list/style/index.less
View File

@ -9,11 +9,13 @@
* { * {
outline: none; outline: none;
} }
&-more, &-pagination { &-pagination {
margin-top: 12px; margin-top: 12px;
text-align: center; text-align: right;
} }
&-more { &-more {
margin-top: 12px;
text-align: center;
button { button {
padding-left: 32px; padding-left: 32px;
padding-right: 32px; padding-right: 32px;
@ -69,6 +71,8 @@
font-size: 0; font-size: 0;
flex: 0 0 auto; flex: 0 0 auto;
margin-left: 48px; margin-left: 48px;
padding: 0;
list-style: none;
& > li { & > li {
display: inline-block; display: inline-block;
color: @text-color-secondary; color: @text-color-secondary;
@ -136,8 +140,12 @@
} }
.@{list-prefix-cls}-bordered.@{list-prefix-cls}-sm { .@{list-prefix-cls}-bordered.@{list-prefix-cls}-sm {
.@{list-prefix-cls}-item {
padding-left: 16px;
padding-right: 16px;
}
.@{list-prefix-cls}-header, .@{list-prefix-cls}-footer { .@{list-prefix-cls}-header, .@{list-prefix-cls}-footer {
padding: 8px 24px; padding: 8px 16px;
} }
} }

93
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

@ -938,7 +938,6 @@ exports[`Locale Provider should display the text as locale changed 1`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -5520,7 +5519,6 @@ exports[`Locale Provider should display the text as locale changed 1`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Cancel Cancel
</Button>, </Button>,
@ -5530,7 +5528,6 @@ exports[`Locale Provider should display the text as locale changed 1`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -6486,7 +6483,6 @@ exports[`Locale Provider should display the text as locale changed 2`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -11068,7 +11064,6 @@ exports[`Locale Provider should display the text as locale changed 2`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Cancelar Cancelar
</Button>, </Button>,
@ -11078,7 +11073,6 @@ exports[`Locale Provider should display the text as locale changed 2`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -12037,7 +12031,6 @@ exports[`Locale Provider should display the text as locale changed 3`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -16631,7 +16624,6 @@ exports[`Locale Provider should display the text as locale changed 3`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Cancelar Cancelar
</Button>, </Button>,
@ -16641,7 +16633,6 @@ exports[`Locale Provider should display the text as locale changed 3`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -17597,7 +17588,6 @@ exports[`Locale Provider should display the text as locale changed 4`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -22179,7 +22169,6 @@ exports[`Locale Provider should display the text as locale changed 4`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Отмена Отмена
</Button>, </Button>,
@ -22189,7 +22178,6 @@ exports[`Locale Provider should display the text as locale changed 4`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -23145,7 +23133,6 @@ exports[`Locale Provider should display the text as locale changed 5`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -27727,7 +27714,6 @@ exports[`Locale Provider should display the text as locale changed 5`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Cancelar Cancelar
</Button>, </Button>,
@ -27737,7 +27723,6 @@ exports[`Locale Provider should display the text as locale changed 5`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
Aceptar Aceptar
@ -28685,7 +28670,6 @@ exports[`Locale Provider should display the text as locale changed 6`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -33267,7 +33251,6 @@ exports[`Locale Provider should display the text as locale changed 6`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Avbryt Avbryt
</Button>, </Button>,
@ -33277,7 +33260,6 @@ exports[`Locale Provider should display the text as locale changed 6`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -34225,7 +34207,6 @@ exports[`Locale Provider should display the text as locale changed 7`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -38807,7 +38788,6 @@ exports[`Locale Provider should display the text as locale changed 7`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Annuler Annuler
</Button>, </Button>,
@ -38817,7 +38797,6 @@ exports[`Locale Provider should display the text as locale changed 7`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -39767,7 +39746,6 @@ exports[`Locale Provider should display the text as locale changed 8`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -44349,7 +44327,6 @@ exports[`Locale Provider should display the text as locale changed 8`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Abbrechen Abbrechen
</Button>, </Button>,
@ -44359,7 +44336,6 @@ exports[`Locale Provider should display the text as locale changed 8`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -45315,7 +45291,6 @@ exports[`Locale Provider should display the text as locale changed 9`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -49897,7 +49872,6 @@ exports[`Locale Provider should display the text as locale changed 9`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Annuleren Annuleren
</Button>, </Button>,
@ -49907,7 +49881,6 @@ exports[`Locale Provider should display the text as locale changed 9`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -50855,7 +50828,6 @@ exports[`Locale Provider should display the text as locale changed 10`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -55437,7 +55409,6 @@ exports[`Locale Provider should display the text as locale changed 10`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Cancel·lar Cancel·lar
</Button>, </Button>,
@ -55447,7 +55418,6 @@ exports[`Locale Provider should display the text as locale changed 10`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -56401,7 +56371,6 @@ exports[`Locale Provider should display the text as locale changed 11`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -60983,7 +60952,6 @@ exports[`Locale Provider should display the text as locale changed 11`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Storno Storno
</Button>, </Button>,
@ -60993,7 +60961,6 @@ exports[`Locale Provider should display the text as locale changed 11`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
Ok Ok
@ -61947,7 +61914,6 @@ exports[`Locale Provider should display the text as locale changed 12`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -66529,7 +66495,6 @@ exports[`Locale Provider should display the text as locale changed 12`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
취소 취소
</Button>, </Button>,
@ -66539,7 +66504,6 @@ exports[`Locale Provider should display the text as locale changed 12`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
확인 확인
@ -67495,7 +67459,6 @@ exports[`Locale Provider should display the text as locale changed 13`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -72077,7 +72040,6 @@ exports[`Locale Provider should display the text as locale changed 13`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Tühista Tühista
</Button>, </Button>,
@ -72087,7 +72049,6 @@ exports[`Locale Provider should display the text as locale changed 13`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -73043,7 +73004,6 @@ exports[`Locale Provider should display the text as locale changed 14`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -77625,7 +77585,6 @@ exports[`Locale Provider should display the text as locale changed 14`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Zrušiť Zrušiť
</Button>, </Button>,
@ -77635,7 +77594,6 @@ exports[`Locale Provider should display the text as locale changed 14`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -78588,7 +78546,6 @@ exports[`Locale Provider should display the text as locale changed 15`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -83158,7 +83115,6 @@ exports[`Locale Provider should display the text as locale changed 15`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
キャンセル キャンセル
</Button>, </Button>,
@ -83168,7 +83124,6 @@ exports[`Locale Provider should display the text as locale changed 15`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -84124,7 +84079,6 @@ exports[`Locale Provider should display the text as locale changed 16`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -88706,7 +88660,6 @@ exports[`Locale Provider should display the text as locale changed 16`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
İptal İptal
</Button>, </Button>,
@ -88716,7 +88669,6 @@ exports[`Locale Provider should display the text as locale changed 16`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
Tamam Tamam
@ -89669,7 +89621,6 @@ exports[`Locale Provider should display the text as locale changed 17`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -94239,7 +94190,6 @@ exports[`Locale Provider should display the text as locale changed 17`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
取 消 取 消
</Button>, </Button>,
@ -94249,7 +94199,6 @@ exports[`Locale Provider should display the text as locale changed 17`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
確 定 確 定
@ -95205,7 +95154,6 @@ exports[`Locale Provider should display the text as locale changed 18`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -99787,7 +99735,6 @@ exports[`Locale Provider should display the text as locale changed 18`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Peruuta Peruuta
</Button>, </Button>,
@ -99797,7 +99744,6 @@ exports[`Locale Provider should display the text as locale changed 18`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -100753,7 +100699,6 @@ exports[`Locale Provider should display the text as locale changed 19`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -105335,7 +105280,6 @@ exports[`Locale Provider should display the text as locale changed 19`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Anuluj Anuluj
</Button>, </Button>,
@ -105345,7 +105289,6 @@ exports[`Locale Provider should display the text as locale changed 19`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -106301,7 +106244,6 @@ exports[`Locale Provider should display the text as locale changed 20`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -110883,7 +110825,6 @@ exports[`Locale Provider should display the text as locale changed 20`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Отказ Отказ
</Button>, </Button>,
@ -110893,7 +110834,6 @@ exports[`Locale Provider should display the text as locale changed 20`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
Добре Добре
@ -111849,7 +111789,6 @@ exports[`Locale Provider should display the text as locale changed 21`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -116431,7 +116370,6 @@ exports[`Locale Provider should display the text as locale changed 21`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Cancel Cancel
</Button>, </Button>,
@ -116441,7 +116379,6 @@ exports[`Locale Provider should display the text as locale changed 21`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -117389,7 +117326,6 @@ exports[`Locale Provider should display the text as locale changed 22`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -121971,7 +121907,6 @@ exports[`Locale Provider should display the text as locale changed 22`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Annuler Annuler
</Button>, </Button>,
@ -121981,7 +121916,6 @@ exports[`Locale Provider should display the text as locale changed 22`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -122937,7 +122871,6 @@ exports[`Locale Provider should display the text as locale changed 23`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -127519,7 +127452,6 @@ exports[`Locale Provider should display the text as locale changed 23`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Annuleer Annuleer
</Button>, </Button>,
@ -127529,7 +127461,6 @@ exports[`Locale Provider should display the text as locale changed 23`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -128485,7 +128416,6 @@ exports[`Locale Provider should display the text as locale changed 24`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -133067,7 +132997,6 @@ exports[`Locale Provider should display the text as locale changed 24`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Annulla Annulla
</Button>, </Button>,
@ -133077,7 +133006,6 @@ exports[`Locale Provider should display the text as locale changed 24`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -134033,7 +133961,6 @@ exports[`Locale Provider should display the text as locale changed 25`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -138615,7 +138542,6 @@ exports[`Locale Provider should display the text as locale changed 25`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Huỷ Huỷ
</Button>, </Button>,
@ -138625,7 +138551,6 @@ exports[`Locale Provider should display the text as locale changed 25`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -139581,7 +139506,6 @@ exports[`Locale Provider should display the text as locale changed 26`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -144163,7 +144087,6 @@ exports[`Locale Provider should display the text as locale changed 26`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
ยกเลิก ยกเลิก
</Button>, </Button>,
@ -144173,7 +144096,6 @@ exports[`Locale Provider should display the text as locale changed 26`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
ตกลง ตกลง
@ -145129,7 +145051,6 @@ exports[`Locale Provider should display the text as locale changed 27`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -149709,7 +149630,6 @@ exports[`Locale Provider should display the text as locale changed 27`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
لغو لغو
</Button>, </Button>,
@ -149719,7 +149639,6 @@ exports[`Locale Provider should display the text as locale changed 27`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
تایید تایید
@ -150675,7 +150594,6 @@ exports[`Locale Provider should display the text as locale changed 28`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -155257,7 +155175,6 @@ exports[`Locale Provider should display the text as locale changed 28`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Άκυρο Άκυρο
</Button>, </Button>,
@ -155267,7 +155184,6 @@ exports[`Locale Provider should display the text as locale changed 28`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
ΟΚ ΟΚ
@ -156222,7 +156138,6 @@ exports[`Locale Provider should display the text as locale changed 29`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -160804,7 +160719,6 @@ exports[`Locale Provider should display the text as locale changed 29`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Avbryt Avbryt
</Button>, </Button>,
@ -160814,7 +160728,6 @@ exports[`Locale Provider should display the text as locale changed 29`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
OK OK
@ -161769,7 +161682,6 @@ exports[`Locale Provider should display the text as locale changed 30`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -166351,7 +166263,6 @@ exports[`Locale Provider should display the text as locale changed 30`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Otkaži Otkaži
</Button>, </Button>,
@ -166361,7 +166272,6 @@ exports[`Locale Provider should display the text as locale changed 30`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
U redu U redu
@ -167317,7 +167227,6 @@ exports[`Locale Provider should display the text as locale changed 31`] = `
> >
<span <span
className="ant-calendar-picker" className="ant-calendar-picker"
style={Object {}}
> >
<Picker <Picker
align={Object {}} align={Object {}}
@ -171899,7 +171808,6 @@ exports[`Locale Provider should display the text as locale changed 31`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
> >
Hætta við Hætta við
</Button>, </Button>,
@ -171909,7 +171817,6 @@ exports[`Locale Provider should display the text as locale changed 31`] = `
loading={false} loading={false}
onClick={[Function]} onClick={[Function]}
prefixCls="ant-btn" prefixCls="ant-btn"
size="large"
type="primary" type="primary"
> >
Áfram Áfram

6
components/mention/demo/placement.md
View File

@ -2,7 +2,7 @@
order: 0 order: 0
title: title:
zh-CN: 向上展开 zh-CN: 向上展开
en-US: Expand up en-US: Placement
--- ---
## zh-CN ## zh-CN
@ -11,7 +11,7 @@ title:
## en-US ## en-US
Expand the suggestions up. Change the suggestions placement.
````jsx ````jsx
import { Mention } from 'antd'; import { Mention } from 'antd';
@ -27,7 +27,7 @@ function onSelect(suggestion) {
ReactDOM.render( ReactDOM.render(
<Mention <Mention
style={{ width: '100%', height: 100 }} style={{ width: '100%' }}
onChange={onChange} onChange={onChange}
suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']} suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
onSelect={onSelect} onSelect={onSelect}

7
components/mention/style/index.less
View File

@ -36,12 +36,12 @@
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
height: auto; height: auto;
padding: 4px 7px; padding: 5px @control-padding-horizontal - 1px;
} }
} }
.DraftEditor-editorContainer .public-DraftEditor-content { .DraftEditor-editorContainer .public-DraftEditor-content {
height: auto; height: auto;
padding: 4px 7px; padding: 5px @control-padding-horizontal - 1px;
} }
} }
@ -77,7 +77,8 @@
&-item { &-item {
position: relative; position: relative;
display: block; display: block;
padding: 7px 8px; padding: 5px @control-padding-horizontal;
line-height: 22px;
font-weight: normal; font-weight: normal;
color: @text-color; color: @text-color;
white-space: nowrap; white-space: nowrap;

3
components/menu/style/index.less
View File

@ -265,7 +265,7 @@
background: #fff; background: #fff;
background-image: linear-gradient(to right, @text-color, @text-color); background-image: linear-gradient(to right, @text-color, @text-color);
width: 6px; width: 6px;
height: 2px; height: 1.5px;
border-radius: 2px; border-radius: 2px;
transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out; transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
} }
@ -472,6 +472,7 @@
&-dark &-sub { &-dark &-sub {
color: @text-color-secondary-dark; color: @text-color-secondary-dark;
background: @menu-dark-bg; background: @menu-dark-bg;
box-shadow: 0 2px 8px rgba(0, 0, 0, .45) inset;
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
&:after, &:after,
&:before { &:before {

2
components/message/style/index.less
View File

@ -21,7 +21,7 @@
} }
&-notice-content { &-notice-content {
padding: 8px 16px; padding: 10px 16px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: @shadow-2; box-shadow: @shadow-2;
background: @component-background; background: @component-background;

2
components/modal/ActionButton.tsx
View File

@ -58,7 +58,7 @@ export default class ActionButton extends React.Component<ActionButtonProps, any
const { type, children } = this.props; const { type, children } = this.props;
const loading = this.state.loading; const loading = this.state.loading;
return ( return (
<Button type={type} size="large" onClick={this.onClick} loading={loading}> <Button type={type} onClick={this.onClick} loading={loading}>
{children} {children}
</Button> </Button>
); );

2
components/modal/Modal.tsx
View File

@ -151,7 +151,6 @@ export default class Modal extends React.Component<ModalProps, any> {
const defaultFooter = [( const defaultFooter = [(
<Button <Button
key="cancel" key="cancel"
size="large"
onClick={this.handleCancel} onClick={this.handleCancel}
> >
{cancelText || getConfirmLocale().cancelText} {cancelText || getConfirmLocale().cancelText}
@ -160,7 +159,6 @@ export default class Modal extends React.Component<ModalProps, any> {
<Button <Button
key="confirm" key="confirm"
type={okType} type={okType}
size="large"
loading={confirmLoading} loading={confirmLoading}
onClick={this.handleOk} onClick={this.handleOk}
> >

4
components/modal/__tests__/__snapshots__/Modal.test.js.snap
View File

@ -37,7 +37,7 @@ exports[`Modal render correctly 1`] = `
class="ant-modal-footer" class="ant-modal-footer"
> >
<button <button
class="ant-btn ant-btn-lg" class="ant-btn"
type="button" type="button"
> >
<span> <span>
@ -45,7 +45,7 @@ exports[`Modal render correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="ant-btn ant-btn-primary ant-btn-lg" class="ant-btn ant-btn-primary"
type="button" type="button"
> >
<span> <span>

4
components/modal/demo/footer.md
View File

@ -54,8 +54,8 @@ class App extends React.Component {
onOk={this.handleOk} onOk={this.handleOk}
onCancel={this.handleCancel} onCancel={this.handleCancel}
footer={[ footer={[
<Button key="back" size="large" onClick={this.handleCancel}>Return</Button>, <Button key="back" onClick={this.handleCancel}>Return</Button>,
<Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}> <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
Submit Submit
</Button>, </Button>,
]} ]}

5
components/notification/style/index.less
View File

@ -78,8 +78,9 @@
&-icon { &-icon {
position: absolute; position: absolute;
font-size: 32px; font-size: 24px;
line-height: 32px; line-height: 24px;
margin-left: 4px;
&-success { &-success {
color: @success-color; color: @success-color;

60
components/pagination/style/index.less
View File

@ -26,8 +26,8 @@
&-total-text { &-total-text {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: 28px; height: @pagination-item-size;
line-height: 28px; line-height: @pagination-item-size;
margin-right: 8px; margin-right: 8px;
} }
@ -35,9 +35,9 @@
cursor: pointer; cursor: pointer;
border-radius: @border-radius-base; border-radius: @border-radius-base;
user-select: none; user-select: none;
min-width: 28px; min-width: @pagination-item-size;
height: 28px; height: @pagination-item-size;
line-height: 28px; line-height: @pagination-item-size;
text-align: center; text-align: center;
list-style: none; list-style: none;
display: inline-block; display: inline-block;
@ -137,9 +137,9 @@
color: @text-color; color: @text-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
list-style: none; list-style: none;
min-width: 28px; min-width: @pagination-item-size;
height: 28px; height: @pagination-item-size;
line-height: 28px; line-height: @pagination-item-size;
text-align: center; text-align: center;
transition: all .3s; transition: all .3s;
display: inline-block; display: inline-block;
@ -168,10 +168,10 @@
transition: all .3s; transition: all .3s;
&:after { &:after {
.iconfont-size-under-12px(8px); font-size: 12px;
display: block; display: block;
height: 26px; height: @pagination-item-size - 2px;
line-height: 26px; line-height: @pagination-item-size - 2px;
font-family: "anticon"; font-family: "anticon";
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
@ -242,14 +242,14 @@
&-simple &-prev, &-simple &-prev,
&-simple &-next { &-simple &-next {
height: 24px; height: @pagination-item-size-sm;
line-height: 24px; line-height: @pagination-item-size-sm;
vertical-align: top; vertical-align: top;
.@{pagination-prefix-cls}-item-link { .@{pagination-prefix-cls}-item-link {
border: 0; border: 0;
height: 24px; height: @pagination-item-size-sm;
&:after { &:after {
line-height: 24px; line-height: @pagination-item-size-sm;
} }
} }
} }
@ -257,7 +257,7 @@
&-simple &-simple-pager { &-simple &-simple-pager {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
height: 24px; height: @pagination-item-size-sm;
input { input {
margin-right: 8px; margin-right: 8px;
@ -281,46 +281,46 @@
.@{pagination-prefix-cls} { .@{pagination-prefix-cls} {
&.mini &-total-text, &.mini &-total-text,
&.mini &-simple-pager { &.mini &-simple-pager {
height: 20px; height: @pagination-item-size-sm;
line-height: 20px; line-height: @pagination-item-size-sm;
} }
&.mini &-item { &.mini &-item {
border: 0; border: 0;
margin: 0; margin: 0;
min-width: 20px; min-width: @pagination-item-size-sm;
height: 20px; height: @pagination-item-size-sm;
line-height: 20px; line-height: @pagination-item-size-sm;
} }
&.mini &-prev, &.mini &-prev,
&.mini &-next { &.mini &-next {
margin: 0; margin: 0;
min-width: 20px; min-width: @pagination-item-size-sm;
height: 20px; height: @pagination-item-size-sm;
line-height: 20px; line-height: @pagination-item-size-sm;
} }
&.mini &-prev &-item-link, &.mini &-prev &-item-link,
&.mini &-next &-item-link { &.mini &-next &-item-link {
border: 0; border: 0;
&:after { &:after {
height: 20px; height: @pagination-item-size-sm;
line-height: 20px; line-height: @pagination-item-size-sm;
} }
} }
&.mini &-jump-prev, &.mini &-jump-prev,
&.mini &-jump-next { &.mini &-jump-next {
height: 20px; height: @pagination-item-size-sm;
line-height: 20px; line-height: @pagination-item-size-sm;
} }
&.mini &-options { &.mini &-options {
margin-left: 8px; margin-left: 8px;
&-quick-jumper { &-quick-jumper {
height: 20px; height: @pagination-item-size-sm;
line-height: 20px; line-height: @pagination-item-size-sm;
input { input {
.input-sm; .input-sm;

6
components/popover/demo/basic.md
View File

@ -29,3 +29,9 @@ ReactDOM.render(
</Popover> </Popover>
, mountNode); , mountNode);
```` ````
<style>
p {
margin: 0;
}
</style>

12
components/popover/style/index.less
View File

@ -60,29 +60,29 @@
&-title { &-title {
min-width: @popover-min-width; min-width: @popover-min-width;
margin: 0; // reset heading margin margin: 0; // reset heading margin
padding: 8px 16px; padding: 8px @padding-md;
min-height: 32px; min-height: 32px;
border-bottom: 1px solid @border-color-split; border-bottom: 1px solid @border-color-split;
color: @popover-color; color: @heading-color;
font-weight: 500; font-weight: 500;
} }
&-inner-content { &-inner-content {
padding: 8px 16px; padding: 8px @padding-md;
color: @popover-color; color: @popover-color;
} }
&-message { &-message {
padding: 8px 0 16px; padding: 8px 0 @padding-md;
font-size: @font-size-base; font-size: @font-size-base;
color: @popover-color; color: @popover-color;
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
color: @warning-color; color: @warning-color;
line-height: 17px; line-height: @line-height-base;
position: absolute; position: absolute;
} }
&-title { &-title {
padding-left: 20px; padding-left: @font-size-base + 8px;
} }
} }

80
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3,11 +3,11 @@
exports[`renders ./components/progress/demo/circle.md correctly 1`] = ` exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
<div> <div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:132px;height:132px;font-size:27.12px;" style="width:120px;height:120px;font-size:24px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -43,11 +43,11 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:132px;height:132px;font-size:27.12px;" style="width:120px;height:120px;font-size:24px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -85,11 +85,11 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:132px;height:132px;font-size:27.12px;" style="width:120px;height:120px;font-size:24px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -132,11 +132,11 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = ` exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
<div> <div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:132px;height:132px;font-size:27.12px;" style="width:120px;height:120px;font-size:24px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -186,11 +186,11 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = ` exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
<div> <div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:80px;height:80px;font-size:18.8px;" style="width:80px;height:80px;font-size:18px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -226,11 +226,11 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:80px;height:80px;font-size:18.8px;" style="width:80px;height:80px;font-size:18px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -268,11 +268,11 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:80px;height:80px;font-size:18.8px;" style="width:80px;height:80px;font-size:18px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -314,11 +314,11 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = ` exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:132px;height:132px;font-size:27.12px;" style="width:120px;height:120px;font-size:24px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -358,7 +358,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = ` exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
<div> <div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
<div> <div>
<div <div
@ -369,7 +369,7 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:0%;height:10px;" style="width:0%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -406,11 +406,11 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
exports[`renders ./components/progress/demo/format.md correctly 1`] = ` exports[`renders ./components/progress/demo/format.md correctly 1`] = `
<div> <div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:132px;height:132px;font-size:27.12px;" style="width:120px;height:120px;font-size:24px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -446,11 +446,11 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
<div <div
class="ant-progress-inner" class="ant-progress-inner"
style="width:132px;height:132px;font-size:27.12px;" style="width:120px;height:120px;font-size:24px;"
> >
<svg <svg
class="ant-progress-circle " class="ant-progress-circle "
@ -491,7 +491,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
exports[`renders ./components/progress/demo/line.md correctly 1`] = ` exports[`renders ./components/progress/demo/line.md correctly 1`] = `
<div> <div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
<div> <div>
<div <div
@ -502,7 +502,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:30%;height:10px;" style="width:30%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -514,7 +514,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
> >
<div> <div>
<div <div
@ -525,7 +525,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:50%;height:10px;" style="width:50%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -537,7 +537,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
> >
<div> <div>
<div <div
@ -548,7 +548,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:70%;height:10px;" style="width:70%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -562,7 +562,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
<div> <div>
<div <div
@ -573,7 +573,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:10px;" style="width:100%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -587,7 +587,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
> >
<div> <div>
<div <div
@ -598,7 +598,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:50%;height:10px;" style="width:50%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -612,7 +612,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
style="width:170px;" style="width:170px;"
> >
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
> >
<div> <div>
<div <div
@ -623,7 +623,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:30%;height:5px;" style="width:30%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -635,7 +635,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small"
> >
<div> <div>
<div <div
@ -646,7 +646,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:50%;height:5px;" style="width:50%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -658,7 +658,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small"
> >
<div> <div>
<div <div
@ -669,7 +669,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:70%;height:5px;" style="width:70%;height:8px;"
/> />
</div> </div>
</div> </div>
@ -683,7 +683,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info" class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small"
> >
<div> <div>
<div <div
@ -694,7 +694,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:5px;" style="width:100%;height:8px;"
/> />
</div> </div>
</div> </div>

10
components/progress/demo/line-mini.md
View File

@ -1,6 +1,6 @@
--- ---
order: 2 order: 2
title: title:
zh-CN: 小型进度条 zh-CN: 小型进度条
en-US: Mini size progress bar en-US: Mini size progress bar
--- ---
@ -18,10 +18,10 @@ import { Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div style={{ width: 170 }}> <div style={{ width: 170 }}>
<Progress percent={30} strokeWidth={5} /> <Progress percent={30} size="small" />
<Progress percent={50} strokeWidth={5} status="active" /> <Progress percent={50} size="small" status="active" />
<Progress percent={70} strokeWidth={5} status="exception" /> <Progress percent={70} size="small" status="exception" />
<Progress percent={100} strokeWidth={5} /> <Progress percent={100} size="small" />
</div> </div>
, mountNode); , mountNode);
```` ````

12
components/progress/progress.tsx
View File

@ -23,6 +23,7 @@ export interface ProgressProps {
style?: React.CSSProperties; style?: React.CSSProperties;
gapDegree?: number; gapDegree?: number;
gapPosition?: 'top' | 'bottom' | 'left' | 'right'; gapPosition?: 'top' | 'bottom' | 'left' | 'right';
size?: 'default' | 'small';
} }
export default class Progress extends React.Component<ProgressProps, any> { export default class Progress extends React.Component<ProgressProps, any> {
@ -35,6 +36,7 @@ export default class Progress extends React.Component<ProgressProps, any> {
showInfo: true, showInfo: true,
trailColor: '#f3f3f3', trailColor: '#f3f3f3',
prefixCls: 'ant-progress', prefixCls: 'ant-progress',
size: 'default',
}; };
static propTypes = { static propTypes = {
@ -47,12 +49,13 @@ export default class Progress extends React.Component<ProgressProps, any> {
trailColor: PropTypes.string, trailColor: PropTypes.string,
format: PropTypes.func, format: PropTypes.func,
gapDegree: PropTypes.number, gapDegree: PropTypes.number,
default: PropTypes.oneOf(['default', 'small']),
}; };
render() { render() {
const props = this.props; const props = this.props;
const { const {
prefixCls, className, percent = 0, status, format, trailColor, prefixCls, className, percent = 0, status, format, trailColor, size,
type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition, ...restProps, type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition, ...restProps,
} = props; } = props;
const progressStatus = parseInt(percent.toString(), 10) >= 100 && !('status' in props) ? const progressStatus = parseInt(percent.toString(), 10) >= 100 && !('status' in props) ?
@ -77,7 +80,7 @@ export default class Progress extends React.Component<ProgressProps, any> {
if (type === 'line') { if (type === 'line') {
const percentStyle = { const percentStyle = {
width: `${percent}%`, width: `${percent}%`,
height: strokeWidth || 10, height: strokeWidth || 8,
}; };
progress = ( progress = (
<div> <div>
@ -90,11 +93,11 @@ export default class Progress extends React.Component<ProgressProps, any> {
</div> </div>
); );
} else if (type === 'circle' || type === 'dashboard') { } else if (type === 'circle' || type === 'dashboard') {
const circleSize = width || 132; const circleSize = width || 120;
const circleStyle = { const circleStyle = {
width: circleSize, width: circleSize,
height: circleSize, height: circleSize,
fontSize: circleSize * 0.16 + 6, fontSize: circleSize * 0.15 + 6,
}; };
const circleWidth = strokeWidth || 6; const circleWidth = strokeWidth || 6;
const gapPos = gapPosition || type === 'dashboard' && 'bottom' || 'top'; const gapPos = gapPosition || type === 'dashboard' && 'bottom' || 'top';
@ -120,6 +123,7 @@ export default class Progress extends React.Component<ProgressProps, any> {
[`${prefixCls}-${type === 'dashboard' && 'circle' || type}`]: true, [`${prefixCls}-${type === 'dashboard' && 'circle' || type}`]: true,
[`${prefixCls}-status-${progressStatus}`]: true, [`${prefixCls}-status-${progressStatus}`]: true,
[`${prefixCls}-show-info`]: showInfo, [`${prefixCls}-show-info`]: showInfo,
[`${prefixCls}-${size}`]: size,
}, className); }, className);
return ( return (

5
components/progress/style/index.less
View File

@ -13,6 +13,11 @@
position: relative; position: relative;
} }
&-small&-line,
&-small&-line &-text .@{iconfont-css-prefix} {
font-size: @font-size-sm;
}
&-outer { &-outer {
display: inline-block; display: inline-block;
width: 100%; width: 100%;

30
components/radio/style/index.less
View File

@ -8,8 +8,9 @@
@radio-duration: .3s; @radio-duration: .3s;
.@{radio-group-prefix-cls} { .@{radio-group-prefix-cls} {
display: inline-block;
.reset-component; .reset-component;
display: inline-block;
line-height: unset;
} }
// 一般状态 // 一般状态
@ -30,7 +31,7 @@
position: relative; position: relative;
line-height: 1; line-height: 1;
vertical-align: middle; vertical-align: middle;
top: -1px; top: -1.2px;
cursor: pointer; cursor: pointer;
.@{radio-prefix-cls}-wrapper:hover &, .@{radio-prefix-cls}-wrapper:hover &,
&:hover, &:hover,
@ -58,11 +59,12 @@
} }
&-inner { &-inner {
&:after { &:after {
@radio-dot-size: @radio-size - 9px;
position: absolute; position: absolute;
width: 6px; width: @radio-dot-size;
height: 6px; height: @radio-dot-size;
left: 3px; left: (@radio-size - @radio-dot-size) / 2 - 1px;
top: 3px; top: (@radio-size - @radio-dot-size) / 2 - 1px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
display: table; display: table;
border-top: 0; border-top: 0;
@ -78,11 +80,11 @@
top: 0; top: 0;
left: 0; left: 0;
display: block; display: block;
width: 14px; width: @radio-size;
height: 14px; height: @radio-size;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 14px; border-radius: 100px;
border-color: @border-color-base; border-color: @border-color-base;
background-color: @radio-button-bg; background-color: @radio-button-bg;
transition: all @radio-duration; transition: all @radio-duration;
@ -147,7 +149,7 @@ span.@{radio-prefix-cls} + * {
border: @border-width-base @border-style-base @border-color-base; border: @border-width-base @border-style-base @border-color-base;
border-left: 0; border-left: 0;
background: @radio-button-bg; background: @radio-button-bg;
padding: 0 16px; padding: 0 @padding-md - 1px;
position: relative; position: relative;
a { a {
@ -169,13 +171,7 @@ span.@{radio-prefix-cls} + * {
.@{radio-group-prefix-cls}-small & { .@{radio-group-prefix-cls}-small & {
height: @input-height-sm; height: @input-height-sm;
line-height: @input-height-sm - 2px; line-height: @input-height-sm - 2px;
padding: 0 12px; padding: 0 @control-padding-horizontal-sm - 1px;
&:first-child {
border-radius: @border-radius-sm 0 0 @border-radius-sm;
}
&:last-child {
border-radius: 0 @border-radius-sm @border-radius-sm 0;
}
} }
&:not(:first-child) { &:not(:first-child) {

4
components/select/demo/size.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN ## zh-CN
三种大小的选择框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` 三种大小的选择框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `40px` 和 `24px` ，默认高度为 `32px`。
## en-US ## en-US
The height of the inpub field for the select defaults to 28px. If size is set to large, the height will be 32px, and if set to small, 22px. The height of the inpub field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
````jsx ````jsx
import { Select, Radio } from 'antd'; import { Select, Radio } from 'antd';

47
components/select/style/index.less
View File

@ -13,11 +13,11 @@
text-rendering: auto; text-rendering: auto;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 8px; right: @control-padding-horizontal - 1px;
z-index: 1; z-index: 1;
background: @component-background; background: @component-background;
top: 50%; top: 50%;
font-size: @font-size-base; font-size: @font-size-sm;
color: @disabled-color; color: @disabled-color;
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -56,7 +56,7 @@
.iconfont-mixin(); .iconfont-mixin();
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 8px; right: @control-padding-horizontal - 1px;
line-height: 1; line-height: 1;
margin-top: -6px; margin-top: -6px;
color: @text-color-secondary; color: @text-color-secondary;
@ -134,7 +134,7 @@
} }
&-disabled &-selection--multiple &-selection__choice { &-disabled &-selection--multiple &-selection__choice {
background: @background-color-active; background: @background-color-base;
color: #aaa; color: #aaa;
padding-right: 10px; padding-right: 10px;
&__remove { &__remove {
@ -150,8 +150,8 @@
&-selection__rendered { &-selection__rendered {
display: block; display: block;
margin-left: 7px; margin-left: @control-padding-horizontal - 1px;
margin-right: 7px; margin-right: @control-padding-horizontal - 1px;
position: relative; position: relative;
line-height: @input-height-base - 2px; line-height: @input-height-base - 2px;
// https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026 // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
@ -191,19 +191,24 @@
} }
.@{select-prefix-cls}-selection__rendered { .@{select-prefix-cls}-selection__rendered {
line-height: @input-height-sm - 2px; line-height: @input-height-sm - 2px;
margin: 0 @control-padding-horizontal-sm - 1px;
} }
.@{select-prefix-cls}-selection--multiple { .@{select-prefix-cls}-selection--multiple {
min-height: @input-height-sm; min-height: @input-height-sm;
.@{select-prefix-cls}-selection__rendered { .@{select-prefix-cls}-selection__rendered {
li { li {
height: @input-height-sm - 8px; height: @input-height-sm - 8px;
line-height: @input-height-sm - 8px; line-height: @input-height-sm - 10px;
} }
} }
.@{select-prefix-cls}-selection__clear { .@{select-prefix-cls}-selection__clear {
top: @input-height-sm / 2; top: @input-height-sm / 2;
} }
} }
.@{select-prefix-cls}-selection__clear,
.@{select-prefix-cls}-arrow {
right: @control-padding-horizontal-sm;
}
} }
&-disabled &-selection__choice__remove { &-disabled &-selection__choice__remove {
@ -237,7 +242,7 @@
} }
&-search__field__placeholder { &-search__field__placeholder {
left: 8px; left: @control-padding-horizontal;
} }
&-search__field__mirror { &-search__field__mirror {
@ -301,17 +306,22 @@
height: auto; height: auto;
} }
.@{select-prefix-cls}-selection__placeholder {
margin-left: 6px;
}
> ul > li, > ul > li,
.@{select-prefix-cls}-selection__rendered > ul > li { // for tree-select .@{select-prefix-cls}-selection__rendered > ul > li { // for tree-select
margin-top: 3px; margin-top: 3px;
height: @input-height-base - 8px; height: @input-height-base - 8px;
line-height: @input-height-base - 8px; line-height: @input-height-base - 8px - 2px;
} }
.@{select-prefix-cls}-selection__choice { .@{select-prefix-cls}-selection__choice {
color: @tag-default-color; color: @tag-default-color;
background-color: @tag-default-bg; background-color: @tag-default-bg;
border-radius: 4px; border: 1px solid @border-color-split;
border-radius: @border-radius-sm;
cursor: default; cursor: default;
float: left; float: left;
margin-right: 4px; margin-right: 4px;
@ -341,11 +351,11 @@
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
transition: all 0.3s @ease-in-out; transition: all .3s;
.iconfont-size-under-12px(8px); font-size: @font-size-sm;
.iconfont-size-under-12px(10px);
position: absolute; position: absolute;
right: 4px; right: 4px;
padding: 0 0 0 8px;
&:hover { &:hover {
color: #404040; color: #404040;
} }
@ -459,13 +469,14 @@
&-item-group-title { &-item-group-title {
color: @text-color-secondary; color: @text-color-secondary;
line-height: 1.5; line-height: 1.5;
padding: 8px; padding: @control-padding-horizontal - 1px;
} }
&-item { &-item {
position: relative; position: relative;
display: block; display: block;
padding: 7px 8px; padding: 5px @control-padding-horizontal - 1px;
line-height: 22px;
font-weight: normal; font-weight: normal;
color: @text-color; color: @text-color;
white-space: nowrap; white-space: nowrap;
@ -491,7 +502,7 @@
&-selected { &-selected {
&, &,
&:hover { &:hover {
background-color: @background-color-base; background-color: @background-color-light;
font-weight: 600; font-weight: 600;
color: @text-color; color: @text-color;
} }
@ -505,7 +516,7 @@
height: 1px; height: 1px;
margin: 1px 0; margin: 1px 0;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: @border-color-split;
line-height: 0; line-height: 0;
} }
} }
@ -521,7 +532,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: 8px; right: @control-padding-horizontal - 1px;
font-weight: bold; font-weight: bold;
text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0; text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
} }

4
components/slider/style/index.less
View File

@ -30,8 +30,8 @@
width: 100%; width: 100%;
height: 4px; height: 4px;
border-radius: 2px; border-radius: 2px;
background-color: @border-color-split; background-color: @background-color-base;
transition: background-color 0.3s ease; transition: background-color .3s;
} }
&-track { &-track {

27
components/steps/style/index.less
View File

@ -3,8 +3,8 @@
@steps-prefix-cls: ~"@{ant-prefix}-steps"; @steps-prefix-cls: ~"@{ant-prefix}-steps";
@process-icon-color: @primary-color; @process-icon-color: @primary-color;
@process-title-color: @text-color; @process-title-color: @heading-color;
@process-description-color: @process-title-color; @process-description-color: @text-color;
@process-tail-color: @border-color-split; @process-tail-color: @border-color-split;
@process-icon-text-color: #fff; @process-icon-text-color: #fff;
@wait-icon-color: @disabled-color; @wait-icon-color: @disabled-color;
@ -12,20 +12,20 @@
@wait-description-color: @wait-title-color; @wait-description-color: @wait-title-color;
@wait-tail-color: @process-tail-color; @wait-tail-color: @process-tail-color;
@finish-icon-color: @process-icon-color; @finish-icon-color: @process-icon-color;
@finish-title-color: @wait-title-color; @finish-title-color: @text-color;
@finish-description-color: @finish-title-color; @finish-description-color: @finish-title-color;
@finish-tail-color: @process-icon-color; @finish-tail-color: @primary-color;
@error-icon-color: @error-color; @error-icon-color: @error-color;
@error-title-color: @error-color; @error-title-color: @error-color;
@error-description-color: @error-color; @error-description-color: @error-color;
@error-tail-color: @wait-tail-color; @error-tail-color: @wait-tail-color;
@steps-background: @component-background; @steps-background: @component-background;
@steps-icon-size: 26px; @steps-icon-size: 32px;
@steps-small-icon-size: 18px; @steps-small-icon-size: 24px;
@steps-dot-size: 5px; @steps-dot-size: 5px;
@steps-current-dot-size: 7px; @steps-current-dot-size: 7px;
@steps-desciption-max-width: 120px; @steps-desciption-max-width: 140px;
.@{steps-prefix-cls} { .@{steps-prefix-cls} {
.reset-component; .reset-component;
@ -73,12 +73,6 @@
top: -1px; top: -1px;
color: @primary-color; color: @primary-color;
position: relative; position: relative;
&.rcicon {
font-size: @font-size-base;
position: relative;
top: -2px;
}
} }
} }
&-tail { &-tail {
@ -99,8 +93,8 @@
} }
&-title { &-title {
font-size: @font-size-lg; font-size: @font-size-lg;
color: #666; color: @text-color;
font-weight: bold; font-weight: 500;
display: inline-block; display: inline-block;
padding-right: 10px; padding-right: 10px;
position: relative; position: relative;
@ -119,7 +113,6 @@
&-description { &-description {
font-size: @font-size-base; font-size: @font-size-base;
color: @text-color-secondary; color: @text-color-secondary;
margin-top: 4px;
} }
.step-item-status(wait); .step-item-status(wait);
.step-item-status(process); .step-item-status(process);
@ -139,7 +132,7 @@
.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) { .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
.@{steps-prefix-cls}-item { .@{steps-prefix-cls}-item {
margin-right: 10px; margin-right: 8px;
white-space: nowrap; white-space: nowrap;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;

2
components/steps/style/progress-dot.less
View File

@ -15,7 +15,7 @@
height: @steps-dot-size; height: @steps-dot-size;
line-height: @steps-dot-size; line-height: @steps-dot-size;
border: 0; border: 0;
margin-left: 58px; margin-left: 67px;
background: transparent; background: transparent;
.@{steps-prefix-cls}-icon-dot { .@{steps-prefix-cls}-icon-dot {
float: left; float: left;

6
components/steps/style/small.less
View File

@ -5,11 +5,11 @@
line-height: @steps-small-icon-size; line-height: @steps-small-icon-size;
text-align: center; text-align: center;
border-radius: @steps-small-icon-size; border-radius: @steps-small-icon-size;
font-size: @font-size-base; font-size: @font-size-sm;
margin-right: 10px; margin-right: 8px;
} }
.@{steps-prefix-cls}-item-title { .@{steps-prefix-cls}-item-title {
font-size: @font-size-base - 2px; font-size: @font-size-base;
line-height: @steps-small-icon-size; line-height: @steps-small-icon-size;
&:after { &:after {
top: @steps-small-icon-size / 2; top: @steps-small-icon-size / 2;

8
components/steps/style/vertical.less
View File

@ -24,11 +24,11 @@
> .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail { > .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail {
position: absolute; position: absolute;
left: 13px; left: 16px;
top: 0; top: 0;
height: 100%; height: 100%;
width: 1px; width: 1px;
padding: 30px 0 4px; padding: 36px 0 4px;
&:after { &:after {
height: 100%; height: 100%;
width: 1px; width: 1px;
@ -48,9 +48,9 @@
&.@{steps-prefix-cls}-small { &.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item-tail { .@{steps-prefix-cls}-item-tail {
position: absolute; position: absolute;
left: 9px; left: 12px;
top: 0; top: 0;
padding: 22px 0 4px; padding: 28px 0 4px;
} }
.@{steps-prefix-cls}-item-title { .@{steps-prefix-cls}-item-title {
line-height: @steps-small-icon-size; line-height: @steps-small-icon-size;

11
components/style/color/colors.less
View File

@ -88,3 +88,14 @@
@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`); @yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`); @yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`); @yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
@lemon-1: color(~`colorPalette("@{lemon-6}", 1)`);
@lemon-2: color(~`colorPalette("@{lemon-6}", 2)`);
@lemon-3: color(~`colorPalette("@{lemon-6}", 3)`);
@lemon-4: color(~`colorPalette("@{lemon-6}", 4)`);
@lemon-5: color(~`colorPalette("@{lemon-6}", 5)`);
@lemon-6: #fadb14;
@lemon-7: color(~`colorPalette("@{lemon-6}", 7)`);
@lemon-8: color(~`colorPalette("@{lemon-6}", 8)`);
@lemon-9: color(~`colorPalette("@{lemon-6}", 9)`);
@lemon-10: color(~`colorPalette("@{lemon-6}", 10)`);

1
components/style/core/base.less
View File

@ -332,6 +332,7 @@ textarea {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
color: inherit;
} }
button, button,

27
components/style/core/iconfont.less
View File

@ -113,7 +113,7 @@
.@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown .@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown
.@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; } .@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; }
.@{iconfont-css-prefix}-copy:before { content: "\e648"; } .@{iconfont-css-prefix}-copy:before { content: "\e648"; }
.@{iconfont-css-prefix}-menu-fold:before { content: "\e658"; } .@{iconfont-css-prefix}-menu-fold:before { content: "\e9ad"; }
.@{iconfont-css-prefix}-mail:before { content: "\e659"; } .@{iconfont-css-prefix}-mail:before { content: "\e659"; }
.@{iconfont-css-prefix}-logout:before { content: "\e65a"; } .@{iconfont-css-prefix}-logout:before { content: "\e65a"; }
.@{iconfont-css-prefix}-link:before { content: "\e65b"; } .@{iconfont-css-prefix}-link:before { content: "\e65b"; }
@ -147,7 +147,7 @@
.@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; } .@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; }
.@{iconfont-css-prefix}-notification:before { content: "\e677"; } .@{iconfont-css-prefix}-notification:before { content: "\e677"; }
.@{iconfont-css-prefix}-mobile:before { content: "\e678"; } .@{iconfont-css-prefix}-mobile:before { content: "\e678"; }
.@{iconfont-css-prefix}-menu-unfold:before { content: "\e679"; } .@{iconfont-css-prefix}-menu-unfold:before { content: "\e9ac"; }
.@{iconfont-css-prefix}-inbox:before { content: "\e67a"; } .@{iconfont-css-prefix}-inbox:before { content: "\e67a"; }
.@{iconfont-css-prefix}-lock:before { content: "\e67b"; } .@{iconfont-css-prefix}-lock:before { content: "\e67b"; }
.@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; } .@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; }
@ -302,3 +302,26 @@
display: inline-block; display: inline-block;
animation: loadingCircle 1s infinite linear; animation: loadingCircle 1s infinite linear;
} }
.@{iconfont-css-prefix}-html5:before { content: "\e9c7"; }
.@{iconfont-css-prefix}-weibo:before { content: "\e9c6"; }
.@{iconfont-css-prefix}-twitter:before { content: "\e9c5"; }
.@{iconfont-css-prefix}-wechat:before { content: "\e9c4"; }
.@{iconfont-css-prefix}-youtube:before { content: "\e9c3"; }
.@{iconfont-css-prefix}-alipay-circle:before { content: "\e9c2"; }
.@{iconfont-css-prefix}-taobao:before { content: "\e9c1"; }
.@{iconfont-css-prefix}-skype:before { content: "\e9c0"; }
.@{iconfont-css-prefix}-qq:before { content: "\e9bf"; }
.@{iconfont-css-prefix}-medium-workmark:before { content: "\e9be"; }
.@{iconfont-css-prefix}-gitlab:before { content: "\e9bd"; }
.@{iconfont-css-prefix}-medium:before { content: "\e9bc"; }
.@{iconfont-css-prefix}-linkedin:before { content: "\e9bb"; }
.@{iconfont-css-prefix}-google-plus:before { content: "\e9ba"; }
.@{iconfont-css-prefix}-dropbox:before { content: "\e9b9"; }
.@{iconfont-css-prefix}-facebook:before { content: "\e9b8"; }
.@{iconfont-css-prefix}-codepen:before { content: "\e9b7"; }
.@{iconfont-css-prefix}-amazon:before { content: "\e9b6"; }
.@{iconfont-css-prefix}-google:before { content: "\e9b5"; }
.@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; }
.@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; }
.@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; }

102
components/style/themes/default.less
View File

@ -44,10 +44,21 @@
@text-color-secondary-dark: fade(#fff, 65%); @text-color-secondary-dark: fade(#fff, 65%);
@font-size-base : 14px; @font-size-base : 14px;
@font-size-lg : @font-size-base + 2px; @font-size-lg : @font-size-base + 2px;
@font-size-sm : 12px;
@line-height-base : 1.5; @line-height-base : 1.5;
@border-radius-base : 4px; @border-radius-base : 4px;
@border-radius-sm : 2px; @border-radius-sm : 2px;
// vertical paddings
@padding-lg : 24px; // containers
@padding-md : 16px; // small containers and buttons
@padding-sm : 12px; // Form controls and items
@padding-xs : 8px; // small items
// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs;
// The background colors for active and hover states for things like // The background colors for active and hover states for things like
// list items or table cells. // list items or table cells.
@item-active-bg : @primary-1; @item-active-bg : @primary-1;
@ -55,7 +66,7 @@
// ICONFONT // ICONFONT
@iconfont-css-prefix : anticon; @iconfont-css-prefix : anticon;
@icon-url : "https://at.alicdn.com/t/font_148784_1vkh7de5j6ecdi"; @icon-url : "https://at.alicdn.com/t/font_148784_imrz4lshfwimgqfr";
// LINK // LINK
@link-color : @primary-color; @link-color : @primary-color;
@ -88,10 +99,8 @@
@outline-width : 2px; @outline-width : 2px;
@outline-color : @primary-color; @outline-color : @primary-color;
// Default background color for disabled states, Collapse wrappers, @background-color-light : hsv(0, 0, 98%); // background of header and selected item
// and several active and hover states. @background-color-base : hsv(0, 0, 96%); // Default grey background color
@background-color-base : hsv(0, 0, 98%);
@background-color-active: #eee;
// Disabled states // Disabled states
@disabled-color : fade(#000, 25%); @disabled-color : fade(#000, 25%);
@ -99,13 +108,13 @@
@disabled-color-dark : fade(#fff, 35%); @disabled-color-dark : fade(#fff, 35%);
// Shadow // Shadow
@shadow-color : rgba(0, 0, 0, .2); @shadow-color : rgba(0, 0, 0, .15);
@box-shadow-base : @shadow-1-down; @box-shadow-base : @shadow-1-down;
@shadow-1-up : 0 -1px 6px @shadow-color; @shadow-1-up : 0 2px 8px @shadow-color;
@shadow-1-down : 0 1px 6px @shadow-color; @shadow-1-down : 0 2px 8px @shadow-color;
@shadow-1-left : -1px 0 6px @shadow-color; @shadow-1-left : -2px 0 8px @shadow-color;
@shadow-1-right : 1px 0 6px @shadow-color; @shadow-1-right : 2px 0 8px @shadow-color;
@shadow-2 : 0 2px 8px @shadow-color; @shadow-2 : 0 4px 12px @shadow-color;
// Buttons // Buttons
@btn-font-weight : 400; @btn-font-weight : 400;
@ -127,14 +136,15 @@
@btn-disable-bg : @disabled-bg; @btn-disable-bg : @disabled-bg;
@btn-disable-border : @border-color-base; @btn-disable-border : @border-color-base;
@btn-padding-base : 0 15px; @btn-padding-base : 0 @padding-md - 1px;
@btn-font-size-lg : @font-size-base; @btn-font-size-lg : @font-size-base;
@btn-font-size-sm : @font-size-base;
@btn-padding-lg : @btn-padding-base; @btn-padding-lg : @btn-padding-base;
@btn-padding-sm : 0 7px; @btn-padding-sm : 0 @padding-xs - 1px;
@btn-height-base : 28px; @btn-height-base : 32px;
@btn-height-lg : 32px; @btn-height-lg : 40px;
@btn-height-sm : 22px; @btn-height-sm : 24px;
@btn-circle-size : @btn-height-base; @btn-circle-size : @btn-height-base;
@btn-circle-size-lg : @btn-height-lg; @btn-circle-size-lg : @btn-height-lg;
@ -143,7 +153,10 @@
@btn-group-border : @primary-7; @btn-group-border : @primary-7;
// Checkbox // Checkbox
@checkbox-size : 14px; @checkbox-size : 16px;
// Radio
@radio-size : 16px;
// Radio buttons // Radio buttons
@radio-button-bg : @btn-default-bg; @radio-button-bg : @btn-default-bg;
@ -186,14 +199,14 @@
@grid-gutter-width : 0; @grid-gutter-width : 0;
// Layout // Layout
@layout-body-background : hsv(0, 0, 96%); @layout-body-background : @background-color-base;
@layout-header-background : #00182e; @layout-header-background : #00182e;
@layout-header-height : 64px; @layout-header-height : 64px;
@layout-header-padding : 0 50px; @layout-header-padding : 0 50px;
@layout-footer-padding : 24px 50px; @layout-footer-padding : 24px 50px;
@layout-sider-background : @layout-header-background; @layout-sider-background : @layout-header-background;
@layout-trigger-height : 48px; @layout-trigger-height : 48px;
@layout-trigger-background : tint(@heading-color, 20%); @layout-trigger-background : #002140;
@layout-trigger-color : #fff; @layout-trigger-color : #fff;
@layout-zero-trigger-width : 36px; @layout-zero-trigger-width : 36px;
@layout-zero-trigger-height : 42px; @layout-zero-trigger-height : 42px;
@ -224,10 +237,11 @@
// Input // Input
// --- // ---
@input-height-base : 28px; @input-height-base : 32px;
@input-height-lg : 32px; @input-height-lg : 40px;
@input-height-sm : 22px; @input-height-sm : 24px;
@input-padding-horizontal : 7px; @input-padding-horizontal : @control-padding-horizontal - 1px;
@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px;
@input-padding-vertical-base : 4px; @input-padding-vertical-base : 4px;
@input-padding-vertical-sm : 1px; @input-padding-vertical-sm : 1px;
@input-padding-vertical-lg : 6px; @input-padding-vertical-lg : 6px;
@ -269,13 +283,13 @@
//** Popover outer arrow width //** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1px); @popover-arrow-outer-width: (@popover-arrow-width + 1px);
//** Popover outer arrow color //** Popover outer arrow color
@popover-arrow-outer-color: fadeout(@border-color-base, 30%); @popover-arrow-outer-color: fadeout(@border-color-base, 50%);
//** Popover distance with trigger //** Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px; @popover-distance: @popover-arrow-width + 4px;
// Modal // Modal
// -- // --
@modal-mask-bg: rgba(55, 55, 55, 0.6); @modal-mask-bg: rgba(0, 0, 0, 0.65);
// Progress // Progress
// -- // --
@ -296,18 +310,17 @@
// Table // Table
// -- // --
@table-header-bg: @background-color-base; @table-header-bg: @background-color-light;
@table-header-sort-bg: @background-color-active; @table-header-sort-bg: @background-color-base;
@table-row-hover-bg: @primary-1; @table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa;
@table-padding-vertical: 16px; @table-padding-vertical: 16px;
@table-padding-horizontal: 8px; @table-padding-horizontal: 8px;
// Tag // Tag
// -- // --
@tag-default-bg: #f3f3f3; @tag-default-bg: @background-color-base;
@tag-default-color: @text-color; @tag-default-color: @text-color;
@tag-font-size: @font-size-base; @tag-font-size: @font-size-sm;
// TimePicker // TimePicker
// --- // ---
@ -325,12 +338,13 @@
// --- // ---
@badge-height: 20px; @badge-height: 20px;
@badge-dot-size: 8px; @badge-dot-size: 8px;
@badge-font-size: @font-size-base; @badge-font-size: @font-size-sm;
@badge-status-size: 6px;
// Rate // Rate
// --- // ---
@rate-star-color: @yellow-6; @rate-star-color: @lemon-6;
@rate-star-bg: #e9e9e9; @rate-star-bg: @border-color-split;
// Card // Card
// --- // ---
@ -341,18 +355,22 @@
@card-padding-base: 24px; @card-padding-base: 24px;
@card-padding-wider: 32px; @card-padding-wider: 32px;
@card-actions-background: @background-color-base; @card-actions-background: @background-color-base;
@card-shadow: 0 2px 8px rgba(0, 0, 0, .09);
// Tabs // Tabs
// --- // ---
@tabs-card-head-background: #f9f9f9; @tabs-card-head-background: @background-color-light;
@tabs-title-font-size: @font-size-lg; @tabs-card-height: 40px;
@tabs-title-font-size: @font-size-base;
// BackTop // BackTop
// ---
@back-top-color: #fff; @back-top-color: #fff;
@back-top-bg: rgba(64, 64, 64, 0.4); @back-top-bg: @text-color-secondary;
@back-top-hover-bg: rgba(64, 64, 64, 0.6); @back-top-hover-bg: @text-color;
// Avatar // Avatar
// ---
@avatar-size-base: 32px; @avatar-size-base: 32px;
@avatar-size-lg: 40px; @avatar-size-lg: 40px;
@avatar-size-sm: 24px; @avatar-size-sm: 24px;
@ -362,3 +380,13 @@
@avatar-bg: #ccc; @avatar-bg: #ccc;
@avatar-color: #fff; @avatar-color: #fff;
@avatar-border-radius: @border-radius-base; @avatar-border-radius: @border-radius-base;
// Switch
// ---
@switch-height: 22px;
@switch-sm-height: 16px;
// Pagination
// ---
@pagination-item-size: 32px;
@pagination-item-size-sm: 24px;

14
components/style/v2-compatible-reset.less Normal file
View File

@ -0,0 +1,14 @@
// For 2.x reset compatibility
// import 'antd/style/v2-compatible-reset';
// or
// @import '~antd/style/v2-compatible-reset.css';
// unify the setting of elements's margin and padding for browsers
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}

1
components/style/v2-compatible-reset.tsx Normal file
View File

@ -0,0 +1 @@
import './v2-compatible-reset.less';

2
components/switch/__tests__/__snapshots__/demo.test.js.snap
View File

@ -14,7 +14,7 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
exports[`renders ./components/switch/demo/disabled.md correctly 1`] = ` exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
<div> <div>
<span <span
class="ant-switch ant-switch-disabled" class="ant-switch ant-switch-checked ant-switch-disabled"
tabindex="-1" tabindex="-1"
> >
<span <span

2
components/switch/demo/disabled.md
View File

@ -28,7 +28,7 @@ class App extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Switch disabled={this.state.disabled} /> <Switch disabled={this.state.disabled} defaultChecked />
<br /> <br />
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button> <Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
</div> </div>

32
components/switch/style/index.less
View File

@ -9,11 +9,11 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
height: 22px; height: @switch-height;
min-width: 44px; min-width: 44px;
line-height: 20px; line-height: @switch-height - 2px;
vertical-align: middle; vertical-align: middle;
border-radius: 20px; border-radius: 100px;
border: 1px solid transparent; border: 1px solid transparent;
background-color: @disabled-color; background-color: @disabled-color;
cursor: pointer; cursor: pointer;
@ -30,8 +30,8 @@
&:after { &:after {
position: absolute; position: absolute;
width: 18px; width: @switch-height - 4px;
height: 18px; height: @switch-height - 4px;
left: 1px; left: 1px;
top: 1px; top: 1px;
@ -56,20 +56,19 @@
} }
&-small { &-small {
height: 14px; height: @switch-sm-height;
min-width: 28px; min-width: 28px;
line-height: 12px; line-height: @switch-sm-height - 2px;
.@{switch-prefix-cls}-inner { .@{switch-prefix-cls}-inner {
margin-left: 18px; margin-left: 18px;
margin-right: 3px; margin-right: 3px;
font-size: @font-size-sm;
} }
&:after { &:after {
width: 12px; width: @switch-sm-height - 4px;
height: 12px; height: @switch-sm-height - 4px;
top: 0;
left: 0.5px;
} }
&:active:after { &:active:after {
@ -113,15 +112,6 @@
&-disabled { &-disabled {
cursor: not-allowed; cursor: not-allowed;
background: #f4f4f4; opacity: 0.35;
&:after {
background: #ccc;
cursor: not-allowed;
}
.@{switch-prefix-cls}-inner {
color: @disabled-color;
}
} }
} }

30
components/table/style/index.less
View File

@ -2,6 +2,7 @@
@import "../../style/mixins/index"; @import "../../style/mixins/index";
@table-prefix-cls: ~"@{ant-prefix}-table"; @table-prefix-cls: ~"@{ant-prefix}-table";
@table-header-icon-color: @text-color-secondary;
.@{table-prefix-cls}-wrapper { .@{table-prefix-cls}-wrapper {
.clearfix; .clearfix;
@ -14,7 +15,7 @@
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
&-body { &-body {
transition: opacity 0.3s ease; transition: opacity .3s;
} }
table { table {
@ -28,13 +29,15 @@
&-thead > tr > th { &-thead > tr > th {
background: @table-header-bg; background: @table-header-bg;
font-weight: 500;
transition: background .3s ease; transition: background .3s ease;
text-align: left; text-align: left;
color: @heading-color; color: @heading-color;
font-weight: 500;
border-bottom: @border-width-base @border-style-base @border-color-split;
&[colspan] { &[colspan] {
text-align: center; text-align: center;
border-bottom: 0;
} }
.@{iconfont-css-prefix}-filter, .@{table-prefix-cls}-filter-icon { .@{iconfont-css-prefix}-filter, .@{table-prefix-cls}-filter-icon {
@ -42,9 +45,10 @@
margin-left: 4px; margin-left: 4px;
font-size: @font-size-base; font-size: @font-size-base;
cursor: pointer; cursor: pointer;
color: #999; color: @table-header-icon-color;
transition: all .3s; transition: all .3s;
width: 14px; width: 14px;
font-weight: normal;
&:hover { &:hover {
color: @text-color; color: @text-color;
@ -90,6 +94,7 @@
background: @table-header-bg; background: @table-header-bg;
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 @border-radius-base @border-radius-base;
position: relative; position: relative;
border-top: @border-width-base @border-style-base @border-color-split;
&:before { &:before {
content: ''; content: '';
height: 1px; height: 1px;
@ -136,10 +141,6 @@
border-radius: 0; border-radius: 0;
} }
&-tbody > tr.@{table-prefix-cls}-row-selected {
background: @table-selected-row-bg;
}
&-thead > tr > th.@{table-prefix-cls}-column-sort { &-thead > tr > th.@{table-prefix-cls}-column-sort {
background: @table-header-sort-bg; background: @table-header-sort-bg;
} }
@ -203,12 +204,12 @@
&-middle { &-middle {
.@{table-prefix-cls}-thead > tr > th, .@{table-prefix-cls}-thead > tr > th,
.@{table-prefix-cls}-tbody > tr > td { .@{table-prefix-cls}-tbody > tr > td {
padding: 10px 8px; padding: 12px 8px;
} }
.@{table-prefix-cls}-title, .@{table-prefix-cls}-title,
.@{table-prefix-cls}-footer { .@{table-prefix-cls}-footer {
padding: 10px 8px; padding: 12px 8px;
} }
.@{table-prefix-cls}-column-sorter-up:after { .@{table-prefix-cls}-column-sorter-up:after {
@ -248,13 +249,13 @@
} }
.@{table-prefix-cls}-tbody > tr > td { .@{table-prefix-cls}-tbody > tr > td {
padding: 6px 8px; padding: 8px;
} }
.@{table-prefix-cls}-title, .@{table-prefix-cls}-title,
.@{table-prefix-cls}-footer, .@{table-prefix-cls}-footer,
.@{table-prefix-cls}-thead > tr > th { .@{table-prefix-cls}-thead > tr > th {
padding: 10px 8px; padding: 8px;
} }
.@{table-prefix-cls}-title { .@{table-prefix-cls}-title {
@ -299,6 +300,8 @@
width: 14px; width: 14px;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
font-weight: normal;
color: @table-header-icon-color;
&-up, &-up,
&-down { &-down {
@ -339,7 +342,6 @@
.iconfont-size-under-12px(8px); .iconfont-size-under-12px(8px);
line-height: 4px; line-height: 4px;
height: 4px; height: 4px;
color: #999;
transition: all .3s; transition: all .3s;
} }
} }
@ -516,7 +518,7 @@
} }
.@{iconfont-css-prefix}-down { .@{iconfont-css-prefix}-down {
color: #999; color: @table-header-icon-color;
transition: all .3s; transition: all .3s;
} }
@ -529,7 +531,7 @@
box-shadow: @box-shadow-base; box-shadow: @box-shadow-base;
.@{ant-prefix}-action-down { .@{ant-prefix}-action-down {
color: #999; color: @table-header-icon-color;
} }
} }

24
components/tabs/__tests__/__snapshots__/demo.test.js.snap
View File

@ -546,10 +546,11 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
class="ant-tabs-tab-active ant-tabs-tab" class="ant-tabs-tab-active ant-tabs-tab"
role="tab" role="tab"
> >
<div <div>
class="ant-tabs-tab-unclosable"
>
Tab 1 Tab 1
<i
class="anticon anticon-close"
/>
</div> </div>
</div> </div>
<div <div
@ -565,6 +566,18 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
/> />
</div> </div>
</div> </div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
<div
class="ant-tabs-tab-unclosable"
>
Tab 3
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -585,6 +598,11 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
class="ant-tabs-tabpane ant-tabs-tabpane-inactive" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel" role="tabpanel"
/> />
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
</div> </div>
</div> </div>
`; `;

3
components/tabs/demo/editable-card.md
View File

@ -24,8 +24,9 @@ class Demo extends React.Component {
super(props); super(props);
this.newTabIndex = 0; this.newTabIndex = 0;
const panes = [ const panes = [
{ title: 'Tab 1', content: 'Content of Tab 1', key: '1', closable: false }, { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
{ title: 'Tab 2', content: 'Content of Tab 2', key: '2' }, { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
{ title: 'Tab 3', content: 'Content of Tab 3', key: '3', closable: false },
]; ];
this.state = { this.state = {
activeKey: panes[0].key, activeKey: panes[0].key,

29
components/tabs/style/card-style.less
View File

@ -1,11 +1,12 @@
@import "../../style/themes/default"; @import "../../style/themes/default";
@import "../../style/mixins/index"; @import "../../style/mixins/index";
@tab-prefix-cls: ~"@{ant-prefix}-tabs"; @tab-prefix-cls: ~"@{ant-prefix}-tabs";
// card style // card style
.@{tab-prefix-cls} { .@{tab-prefix-cls} {
&&-card > &-bar &-nav-container { &&-card > &-bar &-nav-container {
height: 32px; height: @tabs-card-height;
} }
&&-card > &-bar &-ink-bar { &&-card > &-bar &-ink-bar {
visibility: hidden; visibility: hidden;
@ -20,14 +21,15 @@
margin-right: 2px; margin-right: 2px;
} }
&&-card > &-bar &-tab { &&-card > &-bar &-tab {
padding: 5px 16px 4px; padding: 0 16px;
transition: all 0.3s @ease-in-out; transition: all 0.3s @ease-in-out;
line-height: @tabs-card-height - 2px;
} }
&&-card > &-bar &-tab-active { &&-card > &-bar &-tab-active {
background: @component-background; background: @component-background;
border-color: @border-color-base; border-color: @border-color-base;
color: @primary-color; color: @primary-color;
padding-bottom: 5px; padding-bottom: 1px;
} }
&&-card > &-bar &-tab-inactive { &&-card > &-bar &-tab-inactive {
padding: 0; padding: 0;
@ -38,19 +40,14 @@
&&-card > &-bar &-tab .@{iconfont-css-prefix}-close { &&-card > &-bar &-tab .@{iconfont-css-prefix}-close {
color: @text-color-secondary; color: @text-color-secondary;
transition: all .3s; transition: all .3s;
.iconfont-size-under-12px(10px); font-size: @font-size-sm;
margin-right: 0; margin-left: 3px;
opacity: 0; margin-right: -5px;
position: absolute;
right: 2px;
top: 50%;
margin-top: -5px;
overflow: hidden; overflow: hidden;
text-align: center; vertical-align: middle;
border-radius: 2px; width: 16px;
width: 14px; height: 16px;
height: 14px; height: @font-size-base;
line-height: 1;
&:hover { &:hover {
color: @heading-color; color: @heading-color;
} }
@ -69,7 +66,7 @@
} }
&-extra-content { &-extra-content {
line-height: 32px; line-height: @tabs-card-height;
.@{tab-prefix-cls}-new-tab { .@{tab-prefix-cls}-new-tab {
width: 20px; width: 20px;

7
components/tabs/style/index.less
View File

@ -51,7 +51,6 @@
z-index: 2; z-index: 2;
width: 0; width: 0;
height: 100%; height: 100%;
line-height: 32px;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
background-color: transparent; background-color: transparent;
@ -158,7 +157,7 @@
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
margin-right: 24px; margin-right: 32px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@ -178,9 +177,8 @@
&:active { &:active {
color: @primary-7; color: @primary-7;
} }
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
width: 14px;
height: 14px;
margin-right: 8px; margin-right: 8px;
} }
} }
@ -195,7 +193,6 @@
} }
&-mini &-tab { &-mini &-tab {
margin-right: 0;
padding: 8px 16px; padding: 8px 16px;
} }

13
components/tag/__tests__/__snapshots__/demo.test.js.snap
View File

@ -246,14 +246,17 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
class="anticon anticon-cross" class="anticon anticon-cross"
/> />
</div> </div>
<button <div
class="ant-btn ant-btn-dashed ant-btn-sm" class="ant-tag"
type="button" data-show="true"
style="background:#fff;border-style:dashed;"
> >
<span> <span
class="ant-tag-text"
>
+ New Tag + New Tag
</span> </span>
</button> </div>
</div> </div>
`; `;

11
components/tag/demo/control.md
View File

@ -15,7 +15,7 @@ Generating a set of Tags by array, you can add and remove dynamically.
It's based on `afterClose` event, which will be triggered while the close animation end. It's based on `afterClose` event, which will be triggered while the close animation end.
````jsx ````jsx
import { Tag, Input, Tooltip, Button } from 'antd'; import { Tag, Input, Tooltip } from 'antd';
class EditableTagGroup extends React.Component { class EditableTagGroup extends React.Component {
state = { state = {
@ -80,7 +80,14 @@ class EditableTagGroup extends React.Component {
onPressEnter={this.handleInputConfirm} onPressEnter={this.handleInputConfirm}
/> />
)} )}
{!inputVisible && <Button size="small" type="dashed" onClick={this.showInput}>+ New Tag</Button>} {!inputVisible && (
<Tag
onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }}
>
+ New Tag
</Tag>
)}
</div> </div>
); );
} }

9
components/tag/style/index.less
View File

@ -10,7 +10,7 @@
height: 22px; height: 22px;
padding: 0 8px; padding: 0 8px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
border: @border-width-base @border-style-base @border-color-split; border: @border-width-base @border-style-base @border-color-base;
background: @tag-default-bg; background: @tag-default-bg;
font-size: @tag-font-size; font-size: @tag-font-size;
transition: all 0.3s @ease-out; transition: all 0.3s @ease-out;
@ -39,6 +39,8 @@
.@{iconfont-css-prefix}-cross { .@{iconfont-css-prefix}-cross {
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
position: relative;
top: .8px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
margin-left: 3px; margin-left: 3px;
@ -102,12 +104,13 @@
.make-color-classes(@i: length(@colors)) when (@i > 0) { .make-color-classes(@i: length(@colors)) when (@i > 0) {
.make-color-classes(@i - 1); .make-color-classes(@i - 1);
@color: extract(@colors, @i); @color: extract(@colors, @i);
@lightColor: "@{color}-2"; @lightColor: "@{color}-1";
@lightBorderColor: "@{color}-2";
@darkColor: "@{color}-6"; @darkColor: "@{color}-6";
&-@{color} { &-@{color} {
color: @@darkColor; color: @@darkColor;
background: @@lightColor; background: @@lightColor;
border-color: @@lightColor; border-color: @@lightBorderColor;
} }
&-@{color}-inverse { &-@{color}-inverse {
background: @@darkColor; background: @@darkColor;

Some files were not shown because too many files have changed in this diff Show More