feat(dialog-box): [dialog-box] modify smb theme

opentiny · Sep 19, 2024 · 2d0fd05 · 2d0fd05
1 parent 3e24748
commit 2d0fd05
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
@@ -10,8 +10,8 @@
       </template>
       <span>半屏弹窗内容</span>
       <template #footer>
-        <tiny-button type="primary" @click="boxVisibility = false"> 确 定 </tiny-button>
         <tiny-button plain @click="boxVisibility = false"> 取消 </tiny-button>
+        <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
       </template>
     </tiny-dialog-box>
   </div>

diff --git a/examples/sites/demos/pc/app/dialog-box/right-dialog.vue b/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
@@ -10,8 +10,8 @@
       </template>
       <span>半屏弹窗内容</span>
       <template #footer>
-        <tiny-button type="primary" @click="boxVisibility = false"> 确 定 </tiny-button>
         <tiny-button plain @click="boxVisibility = false"> 取消 </tiny-button>
+        <tiny-button type="primary" @click="boxVisibility = false"> 确定 </tiny-button>
       </template>
     </tiny-dialog-box>
   </div>

diff --git a/packages/theme/src/dialog-box/index.less b/packages/theme/src/dialog-box/index.less
@@ -169,7 +169,6 @@
     flex-direction: column;
 
     .@{dialog-box-prefix-cls}__header,
-    .@{dialog-box-prefix-cls}__body,
     .@{dialog-box-prefix-cls}__footer {
       width: calc(100% - var(--ti-dialog-box-drawer-padding-left) - var(--ti-dialog-box-drawer-padding-right));
       margin-left: var(--ti-dialog-box-drawer-padding-left);
@@ -179,7 +178,7 @@
     .@{dialog-box-prefix-cls}__header {
       padding: var(--ti-dialog-box-drawer-header-padding-top) var(--ti-dialog-box-drawer-header-padding-right)
         var(--ti-dialog-box-drawer-header-padding-bottom) var(--ti-dialog-box-drawer-header-padding-left);
-      border-bottom: 1px solid var(--ti-dialog-box-drawer-divider-border-color);
+      border-bottom: 1px solid var(--ti-dialog-box-head-divider-border-color);
 
       &btn {
         right: calc(
@@ -192,14 +191,15 @@
     .@{dialog-box-prefix-cls}__body {
       flex: 1;
       overflow: auto;
+      color: var(--ti-dialog-box-drawer-body-color);
+      border-bottom: 1px solid var(--ti-dialog-box-drawer-divider-border-color);
       padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right)
         var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left);
-    }
+      }
 
     .@{dialog-box-prefix-cls}__footer {
       padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right)
         var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left);
-      border-top: 1px solid var(--ti-dialog-box-drawer-divider-border-color);
       text-align: var(--ti-dialog-box-drawer-footer-text-align);
     }
   }

diff --git a/packages/theme/src/dialog-box/vars.less b/packages/theme/src/dialog-box/vars.less
@@ -67,7 +67,9 @@
   // 内容字号
   --ti-dialog-box-body-font-size: var(--ti-common-font-size-base, 12px);
   // 内容字体色
-  --ti-dialog-box-body-text-color: var(--ti-common-color-text-primary);
+  --ti-dialog-box-body-text-color: var(--ti-common-color-text-secondary);
+  // 右侧弹窗内容字体色
+  --ti-dialog-box-drawer-body-color: var(--ti-common-color-text-primary);
   // 内容垂直内边距
   --ti-dialog-box-body-padding-vertical: var(--ti-common-space-0, 0px);
   // 内容水平内边距
@@ -95,19 +97,19 @@
   // 抽屉头部左内边距
   --ti-dialog-box-drawer-header-padding-left: var(--ti-common-space-0, 0px);
   // 抽屉头部右内边距
-  --ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-0, 0px);
+  --ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-8x);
   // 抽屉内容上内边距
   --ti-dialog-box-drawer-body-padding-top: var(--ti-common-space-0, 0px);
   // 抽屉内容下内边距
   --ti-dialog-box-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
   // 抽屉内容左内边距
-  --ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-0, 0px);
+  --ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-8x);
   // 抽屉内容右内边距
   --ti-dialog-box-drawer-header-padding-right: var(--ti-common-space-0, 0px);
   // 抽屉底部文本对齐方式
   --ti-dialog-box-drawer-footer-text-align: right;
   // 抽屉底部上内边距
-  --ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-5x, 20px);
+  --ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-6x);
   // 抽屉底部下内边距
   --ti-dialog-box-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
   // 抽屉底部左内边距
@@ -118,8 +120,10 @@
   --ti-dialog-box-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
   // 抽屉底部右外边距
   --ti-dialog-box-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
+  // 抽屉内容与底部边框颜色
+  --ti-dialog-box-drawer-divider-border-color: var(--ti-common-color-line-dividing);
   // 抽屉头部与底部边框颜色
-  --ti-dialog-box-drawer-divider-border-color: transparent;
+  --ti-dialog-box-header-divider-border-color: var(--ti-common-color-transparent);
   // 抽屉边框圆角
   --ti-dialog-box-drawer-radius: var(--ti-common-space-0, 0px);
   // 弹窗布局模式(hide)