refactor(pager): [pager] refactor pager style

opentiny · Sep 21, 2024 · 7ec8417 · 7ec8417
1 parent 8d40f94
commit 7ec8417
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/examples/sites/demos/pc/app/pager/disabled-and-size.vue b/examples/sites/demos/pc/app/pager/disabled-and-size.vue
@@ -2,7 +2,7 @@
   <div class="content">
     是否禁用：<tiny-switch v-model="isDisabled"></tiny-switch>
     <tiny-pager mode="number" :total="100" :disabled="isDisabled" />
-    <tiny-pager :total="100" size="mini" :disabled="isDisabled" />
+    <tiny-pager mode="number" :total="100" size="mini" :disabled="isDisabled" />
   </div>
 </template>
 

diff --git a/packages/theme/src/pager/index.less b/packages/theme/src/pager/index.less
@@ -455,11 +455,17 @@
       }
     }
 
+    .@{pager-prefix-cls}__page-size,
+    .@{pager-prefix-cls}__page-size-btn {
+      height: var(--tv-Pager-input-height-xs);
+      line-height: calc(var(--tv-Pager-input-height-xs) - 2px);
+    }
+
     li {
       min-width: var(--tv-Pager-min-width-xs);
-      height: 24px;
+      height: var(--tv-Pager-input-height-xs);
       padding: 0 4px;
-      line-height: 22px;
+      line-height: calc(var(--tv-Pager-input-height-xs) - 2px);
       font-size: var(--tv-Pager-font-size-xs);
     }
 
@@ -469,13 +475,13 @@
     }
 
     .@{pager-prefix-cls}__input input {
-      height: 24px;
-      line-height: 22px;
+      height: var(--tv-Pager-input-height-xs);
+      line-height: calc(var(--tv-Pager-input-height-xs) - 2px);
     }
 
     .@{pager-prefix-cls}__input-btn {
-      height: 24px;
-      line-height: 22px;
+      height: var(--tv-Pager-input-height-xs);
+      line-height: calc(var(--tv-Pager-input-height-xs) - 2px);
     }
   }
 

diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less
@@ -15,8 +15,6 @@
   --tv-Pager-number-font-family: arial, helvetica, sans-serif;
   // 分页字号
   --tv-Pager-font-size: var(--tv-font-size-md);
-  // mini分页字号
-  --tv-Pager-font-size-xs: var(--tv-font-size-sm);
   // 分页文本色
   --tv-Pager-text-color: var(--tv-color-text);
   // 分页禁用文本色
@@ -51,6 +49,13 @@
   --tv-Pager-height: var(--tv-size-height-md);
   // 分页纵向内边距
   --tv-Pager-padding-y: var(--tv-space-md);
+  // -------mini分页相关样式-------
+  // mini分页字号
+  --tv-Pager-font-size-xs: var(--tv-font-size-sm);
+  // mini分页选择框|输入框|前往按钮高度
+  --tv-Pager-input-height-xs: var(--tv-size-height-xs);
+  // 小尺寸分页页码项最小宽度
+  --tv-Pager-min-width-xs: 24px;
   // -------分页页码相关样式-------
   // 分页页码选中时背景色
   --tv-Pager-page-item-bg-color-active: var(--tv-color-bg);
@@ -68,8 +73,6 @@
   --tv-Pager-page-item-font-weight-hover: var(--tv-font-weight-medium);
   // 分页页码项最小宽度
   --tv-Pager-page-item-min-width: 32px;
-  // 小尺寸分页页码项最小宽度
-  --tv-Pager-min-width-xs: 24px;
   // 分页页码项水平内边距
   --tv-Pager-page-item-padding-x: var(--tv-space-md);
   // -------上一页、下一页相关样式-------
@@ -90,8 +93,6 @@
   --tv-Pager-input-border-radius: var(--tv-border-radius-md);
   // 分页选择框|输入框|前往按钮高度
   --tv-Pager-input-height: var(--tv-size-height-md);
-  // mini分页选择框|输入框|前往按钮高度
-  --tv-Pager-input-height-xs: var(--tv-size-height-xs);
   // -------跳至相关样式------
   // 跳至左侧文字左侧内边距
   --tv-Pager-goto-left-padding-left: var(--tv-space-xl);