From 77a3d5c7c19aef3f98f11c56082ff0b9fd38da86 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Wed, 26 Jan 2022 14:29:48 +0800
Subject: [PATCH] refactor(components): [el-pagination] adjust component size
 (#5640)

* refactor(components): [el-pagination] adjust component size

* fix: background size

* chore: improve doc style
---
 docs/en-US/component/select.md                | 6 ------
 docs/examples/pagination/small-pagination.vue | 8 ++++++++
 packages/theme-chalk/src/common/var.scss      | 6 +++---
 packages/theme-chalk/src/pagination.scss      | 9 ++++-----
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index 123ab7dbfd..e9297a52b2 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -7,12 +7,6 @@ lang: en-US
 
 When there are plenty of options, use a drop-down menu to display and select desired ones.
 
-<style lang="scss">
-.example-showcase .el-select {
-  width: 240px;
-}
-</style>
-
 ## Basic usage
 
 :::demo `v-model` is the value of `el-option` that is currently selected.
diff --git a/docs/examples/pagination/small-pagination.vue b/docs/examples/pagination/small-pagination.vue
index a9d5fbe5fd..fdace98ba3 100644
--- a/docs/examples/pagination/small-pagination.vue
+++ b/docs/examples/pagination/small-pagination.vue
@@ -1,3 +1,11 @@
 <template>
   <el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>
+  <el-pagination
+    small
+    background
+    layout="prev, pager, next"
+    :total="50"
+    class="mt-4"
+  >
+  </el-pagination>
 </template>
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 5cea4c37b6..3da79a3bc0 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -700,12 +700,12 @@ $pagination: map.merge(
     'text-color': var(--el-text-color-primary),
     'border-radius': 3px,
     'button-color': var(--el-text-color-primary),
-    'button-width': 35.5px,
-    'button-height': 28px,
+    'button-width': 32px,
+    'button-height': 32px,
     'button-disabled-color': var(--el-text-color-placeholder),
     'button-disabled-bg-color': var(--el-color-white),
     'hover-color': var(--el-color-primary),
-    'height-extra-small': 22px,
+    'height-extra-small': 24px,
     'line-height-extra-small': var(--el-pagination-height-extra-small),
   ),
   $pagination
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index 6956b4f0a5..b2a9173855 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -110,7 +110,7 @@
       font-size: var(--el-font-size-extra-small);
       line-height: var(--el-pagination-line-height-extra-small);
       height: var(--el-pagination-height-extra-small);
-      min-width: 22px;
+      min-width: 24px;
     }
 
     .arrow.disabled {
@@ -216,10 +216,10 @@
     .btn-prev,
     .btn-next,
     .#{$namespace}-pager li {
-      margin: 0 5px;
+      margin: 0 4px;
       background-color: map.get($colors, 'info', 'light-9');
       color: var(--el-text-color-regular);
-      min-width: 30px;
+      min-width: 32px;
       border-radius: 2px;
 
       &.disabled {
@@ -251,8 +251,7 @@
       .btn-prev,
       .btn-next,
       .#{$namespace}-pager li {
-        margin: 0 3px;
-        min-width: 22px;
+        min-width: 24px;
       }
     }
   }