diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md
index 92e2ae27c..b1f163a87 100644
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@@ -15,8 +15,6 @@ The menu has multiple levels.
Cascading menu
- 1st menu item
- 2nd menu item
3rd menu item
4th menu item
diff --git a/components/menu/MenuItem.vue b/components/menu/MenuItem.vue
index 638b64be4..575367a77 100644
--- a/components/menu/MenuItem.vue
+++ b/components/menu/MenuItem.vue
@@ -5,6 +5,7 @@ import Tooltip from '../tooltip'
function noop () {}
export default {
props: itemProps,
+ name: 'MenuItem',
inject: {
getInlineCollapsed: { default: () => noop },
},
diff --git a/components/menu/src/MenuMixin.js b/components/menu/src/MenuMixin.js
index 09db93ae4..12a35b25a 100644
--- a/components/menu/src/MenuMixin.js
+++ b/components/menu/src/MenuMixin.js
@@ -135,8 +135,8 @@ export default {
renderCommonMenuItem (child, i, subIndex, extraProps) {
if (child.tag === undefined) { return child }
- warning((getComponentName(child.componentOptions) || '').indexOf(['MenuItem', 'MenuItemGroup']) === -1,
- '`Menu children just support MenuItem and MenuItemGroup',
+ warning(['MenuItem', 'MenuItemGroup', 'SubMenu'].includes(getComponentName(child.componentOptions)),
+ `Menu children not support ${getComponentName(child.componentOptions)}`,
)
const state = this.$data
const props = this.$props
diff --git a/components/menu/src/SubMenu.vue b/components/menu/src/SubMenu.vue
index 591f34b74..b9140a00b 100644
--- a/components/menu/src/SubMenu.vue
+++ b/components/menu/src/SubMenu.vue
@@ -461,7 +461,7 @@ export default {
if (typeof openAnimation === 'object' && openAnimation.on) {
transitionProps.on = { ...openAnimation.on }
}
- const children = isInlineMode ? this.renderChildren(this.$slots.default, true) : this.renderChildren(this.$slots.default)
+ const children = this.renderChildren(this.$slots.default, isInlineMode)
return (
{isInlineMode && title}
diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less
index 61c62c9c4..2e6aba77e 100644
--- a/components/menu/style/dark.less
+++ b/components/menu/style/dark.less
@@ -2,14 +2,14 @@
// dark theme
&-dark,
&-dark &-sub {
- color: @text-color-secondary-dark;
+ color: @menu-dark-color;
background: @menu-dark-bg;
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
opacity: .45;
transition: all .3s;
&:after,
&:before {
- background: #fff;
+ background: @menu-dark-arrow-color;
}
}
}
@@ -36,7 +36,7 @@
&-dark &-item,
&-dark &-item-group-title,
&-dark &-item > a {
- color: @text-color-secondary-dark;
+ color: @menu-dark-color;
}
&-dark&-inline,
@@ -70,9 +70,9 @@
&-dark &-submenu-selected,
&-dark &-submenu-title:hover {
background-color: transparent;
- color: #fff;
+ color: @menu-dark-highlight-color;
> a {
- color: #fff;
+ color: @menu-dark-highlight-color;
}
> .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-submenu-title:hover {
@@ -80,7 +80,7 @@
opacity: 1;
&:after,
&:before {
- background: #fff;
+ background: @menu-dark-highlight-color;
}
}
}
@@ -88,19 +88,19 @@
&-dark &-item-selected {
border-right: 0;
- color: #fff;
+ color: @menu-dark-highlight-color;
&:after {
border-right: 0;
}
> a,
> a:hover {
- color: #fff;
+ color: @menu-dark-highlight-color;
}
}
&&-dark &-item-selected,
&-submenu-popup&-dark &-item-selected {
- background-color: @primary-color;
+ background-color: @menu-dark-item-selected-bg;
}
// Disabled state sets text to dark gray and nukes hover/tab effects
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index e4f8a7c9c..5595ddf1b 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -2,8 +2,6 @@
@import "../../style/mixins/index";
@menu-prefix-cls: ~"@{ant-prefix}-menu";
-@menu-inline-toplevel-item-height: 40px;
-@menu-item-height: 40px;
// default theme
.@{menu-prefix-cls} {
@@ -13,7 +11,8 @@
padding-left: 0; // Override default ul/ol
list-style: none;
box-shadow: @box-shadow-base;
- background: @component-background;
+ color: @menu-item-color;
+ background: @menu-bg;
line-height: 0; // Fix display inline-block gap
transition: background .3s, width .2s;
.clearfix;
@@ -30,7 +29,7 @@
}
&-item-group-title {
- color: @text-color-secondary;
+ color: @menu-item-group-title-color;
font-size: @font-size-base;
line-height: @line-height-base;
padding: 8px 16px;
@@ -44,7 +43,7 @@
&-item:active,
&-submenu-title:active {
- background: @item-active-bg;
+ background: @menu-item-active-bg;
}
&-submenu &-sub {
@@ -54,9 +53,9 @@
&-item > a {
display: block;
- color: @text-color;
+ color: @menu-item-color;
&:hover {
- color: @primary-color;
+ color: @menu-highlight-color;
}
&:focus {
text-decoration: none;
@@ -86,7 +85,7 @@
&:not(&-inline) &-submenu-open,
&-submenu-active,
&-submenu-title:hover {
- color: @primary-color;
+ color: @menu-highlight-color;
}
&-horizontal &-item,
@@ -101,15 +100,15 @@
}
&-item-selected {
- color: @primary-color;
+ color: @menu-highlight-color;
> a,
> a:hover {
- color: @primary-color;
+ color: @menu-highlight-color;
}
}
&:not(&-horizontal) &-item-selected {
- background-color: @item-active-bg;
+ background-color: @menu-item-active-bg;
}
&-inline,
@@ -185,7 +184,7 @@
}
> .@{menu-prefix-cls} {
- background-color: @component-background;
+ background-color: @menu-bg;
border-radius: @border-radius-base;
&-submenu-title:after {
transition: transform .3s @ease-in-out;
@@ -208,7 +207,7 @@
position: absolute;
vertical-align: baseline;
background: #fff;
- background-image: linear-gradient(to right, @text-color, @text-color);
+ background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
width: 6px;
height: 1.5px;
border-radius: 2px;
@@ -224,7 +223,7 @@
> .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
&:after,
&:before {
- background: linear-gradient(to right, @primary-color, @primary-color);
+ background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
}
}
}
@@ -254,9 +253,9 @@
&-vertical &-submenu-selected,
&-vertical-left &-submenu-selected,
&-vertical-right &-submenu-selected {
- color: @primary-color;
+ color: @menu-highlight-color;
> a {
- color: @primary-color;
+ color: @menu-highlight-color;
}
}
@@ -277,15 +276,15 @@
&-active,
&-open,
&-selected {
- border-bottom: 2px solid @primary-color;
- color: @primary-color;
+ border-bottom: 2px solid @menu-highlight-color;
+ color: @menu-highlight-color;
}
> a {
display: block;
- color: @text-color;
+ color: @menu-item-color;
&:hover {
- color: @primary-color;
+ color: @menu-highlight-color;
}
}
}
@@ -310,7 +309,7 @@
right: 0;
top: 0;
bottom: 0;
- border-right: 3px solid @primary-color;
+ border-right: 3px solid @menu-highlight-color;
transform: scaleY(.0001);
opacity: 0;
transition: transform .15s @ease-out, opacity .15s @ease-out;
@@ -360,6 +359,10 @@
.@{menu-prefix-cls}-submenu-title {
width: ~"calc(100% + 1px)";
}
+
+ .@{menu-prefix-cls}-submenu-title {
+ padding-right: 34px;
+ }
}
&-inline-collapsed {
diff --git a/components/style/core/base.less b/components/style/core/base.less
index 050480a97..c743c7cd0 100644
--- a/components/style/core/base.less
+++ b/components/style/core/base.less
@@ -9,8 +9,8 @@
// http://stackoverflow.com/a/13611748/3040605
@font-face {
- font-family: "Helvetica Neue For Number";
- src: local("Helvetica Neue");
+ font-family: "Monospaced Number";
+ src: local("Tahoma");
unicode-range: U+30-39;
}
diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less
index 57e36acae..84470a849 100644
--- a/components/style/core/iconfont.less
+++ b/components/style/core/iconfont.less
@@ -327,3 +327,4 @@
.@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; }
.@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; }
.@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; }
+.@{iconfont-css-prefix}-aliyun:before { content: "\e9f4"; }
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 7cccc45ce..b3e4eab5d 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -35,7 +35,7 @@
// Base background color for most components
@component-background : #fff;
@font-family-no-number : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-family : "Helvetica Neue For Number", @font-family-no-number;
+@font-family : "Monospaced Number", @font-family-no-number;
@code-family : Consolas, Menlo, Courier, monospace;
@heading-color : fade(#000, 85%);
@text-color : fade(#000, 65%);
@@ -67,7 +67,7 @@
// ICONFONT
@iconfont-css-prefix : anticon;
-@icon-url : "https://at.alicdn.com/t/font_148784_r2qo40wrmaolayvi";
+@icon-url : "https://at.alicdn.com/t/font_148784_dky7e838xq4obt9";
// LINK
@link-color : @primary-color;
@@ -156,13 +156,17 @@
// Checkbox
@checkbox-size : 16px;
+@checkbox-color : @primary-color;
// Radio
@radio-size : 16px;
+@radio-dot-color : @primary-color;
// Radio buttons
-@radio-button-bg : @btn-default-bg;
-@radio-button-color : @btn-default-color;
+@radio-button-bg : @btn-default-bg;
+@radio-button-color : @btn-default-color;
+@radio-button-hover-color : @primary-5;
+@radio-button-active-color : @primary-7;
// Media queries breakpoints
// Extra small screen / phone
@@ -304,9 +308,21 @@
// Menu
// ---
-@menu-dark-bg: @layout-header-background;
-@menu-dark-submenu-bg: #000c17;
+@menu-inline-toplevel-item-height: 40px;
+@menu-item-height: 40px;
@menu-collapsed-width: 80px;
+@menu-bg: @component-background;
+@menu-item-color: @text-color;
+@menu-highlight-color: @primary-color;
+@menu-item-active-bg: @item-active-bg;
+@menu-item-group-title-color: @text-color-secondary;
+// dark theme
+@menu-dark-color: @text-color-secondary-dark;
+@menu-dark-bg: @layout-header-background;
+@menu-dark-arrow-color: #fff;
+@menu-dark-submenu-bg: #000c17;
+@menu-dark-highlight-color: #fff;
+@menu-dark-item-selected-bg: @primary-color;
// Spin
// ---
@@ -399,3 +415,31 @@
// ---
@pagination-item-size: 32px;
@pagination-item-size-sm: 24px;
+
+// Breadcrumb
+// ---
+@breadcrumb-base-color: @text-color-secondary;
+@breadcrumb-last-item-color: @text-color;
+@breadcrumb-font-size: @font-size-base;
+@breadcrumb-icon-font-size: @font-size-sm;
+@breadcrumb-link-color: @text-color-secondary;
+@breadcrumb-link-color-hover: @primary-5;
+@breadcrumb-separator-color: @text-color-secondary;
+@breadcrumb-separator-margin: 0 @padding-xs;
+
+// Slider
+// ---
+@slider-margin: 14px 6px 10px;
+@slider-rail-background-color: @background-color-base;
+@slider-rail-background-color-hover: #e1e1e1;
+@slider-track-background-color: @primary-3;
+@slider-track-background-color-hover: @primary-4;
+@slider-handle-color: @primary-3;
+@slider-handle-color-hover: @primary-4;
+@slider-handle-color-focus: tint(@primary-color, 20%);
+@slider-handle-color-focus-shadow: tint(@primary-color, 50%);
+@slider-handle-color-tooltip-open: @primary-color;
+@slider-dot-border-color: @border-color-split;
+@slider-dot-border-color-active: tint(@primary-color, 50%);
+@slider-disabled-color: @disabled-color;
+@slider-disabled-background-color: @component-background;
diff --git a/components/style/v2-compatible-reset.js b/components/style/v2-compatible-reset.js
index 8fed6241d..2ced170ad 100644
--- a/components/style/v2-compatible-reset.js
+++ b/components/style/v2-compatible-reset.js
@@ -1 +1 @@
-import './v2-compatible-reset.less';
+import './v2-compatible-reset.less'