diff --git a/site/static/style.css b/site/static/style.css index 0ce34e40ae..2732828bcf 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -2010,7 +2010,7 @@ a.entry-link:hover .anticon-smile { padding: 0; border-radius: 5px; border: 1px solid #ccc; - background-color: white; + background-color: #fff; line-height: 1; } @@ -2091,10 +2091,11 @@ a.entry-link:hover .anticon-smile { .window-frame .window-content { padding: 0; line-height: 1.5; - overflow: hidden; - height: 400px; + overflow: auto; + height: 440px; position: relative; border-radius: 0 0 5px 5px; + background: #f4f4f4; } .window-frame .status-bar { height: 2rem; diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md index b328758a86..cca50b6eef 100644 --- a/spec/layout/demo/aside.md +++ b/spec/layout/demo/aside.md @@ -7,25 +7,48 @@ --- ````jsx -import { Menu, Breadcrumb } from 'antd'; +import { Menu, Breadcrumb, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; ReactDOM.render(
+
+ + 首页 + 应用列表 + 某应用 + +
-
- - 首页 - 应用列表 - 某应用 - -
-
+
@@ -36,15 +59,29 @@ ReactDOM.render( ````css .ant-layout-aside { - background: #f4f4f4; - height: 100%; + position: relative; + min-height: 100%; + overflow: hidden; +} + +.ant-layout-aside .ant-layout-logo { + width: 150px; + height: 32px; + background: #333; + border-radius: 6px; + margin: 16px 24px 16px 28px; } .ant-layout-aside .ant-layout-sider { width: 224px; - height: 100%; + background: #404040; position: absolute; - background: #373737; + padding-bottom: 24px; + min-height: 100%; +} + +.ant-layout-aside .ant-layout-sider > .ant-menu { + margin-bottom: 20px; } .ant-layout-aside .ant-layout-header { @@ -54,16 +91,20 @@ ReactDOM.render( } .ant-layout-aside .ant-layout-breadcrumb { - margin-top: 7px; - margin-bottom: -17px; + margin: 7px 0 -17px 24px; +} + +.ant-layout-aside .ant-layout-main { + margin-left: 224px; + margin-bottom: 24px; } .ant-layout-aside .ant-layout-container { - margin: 0 16px 16px 240px; + margin: 24px 16px; } .ant-layout-aside .ant-layout-content { background: #fff; - margin-top: 24px; + padding: 24px; } ```` diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md index 996f6b0876..2eb155ea41 100644 --- a/spec/layout/demo/top-aside.md +++ b/spec/layout/demo/top-aside.md @@ -7,14 +7,34 @@ --- ````jsx -import { Menu, Breadcrumb } from 'antd'; +import { Menu, Breadcrumb, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; ReactDOM.render(
-
-
-
+
+
+
+ + 导航一 + 导航二 + 导航三 + +
+
+
+
+ + 二级导航 + 二级导航 + 二级导航 + +
+
+
首页 @@ -24,6 +44,26 @@ ReactDOM.render(
@@ -37,44 +77,52 @@ ReactDOM.render( ````css .ant-layout-topaside { - background: #f4f4f4; height: 100%; } +.ant-layout-topaside .ant-layout-wrapper { + padding: 0 50px; +} + .ant-layout-topaside .ant-layout-header { - background: #373737; + background: #404040; height: 64px; } +.ant-layout-topaside .ant-layout-logo { + width: 120px; + height: 32px; + background: #333; + border-radius: 6px; + margin: 16px 28px 16px 0; + float: left; +} + .ant-layout-topaside .ant-layout-subheader { height: 48px; - border-bottom: 1px solid #e9e9e9; + border-bottom: 1px solid #d9d9d9; background: #fff; } .ant-layout-topaside .ant-layout-breadcrumb { - margin-top: 7px; - margin-bottom: -17px; -} - -.ant-layout-topaside .ant-layout-main { - padding: 0 50px; + margin: 7px 0 -17px 24px; } .ant-layout-topaside .ant-layout-container { background: #fff; - margin-top: 24px; + margin: 24px 0; position: relative; + padding: 24px 0; + overflow: hidden; } .ant-layout-topaside .ant-layout-sider { width: 224px; - height: 100%; - position: absolute; + float: left; } .ant-layout-topaside .ant-layout-content { - border-left: 1px solid #e9e9e9; - margin-left: 224px; + border-left: 1px solid #d9d9d9; + margin-left: 223px; } ```` diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md index fdfe1f9401..7468993b0a 100644 --- a/spec/layout/demo/top.md +++ b/spec/layout/demo/top.md @@ -14,9 +14,28 @@ import { Menu, Breadcrumb } from 'antd'; ReactDOM.render(
-
-
-
+
+
+
+ + 导航一 + 导航二 + 导航三 + +
+
+
+
+ + 二级导航 + 二级导航 + 二级导航 + +
+
+
首页 @@ -35,32 +54,42 @@ ReactDOM.render( ````css .ant-layout-top { - background: #f4f4f4; height: 100%; } +.ant-layout-top .ant-layout-wrapper { + padding: 0 50px; +} + .ant-layout-top .ant-layout-header { - background: #373737; + background: #404040; height: 64px; } +.ant-layout-top .ant-layout-logo { + width: 120px; + height: 32px; + background: #333; + border-radius: 6px; + margin: 16px 28px 16px 0; + float: left; +} + .ant-layout-top .ant-layout-subheader { height: 48px; - border-bottom: 1px solid #e9e9e9; + border-bottom: 1px solid #d9d9d9; background: #fff; } .ant-layout-top .ant-layout-breadcrumb { - margin-top: 7px; - margin-bottom: -17px; -} - -.ant-layout-top .ant-layout-main { - padding: 0 50px; + margin: 7px 0 -17px 24px; } .ant-layout-top .ant-layout-container { background: #fff; - margin-top: 24px; + margin: 24px 0; + position: relative; + padding-top: 24px; + overflow: hidden; } ```` diff --git a/style/components/menu.less b/style/components/menu.less index 26557cf4d8..c9c937cb72 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -10,7 +10,7 @@ box-shadow: @overlay-shadow; color: @text-color; background: #fff; - line-height: 50px; + line-height: 46px; &-hidden { display: none; @@ -25,7 +25,7 @@ color: #999; line-height: 1.5; padding: 8px 10px; - border-bottom: 1px solid #dedede; + border-bottom: 1px solid #d9d9d9; } &-item, @@ -41,6 +41,11 @@ background-color: tint(@primary-color, 90%); } + &-horizontal &-item, + &-horizontal &-submenu { + margin-top: -1px; + } + &-horizontal > &-item-active, &-horizontal > &-submenu &-submenu-title:hover { background-color: transparent; @@ -52,7 +57,7 @@ &-inline, &-vertical { - border-right: 1px solid #e9e9e9; + border-right: 1px solid #d9d9d9; .@{menu-prefix-cls}-item { border-right: 2px solid transparent; margin-left: -1px; @@ -156,7 +161,7 @@ &-submenu-title { .anticon { width: 14px; - margin-right: 8px; + margin-right: 9px; top: 1px; } } @@ -165,7 +170,6 @@ border: none; border-bottom: 1px solid #d9d9d9; box-shadow: none; - padding-left: 20px; z-index: 0; > .@{menu-prefix-cls}-item, @@ -211,7 +215,7 @@ &-vertical, &-inline { & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { - padding: 0 20px; + padding: 0px 16px 0 28px; font-size: 12px; line-height: 42px; height: 42px; @@ -264,7 +268,7 @@ &-dark&-horizontal > &-item, &-dark&-horizontal > &-submenu { - border-bottom: 2px solid transparent; + border-bottom: 0; top: 0; }