diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 2e848e816a..e4f1bac7e5 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -9,11 +9,11 @@ .@{alert-prefix-cls} { .reset-component; position: relative; - padding: 8px 48px 8px 38px; + padding: 8px 16px 8px 38px; border-radius: @border-radius-base; &&-no-icon { - padding: 8px 48px 8px 16px; + padding: 8px 16px; } &-icon { @@ -30,7 +30,7 @@ } &-success { - border: @border-width-base @border-style-base @green-2; + border: @border-width-base @border-style-base @green-3; background-color: @green-1; .@{alert-prefix-cls}-icon { color: @success-color; @@ -38,7 +38,7 @@ } &-info { - border: @border-width-base @border-style-base @primary-2; + border: @border-width-base @border-style-base @primary-3; background-color: @primary-1; .@{alert-prefix-cls}-icon { color: @info-color; @@ -46,7 +46,7 @@ } &-warning { - border: @border-width-base @border-style-base @yellow-2; + border: @border-width-base @border-style-base @yellow-3; background-color: @yellow-1; .@{alert-prefix-cls}-icon { color: @warning-color; @@ -54,7 +54,7 @@ } &-error { - border: @border-width-base @border-style-base @red-2; + border: @border-width-base @border-style-base @red-3; background-color: @red-1; .@{alert-prefix-cls}-icon { color: @error-color; @@ -62,18 +62,17 @@ } &-close-icon { - font-size: @font-size-base; + font-size: @font-size-sm; position: absolute; right: 16px; - top: 10px; - height: 12px; - line-height: 12px; + top: 8px; + line-height: 22px; overflow: hidden; cursor: pointer; .@{iconfont-css-prefix}-cross { color: @text-color-secondary; - transition: color .3s ease; + transition: color .3s; &:hover { color: #404040; } diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 4c3235a432..24a457524b 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -27,6 +27,7 @@ white-space: nowrap; transform-origin: -10% center; font-family: tahoma; + box-shadow: 0 0 0 1px #fff; a, a:hover { color: #fff; @@ -51,10 +52,13 @@ vertical-align: baseline; &-dot { - width: 8px; - height: 8px; + width: @badge-status-size; + height: @badge-status-size; display: inline-block; border-radius: 50%; + vertical-align: middle; + position: relative; + top: -1px; } &-success { background-color: @success-color; @@ -128,6 +132,7 @@ height: @badge-height; > p { height: @badge-height; + margin: 0; } } } diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index 7afda7ffe7..85cc167c89 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -6,6 +6,10 @@ .@{breadcrumb-prefix-cls} { .reset-component; + .@{iconfont-css-prefix} { + font-size: @font-size-sm; + } + a { color: @text-color; transition: color .3s; @@ -24,8 +28,8 @@ } &-separator { - margin: 0 8px; - color: rgba(0, 0, 0, 0.3); + margin: 0 @padding-xs; + color: @text-color-secondary; } &-link { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 44b50247fe..e5ef534772 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -185,7 +185,7 @@ } &-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) { border-radius: 0; - padding-left: 8px; - padding-right: 8px; } > .@{btnClassName}:first-child { @@ -260,14 +258,12 @@ &:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; - padding-right: 8px; } } > .@{btnClassName}:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - padding-left: 8px; } & > & { diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap index 4455aa203e..2cc7b75626 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap @@ -1006,7 +1006,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = ` exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
+
, mountNode); diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index 2414848d6d..32ca13deaa 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -38,7 +38,7 @@ } &-calendar-body { - padding: 8px 8px 14px; + padding: 8px 12px; } table { @@ -46,7 +46,7 @@ max-width: 100%; background-color: transparent; width: 100%; - height: 246px; + height: 256px; } table, @@ -91,12 +91,12 @@ display: block; margin: 0 auto; color: @text-color; - border-radius: @border-radius-base; - width: 22px; - height: 22px; + border-radius: @border-radius-sm; + width: 24px; + height: 24px; padding: 0; background: transparent; - line-height: 22px; + line-height: 24px; transition: all .3s; &:hover { @@ -116,7 +116,7 @@ &-today &-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, diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap index 8881415814..b2d44bbd67 100644 --- a/components/card/__tests__/__snapshots__/demo.test.js.snap +++ b/components/card/__tests__/__snapshots__/demo.test.js.snap @@ -52,7 +52,7 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = ` style="background:#ECECEC;padding:30px;" >
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md index c83805c1dc..8474168e92 100644 --- a/components/card/demo/border-less.md +++ b/components/card/demo/border-less.md @@ -18,7 +18,7 @@ import { Card } from 'antd'; ReactDOM.render(
- +

Card content

Card content

Card content

diff --git a/components/card/style/index.less b/components/card/style/index.less index 6d6610c7e8..d14736d4d6 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -14,7 +14,7 @@ &-hoverable { cursor: pointer; &:hover { - box-shadow: @box-shadow-base; + box-shadow: @card-shadow; border-color: transparent; } } @@ -132,6 +132,9 @@ border-top: @border-width-base @border-style-base @border-color-split; background: @card-actions-background; .clearfix; + list-style: none; + margin: 0; + padding: 0; & > li { float: left; diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index dad1ae247f..613f42bcb3 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -143,6 +143,7 @@ list-style: none; display: block; text-align: center; + margin: 0; padding: 0; width: 100%; height: @carousel-dot-height; @@ -166,6 +167,7 @@ font-size: 0; color: transparent; transition: all .5s; + padding: 0; &:hover, &:focus { opacity: 0.75; diff --git a/components/cascader/__tests__/__snapshots__/demo.test.js.snap b/components/cascader/__tests__/__snapshots__/demo.test.js.snap index 2946a2c3eb..46ba1d51e7 100644 --- a/components/cascader/__tests__/__snapshots__/demo.test.js.snap +++ b/components/cascader/__tests__/__snapshots__/demo.test.js.snap @@ -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`] = `
, mountNode); ```` diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 61d599163e..23a74c2179 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -276,10 +276,11 @@ export default class Cascader extends React.Component { [`${prefixCls}-picker-arrow`]: true, [`${prefixCls}-picker-arrow-expand`]: state.popupVisible, }); - const pickerCls = classNames(className, { - [`${prefixCls}-picker`]: true, + const pickerCls = classNames( + className, `${prefixCls}-picker`, { [`${prefixCls}-picker-with-value`]: state.inputValue, [`${prefixCls}-picker-disabled`]: disabled, + [`${prefixCls}-picker-${size}`]: !!size, }); // Fix bug of https://github.com/facebook/react/pull/5004 diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index ff9115d77a..ec79c93171 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -53,17 +53,17 @@ text-overflow: ellipsis; overflow: hidden; width: 100%; - padding: 0 12px 0 8px; + padding: 0 @control-padding-horizontal; } &-clear { opacity: 0; position: absolute; - right: 8px; + right: @control-padding-horizontal; z-index: 2; background: @component-background; top: 50%; - font-size: @font-size-base; + font-size: @font-size-sm; color: @disabled-color; width: 12px; height: 12px; @@ -85,7 +85,7 @@ position: absolute; z-index: 1; top: 50%; - right: 8px; + right: @control-padding-horizontal; width: 12px; height: 12px; margin-top: -6px; @@ -102,6 +102,12 @@ } } } + + &-picker-small &-picker-clear, + &-picker-small &-picker-arrow { + right: @control-padding-horizontal-sm; + } + &-menus { font-size: @font-size-base; background: @component-background; @@ -163,7 +169,8 @@ } } &-menu-item { - padding: 7px 8px; + padding: 5px @control-padding-horizontal; + line-height: 22px; cursor: pointer; white-space: nowrap; transition: all 0.3s; @@ -192,7 +199,7 @@ .iconfont-size-under-12px(8px); color: @text-color-secondary; position: absolute; - right: 8px; + right: @control-padding-horizontal; } } &-loading:after { diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 3b0f31d74d..a09b3aeda9 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -12,7 +12,7 @@ line-height: 1; position: relative; vertical-align: middle; - top: -0.8px; + top: -0.09em; .@{checkbox-prefix-cls}-wrapper:hover &-inner, &:hover &-inner, @@ -151,6 +151,7 @@ .@{checkbox-prefix-cls}-wrapper { .reset-component; + line-height: unset; cursor: pointer; display: inline-block; & + & { diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md index 3a4c559161..f38171e7d8 100644 --- a/components/collapse/demo/basic.md +++ b/components/collapse/demo/basic.md @@ -1,6 +1,6 @@ --- order: 0 -title: +title: zh-CN: 折叠面板 en-US: Collapse --- @@ -41,3 +41,9 @@ ReactDOM.render( , mountNode); ```` + + diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 8621ed143b..127c255869 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -3,14 +3,14 @@ @collapse-prefix-cls: ~"@{ant-prefix}-collapse"; -@collapse-header-bg: @background-color-base; -@collapse-active-bg: @background-color-active; +@collapse-header-bg: @background-color-light; +@collapse-active-bg: @background-color-base; .collapse-close() { - .iconfont-size-under-12px(9px, 0); + transform: rotate(0); } .collapse-open() { - .iconfont-size-under-12px(9px, 90deg); + transform: rotate(90deg); } .@{collapse-prefix-cls} { @@ -32,24 +32,23 @@ > .@{collapse-prefix-cls}-header { line-height: 22px; - padding: 8px 0 8px 32px; + padding: 12px 0 12px 40px; color: @heading-color; cursor: pointer; position: relative; transition: all .3s; .arrow { - .collapse-close(); .iconfont-mixin(); + .collapse-close(); + font-size: @font-size-sm; position: absolute; - color: @text-color-secondary; display: inline-block; - font-weight: bold; - line-height: 40px; + line-height: 46px; vertical-align: top; transition: transform 0.24s; top: 0; - left: 16px; + left: @padding-md; &:before { content: "\E61F"; } @@ -64,12 +63,12 @@ &-content { overflow: hidden; color: @text-color; - padding: 0 16px; + padding: 0 @padding-md; background-color: @component-background; & > &-box { - padding-top: 16px; - padding-bottom: 16px; + padding-top: @padding-md; + padding-bottom: @padding-md; } &-inactive { @@ -94,6 +93,10 @@ border: 0; } + &-borderless > &-item { + border: 0; + } + &-borderless > &-item:last-child, &-borderless > &-item:last-child &-header { border-radius: 0; @@ -105,14 +108,10 @@ &-borderless > &-item > &-content { background-color: transparent; - border-top: @border-width-base @border-style-base @border-color-base; } - &-borderless > &-item > &-header { - transition: all .3s; - &:hover { - background-color: @collapse-header-bg; - } + &-borderless > &-item > &-content > &-content-box { + padding-top: 4px; } & &-item-disabled > &-header { @@ -123,8 +122,4 @@ background-color: @disabled-bg; } } - - & > &-item:not(&-item-disabled) > .@{collapse-prefix-cls}-header:active { - background-color: @collapse-active-bg; - } } diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap index 566ff069dd..4139c31489 100644 --- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap @@ -202,7 +202,6 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =




); - // 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) ? ( + boolean | - | | getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index cd010a2062..b771ec961a 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -42,7 +42,7 @@ subtitle: 日期选择框 | className | 选择器 className | string | '' | | style | 自定义输入框样式 | 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) | | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index 1acfe045a9..623a7b1787 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -1,6 +1,6 @@ .calendarPanelHeader(@calendar-prefix-cls) { - height: 34px; - line-height: 34px; + height: 40px; + line-height: 40px; text-align: center; user-select: none; border-bottom: @border-width-base @border-style-base @border-color-split; @@ -14,10 +14,10 @@ .@{calendar-prefix-cls}-year-select, .@{calendar-prefix-cls}-month-select { padding: 0 2px; - font-weight: bold; + font-weight: 500; display: inline-block; - color: @text-color; - line-height: 34px; + color: @heading-color; + line-height: 40px; } .@{calendar-prefix-cls}-century-select-arrow, @@ -42,7 +42,7 @@ padding: 0 5px; font-size: 16px; display: inline-block; - line-height: 34px; + line-height: 40px; } .@{calendar-prefix-cls}-prev-century-btn, @@ -85,7 +85,7 @@ .@{calendar-prefix-cls} { position: relative; outline: none; - width: 231px; + width: 280px; border: @border-width-base @border-style-base #fff; list-style: none; font-size: @font-size-base; @@ -98,7 +98,7 @@ &-input-wrap { height: 34px; - padding: 6px; + padding: 6px @control-padding-horizontal - 2px; border-bottom: @border-width-base @border-style-base @border-color-split; } @@ -126,7 +126,7 @@ } &-body { - padding: 4px 8px; + padding: 8px 12px; } table { @@ -140,6 +140,7 @@ th, td { border: 0; + text-align: center; } &-calendar-table { @@ -165,7 +166,8 @@ } &-cell { - padding: 4px 0; + padding: 3px 0; + height: 30px; } &-date { @@ -173,9 +175,9 @@ margin: 0 auto; color: @text-color; border-radius: @border-radius-sm; - width: 20px; - height: 20px; - line-height: 18px; + width: 24px; + height: 24px; + line-height: 22px; border: @border-width-base @border-style-base transparent; padding: 0; background: transparent; @@ -239,10 +241,10 @@ position: absolute; top: -1px; left: 5px; - width: 20px; - height: 20px; + width: 24px; + height: 24px; border: @border-width-base @border-style-base #bcbcbc; - border-radius: @border-radius-base; + border-radius: @border-radius-sm; } } diff --git a/components/date-picker/style/DecadePanel.less b/components/date-picker/style/DecadePanel.less index a019c24910..fc563ebbfd 100644 --- a/components/date-picker/style/DecadePanel.less +++ b/components/date-picker/style/DecadePanel.less @@ -19,7 +19,7 @@ } .@{calendar-prefix-cls}-decade-panel-body { - height: ~"calc(100% - 34px)"; + height: ~"calc(100% - 40px)"; } .@{calendar-prefix-cls}-decade-panel-table { @@ -43,7 +43,7 @@ height: 24px; line-height: 24px; padding: 0 6px; - border-radius: 4px; + border-radius: @border-radius-sm; transition: background 0.3s ease; &:hover { diff --git a/components/date-picker/style/MonthPanel.less b/components/date-picker/style/MonthPanel.less index d1986a81f1..fbeceec8c3 100644 --- a/components/date-picker/style/MonthPanel.less +++ b/components/date-picker/style/MonthPanel.less @@ -23,7 +23,7 @@ } .@{calendar-prefix-cls}-month-panel-body { - height: ~"calc(100% - 34px)"; + height: ~"calc(100% - 40px)"; } .@{calendar-prefix-cls}-month-panel-table { @@ -64,8 +64,8 @@ text-align: center; height: 24px; line-height: 24px; - padding: 0 6px; - border-radius: 4px; + padding: 0 8px; + border-radius: @border-radius-sm; transition: background 0.3s ease; &:hover { diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less index 9b835a81fe..61bb8e71ed 100644 --- a/components/date-picker/style/Picker.less +++ b/components/date-picker/style/Picker.less @@ -49,11 +49,11 @@ position: absolute; width: 14px; height: 14px; - right: 8px; + right: @control-padding-horizontal; top: 50%; margin-top: -7px; line-height: 14px; - font-size: @font-size-base; + font-size: @font-size-sm; transition: all .3s; user-select: none; } @@ -86,4 +86,9 @@ line-height: 1; } } + + &-small &-clear, + &-small &-icon { + right: @control-padding-horizontal-sm; + } } diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index d6e44c1280..c31904afa9 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -19,12 +19,12 @@ color: @text-color-secondary; width: 8px; display: inline-block; - line-height: 18px; + height: 100%; vertical-align: top; } .@{calendar-prefix-cls}-range { - width: 470px; + width: 552px; overflow: hidden; .@{calendar-prefix-cls}-date-panel { @@ -45,7 +45,7 @@ float: left; .@{calendar-prefix-cls} { &-time-picker-inner { - border-right: 2px solid @border-color-split; + border-right: 1.5px solid @border-color-split; } } } @@ -54,7 +54,7 @@ float: right; .@{calendar-prefix-cls} { &-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; border: 0; box-shadow: none; + padding-left: 0; + padding-right: 0; &:focus { box-shadow: none; @@ -173,12 +175,12 @@ top: 68px; z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1) &-panel { - height: 241px; + height: 267px; margin-top: -34px; } &-inner { - padding-top: 34px; + padding-top: 40px; height: 100%; background: none; } diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index 18fd5d68e7..17fa6ce3df 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -1,7 +1,7 @@ .@{calendar-timepicker-prefix-cls} { position: absolute; width: 100%; - top: 34px; + top: 40px; background-color: @component-background; &-panel { @@ -52,7 +52,7 @@ box-sizing: border-box; overflow: hidden; position: relative; // Fix chrome weird render bug - height: 206px; + height: 226px; &:hover { overflow-y: auto; @@ -91,7 +91,7 @@ li:last-child:after { content: ''; - height: 182px; + height: 202px; display: block; } @@ -117,9 +117,9 @@ .@{calendar-prefix-cls}-time { .@{calendar-prefix-cls}-day-select { padding: 0 2px; - font-weight: bold; + font-weight: 500; display: inline-block; - color: @text-color; + color: @heading-color; line-height: 34px; } diff --git a/components/date-picker/style/WeekPicker.less b/components/date-picker/style/WeekPicker.less index a2b8aa705b..c2f6748080 100644 --- a/components/date-picker/style/WeekPicker.less +++ b/components/date-picker/style/WeekPicker.less @@ -10,7 +10,7 @@ } &.@{calendar-prefix-cls}-active-week { background: @primary-2; - font-weight: 500; + font-weight: bold; } .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date, .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date { diff --git a/components/date-picker/style/YearPanel.less b/components/date-picker/style/YearPanel.less index a47d9ca60a..cd7a328bc8 100644 --- a/components/date-picker/style/YearPanel.less +++ b/components/date-picker/style/YearPanel.less @@ -23,7 +23,7 @@ } .@{calendar-prefix-cls}-year-panel-body { - height: ~"calc(100% - 34px)"; + height: ~"calc(100% - 40px)"; } .@{calendar-prefix-cls}-year-panel-table { @@ -45,8 +45,8 @@ text-align: center; height: 24px; line-height: 24px; - padding: 0 6px; - border-radius: 4px; + padding: 0 8px; + border-radius: @border-radius-sm; transition: background 0.3s ease; &:hover { diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx index 102fbe4c63..76b18af1d6 100644 --- a/components/date-picker/wrapPicker.tsx +++ b/components/date-picker/wrapPicker.tsx @@ -62,8 +62,8 @@ export default function wrapPicker(Picker, defaultFormat?: string): any { render() { const props = this.props; const { prefixCls, inputPrefixCls } = props; - const pickerClass = classNames({ - [`${prefixCls}-picker`]: true, + const pickerClass = classNames(`${prefixCls}-picker`, { + [`${prefixCls}-picker-${props.size}`]: !!props.size, }); const pickerInputClass = classNames(`${prefixCls}-picker-input`, inputPrefixCls, { [`${inputPrefixCls}-lg`]: props.size === 'large', diff --git a/components/divider/style/index.less b/components/divider/style/index.less index 02c01f449e..ba8bc0533f 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -30,7 +30,7 @@ background: transparent; font-weight: 500; color: @heading-color; - font-size: 16px; + font-size: @font-size-lg; margin: 16px 0; &:before, diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 6ca743ae6f..083e0b4108 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -19,7 +19,7 @@ } .@{iconfont-css-prefix}-down:before { - transition: transform 0.2s ease; + transition: transform .2s; } } @@ -48,13 +48,13 @@ &-item-group-title { color: @text-color-secondary; - padding: 6px 8px; + padding: 5px @control-padding-horizontal; transition: all .3s; } &-item, &-submenu-title { - padding: 7px 8px; + padding: 5px @control-padding-horizontal; margin: 0; clear: both; font-size: @font-size-base; @@ -63,12 +63,13 @@ white-space: nowrap; cursor: pointer; transition: all .3s; + line-height: 22px; > a { color: @text-color; display: block; - padding: 7px 8px; - margin: -7px -8px; + padding: 5px @control-padding-horizontal; + margin: -5px -@control-padding-horizontal; transition: all .3s; &:focus { text-decoration: none; @@ -119,7 +120,7 @@ } .@{dropdown-prefix-cls}-menu-submenu-arrow { position: absolute; - right: 8px; + right: @padding-xs; &:after { font-family: "anticon" !important; font-style: normal; @@ -130,6 +131,14 @@ } } + &-submenu-title { + padding-right: 26px; + &:first-child, + &:last-child { + border-radius: 0; + } + } + &-submenu-vertical { position: relative; } @@ -200,7 +209,8 @@ white-space: nowrap; &.@{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-size-under-12px(10px); diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 457d149d98..48ef088167 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -272,13 +272,7 @@ export default class FormItem extends React.Component { } renderChildren() { - const props = this.props; - const children = React.Children.map(props.children as React.ReactNode, (child: React.ReactElement) => { - if (child && typeof child.type === 'function' && !child.props.size) { - return React.cloneElement(child, { size: 'large' }); - } - return child; - }); + const { children } = this.props; return [ this.renderLabel(), this.renderWrapper( diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 5dfe6470fa..01a66a0cc9 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -34,7 +34,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = ` class="ant-form-item-control " >
+ diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index cc6f028e59..a81a272da7 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -172,7 +172,7 @@ class Demo extends React.Component {

Click or drag file to this area to upload

-

Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files

+

Support for a single or bulk upload.

)}
diff --git a/components/form/style/index.less b/components/form/style/index.less index 449d949785..983bac2bcf 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -6,7 +6,7 @@ @import "./mixin"; @form-prefix-cls: ~"@{ant-prefix}-form"; -@form-component-height: @input-height-lg; +@form-component-height: @input-height-base; @form-feedback-icon-size: 14px; .@{form-prefix-cls} { @@ -83,7 +83,6 @@ input[type="checkbox"] { line-height: @form-component-height; position: relative; .clearfix; - font-size: 0; * { font-size: @font-size-base; } @@ -269,7 +268,7 @@ form { .@{ant-prefix}-select-selection--single { margin-left: -1px; - height: @input-height-lg; + height: @input-height-base; background-color: #eee; .@{ant-prefix}-select-selection__rendered { padding-left: 8px; @@ -388,8 +387,8 @@ form { right: 0; visibility: visible; pointer-events: none; - .square(@input-height-lg); - line-height: @input-height-lg; + .square(@input-height-base); + line-height: @input-height-base; text-align: center; font-size: @form-feedback-icon-size; animation: zoomIn .3s @ease-out-back; diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md index 0b2f5c3504..49f92bfa1a 100644 --- a/components/input-number/demo/size.md +++ b/components/input-number/demo/size.md @@ -1,17 +1,17 @@ --- order: 1 -title: +title: zh-CN: 三种大小 en-US: Sizes --- ## zh-CN -三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` +三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `40px` 和 `24px` ，默认高度为 `32px`。 ## 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 import { InputNumber } from 'antd'; diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index d5971f9a41..e11b64587d 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -4,12 +4,6 @@ @input-number-prefix-cls: ~"@{ant-prefix}-input-number"; -.handler-disabled() { - opacity: 0.72; - color: #ccc !important; - cursor: not-allowed; -} - .@{input-number-prefix-cls} { .reset-component; .input; @@ -18,7 +12,7 @@ display: inline-block; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; - width: 80px; + width: 90px; &-handler { text-align: center; @@ -77,7 +71,7 @@ background-color: @input-bg; border: 0; border-radius: @border-radius-base; - padding: 0 7px; + padding: 0 @control-padding-horizontal - 1px; display: block; .placeholder(); @@ -99,6 +93,7 @@ input { 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 { .@{input-number-prefix-cls}-input { - opacity: 0.72; cursor: not-allowed; background-color: @disabled-bg; } .@{input-number-prefix-cls}-handler-wrap { display: none; } - .@{input-number-prefix-cls}-handler { - .handler-disabled(); - } } } diff --git a/components/input/Search.tsx b/components/input/Search.tsx index a78e26cf31..8fb128ce44 100644 --- a/components/input/Search.tsx +++ b/components/input/Search.tsx @@ -45,6 +45,7 @@ export default class Search extends React.Component { ) : ; const inputClassName = classNames(prefixCls, className, { [`${prefixCls}-enter-button`]: !!enterButton, + [`${prefixCls}-${size}`]: !!size, }); return (
` 输入框定义了三种尺寸（大、默认、小），高度分别为 `32px`、`28px` 和 `22px`。 +我们为 `` 输入框定义了三种尺寸（大、默认、小），高度分别为 `40px`、`32px` 和 `24px`。 注意： 在表单里面，我们只使用大尺寸的输入框。 ## 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. diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 95a3c58200..47603aafda 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -10,7 +10,7 @@ } .input-sm() { - padding: @input-padding-vertical-sm @input-padding-horizontal; + padding: @input-padding-vertical-sm @input-padding-horizontal-sm; height: @input-height-sm; } @@ -328,11 +328,11 @@ } .@{inputClass}-prefix { - left: @input-padding-horizontal; + left: @padding-xs; } .@{inputClass}-suffix { - right: @input-padding-horizontal; + right: @padding-xs; } .@{inputClass}:not(:first-child) { diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less index d789ab2388..aee0f3052c 100644 --- a/components/input/style/search-input.less +++ b/components/input/style/search-input.less @@ -11,6 +11,10 @@ color: @text-color-secondary; } + &:not(&-small) > .@{ant-prefix}-input-suffix { + right: @control-padding-horizontal; + } + > .@{ant-prefix}-input-suffix > .@{search-prefix}-button { border-top-left-radius: 0; border-bottom-left-radius: 0; diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx index 49165af58f..76eda4b9e1 100644 --- a/components/layout/Sider.tsx +++ b/components/layout/Sider.tsx @@ -28,7 +28,7 @@ export default class Sider extends React.Component { defaultCollapsed: false, reverseArrow: false, width: 200, - collapsedWidth: 64, + collapsedWidth: 80, style: {}, }; diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md index e059ed7f31..73681e60e7 100644 --- a/components/layout/demo/custom-trigger.md +++ b/components/layout/demo/custom-trigger.md @@ -74,19 +74,18 @@ ReactDOM.render(, mountNode); #components-layout-demo-custom-trigger .trigger { font-size: 18px; line-height: 64px; - padding: 0 16px; + padding: 0 24px; cursor: pointer; transition: color .3s; } #components-layout-demo-custom-trigger .trigger:hover { - color: #108ee9; + color: #1890ff; } #components-layout-demo-custom-trigger .logo { height: 32px; - background: #333; - border-radius: 6px; + background: rgba(255,255,255,.2); margin: 16px; } ```` diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md index 1dd6ad6dac..0ed794a49e 100644 --- a/components/layout/demo/fixed-sider.md +++ b/components/layout/demo/fixed-sider.md @@ -87,8 +87,7 @@ ReactDOM.render( ````css #components-layout-demo-fixed-sider .logo { height: 32px; - background: #333; - border-radius: 6px; + background: rgba(255,255,255,.2); margin: 16px; } ```` diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md index 1a93f49f3b..3a4d7e1d8e 100644 --- a/components/layout/demo/fixed.md +++ b/components/layout/demo/fixed.md @@ -52,8 +52,7 @@ ReactDOM.render( #components-layout-demo-fixed .logo { width: 120px; height: 31px; - background: #333; - border-radius: 6px; + background: rgba(255,255,255,.2); margin: 16px 24px 16px 0; float: left; } diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md index b91979aed9..2e9ce942de 100644 --- a/components/layout/demo/responsive.md +++ b/components/layout/demo/responsive.md @@ -64,8 +64,7 @@ ReactDOM.render( ````css #components-layout-demo-responsive .logo { height: 32px; - background: #333; - border-radius: 6px; + background: rgba(255,255,255,.2); margin: 16px; } ```` diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md index 268f669e68..c85e8a249b 100644 --- a/components/layout/demo/side.md +++ b/components/layout/demo/side.md @@ -98,8 +98,7 @@ ReactDOM.render(, mountNode); ````css #components-layout-demo-side .logo { height: 32px; - background: #333; - border-radius: 6px; + background: rgba(255,255,255,.2); margin: 16px; } ```` diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md index 883e30080f..d6209d41ae 100644 --- a/components/layout/demo/top-side-2.md +++ b/components/layout/demo/top-side-2.md @@ -80,8 +80,7 @@ ReactDOM.render( #components-layout-demo-top-side-2 .logo { width: 120px; height: 31px; - background: #333; - border-radius: 6px; + background: rgba(255,255,255,.2); margin: 16px 28px 16px 0; float: left; } diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md index 03a2bc8501..4af2bb0d21 100644 --- a/components/layout/demo/top-side.md +++ b/components/layout/demo/top-side.md @@ -83,8 +83,7 @@ ReactDOM.render( #components-layout-demo-top-side .logo { width: 120px; height: 31px; - background: #333; - border-radius: 6px; + background: rgba(255,255,255,.2); margin: 16px 28px 16px 0; float: left; } diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md index 2d8002b62c..11248ae6b5 100644 --- a/components/layout/demo/top.md +++ b/components/layout/demo/top.md @@ -58,8 +58,7 @@ ReactDOM.render( #components-layout-demo-top .logo { width: 120px; height: 31px; - background: #333; - border-radius: 6px; + background: rgba(255,255,255,.2); margin: 16px 24px 16px 0; float: left; } diff --git a/components/layout/style/index.less b/components/layout/style/index.less index f84ebe26e5..56a091f74f 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -72,9 +72,9 @@ height: @layout-trigger-height; line-height: @layout-trigger-height; color: @layout-trigger-color; - background: fade(@layout-trigger-background, 100); + background: @layout-trigger-background; z-index: 1; - transition: all .15s @ease-in-out; + transition: all .2s; } &-zero-width { diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 19018c8562..f3c3f3c525 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -807,63 +807,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = ` exports[`renders ./components/list/demo/simple.md correctly 1`] = `

- Small Size -

-
-
-
-
- Racing car sprays burning fuel into crowd. -
-
-
-
- Japanese princess to wed commoner. -
-
-
-
- Australian walks 100km after outback crash. -
-
-
-
- Man charged over missing wedding girl. -
-
-
-
- Los Angeles battles huge wildfires. -
-
-
-
-

Default Size

@@ -935,11 +879,18 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `

- Large Size + Small Size

+
+
+ Header +
+
+
+
+ Footer +
+
+
+

+ Large Size +

+
+
+
+ Header +
+
+
+
+
+ Racing car sprays burning fuel into crowd. +
+
+
+
+ Japanese princess to wed commoner. +
+
+
+
+ Australian walks 100km after outback crash. +
+
+
+
+ Man charged over missing wedding girl. +
+
+
+
+ Los Angeles battles huge wildfires. +
+
+
+
+
+ Footer +
+
`; diff --git a/components/list/demo/simple.md b/components/list/demo/simple.md index 2b24992b5f..99e6e2e6e9 100644 --- a/components/list/demo/simple.md +++ b/components/list/demo/simple.md @@ -30,15 +30,17 @@ const data = [ ReactDOM.render(
-

Small Size

+

Default Size

Header
} + footer={
Footer
} bordered dataSource={data} - size="small" renderItem={item => ({item})} /> -

Default Size

+

Small Size

Header
} footer={
Footer
} bordered @@ -47,9 +49,11 @@ ReactDOM.render( />

Large Size

Header
} + footer={
Footer
} bordered dataSource={data} - size="large" renderItem={item => ({item})} />
diff --git a/components/list/style/index.less b/components/list/style/index.less index ced643ca99..4cd5877f65 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -9,11 +9,13 @@ * { outline: none; } - &-more, &-pagination { + &-pagination { margin-top: 12px; - text-align: center; + text-align: right; } &-more { + margin-top: 12px; + text-align: center; button { padding-left: 32px; padding-right: 32px; @@ -69,6 +71,8 @@ font-size: 0; flex: 0 0 auto; margin-left: 48px; + padding: 0; + list-style: none; & > li { display: inline-block; color: @text-color-secondary; @@ -136,8 +140,12 @@ } .@{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 { - padding: 8px 24px; + padding: 8px 16px; } } diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap index b0a1a2c82b..4e52525331 100644 --- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap +++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap @@ -938,7 +938,6 @@ exports[`Locale Provider should display the text as locale changed 1`] = ` > Cancel , @@ -5530,7 +5528,6 @@ exports[`Locale Provider should display the text as locale changed 1`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -6486,7 +6483,6 @@ exports[`Locale Provider should display the text as locale changed 2`] = ` > Cancelar , @@ -11078,7 +11073,6 @@ exports[`Locale Provider should display the text as locale changed 2`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -12037,7 +12031,6 @@ exports[`Locale Provider should display the text as locale changed 3`] = ` > Cancelar , @@ -16641,7 +16633,6 @@ exports[`Locale Provider should display the text as locale changed 3`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -17597,7 +17588,6 @@ exports[`Locale Provider should display the text as locale changed 4`] = ` > Отмена , @@ -22189,7 +22178,6 @@ exports[`Locale Provider should display the text as locale changed 4`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -23145,7 +23133,6 @@ exports[`Locale Provider should display the text as locale changed 5`] = ` > Cancelar , @@ -27737,7 +27723,6 @@ exports[`Locale Provider should display the text as locale changed 5`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > Aceptar @@ -28685,7 +28670,6 @@ exports[`Locale Provider should display the text as locale changed 6`] = ` > Avbryt , @@ -33277,7 +33260,6 @@ exports[`Locale Provider should display the text as locale changed 6`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -34225,7 +34207,6 @@ exports[`Locale Provider should display the text as locale changed 7`] = ` > Annuler , @@ -38817,7 +38797,6 @@ exports[`Locale Provider should display the text as locale changed 7`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -39767,7 +39746,6 @@ exports[`Locale Provider should display the text as locale changed 8`] = ` > Abbrechen , @@ -44359,7 +44336,6 @@ exports[`Locale Provider should display the text as locale changed 8`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -45315,7 +45291,6 @@ exports[`Locale Provider should display the text as locale changed 9`] = ` > Annuleren , @@ -49907,7 +49881,6 @@ exports[`Locale Provider should display the text as locale changed 9`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -50855,7 +50828,6 @@ exports[`Locale Provider should display the text as locale changed 10`] = ` > Cancel·lar , @@ -55447,7 +55418,6 @@ exports[`Locale Provider should display the text as locale changed 10`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -56401,7 +56371,6 @@ exports[`Locale Provider should display the text as locale changed 11`] = ` > Storno , @@ -60993,7 +60961,6 @@ exports[`Locale Provider should display the text as locale changed 11`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > Ok @@ -61947,7 +61914,6 @@ exports[`Locale Provider should display the text as locale changed 12`] = ` > 취소 , @@ -66539,7 +66504,6 @@ exports[`Locale Provider should display the text as locale changed 12`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > 확인 @@ -67495,7 +67459,6 @@ exports[`Locale Provider should display the text as locale changed 13`] = ` > Tühista , @@ -72087,7 +72049,6 @@ exports[`Locale Provider should display the text as locale changed 13`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -73043,7 +73004,6 @@ exports[`Locale Provider should display the text as locale changed 14`] = ` > Zrušiť , @@ -77635,7 +77594,6 @@ exports[`Locale Provider should display the text as locale changed 14`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -78588,7 +78546,6 @@ exports[`Locale Provider should display the text as locale changed 15`] = ` > キャンセル , @@ -83168,7 +83124,6 @@ exports[`Locale Provider should display the text as locale changed 15`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -84124,7 +84079,6 @@ exports[`Locale Provider should display the text as locale changed 16`] = ` > İptal , @@ -88716,7 +88669,6 @@ exports[`Locale Provider should display the text as locale changed 16`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > Tamam @@ -89669,7 +89621,6 @@ exports[`Locale Provider should display the text as locale changed 17`] = ` > 取 消 , @@ -94249,7 +94199,6 @@ exports[`Locale Provider should display the text as locale changed 17`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > 確 定 @@ -95205,7 +95154,6 @@ exports[`Locale Provider should display the text as locale changed 18`] = ` > Peruuta , @@ -99797,7 +99744,6 @@ exports[`Locale Provider should display the text as locale changed 18`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -100753,7 +100699,6 @@ exports[`Locale Provider should display the text as locale changed 19`] = ` > Anuluj , @@ -105345,7 +105289,6 @@ exports[`Locale Provider should display the text as locale changed 19`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -106301,7 +106244,6 @@ exports[`Locale Provider should display the text as locale changed 20`] = ` > Отказ , @@ -110893,7 +110834,6 @@ exports[`Locale Provider should display the text as locale changed 20`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > Добре @@ -111849,7 +111789,6 @@ exports[`Locale Provider should display the text as locale changed 21`] = ` > Cancel , @@ -116441,7 +116379,6 @@ exports[`Locale Provider should display the text as locale changed 21`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -117389,7 +117326,6 @@ exports[`Locale Provider should display the text as locale changed 22`] = ` > Annuler , @@ -121981,7 +121916,6 @@ exports[`Locale Provider should display the text as locale changed 22`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -122937,7 +122871,6 @@ exports[`Locale Provider should display the text as locale changed 23`] = ` > Annuleer , @@ -127529,7 +127461,6 @@ exports[`Locale Provider should display the text as locale changed 23`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -128485,7 +128416,6 @@ exports[`Locale Provider should display the text as locale changed 24`] = ` > Annulla , @@ -133077,7 +133006,6 @@ exports[`Locale Provider should display the text as locale changed 24`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -134033,7 +133961,6 @@ exports[`Locale Provider should display the text as locale changed 25`] = ` > Huỷ , @@ -138625,7 +138551,6 @@ exports[`Locale Provider should display the text as locale changed 25`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -139581,7 +139506,6 @@ exports[`Locale Provider should display the text as locale changed 26`] = ` > ยกเลิก , @@ -144173,7 +144096,6 @@ exports[`Locale Provider should display the text as locale changed 26`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > ตกลง @@ -145129,7 +145051,6 @@ exports[`Locale Provider should display the text as locale changed 27`] = ` > لغو , @@ -149719,7 +149639,6 @@ exports[`Locale Provider should display the text as locale changed 27`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > تایید @@ -150675,7 +150594,6 @@ exports[`Locale Provider should display the text as locale changed 28`] = ` > Άκυρο , @@ -155267,7 +155184,6 @@ exports[`Locale Provider should display the text as locale changed 28`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > ΟΚ @@ -156222,7 +156138,6 @@ exports[`Locale Provider should display the text as locale changed 29`] = ` > Avbryt , @@ -160814,7 +160728,6 @@ exports[`Locale Provider should display the text as locale changed 29`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > OK @@ -161769,7 +161682,6 @@ exports[`Locale Provider should display the text as locale changed 30`] = ` > Otkaži , @@ -166361,7 +166272,6 @@ exports[`Locale Provider should display the text as locale changed 30`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > U redu @@ -167317,7 +167227,6 @@ exports[`Locale Provider should display the text as locale changed 31`] = ` > Hætta við , @@ -171909,7 +171817,6 @@ exports[`Locale Provider should display the text as locale changed 31`] = ` loading={false} onClick={[Function]} prefixCls="ant-btn" - size="large" type="primary" > Áfram diff --git a/components/mention/demo/placement.md b/components/mention/demo/placement.md index 63aa421797..9b07dc8500 100644 --- a/components/mention/demo/placement.md +++ b/components/mention/demo/placement.md @@ -2,7 +2,7 @@ order: 0 title: zh-CN: 向上展开 - en-US: Expand up + en-US: Placement --- ## zh-CN @@ -11,7 +11,7 @@ title: ## en-US -Expand the suggestions up. +Change the suggestions placement. ````jsx import { Mention } from 'antd'; @@ -27,7 +27,7 @@ function onSelect(suggestion) { ReactDOM.render( + ); diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index d4eb81a9ad..4f0ff53649 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -151,7 +151,6 @@ export default class Modal extends React.Component { const defaultFooter = [( , - , + , ]} diff --git a/components/notification/style/index.less b/components/notification/style/index.less index 3b01ea5c22..2b9de2eab8 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -78,8 +78,9 @@ &-icon { position: absolute; - font-size: 32px; - line-height: 32px; + font-size: 24px; + line-height: 24px; + margin-left: 4px; &-success { color: @success-color; diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 1b33134775..45e2125c7b 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -26,8 +26,8 @@ &-total-text { display: inline-block; vertical-align: middle; - height: 28px; - line-height: 28px; + height: @pagination-item-size; + line-height: @pagination-item-size; margin-right: 8px; } @@ -35,9 +35,9 @@ cursor: pointer; border-radius: @border-radius-base; user-select: none; - min-width: 28px; - height: 28px; - line-height: 28px; + min-width: @pagination-item-size; + height: @pagination-item-size; + line-height: @pagination-item-size; text-align: center; list-style: none; display: inline-block; @@ -137,9 +137,9 @@ color: @text-color; border-radius: @border-radius-base; list-style: none; - min-width: 28px; - height: 28px; - line-height: 28px; + min-width: @pagination-item-size; + height: @pagination-item-size; + line-height: @pagination-item-size; text-align: center; transition: all .3s; display: inline-block; @@ -168,10 +168,10 @@ transition: all .3s; &:after { - .iconfont-size-under-12px(8px); + font-size: 12px; display: block; - height: 26px; - line-height: 26px; + height: @pagination-item-size - 2px; + line-height: @pagination-item-size - 2px; font-family: "anticon"; text-align: center; font-weight: 500; @@ -242,14 +242,14 @@ &-simple &-prev, &-simple &-next { - height: 24px; - line-height: 24px; + height: @pagination-item-size-sm; + line-height: @pagination-item-size-sm; vertical-align: top; .@{pagination-prefix-cls}-item-link { border: 0; - height: 24px; + height: @pagination-item-size-sm; &:after { - line-height: 24px; + line-height: @pagination-item-size-sm; } } } @@ -257,7 +257,7 @@ &-simple &-simple-pager { display: inline-block; margin-right: 8px; - height: 24px; + height: @pagination-item-size-sm; input { margin-right: 8px; @@ -281,46 +281,46 @@ .@{pagination-prefix-cls} { &.mini &-total-text, &.mini &-simple-pager { - height: 20px; - line-height: 20px; + height: @pagination-item-size-sm; + line-height: @pagination-item-size-sm; } &.mini &-item { border: 0; margin: 0; - min-width: 20px; - height: 20px; - line-height: 20px; + min-width: @pagination-item-size-sm; + height: @pagination-item-size-sm; + line-height: @pagination-item-size-sm; } &.mini &-prev, &.mini &-next { margin: 0; - min-width: 20px; - height: 20px; - line-height: 20px; + min-width: @pagination-item-size-sm; + height: @pagination-item-size-sm; + line-height: @pagination-item-size-sm; } &.mini &-prev &-item-link, &.mini &-next &-item-link { border: 0; &:after { - height: 20px; - line-height: 20px; + height: @pagination-item-size-sm; + line-height: @pagination-item-size-sm; } } &.mini &-jump-prev, &.mini &-jump-next { - height: 20px; - line-height: 20px; + height: @pagination-item-size-sm; + line-height: @pagination-item-size-sm; } &.mini &-options { margin-left: 8px; &-quick-jumper { - height: 20px; - line-height: 20px; + height: @pagination-item-size-sm; + line-height: @pagination-item-size-sm; input { .input-sm; diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md index 4b76e29bec..3873e51126 100755 --- a/components/popover/demo/basic.md +++ b/components/popover/demo/basic.md @@ -29,3 +29,9 @@ ReactDOM.render( , mountNode); ```` + + diff --git a/components/popover/style/index.less b/components/popover/style/index.less index fa576123eb..29ca4f2a70 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -60,29 +60,29 @@ &-title { min-width: @popover-min-width; margin: 0; // reset heading margin - padding: 8px 16px; + padding: 8px @padding-md; min-height: 32px; border-bottom: 1px solid @border-color-split; - color: @popover-color; + color: @heading-color; font-weight: 500; } &-inner-content { - padding: 8px 16px; + padding: 8px @padding-md; color: @popover-color; } &-message { - padding: 8px 0 16px; + padding: 8px 0 @padding-md; font-size: @font-size-base; color: @popover-color; > .@{iconfont-css-prefix} { color: @warning-color; - line-height: 17px; + line-height: @line-height-base; position: absolute; } &-title { - padding-left: 20px; + padding-left: @font-size-base + 8px; } } diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index 7786af4ba8..4c5ea838b8 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -3,11 +3,11 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
@@ -406,11 +406,11 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = ` exports[`renders ./components/progress/demo/format.md correctly 1`] = `
@@ -514,7 +514,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
@@ -537,7 +537,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
@@ -562,7 +562,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
@@ -587,7 +587,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
@@ -612,7 +612,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` style="width:170px;" >
@@ -635,7 +635,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
@@ -658,7 +658,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
@@ -683,7 +683,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md index 3f929a71a1..9b7e6c0e19 100644 --- a/components/progress/demo/line-mini.md +++ b/components/progress/demo/line-mini.md @@ -1,6 +1,6 @@ --- order: 2 -title: +title: zh-CN: 小型进度条 en-US: Mini size progress bar --- @@ -18,10 +18,10 @@ import { Progress } from 'antd'; ReactDOM.render(
- - - - + + + +
, mountNode); ```` diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 3167902b62..37465b857e 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -23,6 +23,7 @@ export interface ProgressProps { style?: React.CSSProperties; gapDegree?: number; gapPosition?: 'top' | 'bottom' | 'left' | 'right'; + size?: 'default' | 'small'; } export default class Progress extends React.Component { @@ -35,6 +36,7 @@ export default class Progress extends React.Component { showInfo: true, trailColor: '#f3f3f3', prefixCls: 'ant-progress', + size: 'default', }; static propTypes = { @@ -47,12 +49,13 @@ export default class Progress extends React.Component { trailColor: PropTypes.string, format: PropTypes.func, gapDegree: PropTypes.number, + default: PropTypes.oneOf(['default', 'small']), }; render() { const props = this.props; const { - prefixCls, className, percent = 0, status, format, trailColor, + prefixCls, className, percent = 0, status, format, trailColor, size, type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition, ...restProps, } = props; const progressStatus = parseInt(percent.toString(), 10) >= 100 && !('status' in props) ? @@ -77,7 +80,7 @@ export default class Progress extends React.Component { if (type === 'line') { const percentStyle = { width: `${percent}%`, - height: strokeWidth || 10, + height: strokeWidth || 8, }; progress = (
@@ -90,11 +93,11 @@ export default class Progress extends React.Component {
); } else if (type === 'circle' || type === 'dashboard') { - const circleSize = width || 132; + const circleSize = width || 120; const circleStyle = { width: circleSize, height: circleSize, - fontSize: circleSize * 0.16 + 6, + fontSize: circleSize * 0.15 + 6, }; const circleWidth = strokeWidth || 6; const gapPos = gapPosition || type === 'dashboard' && 'bottom' || 'top'; @@ -120,6 +123,7 @@ export default class Progress extends React.Component { [`${prefixCls}-${type === 'dashboard' && 'circle' || type}`]: true, [`${prefixCls}-status-${progressStatus}`]: true, [`${prefixCls}-show-info`]: showInfo, + [`${prefixCls}-${size}`]: size, }, className); return ( diff --git a/components/progress/style/index.less b/components/progress/style/index.less index c6df44e673..5e1d5dc17c 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -13,6 +13,11 @@ position: relative; } + &-small&-line, + &-small&-line &-text .@{iconfont-css-prefix} { + font-size: @font-size-sm; + } + &-outer { display: inline-block; width: 100%; diff --git a/components/radio/style/index.less b/components/radio/style/index.less index bcf044589a..8a2c89a758 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -8,8 +8,9 @@ @radio-duration: .3s; .@{radio-group-prefix-cls} { - display: inline-block; .reset-component; + display: inline-block; + line-height: unset; } // 一般状态 @@ -30,7 +31,7 @@ position: relative; line-height: 1; vertical-align: middle; - top: -1px; + top: -1.2px; cursor: pointer; .@{radio-prefix-cls}-wrapper:hover &, &:hover, @@ -58,11 +59,12 @@ } &-inner { &:after { + @radio-dot-size: @radio-size - 9px; position: absolute; - width: 6px; - height: 6px; - left: 3px; - top: 3px; + width: @radio-dot-size; + height: @radio-dot-size; + left: (@radio-size - @radio-dot-size) / 2 - 1px; + top: (@radio-size - @radio-dot-size) / 2 - 1px; border-radius: @border-radius-base; display: table; border-top: 0; @@ -78,11 +80,11 @@ top: 0; left: 0; display: block; - width: 14px; - height: 14px; + width: @radio-size; + height: @radio-size; border-width: 1px; border-style: solid; - border-radius: 14px; + border-radius: 100px; border-color: @border-color-base; background-color: @radio-button-bg; transition: all @radio-duration; @@ -147,7 +149,7 @@ span.@{radio-prefix-cls} + * { border: @border-width-base @border-style-base @border-color-base; border-left: 0; background: @radio-button-bg; - padding: 0 16px; + padding: 0 @padding-md - 1px; position: relative; a { @@ -169,13 +171,7 @@ span.@{radio-prefix-cls} + * { .@{radio-group-prefix-cls}-small & { height: @input-height-sm; line-height: @input-height-sm - 2px; - padding: 0 12px; - &:first-child { - border-radius: @border-radius-sm 0 0 @border-radius-sm; - } - &:last-child { - border-radius: 0 @border-radius-sm @border-radius-sm 0; - } + padding: 0 @control-padding-horizontal-sm - 1px; } &:not(:first-child) { diff --git a/components/select/demo/size.md b/components/select/demo/size.md index 2989de090a..201bad6af1 100644 --- a/components/select/demo/size.md +++ b/components/select/demo/size.md @@ -7,11 +7,11 @@ title: ## zh-CN -三种大小的选择框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` +三种大小的选择框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `40px` 和 `24px` ，默认高度为 `32px`。 ## 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 import { Select, Radio } from 'antd'; diff --git a/components/select/style/index.less b/components/select/style/index.less index 79c50f639c..1f719527f6 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -13,11 +13,11 @@ text-rendering: auto; opacity: 0; position: absolute; - right: 8px; + right: @control-padding-horizontal - 1px; z-index: 1; background: @component-background; top: 50%; - font-size: @font-size-base; + font-size: @font-size-sm; color: @disabled-color; width: 12px; height: 12px; @@ -56,7 +56,7 @@ .iconfont-mixin(); position: absolute; top: 50%; - right: 8px; + right: @control-padding-horizontal - 1px; line-height: 1; margin-top: -6px; color: @text-color-secondary; @@ -134,7 +134,7 @@ } &-disabled &-selection--multiple &-selection__choice { - background: @background-color-active; + background: @background-color-base; color: #aaa; padding-right: 10px; &__remove { @@ -150,8 +150,8 @@ &-selection__rendered { display: block; - margin-left: 7px; - margin-right: 7px; + margin-left: @control-padding-horizontal - 1px; + margin-right: @control-padding-horizontal - 1px; position: relative; line-height: @input-height-base - 2px; // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026 @@ -191,19 +191,24 @@ } .@{select-prefix-cls}-selection__rendered { line-height: @input-height-sm - 2px; + margin: 0 @control-padding-horizontal-sm - 1px; } .@{select-prefix-cls}-selection--multiple { min-height: @input-height-sm; .@{select-prefix-cls}-selection__rendered { li { height: @input-height-sm - 8px; - line-height: @input-height-sm - 8px; + line-height: @input-height-sm - 10px; } } .@{select-prefix-cls}-selection__clear { top: @input-height-sm / 2; } } + .@{select-prefix-cls}-selection__clear, + .@{select-prefix-cls}-arrow { + right: @control-padding-horizontal-sm; + } } &-disabled &-selection__choice__remove { @@ -237,7 +242,7 @@ } &-search__field__placeholder { - left: 8px; + left: @control-padding-horizontal; } &-search__field__mirror { @@ -301,17 +306,22 @@ height: auto; } + .@{select-prefix-cls}-selection__placeholder { + margin-left: 6px; + } + > ul > li, .@{select-prefix-cls}-selection__rendered > ul > li { // for tree-select margin-top: 3px; height: @input-height-base - 8px; - line-height: @input-height-base - 8px; + line-height: @input-height-base - 8px - 2px; } .@{select-prefix-cls}-selection__choice { color: @tag-default-color; background-color: @tag-default-bg; - border-radius: 4px; + border: 1px solid @border-color-split; + border-radius: @border-radius-sm; cursor: default; float: left; margin-right: 4px; @@ -341,11 +351,11 @@ cursor: pointer; display: inline-block; font-weight: bold; - transition: all 0.3s @ease-in-out; - .iconfont-size-under-12px(8px); + transition: all .3s; + font-size: @font-size-sm; + .iconfont-size-under-12px(10px); position: absolute; right: 4px; - padding: 0 0 0 8px; &:hover { color: #404040; } @@ -459,13 +469,14 @@ &-item-group-title { color: @text-color-secondary; line-height: 1.5; - padding: 8px; + padding: @control-padding-horizontal - 1px; } &-item { position: relative; display: block; - padding: 7px 8px; + padding: 5px @control-padding-horizontal - 1px; + line-height: 22px; font-weight: normal; color: @text-color; white-space: nowrap; @@ -491,7 +502,7 @@ &-selected { &, &:hover { - background-color: @background-color-base; + background-color: @background-color-light; font-weight: 600; color: @text-color; } @@ -505,7 +516,7 @@ height: 1px; margin: 1px 0; overflow: hidden; - background-color: #e5e5e5; + background-color: @border-color-split; line-height: 0; } } @@ -521,7 +532,7 @@ position: absolute; top: 50%; transform: translateY(-50%); - right: 8px; + right: @control-padding-horizontal - 1px; font-weight: bold; text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0; } diff --git a/components/slider/style/index.less b/components/slider/style/index.less index e247a33861..266098afcf 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -30,8 +30,8 @@ width: 100%; height: 4px; border-radius: 2px; - background-color: @border-color-split; - transition: background-color 0.3s ease; + background-color: @background-color-base; + transition: background-color .3s; } &-track { diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 19e51d3555..ff220063fa 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -3,8 +3,8 @@ @steps-prefix-cls: ~"@{ant-prefix}-steps"; @process-icon-color: @primary-color; -@process-title-color: @text-color; -@process-description-color: @process-title-color; +@process-title-color: @heading-color; +@process-description-color: @text-color; @process-tail-color: @border-color-split; @process-icon-text-color: #fff; @wait-icon-color: @disabled-color; @@ -12,20 +12,20 @@ @wait-description-color: @wait-title-color; @wait-tail-color: @process-tail-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-tail-color: @process-icon-color; +@finish-tail-color: @primary-color; @error-icon-color: @error-color; @error-title-color: @error-color; @error-description-color: @error-color; @error-tail-color: @wait-tail-color; @steps-background: @component-background; -@steps-icon-size: 26px; -@steps-small-icon-size: 18px; +@steps-icon-size: 32px; +@steps-small-icon-size: 24px; @steps-dot-size: 5px; @steps-current-dot-size: 7px; -@steps-desciption-max-width: 120px; +@steps-desciption-max-width: 140px; .@{steps-prefix-cls} { .reset-component; @@ -73,12 +73,6 @@ top: -1px; color: @primary-color; position: relative; - - &.rcicon { - font-size: @font-size-base; - position: relative; - top: -2px; - } } } &-tail { @@ -99,8 +93,8 @@ } &-title { font-size: @font-size-lg; - color: #666; - font-weight: bold; + color: @text-color; + font-weight: 500; display: inline-block; padding-right: 10px; position: relative; @@ -119,7 +113,6 @@ &-description { font-size: @font-size-base; color: @text-color-secondary; - margin-top: 4px; } .step-item-status(wait); .step-item-status(process); @@ -139,7 +132,7 @@ .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) { .@{steps-prefix-cls}-item { - margin-right: 10px; + margin-right: 8px; white-space: nowrap; &:last-child { margin-right: 0; diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less index b3abcd644b..dff1ad9d57 100644 --- a/components/steps/style/progress-dot.less +++ b/components/steps/style/progress-dot.less @@ -15,7 +15,7 @@ height: @steps-dot-size; line-height: @steps-dot-size; border: 0; - margin-left: 58px; + margin-left: 67px; background: transparent; .@{steps-prefix-cls}-icon-dot { float: left; diff --git a/components/steps/style/small.less b/components/steps/style/small.less index 7e9848d254..0f65685674 100644 --- a/components/steps/style/small.less +++ b/components/steps/style/small.less @@ -5,11 +5,11 @@ line-height: @steps-small-icon-size; text-align: center; border-radius: @steps-small-icon-size; - font-size: @font-size-base; - margin-right: 10px; + font-size: @font-size-sm; + margin-right: 8px; } .@{steps-prefix-cls}-item-title { - font-size: @font-size-base - 2px; + font-size: @font-size-base; line-height: @steps-small-icon-size; &:after { top: @steps-small-icon-size / 2; diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less index 638e35660c..0b5b798ce7 100644 --- a/components/steps/style/vertical.less +++ b/components/steps/style/vertical.less @@ -24,11 +24,11 @@ > .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail { position: absolute; - left: 13px; + left: 16px; top: 0; height: 100%; width: 1px; - padding: 30px 0 4px; + padding: 36px 0 4px; &:after { height: 100%; width: 1px; @@ -48,9 +48,9 @@ &.@{steps-prefix-cls}-small { .@{steps-prefix-cls}-item-tail { position: absolute; - left: 9px; + left: 12px; top: 0; - padding: 22px 0 4px; + padding: 28px 0 4px; } .@{steps-prefix-cls}-item-title { line-height: @steps-small-icon-size; diff --git a/components/style/color/colors.less b/components/style/color/colors.less index c902106b56..5b642e4028 100644 --- a/components/style/color/colors.less +++ b/components/style/color/colors.less @@ -88,3 +88,14 @@ @yellow-8: color(~`colorPalette("@{yellow-6}", 8)`); @yellow-9: color(~`colorPalette("@{yellow-6}", 9)`); @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)`); diff --git a/components/style/core/base.less b/components/style/core/base.less index 67cf61e92c..1778c490b4 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -332,6 +332,7 @@ textarea { font-family: inherit; font-size: inherit; line-height: inherit; + color: inherit; } button, diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less index 55aee49dfb..1d3f8796ac 100644 --- a/components/style/core/iconfont.less +++ b/components/style/core/iconfont.less @@ -113,7 +113,7 @@ .@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown .@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; } .@{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}-logout:before { content: "\e65a"; } .@{iconfont-css-prefix}-link:before { content: "\e65b"; } @@ -147,7 +147,7 @@ .@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; } .@{iconfont-css-prefix}-notification:before { content: "\e677"; } .@{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}-lock:before { content: "\e67b"; } .@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; } @@ -302,3 +302,26 @@ display: inline-block; 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"; } diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 8de8bd884a..9dcaffd7f5 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -44,10 +44,21 @@ @text-color-secondary-dark: fade(#fff, 65%); @font-size-base : 14px; @font-size-lg : @font-size-base + 2px; +@font-size-sm : 12px; @line-height-base : 1.5; @border-radius-base : 4px; @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 // list items or table cells. @item-active-bg : @primary-1; @@ -55,7 +66,7 @@ // ICONFONT @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-color : @primary-color; @@ -88,10 +99,8 @@ @outline-width : 2px; @outline-color : @primary-color; -// Default background color for disabled states, Collapse wrappers, -// and several active and hover states. -@background-color-base : hsv(0, 0, 98%); -@background-color-active: #eee; +@background-color-light : hsv(0, 0, 98%); // background of header and selected item +@background-color-base : hsv(0, 0, 96%); // Default grey background color // Disabled states @disabled-color : fade(#000, 25%); @@ -99,13 +108,13 @@ @disabled-color-dark : fade(#fff, 35%); // Shadow -@shadow-color : rgba(0, 0, 0, .2); +@shadow-color : rgba(0, 0, 0, .15); @box-shadow-base : @shadow-1-down; -@shadow-1-up : 0 -1px 6px @shadow-color; -@shadow-1-down : 0 1px 6px @shadow-color; -@shadow-1-left : -1px 0 6px @shadow-color; -@shadow-1-right : 1px 0 6px @shadow-color; -@shadow-2 : 0 2px 8px @shadow-color; +@shadow-1-up : 0 2px 8px @shadow-color; +@shadow-1-down : 0 2px 8px @shadow-color; +@shadow-1-left : -2px 0 8px @shadow-color; +@shadow-1-right : 2px 0 8px @shadow-color; +@shadow-2 : 0 4px 12px @shadow-color; // Buttons @btn-font-weight : 400; @@ -127,14 +136,15 @@ @btn-disable-bg : @disabled-bg; @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-sm : @font-size-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-lg : 32px; -@btn-height-sm : 22px; +@btn-height-base : 32px; +@btn-height-lg : 40px; +@btn-height-sm : 24px; @btn-circle-size : @btn-height-base; @btn-circle-size-lg : @btn-height-lg; @@ -143,7 +153,10 @@ @btn-group-border : @primary-7; // Checkbox -@checkbox-size : 14px; +@checkbox-size : 16px; + +// Radio +@radio-size : 16px; // Radio buttons @radio-button-bg : @btn-default-bg; @@ -186,14 +199,14 @@ @grid-gutter-width : 0; // Layout -@layout-body-background : hsv(0, 0, 96%); +@layout-body-background : @background-color-base; @layout-header-background : #00182e; @layout-header-height : 64px; @layout-header-padding : 0 50px; @layout-footer-padding : 24px 50px; @layout-sider-background : @layout-header-background; @layout-trigger-height : 48px; -@layout-trigger-background : tint(@heading-color, 20%); +@layout-trigger-background : #002140; @layout-trigger-color : #fff; @layout-zero-trigger-width : 36px; @layout-zero-trigger-height : 42px; @@ -224,10 +237,11 @@ // Input // --- -@input-height-base : 28px; -@input-height-lg : 32px; -@input-height-sm : 22px; -@input-padding-horizontal : 7px; +@input-height-base : 32px; +@input-height-lg : 40px; +@input-height-sm : 24px; +@input-padding-horizontal : @control-padding-horizontal - 1px; +@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px; @input-padding-vertical-base : 4px; @input-padding-vertical-sm : 1px; @input-padding-vertical-lg : 6px; @@ -269,13 +283,13 @@ //** Popover outer arrow width @popover-arrow-outer-width: (@popover-arrow-width + 1px); //** 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: @popover-arrow-width + 4px; // Modal // -- -@modal-mask-bg: rgba(55, 55, 55, 0.6); +@modal-mask-bg: rgba(0, 0, 0, 0.65); // Progress // -- @@ -296,18 +310,17 @@ // Table // -- -@table-header-bg: @background-color-base; -@table-header-sort-bg: @background-color-active; +@table-header-bg: @background-color-light; +@table-header-sort-bg: @background-color-base; @table-row-hover-bg: @primary-1; -@table-selected-row-bg: #fafafa; @table-padding-vertical: 16px; @table-padding-horizontal: 8px; // Tag // -- -@tag-default-bg: #f3f3f3; +@tag-default-bg: @background-color-base; @tag-default-color: @text-color; -@tag-font-size: @font-size-base; +@tag-font-size: @font-size-sm; // TimePicker // --- @@ -325,12 +338,13 @@ // --- @badge-height: 20px; @badge-dot-size: 8px; -@badge-font-size: @font-size-base; +@badge-font-size: @font-size-sm; +@badge-status-size: 6px; // Rate // --- -@rate-star-color: @yellow-6; -@rate-star-bg: #e9e9e9; +@rate-star-color: @lemon-6; +@rate-star-bg: @border-color-split; // Card // --- @@ -341,18 +355,22 @@ @card-padding-base: 24px; @card-padding-wider: 32px; @card-actions-background: @background-color-base; +@card-shadow: 0 2px 8px rgba(0, 0, 0, .09); // Tabs // --- -@tabs-card-head-background: #f9f9f9; -@tabs-title-font-size: @font-size-lg; +@tabs-card-head-background: @background-color-light; +@tabs-card-height: 40px; +@tabs-title-font-size: @font-size-base; // BackTop +// --- @back-top-color: #fff; -@back-top-bg: rgba(64, 64, 64, 0.4); -@back-top-hover-bg: rgba(64, 64, 64, 0.6); +@back-top-bg: @text-color-secondary; +@back-top-hover-bg: @text-color; // Avatar +// --- @avatar-size-base: 32px; @avatar-size-lg: 40px; @avatar-size-sm: 24px; @@ -362,3 +380,13 @@ @avatar-bg: #ccc; @avatar-color: #fff; @avatar-border-radius: @border-radius-base; + +// Switch +// --- +@switch-height: 22px; +@switch-sm-height: 16px; + +// Pagination +// --- +@pagination-item-size: 32px; +@pagination-item-size-sm: 24px; diff --git a/components/style/v2-compatible-reset.less b/components/style/v2-compatible-reset.less new file mode 100644 index 0000000000..c60350ebb0 --- /dev/null +++ b/components/style/v2-compatible-reset.less @@ -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; +} diff --git a/components/style/v2-compatible-reset.tsx b/components/style/v2-compatible-reset.tsx new file mode 100644 index 0000000000..8fed6241d7 --- /dev/null +++ b/components/style/v2-compatible-reset.tsx @@ -0,0 +1 @@ +import './v2-compatible-reset.less'; diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap index 47efa43087..9c2a69e3ce 100644 --- a/components/switch/__tests__/__snapshots__/demo.test.js.snap +++ b/components/switch/__tests__/__snapshots__/demo.test.js.snap @@ -14,7 +14,7 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = ` exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
- +
diff --git a/components/switch/style/index.less b/components/switch/style/index.less index 7d62dc5e61..5af5de326d 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -9,11 +9,11 @@ position: relative; display: inline-block; box-sizing: border-box; - height: 22px; + height: @switch-height; min-width: 44px; - line-height: 20px; + line-height: @switch-height - 2px; vertical-align: middle; - border-radius: 20px; + border-radius: 100px; border: 1px solid transparent; background-color: @disabled-color; cursor: pointer; @@ -30,8 +30,8 @@ &:after { position: absolute; - width: 18px; - height: 18px; + width: @switch-height - 4px; + height: @switch-height - 4px; left: 1px; top: 1px; @@ -56,20 +56,19 @@ } &-small { - height: 14px; + height: @switch-sm-height; min-width: 28px; - line-height: 12px; + line-height: @switch-sm-height - 2px; .@{switch-prefix-cls}-inner { margin-left: 18px; margin-right: 3px; + font-size: @font-size-sm; } &:after { - width: 12px; - height: 12px; - top: 0; - left: 0.5px; + width: @switch-sm-height - 4px; + height: @switch-sm-height - 4px; } &:active:after { @@ -113,15 +112,6 @@ &-disabled { cursor: not-allowed; - background: #f4f4f4; - - &:after { - background: #ccc; - cursor: not-allowed; - } - - .@{switch-prefix-cls}-inner { - color: @disabled-color; - } + opacity: 0.35; } } diff --git a/components/table/style/index.less b/components/table/style/index.less index 11969c1a6e..47153f6342 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -2,6 +2,7 @@ @import "../../style/mixins/index"; @table-prefix-cls: ~"@{ant-prefix}-table"; +@table-header-icon-color: @text-color-secondary; .@{table-prefix-cls}-wrapper { .clearfix; @@ -14,7 +15,7 @@ border-radius: @border-radius-base @border-radius-base 0 0; &-body { - transition: opacity 0.3s ease; + transition: opacity .3s; } table { @@ -28,13 +29,15 @@ &-thead > tr > th { background: @table-header-bg; - font-weight: 500; transition: background .3s ease; text-align: left; color: @heading-color; + font-weight: 500; + border-bottom: @border-width-base @border-style-base @border-color-split; &[colspan] { text-align: center; + border-bottom: 0; } .@{iconfont-css-prefix}-filter, .@{table-prefix-cls}-filter-icon { @@ -42,9 +45,10 @@ margin-left: 4px; font-size: @font-size-base; cursor: pointer; - color: #999; + color: @table-header-icon-color; transition: all .3s; width: 14px; + font-weight: normal; &:hover { color: @text-color; @@ -90,6 +94,7 @@ background: @table-header-bg; border-radius: 0 0 @border-radius-base @border-radius-base; position: relative; + border-top: @border-width-base @border-style-base @border-color-split; &:before { content: ''; height: 1px; @@ -136,10 +141,6 @@ border-radius: 0; } - &-tbody > tr.@{table-prefix-cls}-row-selected { - background: @table-selected-row-bg; - } - &-thead > tr > th.@{table-prefix-cls}-column-sort { background: @table-header-sort-bg; } @@ -203,12 +204,12 @@ &-middle { .@{table-prefix-cls}-thead > tr > th, .@{table-prefix-cls}-tbody > tr > td { - padding: 10px 8px; + padding: 12px 8px; } .@{table-prefix-cls}-title, .@{table-prefix-cls}-footer { - padding: 10px 8px; + padding: 12px 8px; } .@{table-prefix-cls}-column-sorter-up:after { @@ -248,13 +249,13 @@ } .@{table-prefix-cls}-tbody > tr > td { - padding: 6px 8px; + padding: 8px; } .@{table-prefix-cls}-title, .@{table-prefix-cls}-footer, .@{table-prefix-cls}-thead > tr > th { - padding: 10px 8px; + padding: 8px; } .@{table-prefix-cls}-title { @@ -299,6 +300,8 @@ width: 14px; vertical-align: middle; text-align: center; + font-weight: normal; + color: @table-header-icon-color; &-up, &-down { @@ -339,7 +342,6 @@ .iconfont-size-under-12px(8px); line-height: 4px; height: 4px; - color: #999; transition: all .3s; } } @@ -516,7 +518,7 @@ } .@{iconfont-css-prefix}-down { - color: #999; + color: @table-header-icon-color; transition: all .3s; } @@ -529,7 +531,7 @@ box-shadow: @box-shadow-base; .@{ant-prefix}-action-down { - color: #999; + color: @table-header-icon-color; } } diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap index 67e04cf718..49cdb462d2 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap @@ -546,10 +546,11 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = ` class="ant-tabs-tab-active ant-tabs-tab" role="tab" > -
+
Tab 1 +
+
@@ -585,6 +598,11 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = ` class="ant-tabs-tabpane ant-tabs-tabpane-inactive" role="tabpanel" /> +
`; diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md index 68a8562676..ff627cde28 100644 --- a/components/tabs/demo/editable-card.md +++ b/components/tabs/demo/editable-card.md @@ -24,8 +24,9 @@ class Demo extends React.Component { super(props); this.newTabIndex = 0; 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 3', content: 'Content of Tab 3', key: '3', closable: false }, ]; this.state = { activeKey: panes[0].key, diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index 7c3e25ca93..ace468a8b1 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -1,11 +1,12 @@ @import "../../style/themes/default"; @import "../../style/mixins/index"; + @tab-prefix-cls: ~"@{ant-prefix}-tabs"; // card style .@{tab-prefix-cls} { &&-card > &-bar &-nav-container { - height: 32px; + height: @tabs-card-height; } &&-card > &-bar &-ink-bar { visibility: hidden; @@ -20,14 +21,15 @@ margin-right: 2px; } &&-card > &-bar &-tab { - padding: 5px 16px 4px; + padding: 0 16px; transition: all 0.3s @ease-in-out; + line-height: @tabs-card-height - 2px; } &&-card > &-bar &-tab-active { background: @component-background; border-color: @border-color-base; color: @primary-color; - padding-bottom: 5px; + padding-bottom: 1px; } &&-card > &-bar &-tab-inactive { padding: 0; @@ -38,19 +40,14 @@ &&-card > &-bar &-tab .@{iconfont-css-prefix}-close { color: @text-color-secondary; transition: all .3s; - .iconfont-size-under-12px(10px); - margin-right: 0; - opacity: 0; - position: absolute; - right: 2px; - top: 50%; - margin-top: -5px; + font-size: @font-size-sm; + margin-left: 3px; + margin-right: -5px; overflow: hidden; - text-align: center; - border-radius: 2px; - width: 14px; - height: 14px; - line-height: 1; + vertical-align: middle; + width: 16px; + height: 16px; + height: @font-size-base; &:hover { color: @heading-color; } @@ -69,7 +66,7 @@ } &-extra-content { - line-height: 32px; + line-height: @tabs-card-height; .@{tab-prefix-cls}-new-tab { width: 20px; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index d60278ab45..ba0372a2fc 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -51,7 +51,6 @@ z-index: 2; width: 0; height: 100%; - line-height: 32px; cursor: pointer; border: 0; background-color: transparent; @@ -158,7 +157,7 @@ .@{tab-prefix-cls}-tab { display: inline-block; height: 100%; - margin-right: 24px; + margin-right: 32px; box-sizing: border-box; position: relative; @@ -178,9 +177,8 @@ &:active { color: @primary-7; } + .@{iconfont-css-prefix} { - width: 14px; - height: 14px; margin-right: 8px; } } @@ -195,7 +193,6 @@ } &-mini &-tab { - margin-right: 0; padding: 8px 16px; } diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap index bbfac7d7ff..184b174ff5 100644 --- a/components/tag/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap @@ -246,14 +246,17 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = ` class="anticon anticon-cross" />
- +
`; diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md index 4107b2360a..46d9529aaa 100644 --- a/components/tag/demo/control.md +++ b/components/tag/demo/control.md @@ -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. ````jsx -import { Tag, Input, Tooltip, Button } from 'antd'; +import { Tag, Input, Tooltip } from 'antd'; class EditableTagGroup extends React.Component { state = { @@ -80,7 +80,14 @@ class EditableTagGroup extends React.Component { onPressEnter={this.handleInputConfirm} /> )} - {!inputVisible && } + {!inputVisible && ( + + + New Tag + + )}
); } diff --git a/components/tag/style/index.less b/components/tag/style/index.less index fa76eb50bf..fb81e411bd 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -10,7 +10,7 @@ height: 22px; padding: 0 8px; 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; font-size: @tag-font-size; transition: all 0.3s @ease-out; @@ -39,6 +39,8 @@ .@{iconfont-css-prefix}-cross { .iconfont-size-under-12px(10px); + position: relative; + top: .8px; cursor: pointer; font-weight: bold; margin-left: 3px; @@ -102,12 +104,13 @@ .make-color-classes(@i: length(@colors)) when (@i > 0) { .make-color-classes(@i - 1); @color: extract(@colors, @i); - @lightColor: "@{color}-2"; + @lightColor: "@{color}-1"; + @lightBorderColor: "@{color}-2"; @darkColor: "@{color}-6"; &-@{color} { color: @@darkColor; background: @@lightColor; - border-color: @@lightColor; + border-color: @@lightBorderColor; } &-@{color}-inverse { background: @@darkColor; diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index 594a22a6ff..a1dbfd0f07 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -19,7 +19,6 @@ border-radius: @border-radius-base; box-shadow: @box-shadow-base; background-clip: padding-box; - line-height: 1.5; overflow: hidden; left: -2px; } @@ -30,7 +29,6 @@ border: 0; width: 100%; cursor: auto; - line-height: 1.5; outline: 0; .placeholder; @@ -38,8 +36,9 @@ &-wrap { box-sizing: border-box; position: relative; - padding: 6px; + padding: 7px @control-padding-horizontal; border-bottom: @border-width-base @border-style-base @border-color-split; + max-width: @time-picker-panel-column-width * 3; } &-invalid { @@ -49,14 +48,14 @@ &-clear-btn { position: absolute; - right: 5px; + right: 8px; cursor: pointer; overflow: hidden; width: 20px; height: 20px; text-align: center; line-height: 20px; - top: 5px; + top: 7px; margin: 0; } @@ -86,7 +85,7 @@ width: @time-picker-panel-column-width; overflow: hidden; position: relative; // Fix chrome weird render bug - max-height: 144px; + max-height: 32px * 6; &:hover { overflow-y: auto; @@ -117,10 +116,10 @@ list-style: none; box-sizing: content-box; margin: 0; - padding: 0 0 0 8px; + padding: 0 0 0 @control-padding-horizontal; width: 100%; - height: 24px; - line-height: 24px; + height: 32px; + line-height: 32px; text-align: left; cursor: pointer; user-select: none; @@ -187,8 +186,8 @@ position: relative; display: inline-block; outline: none; - transition: opacity 0.3s ease; - width: 100px; + transition: opacity .3s; + width: 128px; &-input { .input; @@ -197,14 +196,6 @@ } } - &-large &-input { - .input-lg; - } - - &-small &-input { - .input-sm; - } - &-open { opacity: 0; } @@ -214,19 +205,30 @@ user-select: none; transition: all .3s @ease-in-out; width: 14px; - height: 12px; - line-height: 12px; - right: 8px; + height: 14px; + line-height: 14px; + right: @control-padding-horizontal - 1px; color: @text-color-secondary; top: 50%; - margin-top: -6px; + margin-top: -7px; &:after { content: "\e641"; font-family: "anticon"; - font-size: @font-size-base - 2px; color: @text-color-secondary; display: block; line-height: 1; } } + + &-large &-input { + .input-lg; + } + + &-small &-input { + .input-sm; + } + + &-small &-icon { + right: @control-padding-horizontal-sm - 1px; + } } diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index f355e12ec9..a6c5cfebdc 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -56,16 +56,15 @@ &-head-custom { position: absolute; text-align: center; - width: 40px; - left: -14px; line-height: 1; - margin-top: 6px; + margin-top: 0; border: 0; height: auto; border-radius: 0; padding: 3px 0; - font-size: @font-size-base; - transform: translateY(-50%); + transform: translate(-50%, -50%); + left: 6px; + width: auto; } &-content { diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index 02e4394f04..0b0a6b3de7 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -40,14 +40,14 @@ // Wrapper for the tooltip content .@{tooltip-prefix-cls}-inner { max-width: @tooltip-max-width; - padding: 8px 10px; + padding: 6px 10px; color: @tooltip-color; text-align: left; text-decoration: none; background-color: @tooltip-bg; border-radius: @border-radius-base; box-shadow: @box-shadow-base; - min-height: 34px; + min-height: 32px; } // Arrows diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 6d8f55bbfb..598f244545 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -23,6 +23,7 @@ } &-search { + padding: 0 @control-padding-horizontal-sm; &-action { color: @disabled-color; position: absolute; @@ -30,12 +31,10 @@ right: 4px; bottom: 4px; width: 28px; - line-height: 26px; + line-height: @input-height-base; text-align: center; - font-size: @font-size-lg; .@{iconfont-css-prefix} { transition: all .3s; - font-size: @font-size-base; color: @disabled-color; &:hover { color: @text-color-secondary; @@ -48,7 +47,7 @@ } &-header { - padding: 7px 15px; + padding: 6px @control-padding-horizontal; border-radius: @border-radius-base @border-radius-base 0 0; background: @component-background; color: @text-color; @@ -61,7 +60,7 @@ &-title { position: absolute; - right: 15px; + right: 12px; } } @@ -86,6 +85,9 @@ &-content { height: 100%; overflow: auto; + list-style: none; + padding: 0; + margin: 0; > .LazyLoad { animation: transferHighlightIn 1s; } @@ -94,9 +96,12 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: 7px 15px; + padding: 6px @control-padding-horizontal; min-height: 32px; transition: all .3s; + > span { + padding-right: 0; + } } &-item:not(&-item-disabled):hover { diff --git a/components/tree/style/index.less b/components/tree/style/index.less index 26fd9a36e0..676d6c2f7b 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -12,6 +12,13 @@ .reset-component; margin: 0; padding: 0; + + ol, ul { + list-style: none; + margin: 0; + padding: 0; + } + li { padding: 4px 0; margin: 0; @@ -78,7 +85,6 @@ span { &.@{tree-prefix-cls}-checkbox { margin: 0 4px 0 2px; - top: 1px; } &.@{tree-prefix-cls}-switcher, &.@{tree-prefix-cls}-iconEle { diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 2b9b8a7c6e..00a197bc24 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -9,6 +9,10 @@ .reset-component; outline: 0; + p { + margin: 0; + } + &-btn { display: block; width: 100%; @@ -51,13 +55,14 @@ &&-drag { border: @border-width-base dashed @border-color-base; - transition: border-color 0.3s ease; + transition: border-color .3s; cursor: pointer; border-radius: @border-radius-base; text-align: center; width: 100%; height: 100%; position: relative; + padding: 16px 0; &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) { border: 2px dashed @primary-5; @@ -83,15 +88,15 @@ p.@{upload-prefix-cls}-drag-icon { .@{iconfont-css-prefix} { - font-size: 80px; - margin-top: -5px; + font-size: 60px; color: @primary-5; } - height: 60px; - margin-bottom: 24px; + margin-bottom: 8px; } p.@{upload-prefix-cls}-text { font-size: @font-size-lg; + margin: 0 0 4px; + color: @heading-color; } p.@{upload-prefix-cls}-hint { font-size: @font-size-base; @@ -99,7 +104,7 @@ } .@{iconfont-css-prefix}-plus { font-size: 30px; - transition: all 0.3s ease; + transition: all .3s; color: @disabled-color; &:hover { color: @text-color-secondary; @@ -124,7 +129,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - padding-left: 16px; + padding-left: @font-size-base + 4px; width: 100%; display: inline-block; } @@ -134,13 +139,16 @@ padding: 0 12px 0 4px; transition: background-color .3s; + > span { + display: block; + } + .@{iconfont-css-prefix}-loading, .@{iconfont-css-prefix}-paper-clip { - margin-right: 4px; font-size: @font-size-base; color: @text-color-secondary; position: absolute; - top: 5.5px; + top: @font-size-base / 2 - 0.5px; } } diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less index 09638e413f..0d5dfb7ac2 100644 --- a/site/theme/static/toc.less +++ b/site/theme/static/toc.less @@ -53,8 +53,10 @@ .demos-anchor { color: #aaa; font-size: 12px; - margin-top: -4px; + margin: -4px 0 0; background-color: #fff; + padding: 0; + list-style: none; a { padding-left: 8px; display: block; diff --git a/site/theme/template/IconSet/index.jsx b/site/theme/template/IconSet/index.jsx index 1d2f728ed8..ed28048c5f 100644 --- a/site/theme/template/IconSet/index.jsx +++ b/site/theme/template/IconSet/index.jsx @@ -10,12 +10,20 @@ export default class IconSet extends React.Component { icons = { direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'], suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'], - logo: ['android', 'android-o', 'apple', 'apple-o', 'windows', 'windows-o', 'ie', 'chrome', 'github', 'aliwangwang', 'aliwangwang-o', 'dingding', 'dingding-o'], + logo: [ + 'android', 'android-o', 'apple', 'apple-o', 'windows', 'windows-o', 'ie', 'chrome', 'github', 'aliwangwang', 'aliwangwang-o', 'dingding', 'dingding-o', + 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus', + 'dropbox', 'facebook', 'codepen', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', + ], other: ['lock', 'unlock', 'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'code-o', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-excel', 'file-jpg', 'file-ppt', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'frown-o', 'meh', 'meh-o', 'smile', 'smile-o', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tag-o', 'tags', 'tags-o', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'like-o', 'dislike', 'dislike-o', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'form', 'table', 'profile'], }; // Show badges - newIcons = ['warning', 'dashboard', 'form', 'table', 'profile']; + newIcons = [ + 'warning', 'dashboard', 'form', 'table', 'profile', + 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus', + 'dropbox', 'facebook', 'codepen', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', + ]; render() { const { className, catigory } = this.props;