From ab8250d85a1ef63ca54412a94452ec110e4c09f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Thu, 15 Jul 2021 08:45:29 +0800
Subject: [PATCH] refactor(container): header/footer/aside size by css
 variables (#2530)

---
 packages/theme-chalk/src/common/var.scss | 12 ------------
 packages/theme-chalk/src/footer.scss     |  3 ++-
 packages/theme-chalk/src/header.scss     |  3 ++-
 packages/theme-chalk/src/main.scss       |  6 +++++-
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index c8d69bc6fe..b3d215630a 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -835,18 +835,6 @@ $--transfer-item-height: 30px !default;
 /// height||Other|4
 $--transfer-filter-height: 32px !default;
 
-/* Header
-  --------------------------*/
-$--header-padding: 0 20px !default;
-
-/* Footer
---------------------------*/
-$--footer-padding: 0 20px !default;
-
-/* Main
---------------------------*/
-$--main-padding: 20px !default;
-
 /* Timeline
 --------------------------*/
 $--timeline-node-size-normal: 12px !default;
diff --git a/packages/theme-chalk/src/footer.scss b/packages/theme-chalk/src/footer.scss
index 77c17fe8da..3a42438c48 100644
--- a/packages/theme-chalk/src/footer.scss
+++ b/packages/theme-chalk/src/footer.scss
@@ -2,11 +2,12 @@
 @import 'common/var';
 
 :root {
+  --el-footer-padding: 0 20px;
   --el-footer-height: 60px;
 }
 
 @include b(footer) {
-  padding: $--footer-padding;
+  padding: var(--el-footer-padding);
   box-sizing: border-box;
   flex-shrink: 0;
   height: var(--el-footer-height);
diff --git a/packages/theme-chalk/src/header.scss b/packages/theme-chalk/src/header.scss
index eb799a5b59..5688d82abc 100644
--- a/packages/theme-chalk/src/header.scss
+++ b/packages/theme-chalk/src/header.scss
@@ -2,11 +2,12 @@
 @import 'common/var';
 
 :root {
+  --el-header-padding: 0 20px;
   --el-header-height: 60px;
 }
 
 @include b(header) {
-  padding: $--header-padding;
+  padding: var(--el-header-padding);
   box-sizing: border-box;
   flex-shrink: 0;
   height: var(--el-header-height);
diff --git a/packages/theme-chalk/src/main.scss b/packages/theme-chalk/src/main.scss
index 77f1f440fa..30caddeb41 100644
--- a/packages/theme-chalk/src/main.scss
+++ b/packages/theme-chalk/src/main.scss
@@ -1,6 +1,10 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-main-padding: 20px;
+}
+
 @include b(main) {
   // IE11 supports the <main> element partially https://caniuse.com/#search=main
   display: block;
@@ -8,5 +12,5 @@
   flex-basis: auto;
   overflow: auto;
   box-sizing: border-box;
-  padding: $--main-padding;
+  padding: var(--el-main-padding);
 }