feat(pager): [pager] add simplest pager to adaptive x-design

opentiny · Sep 14, 2024 · b4c4ce0 · b4c4ce0
1 parent d894dfc
commit b4c4ce0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/packages/theme/src/pager/index.less b/packages/theme/src/pager/index.less
@@ -301,7 +301,8 @@
 
     &.@{popover-prefix-cls}.@{popper-prefix-cls} {
       min-width: var(--ti-pager-sizes-input-min-width);
-      padding: 0;
+      border: 0;
+      padding: 8px 0;
       border-radius: var(--ti-pager-pop-body-border-radius);
 
       &[x-placement^='bottom'] {
@@ -322,13 +323,12 @@
     &-poplist {
       .list-item {
         min-height: var(--ti-pager-poplist-item-min-height);
-        padding: 0 8px;
+        padding: 0 16px;
         line-height: var(--ti-pager-poplist-item-min-height);
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        text-align: center;
 
         &:hover {
           cursor: pointer;
@@ -351,7 +351,12 @@
 
           &.is-selected {
             color: var(--ti-pager-poplist-item-selected-text-color);
-            background: var(--ti-pager-poplist-item-selected-bg-color);
+            background: transparent;
+            font-weight: bold;
+
+            &:hover {
+              background: var(--ti-pager-poplist-item-selected-bg-color);
+            }
           }
         }
       }
@@ -542,14 +547,8 @@
     .component-css-vars-pager();
 
     .tiny-option-label {
-      text-align: center;
       font-family: var(--ti-pager-number-font-family);
     }
-
-    .tiny-option.selected {
-      color: var(--ti-pager-poplist-item-selected-text-color);
-      background: var(--ti-pager-poplist-item-selected-bg-color);
-    }
   }
 }
 

diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less
@@ -95,7 +95,7 @@
   // 分页下拉框选中项默认背景色
   --ti-pager-poplist-item-selected-bg-color: #f5f5f5;
   // 分页下拉框项选中字体颜色
-  --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
+  --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-text-highlight);
   // 分页页码项默认悬浮边框色
   --ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent, transparent);
   // 分页下拉框圆角