mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 22 Packages Projects Releases Wiki Activity

add back dark theme style

Browse Source
This commit is contained in:
afc163 2015-11-14 17:29:48 +08:00
parent bb814ac0f0
commit 1124f746f7
2 changed files with 99 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/menu/demo/horizontal.md
View File

@ -7,7 +7,7 @@
---
````jsx
import { Menu, Icon } from 'antd';
import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu;
const App = React.createClass({
@ -23,23 +23,28 @@ const App = React.createClass({
});
},
render() {
return <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
<Menu.Item key="mail">
<Icon type="mail" />导航一
</Menu.Item>
<Menu.Item key="app">
<Icon type="appstore" />导航二
</Menu.Item>
<SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
<Menu.Item key="setting:1">选项1</Menu.Item>
<Menu.Item key="setting:2">选项2</Menu.Item>
<Menu.Item key="setting:3">选项3</Menu.Item>
<Menu.Item key="setting:4">选项4</Menu.Item>
</SubMenu>
<Menu.Item key="alipay">
<a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
</Menu.Item>
</Menu>;
return (
<Menu onClick={this.handleClick}
selectedKeys={[this.state.current]}
theme={this.state.theme}
mode="horizontal">
<Menu.Item key="mail">
<Icon type="mail" />导航一
</Menu.Item>
<Menu.Item key="app">
<Icon type="appstore" />导航二
</Menu.Item>
<SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
<Menu.Item key="setting:1">选项1</Menu.Item>
<Menu.Item key="setting:2">选项2</Menu.Item>
<Menu.Item key="setting:3">选项3</Menu.Item>
<Menu.Item key="setting:4">选项4</Menu.Item>
</SubMenu>
<Menu.Item key="alipay">
<a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
</Menu.Item>
</Menu>
);
}
});

106
style/components/menu.less
View File

@ -10,6 +10,7 @@
box-shadow: @overlay-shadow;
color: @text-color;
background: #fff;
line-height: 50px;
&-hidden {
display: none;
@ -148,12 +149,12 @@
}
}
.@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-item {
&-item,
&-submenu-title {
.anticon {
width: 14px;
margin-right: 8px;
top: 1px;
color: #999;
}
}
@ -164,15 +165,21 @@
padding-left: 20px;
z-index: 0;
& > .@{menu-prefix-cls}-item,
& > .@{menu-prefix-cls}-submenu {
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
padding: 0 20px;
line-height: 50px;
position: relative;
top: 1px;
> a , > span{
line-height: 51px;
float: left;
border-bottom: 2px solid transparent;
margin-right: 20px;
&-active,
&-selected {
border-bottom: 2px solid @primary-color;
color: @primary-color;
}
> a {
display: block;
color: @text-color;
@ -183,7 +190,7 @@
position: absolute;
background-color: transparent;
width: 20px;
height: 50px;
height: 100%;
content: '';
}
&:before {
@ -192,21 +199,6 @@
}
}
& > .@{menu-prefix-cls}-submenu, & > .@{menu-prefix-cls}-item {
float: left;
border-bottom: 2px solid transparent;
margin-right: 20px;
&-active,
&-selected {
border-bottom: 2px solid @primary-color;
color: @primary-color;
.anticon {
color: @primary-color;
}
}
}
&:after {
content: "\20";
display: block;
@ -243,18 +235,72 @@
box-shadow: none;
border-radius: 0;
& > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
line-height: 34px;
height: 34px;
line-height: 42px;
height: 42px;
list-style-type: disc;
list-style-position: inside;
}
}
}
.@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-item {
.anticon {
width: 14px;
margin-right: 8px;
top: 1px;
// dark theme
.@{menu-prefix-cls} {
&-dark,
&-dark &-sub {
color: #999;
background: #404040;
}
&-dark &-inline&-sub {
background: #333;
}
&-dark&-horizontal {
border-bottom-color: #404040;
}
&-dark&-horizontal > &-item,
&-dark&-horizontal > &-submenu {
border-bottom: 2px solid transparent;
top: 0;
}
&-dark&-horizontal > &-item-active,
&-dark&-horizontal > &-item-selected,
&-dark&-horizontal > &-submenu:hover,
&-dark&-horizontal > &-submenu &-submenu-title:hover {
color: #fff;
}
&-dark &-item > a {
color: #999;
&:hover {
color: #fff;
}
}
&-dark&-inline,
&-dark&-vertical {
border-right: 0;
}
&-dark&-inline &-item,
&-dark&-vertical &-item {
border-right: 0;
margin-left: 0;
left: 0;
}
&-dark&-inline &-item-selected {
border-right: 0;
background-color: @primary-color;
color: #fff;
}
&-dark &-item-active,
&-dark &-submenu-title:hover {
background-color: transparent;
color: @primary-color;
}
}