style(components): add css var width & margin-top for dialog (#3431)

packages/components/dialog/src/dialog.ts

@@ -62,7 +62,6 @@ export const dialogProps = {
   },
   top: {
     type: String,
-    default: '15vh',
   },
   modelValue: {
     type: Boolean,
@@ -71,7 +70,6 @@ export const dialogProps = {
   modalClass: String,
   width: buildProp<string | number>({
     type: [String, Number],
-    default: '50%',
     validator: isValidWidthUnit,
   }),
   zIndex: {

packages/components/dialog/src/use-dialog.ts

@@ -29,9 +29,14 @@ export const useDialog = (
 
   const style = computed<CSSProperties>(() => {
     const style: CSSProperties = {}
+    const varPrefix = `--el-dialog`
     if (!props.fullscreen) {
-      style.marginTop = props.top
-      if (props.width) style.width = normalizeWidth.value
+      if (props.top) {
+        style[`${varPrefix}-margin-top`] = props.top
+      }
+      if (props.width) {
+        style[`${varPrefix}-width`] = normalizeWidth.value
+      }
     }
     return style
   })

packages/theme-chalk/src/common/var.scss

@@ -643,6 +643,8 @@ $--switch: map.merge(
 $--dialog: () !default;
 $--dialog: map.merge(
   (
+    'width': 50%,
+    'margin-top': 15vh,
     'background-color': var(--el-color-white),
     'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
     'title-font-size': var(--el-font-size-large),

packages/theme-chalk/src/dialog.scss

@@ -10,16 +10,16 @@
   @include set-component-css-var('dialog', $--dialog);
 
   position: relative;
-  margin: 0 auto 50px;
+  margin: var(--el-dialog-margin-top, 15vh) auto 50px;
   background: var(--el-dialog-background-color);
   border-radius: var(--el-border-radius-small);
   box-shadow: var(--el-dialog-box-shadow);
   box-sizing: border-box;
-  width: 50%;
+  width: var(--el-dialog-width, 50%);
 
   @include when(fullscreen) {
-    width: 100%;
-    margin-top: 0;
+    --el-dialog-width: 100%;
+    --el-dialog-margin-top: 0;
     margin-bottom: 0;
     height: 100%;
     overflow: auto;