feat: update layout styles

update layout styles by variables in the variables.less

Change-Id: I43fa54f52c791e629f9a04484c80947a04849556

.stylelintrc.json

@@ -14,7 +14,7 @@
     "property-no-unknown": [
       true,
       {
-        "ignoreProperties": ["/Color$/"]
+        "ignoreProperties": ["/Color$/", "/Height$/"]
       }
     ]
   }

src/components/Layout/GlobalHeader/index.less

@@ -98,7 +98,7 @@
     .ant-btn-link {
       position: absolute;
       min-width: 280px;
-      min-height: 40px;
+      min-height: @header-height;
     }
   }
 }

src/components/Layout/GlobalNav/index.jsx

@@ -60,8 +60,8 @@ export class GlobalNav extends React.Component {
     const { navItems = [] } = this.props;
 
     const drawerStyle = {
-      top: '40px',
-      height: 'calc(100% - 40px)',
+      top: globalCSS.headerHeight,
+      height: `calc(100% - ${globalCSS.headerHeight})`,
     };
 
     return (

src/components/Layout/GlobalNav/index.less

@@ -3,7 +3,7 @@
 .global-nav-icon {
   position: relative;
   float: left;
-  width: @header-height;
+  width: @sider-collapsed-width;
   height: @header-height;
   color: #fff;
   font-size: 16px;

src/layouts/Base/index.less

@@ -19,7 +19,7 @@
 .header-collapsed {
   &:extend(.header);
 
-  padding-left: 40px;
+  padding-left: @sider-collapsed-width;
 }
 
 .logo {
@@ -258,7 +258,7 @@
 }
 
 .base-layout-sider-collapsed {
-  width: 40px;
+  width: @sider-collapsed-width;
   transition: all 0.2s;
 
   .menu-collapsed {
@@ -274,14 +274,14 @@
 
 .base-layout-right {
   position: absolute;
-  top: 40px;
+  top: @header-height;
   right: 0;
   left: 230px;
-  height: calc(100vh - 40px);
+  height: calc(100vh - @header-height);
 }
 
 .base-layout-right-collapsed {
-  left: 40px;
+  left: @sider-collapsed-width;
 }
 
 .base-layout-sider-hover {

src/styles/variables.less

@@ -128,6 +128,7 @@
 /*  sider */
 @sider-background: #26262b;
 @sider-open-background: #222121;
+@sider-collapsed-width: 40px;
 
 /* login */
 @login-error: #a43a39;
@@ -144,4 +145,5 @@
   dangerColor: @danger-color;
   moneyColor: @money-color;
   infoColor: @info-color;
+  headerHeight: @header-height;
 }