From e5536eb933580b94548d629d57c561cac5617a16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Sat, 7 Aug 2021 12:34:53 +0800
Subject: [PATCH] fix(drawer): missing css var, close #2848 (#2861)

---
 packages/theme-chalk/src/common/var.scss | 10 ++++++++++
 packages/theme-chalk/src/drawer.scss     | 11 ++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 09cf2f4b00..9b00680112 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -809,6 +809,16 @@ $--dropdown: map.merge(
   $--dropdown
 );
 
+// drawer
+$--drawer: () !default;
+$--drawer: map.merge(
+  (
+    'background-color': var(--el-dialog-background-color, var(--el-color-white)),
+    'padding-primary': var(--el-dialog-padding-primary, 20px),
+  ),
+  $--drawer
+);
+
 /* Badge
 -------------------------- */
 // css3 var in packages/theme-chalk/src/badge.scss
diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
index 226342c892..1a7e96a18e 100644
--- a/packages/theme-chalk/src/drawer.scss
+++ b/packages/theme-chalk/src/drawer.scss
@@ -1,4 +1,5 @@
 @import 'mixins/mixins';
+@import 'mixins/var';
 @import 'common/var';
 @import './overlay.scss';
 
@@ -71,12 +72,8 @@
 
 $directions: rtl, ltr, ttb, btt;
 
-:root {
-  --el-drawer-background-color: var(
-    --el-dialog-background-color,
-    var(--el-color-white)
-  );
-  --el-drawer-padding-primary: var(--el-dialog-padding-primary, 20px);
+@include b(drawer) {
+  @include set-component-css-var('drawer', $--drawer);
 }
 
 @include b(drawer) {
@@ -104,7 +101,7 @@ $directions: rtl, ltr, ttb, btt;
     color: rgb(114, 118, 123);
     display: flex;
     margin-bottom: 32px;
-    padding: var(--el-dialog-padding-primary);
+    padding: var(--el-drawer-padding-primary);
     padding-bottom: 0;
     & > :first-child {
       flex: 1;