From 776885436305a23197ce941cf080fc99f6b4850e Mon Sep 17 00:00:00 2001 From: "yuntao.qyt" Date: Thu, 5 Nov 2015 19:26:53 +0800 Subject: [PATCH 1/5] menu style --- style/components/menu.less | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/style/components/menu.less b/style/components/menu.less index 87ed3ff75..531cb9518 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -6,7 +6,7 @@ padding-left: 0; // Override default ul/ol list-style: none; z-index: 999; - border: 1px solid #d9d9d9; + // border: 1px solid #d9d9d9; box-shadow: @overlay-shadow; border-radius: @border-radius-base; color: @text-color; @@ -57,6 +57,17 @@ transition: all 0.3s ease; } + &-vertical, + &-inline { + border-right: 1px solid #d9d9d9; + + .ant-menu-item-selected, + .ant-menu-item-active { + border-right: 2px solid @primary-color; + margin-left: -1px; + } + } + &-submenu-horizontal > .@{menu-prefix-cls} { top: 100%; left: 0; @@ -251,7 +262,6 @@ border: none; border-radius: 0; box-shadow: none; - overflow: hidden; & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { line-height: 34px; height: 34px; From 9a3cfc096f468d6c0deb44557e73bed716e9eda0 Mon Sep 17 00:00:00 2001 From: "yuntao.qyt" Date: Thu, 12 Nov 2015 14:57:54 +0800 Subject: [PATCH 2/5] theme dark --- components/menu/demo/sider-current.md | 2 +- components/menu/demo/sider.md | 2 +- components/menu/demo/vertical.md | 2 +- components/menu/index.jsx | 11 +- style/components/menu.less | 256 +++++++++++++++++++++++++- 5 files changed, 263 insertions(+), 10 deletions(-) diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index 598e9c846..72ed4dbc5 100644 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -30,7 +30,7 @@ var Sider = React.createClass({ }); }, render() { - return +ReactDOM.render( 导航一}> 选项1 选项2 diff --git a/components/menu/index.jsx b/components/menu/index.jsx index 68852e757..2783ae3ef 100644 --- a/components/menu/index.jsx +++ b/components/menu/index.jsx @@ -38,6 +38,10 @@ const AntMenu = React.createClass({ this.props.onClose(); }, render() { + this.theme = ''; + if (this.props.theme) { + this.theme = this.props.theme; + } let openAnimation = ''; switch (this.props.mode) { case 'horizontal': @@ -51,14 +55,19 @@ const AntMenu = React.createClass({ break; default: } + let props = { openKeys: this.state.openKeys, onClick: this.handleClick, onOpen: this.handleOpenKeys, onClose: this.handleCloseKeys, + className: this.theme, }; if (this.props.mode === 'inline') { - return ; + props = { + className: this.theme, + }; + return ; } else { return ; } diff --git a/style/components/menu.less b/style/components/menu.less index 00f3fbfe4..ffa706b59 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -1,12 +1,12 @@ @menu-prefix-cls: ~"@{css-prefix}menu"; +// default theme .@{menu-prefix-cls} { outline: none; margin-bottom: 0; padding-left: 0; // Override default ul/ol list-style: none; z-index: 999; - // border: 1px solid #d9d9d9; box-shadow: @overlay-shadow; border-radius: @border-radius-base; color: @text-color; @@ -58,12 +58,19 @@ &-vertical, &-inline { - border-right: 1px solid #d9d9d9; + border-right: 1px solid #e9e9e9; - .ant-menu-item-selected, - .ant-menu-item-active { - border-right: 2px solid @primary-color; + .@{menu-prefix-cls}-item { + border-right: 2px solid transparent; margin-left: -1px; + left: 1px; + position: relative; + z-index: 1; + } + + .@{menu-prefix-cls}-selected, + .@{menu-prefix-cls}-item-active { + border-right: 2px solid @primary-color; } } @@ -219,7 +226,6 @@ } &-vertical, &-inline { - padding: 12px 0; & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { padding: 0 24px; font-size: 12px; @@ -280,3 +286,241 @@ top: -1px; } } + + +// dark theme +.dark.@{menu-prefix-cls} { + color: rgba(255, 255, 255, 0.45); + background: #404040; + + .@{menu-prefix-cls}-item-group-title { + color: #999; + border-bottom: 1px solid #dedede; + } + + .@{menu-prefix-cls}-inline > .@{menu-prefix-cls}-item-active, + .@{menu-prefix-cls}-submenu-inline.@{menu-prefix-cls}-submenu-active, + .@{menu-prefix-cls}-submenu-inline&-submenu-active > .@{menu-prefix-cls}-submenu-title:hover { + background-color: #3F3F3F; + } + + .@{menu-prefix-cls}-inline > .@{menu-prefix-cls}-item-active:hover, + .@{menu-prefix-cls}-item-active, + .@{menu-prefix-cls}-submenu-active, + .@{menu-prefix-cls}-submenu-inline.@{menu-prefix-cls}-submenu-active > .@{menu-prefix-cls}-submenu-title:hover { + background-color: #2DB7F5; + color: #FFF; + + .anticon { + color: #FFF; + } + } + + &-item, &-submenu-title { + margin: 0; + position: relative; + display: block; + white-space: nowrap; + + // Disabled state sets text to gray and nukes hover/tab effects + &.@{menu-prefix-cls}-item-disabled, &.@{menu-prefix-cls}-submenu-disabled { + color: #999 !important; + } + } + .@{menu-prefix-cls} > .@{menu-prefix-cls}-item-divider { + height: 1px; + margin: 1px 0; + overflow: hidden; + padding: 0; + line-height: 0; + background-color: #e5e5e5; + } + + &-submenu { + position: relative; + + > .@{menu-prefix-cls} { + background-color: #fff; + } + + &-vertical > .@{menu-prefix-cls}-submenu-title:after { + font-family: "anticon" !important; + font-style: normal; + vertical-align: baseline; + text-align: center; + text-transform: none; + text-rendering: auto; + position: absolute; + transition: transform .3s ease; + content: "\e600"; + right: 16px; + .ie-rotate(3); + transform: rotate(270deg) scale(0.75); + } + + &-inline > .@{menu-prefix-cls}-submenu-title:after { + font-family: "anticon" !important; + font-style: normal; + vertical-align: baseline; + text-align: center; + text-transform: none; + text-rendering: auto; + position: absolute; + transition: transform .3s ease; + content: "\e600"; + right: 16px; + top: 0; + .iconfont-size-under-12px(8px); + } + + &-open { + &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after { + .ie-rotate(1); + transform: rotate(180deg) scale(0.75); + } + } + } + + .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-item { + .anticon { + width: 14px; + margin-right: 8px; + top: -1px; + color: #999; + } + } + + &-horizontal { + background-color: #FBFBFB; + border: none; + border-bottom: 1px solid #d9d9d9; + box-shadow: none; + border-radius: 0; + padding-left: 24px; + z-index: 0; + + & > .@{menu-prefix-cls}-item, + & > .@{menu-prefix-cls}-submenu { + padding: 0 20px; + line-height: 50px; + position: relative; + top: 1px; + > a , > span{ + line-height: 51px; + } + > a { + display: block; + color: @text-color; + &:hover { + color: @primary-color; + } + &:before, &:after { + position: absolute; + background-color: rgba(255, 255, 255, 0.001); + width: 20px; + height: 50px; + content: ''; + } + &:before { + left: 0; + } + } + } + + & > .@{menu-prefix-cls}-submenu, & > .@{menu-prefix-cls}-item { + float: left; + border-bottom: 2px solid transparent; + margin-right: 24px; + + &-active, + &-selected { + border-bottom: 2px solid #2DB7F5; + background-color: #2DB7F5; + color: @primary-color; + .anticon { + color: @primary-color; + } + } + } + + &:after { + content: "\20"; + display: block; + height: 0; + clear: both; + } + } + + .@{menu-prefix-cls}-vertical, + .@{menu-prefix-cls}-inline { + .@{menu-prefix-cls}-submenu { + background: #404040; + } + } + + .@{menu-prefix-cls}-vertical, + .@{menu-prefix-cls}-inline { + .@{menu-prefix-cls}-item, + .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { + background-color: #333333; + color: rgba(255, 255, 255, 0.45); + } + } + + + .@{menu-prefix-cls}-vertical, + .@{menu-prefix-cls}-inline { + border-right: 1px solid #3F3F3F; + + .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected, + .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active { + border-right: 2px solid #2DB7F5; + background-color: #2DB7F5; + color: #FFF; + } + } + + &-vertical, &-horizontal { + .@{menu-prefix-cls}-submenu { + .@{menu-prefix-cls}-item:first-child { + border-radius: @border-radius-base @border-radius-base 0 0; + } + .@{menu-prefix-cls}-item:last-child { + border-radius: 0 0 @border-radius-base @border-radius-base; + } + &:first-child { + border-radius: @border-radius-base @border-radius-base 0 0; + } + &:last-child { + border-radius: 0 0 @border-radius-base @border-radius-base; + } + } + } + + &-vertical&-sub { + padding: 0; + transform-origin: 0 0; + & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu { + transform-origin: 0 0; + } + } + + &-root&-vertical, + &-root&-inline { + border-radius: 0; + box-shadow: none; + } + + &-sub&-inline { + padding: 0; + border: none; + border-radius: 0; + box-shadow: none; + & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { + line-height: 34px; + height: 34px; + list-style-type: disc; + list-style-position: inside; + } + } +} From 29f07d0972b2be27919ca2b2f5f1971b062116de Mon Sep 17 00:00:00 2001 From: "yuntao.qyt" Date: Thu, 12 Nov 2015 23:09:35 +0800 Subject: [PATCH 3/5] border && theme dark --- components/menu/demo/sider-current.md | 2 +- style/components/menu.less | 90 +++++++++++---------------- 2 files changed, 38 insertions(+), 54 deletions(-) diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index 72ed4dbc5..598e9c846 100644 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -30,7 +30,7 @@ var Sider = React.createClass({ }); }, render() { - return li&-submenu { cursor: pointer; transition: all 0.3s ease; @@ -72,6 +66,12 @@ .@{menu-prefix-cls}-item-active { border-right: 2px solid @primary-color; } + + .@{menu-prefix-cls}-item-selected { + background-color: tint(@primary-color, 90%); + color: @primary-color; + border-right: 2px solid #2db7f5; + } } &-submenu-horizontal > .@{menu-prefix-cls} { @@ -169,7 +169,6 @@ border: none; border-bottom: 1px solid #d9d9d9; box-shadow: none; - border-radius: 0; padding-left: 24px; z-index: 0; @@ -234,23 +233,6 @@ } } - &-vertical, &-horizontal { - .@{menu-prefix-cls}-submenu { - .@{menu-prefix-cls}-item:first-child { - border-radius: @border-radius-base @border-radius-base 0 0; - } - .@{menu-prefix-cls}-item:last-child { - border-radius: 0 0 @border-radius-base @border-radius-base; - } - &:first-child { - border-radius: @border-radius-base @border-radius-base 0 0; - } - &:last-child { - border-radius: 0 0 @border-radius-base @border-radius-base; - } - } - } - &-vertical&-sub { padding: 0; transform-origin: 0 0; @@ -261,14 +243,12 @@ &-root&-vertical, &-root&-inline { - border-radius: 0; box-shadow: none; } &-sub&-inline { padding: 0; border: none; - border-radius: 0; box-shadow: none; & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { line-height: 34px; @@ -316,6 +296,13 @@ } } + .@{menu-prefix-cls}-submenu-vertical:hover { + color: #FFF; + .anticon { + color: #FFF; + } + } + &-item, &-submenu-title { margin: 0; position: relative; @@ -395,7 +382,6 @@ border: none; border-bottom: 1px solid #d9d9d9; box-shadow: none; - border-radius: 0; padding-left: 24px; z-index: 0; @@ -456,65 +442,63 @@ .@{menu-prefix-cls}-submenu { background: #404040; } + .@{menu-prefix-cls}-submenu.@{menu-prefix-cls}-submenu-active { + background: #2DB7F5; + color: #FFF; + } } + + .@{menu-prefix-cls}-vertical, .@{menu-prefix-cls}-inline { .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { - background-color: #333333; color: rgba(255, 255, 255, 0.45); } + .@{menu-prefix-cls}-item { + background-color: #333333; + } } .@{menu-prefix-cls}-vertical, .@{menu-prefix-cls}-inline { - border-right: 1px solid #3F3F3F; + border-right: 0px solid #3F3F3F; .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected, .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active { - border-right: 2px solid #2DB7F5; + border-right: 0px solid #2DB7F5; background-color: #2DB7F5; color: #FFF; } } - &-vertical, &-horizontal { - .@{menu-prefix-cls}-submenu { - .@{menu-prefix-cls}-item:first-child { - border-radius: @border-radius-base @border-radius-base 0 0; - } - .@{menu-prefix-cls}-item:last-child { - border-radius: 0 0 @border-radius-base @border-radius-base; - } - &:first-child { - border-radius: @border-radius-base @border-radius-base 0 0; - } - &:last-child { - border-radius: 0 0 @border-radius-base @border-radius-base; - } - } - } + // ddd + .@{menu-prefix-cls}-vertical, + .@{menu-prefix-cls}-inline { + border-right: 0px; - &-vertical&-sub { - padding: 0; - transform-origin: 0 0; - & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu { - transform-origin: 0 0; + .@{menu-prefix-cls}-item { + border-right: 0px solid transparent; + margin-left: 0px; + left: 0px; + } + + .@{menu-prefix-cls}-selected, + .@{menu-prefix-cls}-item-active { + border-right: 0px solid @primary-color; } } &-root&-vertical, &-root&-inline { - border-radius: 0; box-shadow: none; } &-sub&-inline { padding: 0; border: none; - border-radius: 0; box-shadow: none; & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { line-height: 34px; From 358ce21266ad3d8224692c207b29735a87a08f76 Mon Sep 17 00:00:00 2001 From: "yuntao.qyt" Date: Fri, 13 Nov 2015 21:09:21 +0800 Subject: [PATCH 4/5] menu theme dark --- components/menu/demo/sider.md | 2 +- components/menu/demo/vertical.md | 2 +- components/menu/index.md | 1 + style/components/menu.less | 215 +++++++------------------------ 4 files changed, 50 insertions(+), 170 deletions(-) diff --git a/components/menu/demo/sider.md b/components/menu/demo/sider.md index f69cd1e0b..8623a200e 100644 --- a/components/menu/demo/sider.md +++ b/components/menu/demo/sider.md @@ -23,7 +23,7 @@ var Sider = React.createClass({ }); }, render() { - return +ReactDOM.render( 导航一}> 选项1 选项2 diff --git a/components/menu/index.md b/components/menu/index.md index 826adea09..f48463f04 100644 --- a/components/menu/index.md +++ b/components/menu/index.md @@ -28,6 +28,7 @@ | 参数 | 说明 | 类型 | 默认值 | |----------|----------------|----------|--------------| +| theme | 主题颜色 | enum: 'dark' | 默认为空 | | mode | 菜单类型 | enum: 'vertical', 'horizontal', 'inline' | vertical | | selectedKeys | 当前选中的菜单项 key 数组 | | | | defaultSelectedKeys | 初始选中的菜单项 key 数组 | | | diff --git a/style/components/menu.less b/style/components/menu.less index 9a44bca94..3d84d42aa 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -165,11 +165,10 @@ } &-horizontal { - background-color: #FBFBFB; border: none; border-bottom: 1px solid #d9d9d9; box-shadow: none; - padding-left: 24px; + padding-left: 20px; z-index: 0; & > .@{menu-prefix-cls}-item, @@ -203,12 +202,12 @@ & > .@{menu-prefix-cls}-submenu, & > .@{menu-prefix-cls}-item { float: left; border-bottom: 2px solid transparent; - margin-right: 24px; + margin-right: 20px; &-active, &-selected { border-bottom: 2px solid @primary-color; - background-color: #FBFBFB; + background-color: #FFF; color: @primary-color; .anticon { color: @primary-color; @@ -226,7 +225,7 @@ &-vertical, &-inline { & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { - padding: 0 24px; + padding: 0 20px; font-size: 12px; line-height: 42px; height: 42px; @@ -273,22 +272,11 @@ color: rgba(255, 255, 255, 0.45); background: #404040; - .@{menu-prefix-cls}-item-group-title { - color: #999; - border-bottom: 1px solid #dedede; - } - - .@{menu-prefix-cls}-inline > .@{menu-prefix-cls}-item-active, - .@{menu-prefix-cls}-submenu-inline.@{menu-prefix-cls}-submenu-active, - .@{menu-prefix-cls}-submenu-inline&-submenu-active > .@{menu-prefix-cls}-submenu-title:hover { - background-color: #3F3F3F; - } - - .@{menu-prefix-cls}-inline > .@{menu-prefix-cls}-item-active:hover, .@{menu-prefix-cls}-item-active, - .@{menu-prefix-cls}-submenu-active, + .@{menu-prefix-cls}-submenu .@{menu-prefix-cls}-submenu-active, + .@{menu-prefix-cls}-submenu-vertical.@{menu-prefix-cls}-submenu-active > .@{menu-prefix-cls}-submenu-title:hover, .@{menu-prefix-cls}-submenu-inline.@{menu-prefix-cls}-submenu-active > .@{menu-prefix-cls}-submenu-title:hover { - background-color: #2DB7F5; + background: #404040; color: #FFF; .anticon { @@ -296,160 +284,69 @@ } } - .@{menu-prefix-cls}-submenu-vertical:hover { - color: #FFF; - .anticon { - color: #FFF; - } - } - - &-item, &-submenu-title { - margin: 0; - position: relative; - display: block; - white-space: nowrap; - - // Disabled state sets text to gray and nukes hover/tab effects - &.@{menu-prefix-cls}-item-disabled, &.@{menu-prefix-cls}-submenu-disabled { - color: #999 !important; - } - } - .@{menu-prefix-cls} > .@{menu-prefix-cls}-item-divider { - height: 1px; - margin: 1px 0; - overflow: hidden; - padding: 0; - line-height: 0; - background-color: #e5e5e5; - } - - &-submenu { - position: relative; - - > .@{menu-prefix-cls} { - background-color: #fff; - } - - &-vertical > .@{menu-prefix-cls}-submenu-title:after { - font-family: "anticon" !important; - font-style: normal; - vertical-align: baseline; - text-align: center; - text-transform: none; - text-rendering: auto; - position: absolute; - transition: transform .3s ease; - content: "\e600"; - right: 16px; - .ie-rotate(3); - transform: rotate(270deg) scale(0.75); - } - - &-inline > .@{menu-prefix-cls}-submenu-title:after { - font-family: "anticon" !important; - font-style: normal; - vertical-align: baseline; - text-align: center; - text-transform: none; - text-rendering: auto; - position: absolute; - transition: transform .3s ease; - content: "\e600"; - right: 16px; - top: 0; - .iconfont-size-under-12px(8px); - } - - &-open { - &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after { - .ie-rotate(1); - transform: rotate(180deg) scale(0.75); - } - } - } - - .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-item { - .anticon { - width: 14px; - margin-right: 8px; - top: -1px; - color: #999; - } + .@{menu-prefix-cls}-submenu { + background: #404040; } &-horizontal { - background-color: #FBFBFB; + background-color: #404040; border: none; border-bottom: 1px solid #d9d9d9; box-shadow: none; - padding-left: 24px; + padding-left: 20px; z-index: 0; + color: rgba(255, 255, 255, 0.45); + + .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected, + .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active { + border-bottom: 0px; + background-color: #404040; + color: #FFF; + + .anticon { + color: rgba(255, 255, 255, 1); + } + } + + .@{menu-prefix-cls}-vertical { + .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected, + .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active { + background-color: #2DB7F5; + color: #FFF; + } + } + + .@{menu-prefix-cls}-submenu-active { + border: 0; + color: #FFF; + + .anticon { + color: rgba(255, 255, 255, 1); + } + } & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu { - padding: 0 20px; - line-height: 50px; - position: relative; - top: 1px; + border-bottom: 0px; + top: 0px; > a , > span{ line-height: 51px; } > a { - display: block; - color: @text-color; + color: rgba(255, 255, 255, 0.45); &:hover { - color: @primary-color; + color: rgba(255, 255, 255, 1); } &:before, &:after { - position: absolute; background-color: rgba(255, 255, 255, 0.001); - width: 20px; - height: 50px; - content: ''; } &:before { left: 0; } } } - - & > .@{menu-prefix-cls}-submenu, & > .@{menu-prefix-cls}-item { - float: left; - border-bottom: 2px solid transparent; - margin-right: 24px; - - &-active, - &-selected { - border-bottom: 2px solid #2DB7F5; - background-color: #2DB7F5; - color: @primary-color; - .anticon { - color: @primary-color; - } - } - } - - &:after { - content: "\20"; - display: block; - height: 0; - clear: both; - } } - .@{menu-prefix-cls}-vertical, - .@{menu-prefix-cls}-inline { - .@{menu-prefix-cls}-submenu { - background: #404040; - } - .@{menu-prefix-cls}-submenu.@{menu-prefix-cls}-submenu-active { - background: #2DB7F5; - color: #FFF; - } - } - - - .@{menu-prefix-cls}-vertical, .@{menu-prefix-cls}-inline { .@{menu-prefix-cls}-item, @@ -462,8 +359,8 @@ } - .@{menu-prefix-cls}-vertical, - .@{menu-prefix-cls}-inline { + &-vertical, + &-inline { border-right: 0px solid #3F3F3F; .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected, @@ -474,7 +371,6 @@ } } - // ddd .@{menu-prefix-cls}-vertical, .@{menu-prefix-cls}-inline { border-right: 0px; @@ -487,24 +383,7 @@ .@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-item-active { - border-right: 0px solid @primary-color; - } - } - - &-root&-vertical, - &-root&-inline { - box-shadow: none; - } - - &-sub&-inline { - padding: 0; - border: none; - box-shadow: none; - & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { - line-height: 34px; - height: 34px; - list-style-type: disc; - list-style-position: inside; + border-right: 0px; } } } From e11eda14354283616226ba6e2b76833a2bf2dd06 Mon Sep 17 00:00:00 2001 From: "yuntao.qyt" Date: Fri, 13 Nov 2015 22:16:40 +0800 Subject: [PATCH 5/5] delete color rgba --- style/components/menu.less | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/style/components/menu.less b/style/components/menu.less index 3d84d42aa..615f125fa 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -188,7 +188,7 @@ } &:before, &:after { position: absolute; - background-color: rgba(255, 255, 255, 0.001); + background-color: transparent; width: 20px; height: 50px; content: ''; @@ -269,7 +269,7 @@ // dark theme .dark.@{menu-prefix-cls} { - color: rgba(255, 255, 255, 0.45); + color: #8c8c8c; background: #404040; .@{menu-prefix-cls}-item-active, @@ -295,7 +295,7 @@ box-shadow: none; padding-left: 20px; z-index: 0; - color: rgba(255, 255, 255, 0.45); + color: #8c8c8c; .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected, .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active { @@ -304,7 +304,7 @@ color: #FFF; .anticon { - color: rgba(255, 255, 255, 1); + color: #FFF; } } @@ -321,7 +321,7 @@ color: #FFF; .anticon { - color: rgba(255, 255, 255, 1); + color: #FFF; } } @@ -333,12 +333,12 @@ line-height: 51px; } > a { - color: rgba(255, 255, 255, 0.45); + color: #8c8c8c; &:hover { - color: rgba(255, 255, 255, 1); + color: #FFF; } &:before, &:after { - background-color: rgba(255, 255, 255, 0.001); + background-color: transparent; } &:before { left: 0; @@ -351,7 +351,7 @@ .@{menu-prefix-cls}-inline { .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { - color: rgba(255, 255, 255, 0.45); + color: #8c8c8c; } .@{menu-prefix-cls}-item { background-color: #333333;