feat: update layout styles
update layout styles by variables in the variables.less Change-Id: I43fa54f52c791e629f9a04484c80947a04849556
This commit is contained in:
parent
1ad65d35d5
commit
4496eb4f05
@ -14,7 +14,7 @@
|
|||||||
"property-no-unknown": [
|
"property-no-unknown": [
|
||||||
true,
|
true,
|
||||||
{
|
{
|
||||||
"ignoreProperties": ["/Color$/"]
|
"ignoreProperties": ["/Color$/", "/Height$/"]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -98,7 +98,7 @@
|
|||||||
.ant-btn-link {
|
.ant-btn-link {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 280px;
|
min-width: 280px;
|
||||||
min-height: 40px;
|
min-height: @header-height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -60,8 +60,8 @@ export class GlobalNav extends React.Component {
|
|||||||
const { navItems = [] } = this.props;
|
const { navItems = [] } = this.props;
|
||||||
|
|
||||||
const drawerStyle = {
|
const drawerStyle = {
|
||||||
top: '40px',
|
top: globalCSS.headerHeight,
|
||||||
height: 'calc(100% - 40px)',
|
height: `calc(100% - ${globalCSS.headerHeight})`,
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
.global-nav-icon {
|
.global-nav-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
float: left;
|
||||||
width: @header-height;
|
width: @sider-collapsed-width;
|
||||||
height: @header-height;
|
height: @header-height;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
.header-collapsed {
|
.header-collapsed {
|
||||||
&:extend(.header);
|
&:extend(.header);
|
||||||
|
|
||||||
padding-left: 40px;
|
padding-left: @sider-collapsed-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
@ -258,7 +258,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.base-layout-sider-collapsed {
|
.base-layout-sider-collapsed {
|
||||||
width: 40px;
|
width: @sider-collapsed-width;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
.menu-collapsed {
|
.menu-collapsed {
|
||||||
@ -274,14 +274,14 @@
|
|||||||
|
|
||||||
.base-layout-right {
|
.base-layout-right {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40px;
|
top: @header-height;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 230px;
|
left: 230px;
|
||||||
height: calc(100vh - 40px);
|
height: calc(100vh - @header-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
.base-layout-right-collapsed {
|
.base-layout-right-collapsed {
|
||||||
left: 40px;
|
left: @sider-collapsed-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.base-layout-sider-hover {
|
.base-layout-sider-hover {
|
||||||
|
@ -128,6 +128,7 @@
|
|||||||
/* sider */
|
/* sider */
|
||||||
@sider-background: #26262b;
|
@sider-background: #26262b;
|
||||||
@sider-open-background: #222121;
|
@sider-open-background: #222121;
|
||||||
|
@sider-collapsed-width: 40px;
|
||||||
|
|
||||||
/* login */
|
/* login */
|
||||||
@login-error: #a43a39;
|
@login-error: #a43a39;
|
||||||
@ -144,4 +145,5 @@
|
|||||||
dangerColor: @danger-color;
|
dangerColor: @danger-color;
|
||||||
moneyColor: @money-color;
|
moneyColor: @money-color;
|
||||||
infoColor: @info-color;
|
infoColor: @info-color;
|
||||||
|
headerHeight: @header-height;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user