diff --git a/components/_util/hasProp.js b/components/_util/hasProp.js
deleted file mode 100644
index 8ceb0fa2c..000000000
--- a/components/_util/hasProp.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default (instance, prop) => {
- const $options = instance.$options || {}
- const propsData = $options.propsData || {}
- return prop in propsData
-}
diff --git a/components/_util/openAnimation.js b/components/_util/openAnimation.js
index 4bde0bbba..00be03f36 100644
--- a/components/_util/openAnimation.js
+++ b/components/_util/openAnimation.js
@@ -44,9 +44,9 @@ const animation = {
leave (node, done) {
return animate(node, false, done)
},
- appear (node, done) {
- return animate(node, true, done)
- },
+ // appear (node, done) {
+ // return animate(node, true, done)
+ // },
}
export default animation
diff --git a/components/align/Align.vue b/components/align/Align.vue
index c85af8120..e02267071 100644
--- a/components/align/Align.vue
+++ b/components/align/Align.vue
@@ -39,8 +39,8 @@ export default {
disabled: PropTypes.bool.def(false),
},
data () {
+ this.aligned = false
return {
- aligned: false,
}
},
mounted () {
@@ -103,7 +103,6 @@ export default {
if (!props.disabled) {
const source = this.$el
this.aligned = true
- // this.$emit('align', source, align(source, props.target(), props.align))
this.$listeners.align && this.$listeners.align(source, align(source, props.target(), props.align))
}
},
diff --git a/components/checkbox/Checkbox.vue b/components/checkbox/Checkbox.vue
index 047e7cc45..20836ba67 100644
--- a/components/checkbox/Checkbox.vue
+++ b/components/checkbox/Checkbox.vue
@@ -1,17 +1,3 @@
-
-
-
diff --git a/components/checkbox/Group.vue b/components/checkbox/Group.vue
index 62de663fe..48950902f 100644
--- a/components/checkbox/Group.vue
+++ b/components/checkbox/Group.vue
@@ -1,11 +1,3 @@
-
-
-
- {{item.label}}
-
-
-
-
diff --git a/components/menu/MenuItem.vue b/components/menu/MenuItem.vue
new file mode 100644
index 000000000..006d9f049
--- /dev/null
+++ b/components/menu/MenuItem.vue
@@ -0,0 +1,40 @@
+
diff --git a/components/menu/index.vue b/components/menu/index.vue
new file mode 100644
index 000000000..0d1e2dde3
--- /dev/null
+++ b/components/menu/index.vue
@@ -0,0 +1,208 @@
+
diff --git a/components/menu/src/MenuItem.vue b/components/menu/src/MenuItem.vue
index 8b7c4d27f..6a4a8be20 100644
--- a/components/menu/src/MenuItem.vue
+++ b/components/menu/src/MenuItem.vue
@@ -3,24 +3,23 @@ import PropTypes from '../../_util/vue-types'
import KeyCode from '../../_util/KeyCode'
import { noop } from './util'
import BaseMixin from '../../_util/BaseMixin'
-
+const props = {
+ rootPrefixCls: PropTypes.string,
+ eventKey: PropTypes.string,
+ active: PropTypes.bool,
+ selectedKeys: PropTypes.array,
+ disabled: PropTypes.bool,
+ title: PropTypes.string,
+ index: PropTypes.number,
+ inlineIndent: PropTypes.number.def(24),
+ level: PropTypes.number.def(1),
+ mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
+ parentMenu: PropTypes.object,
+ clearSubMenuTimers: PropTypes.func.def(noop),
+}
const MenuItem = {
name: 'MenuItem',
-
- props: {
- rootPrefixCls: PropTypes.string,
- eventKey: PropTypes.string,
- active: PropTypes.bool,
- selectedKeys: PropTypes.array,
- disabled: PropTypes.bool,
- title: PropTypes.string,
- index: PropTypes.number,
- inlineIndent: PropTypes.number.def(24),
- level: PropTypes.number.def(1),
- mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
- parentMenu: PropTypes.object,
- clearSubMenuTimers: PropTypes.func.def(noop),
- },
+ props,
inject: {
parentMenuContext: { default: undefined },
},
@@ -162,4 +161,5 @@ const MenuItem = {
}
export default MenuItem
+export { props as menuItemProps }
diff --git a/components/menu/src/SubMenu.vue b/components/menu/src/SubMenu.vue
index 1057c4601..31f81f11e 100644
--- a/components/menu/src/SubMenu.vue
+++ b/components/menu/src/SubMenu.vue
@@ -18,13 +18,11 @@ const popupPlacementMap = {
export default {
name: 'SubMenu',
-
props: {
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
title: PropTypes.any.def(''),
selectedKeys: PropTypes.array.def([]),
openKeys: PropTypes.array.def([]),
- // onClick: PropTypes.func,
openChange: PropTypes.func.def(noop),
rootPrefixCls: PropTypes.string,
eventKey: PropTypes.string,
@@ -32,8 +30,6 @@ export default {
active: PropTypes.bool, // TODO: remove
isRootMenu: PropTypes.bool,
index: PropTypes.number,
- // onItemHover: PropTypes.func,
- // onSelect: PropTypes.func,
triggerSubMenuAction: PropTypes.string,
popupClassName: PropTypes.string,
getPopupContainer: PropTypes.func,
@@ -48,6 +44,7 @@ export default {
},
inject: {
parentMenuContext: { default: undefined },
+ antdMenuTheme: { default: 'light' },
},
mixins: [BaseMixin],
isSubMenu: true,
@@ -324,6 +321,7 @@ export default {
render (h) {
const props = this.$props
+ const { rootPrefixCls, antdMenuTheme } = this
const isOpen = this.isOpen()
const prefixCls = this.getPrefixCls()
const isInlineMode = props.mode === 'inline'
@@ -440,7 +438,7 @@ export default {
{!isInlineMode && (
&-item,
+ &-dark&-horizontal > &-submenu {
+ border-color: @menu-dark-bg;
+ border-bottom: 0;
+ }
+
+ &-dark &-item,
+ &-dark &-item-group-title,
+ &-dark &-item > a {
+ color: @text-color-secondary-dark;
+ }
+
+ &-dark&-inline,
+ &-dark&-vertical,
+ &-dark&-vertical-left,
+ &-dark&-vertical-right {
+ border-right: 0;
+ }
+
+ &-dark&-inline &-item,
+ &-dark&-vertical &-item,
+ &-dark&-vertical-left &-item,
+ &-dark&-vertical-right &-item {
+ border-right: 0;
+ margin-left: 0;
+ left: 0;
+ &:after {
+ border-right: 0;
+ }
+ }
+
+ &-dark&-inline &-item,
+ &-dark&-inline &-submenu-title {
+ width: 100%;
+ }
+
+ &-dark &-item:hover,
+ &-dark &-item-active,
+ &-dark &-submenu-active,
+ &-dark &-submenu-open,
+ &-dark &-submenu-selected,
+ &-dark &-submenu-title:hover {
+ background-color: transparent;
+ color: #fff;
+ > a {
+ color: #fff;
+ }
+ > .@{menu-prefix-cls}-submenu-title,
+ > .@{menu-prefix-cls}-submenu-title:hover {
+ > .@{menu-prefix-cls}-submenu-arrow {
+ opacity: 1;
+ &:after,
+ &:before {
+ background: #fff;
+ }
+ }
+ }
+ }
+
+ &-dark &-item-selected {
+ border-right: 0;
+ color: #fff;
+ &:after {
+ border-right: 0;
+ }
+ > a,
+ > a:hover {
+ color: #fff;
+ }
+ }
+
+ &&-dark &-item-selected,
+ &-submenu-popup&-dark &-item-selected {
+ background-color: @primary-color;
+ }
+
+ // Disabled state sets text to dark gray and nukes hover/tab effects
+ &-dark &-item-disabled,
+ &-dark &-submenu-disabled {
+ &,
+ > a {
+ opacity: 0.8;
+ color: @disabled-color-dark !important;
+ }
+ > .@{menu-prefix-cls}-submenu-title {
+ color: @disabled-color-dark !important;
+ }
+ }
+}
diff --git a/components/menu/style/index.js b/components/menu/style/index.js
index cf31ed80f..581a385b2 100644
--- a/components/menu/style/index.js
+++ b/components/menu/style/index.js
@@ -1,2 +1,5 @@
import '../../style/index.less'
import './index.less'
+
+// style dependencies
+import '../../tooltip/style'
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index 10f0cf3b0..e4f8a7c9c 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -1,64 +1,144 @@
-@menuPrefixCls: rc-menu;
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
-@font-face {
- font-family: 'FontAwesome';
- src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
- src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
- font-weight: normal;
- font-style: normal;
-}
+@menu-prefix-cls: ~"@{ant-prefix}-menu";
+@menu-inline-toplevel-item-height: 40px;
+@menu-item-height: 40px;
-.@{menuPrefixCls} {
+// default theme
+.@{menu-prefix-cls} {
+ .reset-component;
outline: none;
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
- border: 1px solid #d9d9d9;
- box-shadow: 0 0 4px #d9d9d9;
- border-radius: 3px;
- color: #666;
+ box-shadow: @box-shadow-base;
+ background: @component-background;
+ line-height: 0; // Fix display inline-block gap
+ transition: background .3s, width .2s;
+ .clearfix;
+
+ ul,
+ ol {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
&-hidden {
display: none;
}
- &-collapse {
- overflow: hidden;
- &-active {
- overflow: hidden;
- transition: height .3s ease-out;
+ &-item-group-title {
+ color: @text-color-secondary;
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ padding: 8px 16px;
+ transition: all .3s;
+ }
+
+ &-submenu,
+ &-submenu-inline {
+ transition: border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out;
+ }
+
+ &-item:active,
+ &-submenu-title:active {
+ background: @item-active-bg;
+ }
+
+ &-submenu &-sub {
+ cursor: initial;
+ transition: background .3s @ease-in-out, padding .3s @ease-in-out;
+ }
+
+ &-item > a {
+ display: block;
+ color: @text-color;
+ &:hover {
+ color: @primary-color;
+ }
+ &:focus {
+ text-decoration: none;
+ }
+ &:before {
+ position: absolute;
+ background-color: transparent;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ content: '';
}
}
- &-item-group-list {
- margin: 0;
- padding: 0;
- }
-
- &-item-group-title {
- color: #999;
- line-height: 1.5;
- padding: 8px 10px;
- border-bottom: 1px solid #dedede;
+ &-item-divider {
+ height: 1px;
+ overflow: hidden;
+ background-color: @border-color-split;
+ line-height: 0;
}
+ &-item:hover,
&-item-active,
- &-submenu-active > span > &-submenu-title {
- background-color: #eaf8fe;
+ &:not(&-inline) &-submenu-open,
+ &-submenu-active,
+ &-submenu-title:hover {
+ color: @primary-color;
+ }
+
+ &-horizontal &-item,
+ &-horizontal &-submenu {
+ margin-top: -1px;
+ }
+
+ &-horizontal > &-item:hover,
+ &-horizontal > &-item-active,
+ &-horizontal > &-submenu &-submenu-title:hover {
+ background-color: transparent;
}
&-item-selected {
- background-color: #eaf8fe;
- // fix chrome render bug
- transform: translateZ(0);
+ color: @primary-color;
+ > a,
+ > a:hover {
+ color: @primary-color;
+ }
}
- &-submenu-selected {
- background-color: #eaf8fe;
+ &:not(&-horizontal) &-item-selected {
+ background-color: @item-active-bg;
}
- & > li&-submenu {
+ &-inline,
+ &-vertical,
+ &-vertical-left {
+ border-right: @border-width-base @border-style-base @border-color-split;
+ }
+ &-vertical-right {
+ border-left: @border-width-base @border-style-base @border-color-split;
+ }
+
+ &-vertical&-sub,
+ &-vertical-left&-sub,
+ &-vertical-right&-sub {
+ border-right: 0;
padding: 0;
+ transform-origin: 0 0;
+ .@{menu-prefix-cls}-item {
+ border-right: 0;
+ margin-left: 0;
+ left: 0;
+ &:after {
+ border-right: 0;
+ }
+ }
+ > .@{menu-prefix-cls}-item,
+ > .@{menu-prefix-cls}-submenu {
+ transform-origin: 0 0;
+ }
}
&-horizontal&-sub,
@@ -66,67 +146,147 @@
&-vertical-left&-sub,
&-vertical-right&-sub {
min-width: 160px;
- margin-top: 0;
}
- &-item, &-submenu-title {
+ &-item,
+ &-submenu-title {
+ cursor: pointer;
margin: 0;
+ padding: 0 20px;
position: relative;
display: block;
- padding: 7px 7px 7px 16px;
white-space: nowrap;
-
- // Disabled state sets text to gray and nukes hover/tab effects
- &.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled {
- color: #777 !important;
+ transition: color .3s @ease-in-out, border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out;
+ .@{iconfont-css-prefix} {
+ min-width: 14px;
+ margin-right: 10px;
+ transition: font-size .15s @ease-out, margin .3s @ease-in-out;
+ + span {
+ transition: opacity .3s @ease-in-out, width .3s @ease-in-out;
+ opacity: 1;
+ }
}
}
+
& > &-item-divider {
height: 1px;
margin: 1px 0;
overflow: hidden;
padding: 0;
line-height: 0;
- background-color: #e5e5e5;
+ background-color: @border-color-split;
}
&-submenu {
&-popup {
position: absolute;
+ border-radius: @border-radius-base;
+ z-index: @zindex-dropdown;
}
- > .@{menuPrefixCls} {
- background-color: #fff;
+
+ > .@{menu-prefix-cls} {
+ background-color: @component-background;
+ border-radius: @border-radius-base;
+ &-submenu-title:after {
+ transition: transform .3s @ease-in-out;
+ }
+ }
+
+ &-vertical,
+ &-vertical-left,
+ &-vertical-right,
+ &-inline {
+ > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+ transition: transform .3s @ease-in-out;
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ width: 10px;
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ vertical-align: baseline;
+ background: #fff;
+ background-image: linear-gradient(to right, @text-color, @text-color);
+ width: 6px;
+ height: 1.5px;
+ border-radius: 2px;
+ transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
+ }
+ &:before {
+ transform: rotate(45deg) translateY(-2px);
+ }
+ &:after {
+ transform: rotate(-45deg) translateY(2px);
+ }
+ }
+ > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
+ &:after,
+ &:before {
+ background: linear-gradient(to right, @primary-color, @primary-color);
+ }
+ }
+ }
+
+ &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+ &:before {
+ transform: rotate(-45deg) translateX(2px);
+ }
+ &:after {
+ transform: rotate(45deg) translateX(-2px);
+ }
+ }
+
+ &-open {
+ &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+ transform: translateY(-2px);
+ &:after {
+ transform: rotate(-45deg) translateX(-2px);
+ }
+ &:before {
+ transform: rotate(45deg) translateX(2px);
+ }
+ }
}
}
- .@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item {
- .anticon {
- width: 14px;
- height: 14px;
- margin-right: 8px;
- top: -1px;
+ &-vertical &-submenu-selected,
+ &-vertical-left &-submenu-selected,
+ &-vertical-right &-submenu-selected {
+ color: @primary-color;
+ > a {
+ color: @primary-color;
}
}
&-horizontal {
- background-color: #F3F5F7;
- border: none;
- border-bottom: 1px solid transparent;
- border-bottom: 1px solid #d9d9d9;
+ border: 0;
+ border-bottom: @border-width-base @border-style-base @border-color-split;
box-shadow: none;
+ line-height: 46px;
- & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
- padding: 15px 20px;
- }
-
- & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
+ > .@{menu-prefix-cls}-item,
+ > .@{menu-prefix-cls}-submenu {
+ position: relative;
+ top: 1px;
float: left;
border-bottom: 2px solid transparent;
- &-active {
- border-bottom: 2px solid #2db7f5;
- background-color: #F3F5F7;
- color: #2baee9;
+ &:hover,
+ &-active,
+ &-open,
+ &-selected {
+ border-bottom: 2px solid @primary-color;
+ color: @primary-color;
+ }
+
+ > a {
+ display: block;
+ color: @text-color;
+ &:hover {
+ color: @primary-color;
+ }
}
}
@@ -137,169 +297,162 @@
clear: both;
}
}
- &-inline {
- overflow: hidden;
- }
+
&-vertical,
&-vertical-left,
&-vertical-right,
&-inline {
- padding: 12px 0;
- & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
- padding: 12px 8px 12px 24px;
- }
- .@{menuPrefixCls}-submenu-arrow {
- display: inline-block;
- font: normal normal normal 14px/1 FontAwesome;
- font-size: inherit;
- vertical-align: baseline;
- text-align: center;
- text-transform: none;
- text-rendering: auto;
- position: absolute;
- right: 16px;
- line-height: 1.5em;
- &:before {
- content: "\f0da";
+ .@{menu-prefix-cls}-item {
+ position: relative;
+ &:after {
+ content: "";
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 3px solid @primary-color;
+ transform: scaleY(.0001);
+ opacity: 0;
+ transition: transform .15s @ease-out, opacity .15s @ease-out;
}
}
- }
- &-inline {
- .@{menuPrefixCls}-submenu-arrow {
- transform: rotate(90deg);
- transition: transform .3s;
+
+ .@{menu-prefix-cls}-item,
+ .@{menu-prefix-cls}-submenu-title {
+ padding: 0 16px;
+ font-size: @font-size-base;
+ line-height: @menu-item-height;
+ height: @menu-item-height;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
- & .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
- .@{menuPrefixCls}-submenu-arrow {
- transform: rotate(-90deg);
- }
+
+ // disable margin collapsed
+ .@{menu-prefix-cls}-submenu {
+ padding-bottom: 0.01px;
+ }
+
+ .@{menu-prefix-cls}-item:not(:last-child) {
+ margin-bottom: 8px;
+ }
+
+ > .@{menu-prefix-cls}-item,
+ > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+ line-height: @menu-inline-toplevel-item-height;
+ height: @menu-inline-toplevel-item-height;
}
}
- &-vertical&-sub,
- &-vertical-left&-sub,
- &-vertical-right&-sub {
+ &-inline {
+ width: 100%;
+ .@{menu-prefix-cls}-selected,
+ .@{menu-prefix-cls}-item-selected {
+ &:after {
+ transition: transform .15s @ease-in-out, opacity .15s @ease-in-out;
+ opacity: 1;
+ transform: scaleY(1);
+ }
+ }
+
+ .@{menu-prefix-cls}-item,
+ .@{menu-prefix-cls}-submenu-title {
+ width: ~"calc(100% + 1px)";
+ }
+ }
+
+ &-inline-collapsed {
+ width: @menu-collapsed-width;
+ > .@{menu-prefix-cls}-item,
+ > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
+ > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+ left: 0;
+ text-overflow: clip;
+ padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
+ .@{menu-prefix-cls}-submenu-arrow {
+ display: none;
+ }
+ .@{iconfont-css-prefix} {
+ font-size: 16px;
+ line-height: @menu-item-height;
+ margin: 0;
+ + span {
+ max-width: 0;
+ display: inline-block;
+ opacity: 0;
+ }
+ }
+ }
+ &-tooltip {
+ pointer-events: none;
+ .@{iconfont-css-prefix} {
+ display: none;
+ }
+ a {
+ color: @text-color-dark;
+ }
+ }
+
+ .@{menu-prefix-cls}-item-group-title {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+ }
+
+ &-item-group-list {
+ margin: 0;
padding: 0;
+ .@{menu-prefix-cls}-item,
+ .@{menu-prefix-cls}-submenu-title {
+ padding: 0 16px 0 28px;
+ }
+ }
+
+ &-root&-vertical,
+ &-root&-vertical-left,
+ &-root&-vertical-right,
+ &-root&-inline {
+ box-shadow: none;
}
&-sub&-inline {
padding: 0;
- border: none;
- border-radius: 0;
+ border: 0;
box-shadow: none;
+ border-radius: 0;
+ & > .@{menu-prefix-cls}-item,
+ & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+ line-height: @menu-item-height;
+ height: @menu-item-height;
+ list-style-type: disc;
+ list-style-position: inside;
+ }
- & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
- padding-top: 8px;
- padding-bottom: 8px;
- padding-right: 0;
+ & .@{menu-prefix-cls}-item-group-title {
+ padding-left: 32px;
}
}
- .effect() {
- animation-duration: .3s;
- animation-fill-mode: both;
- transform-origin: 0 0;
- }
-
- &-open {
-
- &-slide-up-enter, &-slide-up-appear {
- .effect();
- opacity: 0;
- animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
- animation-play-state: paused;
+ // Disabled state sets text to gray and nukes hover/tab effects
+ &-item-disabled,
+ &-submenu-disabled {
+ color: @disabled-color !important;
+ cursor: not-allowed;
+ background: none;
+ border-color: transparent !important;
+ > a {
+ color: @disabled-color !important;
+ pointer-events: none;
}
-
- &-slide-up-leave {
- .effect();
- opacity: 1;
- animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
- animation-play-state: paused;
- }
-
- &-slide-up-enter-active, &-slide-up-appear-active {
- .effect();
- animation-name: rcMenuOpenSlideUpIn;
- animation-play-state: running;
- }
-
- &-slide-up-leave-active {
- .effect();
- animation-name: rcMenuOpenSlideUpOut;
- animation-play-state: running;
- }
-
- @keyframes rcMenuOpenSlideUpIn {
- 0% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleY(0);
- }
- 100% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleY(1);
- }
- }
-
- @keyframes rcMenuOpenSlideUpOut {
- 0% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleY(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleY(0);
- }
- }
-
- &-zoom-enter, &-zoom-appear {
- opacity: 0;
- .effect();
- animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
- animation-play-state: paused;
- }
-
- &-zoom-leave {
- .effect();
- animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
- animation-play-state: paused;
- }
-
- &-zoom-enter-active, &-zoom-appear-active {
- .effect();
- animation-name: rcMenuOpenZoomIn;
- animation-play-state: running;
- }
-
- &-zoom-leave-active {
- .effect();
- animation-name: rcMenuOpenZoomOut;
- animation-play-state: running;
- }
-
- @keyframes rcMenuOpenZoomIn {
- 0% {
- opacity: 0;
- transform: scale(0, 0);
- }
- 100% {
- opacity: 1;
- transform: scale(1, 1);
- }
- }
-
- @keyframes rcMenuOpenZoomOut {
- 0% {
- transform: scale(1, 1);
- }
- 100% {
- opacity: 0;
- transform: scale(0, 0);
- }
+ > .@{menu-prefix-cls}-submenu-title {
+ color: @disabled-color !important;
+ cursor: not-allowed;
}
}
}
+@import './dark';
diff --git a/components/trigger/Popup.vue b/components/trigger/Popup.vue
index 6471b068d..a7345b58c 100644
--- a/components/trigger/Popup.vue
+++ b/components/trigger/Popup.vue
@@ -24,8 +24,8 @@ export default {
popupClassName: PropTypes.any,
},
data () {
+ this.aligned = false
return {
- aligned: false,
destroyPopup: false,
initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化
}
diff --git a/examples/routes.js b/examples/routes.js
index 70c886a5e..bb1f1c2c6 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
const com = pathnameArr[1] || 'button'
const demo = pathnameArr[2] || 'index'
return {
- component: import(`../components/tooltip/demo/${demo}.vue`),
+ component: import(`../components/checkbox/demo/${demo}.vue`),
}
}
export default [