fix: 修复 dialog 样式细节

FightingDesign · Oct 7, 2023 · c966eae · c966eae
1 parent 50cf79d
commit c966eae
Showing 1 changed file with 10 additions and 27 deletions.
diff --git a/packages/fighting-theme/src/dialog.scss b/packages/fighting-theme/src/dialog.scss
@@ -1,18 +1,12 @@
 .f-dialog {
   position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
+  inset: 0;
   z-index: var(--dialog-z-index, 2000);
 
   // 遮罩层
   &__mask {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     opacity: var(--dialog-mask-opacity, 0.4);
     background-color: var(--dialog-mask-background, #000);
   }
@@ -25,25 +19,21 @@
   // 主容器公共样式
   &__wrapper {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: 1999;
     transition: 0.3s;
     overflow: auto;
-    padding: 24px;
-    box-sizing: border-box;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     // 主要内容容器
     .f-dialog__container {
       background-color: #fff;
-      display: inline-block;
-      top: 0;
-      position: relative;
+      display: flex;
+      flex-direction: column;
       border-radius: 6px;
-      vertical-align: middle;
+      margin: auto;
       padding: var(--dialog-padding);
       width: var(--dialog-width);
 
@@ -79,6 +69,7 @@
         box-sizing: border-box;
         padding: 5px 15px;
         text-align: left;
+        flex: 1;
       }
 
       // 页脚
@@ -103,14 +94,6 @@
         opacity: 0;
       }
     }
-
-    &::after {
-      content: '';
-      display: inline-block;
-      width: 0;
-      vertical-align: middle;
-      height: 100%;
-    }
   }
 
   // 遮罩层动画