From ede19f130c1644307a06ca9e6afa12c4df82c98f Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 12 Nov 2020 20:44:05 +0800
Subject: [PATCH] fix: styles glitches

---
 demo/menu-options.js                          |  2 +-
 src/_base/slot-machine/src/SlotMachine.vue    |  4 ++++
 src/badge/src/Badge.vue                       |  1 +
 src/button/styles/_common.js                  |  2 +-
 src/menu/src/styles/themed-base.cssr.js       | 12 ++++------
 src/pagination/src/Pagination.vue             | 18 +++++++--------
 src/pagination/src/styles/themed-base.cssr.js | 23 +++++++++----------
 .../src/styles/steps/themed-base.cssr.js      |  3 +--
 8 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/demo/menu-options.js b/demo/menu-options.js
index 86515f48c..60e757759 100644
--- a/demo/menu-options.js
+++ b/demo/menu-options.js
@@ -451,7 +451,7 @@ export default function (instance) {
           },
           {
             name: 'Dialog',
-            title: '确认',
+            title: '对话框',
             titleExtra: 'Dialog',
             path: `/${lang}/${theme}/doc` + '/n-dialog'
           },
diff --git a/src/_base/slot-machine/src/SlotMachine.vue b/src/_base/slot-machine/src/SlotMachine.vue
index 45eef036a..fd58a5444 100644
--- a/src/_base/slot-machine/src/SlotMachine.vue
+++ b/src/_base/slot-machine/src/SlotMachine.vue
@@ -43,6 +43,10 @@ export default {
     withCssr(styles)
   ],
   props: {
+    theme: {
+      type: String,
+      default: undefined
+    },
     value: {
       type: [Number, String],
       default: 0
diff --git a/src/badge/src/Badge.vue b/src/badge/src/Badge.vue
index b99deaefb..b17e283d9 100644
--- a/src/badge/src/Badge.vue
+++ b/src/badge/src/Badge.vue
@@ -24,6 +24,7 @@
       >
         <n-base-slot-machine
           v-if="!dot"
+          :theme="mergedTheme"
           :appeared="appeared"
           :max="max"
           :value="value"
diff --git a/src/button/styles/_common.js b/src/button/styles/_common.js
index 7af44f28e..5bcd61a98 100644
--- a/src/button/styles/_common.js
+++ b/src/button/styles/_common.js
@@ -25,7 +25,7 @@ export default function (base, derived) {
     iconMarginSmall: '6px',
     iconMarginMedium: '6px',
     iconMarginLarge: '6px',
-    iconSizeTiny: '16px',
+    iconSizeTiny: '14px',
     iconSizeSmall: '18px',
     iconSizeMedium: '18px',
     iconSizeLarge: '20px',
diff --git a/src/menu/src/styles/themed-base.cssr.js b/src/menu/src/styles/themed-base.cssr.js
index d44b09e82..a36f2ce3d 100644
--- a/src/menu/src/styles/themed-base.cssr.js
+++ b/src/menu/src/styles/themed-base.cssr.js
@@ -99,8 +99,7 @@ export default c([
           }),
           cE('icon', [
             cB('icon', {
-              fill: itemIconColorCollapsed,
-              stroke: itemIconColorCollapsed
+              color: itemIconColorCollapsed
             })
           ])
         ])
@@ -137,8 +136,7 @@ export default c([
           cB('menu-item-content', [
             cE('icon', [
               cB('icon', {
-                fill: itemIconColorSelected,
-                stroke: itemIconColorSelected
+                color: itemIconColorSelected
               })
             ]),
             cB('menu-item-content-header', {
@@ -195,8 +193,7 @@ export default c([
           ]),
           cE('icon', [
             cB('icon', {
-              fill: itemIconColorChildSelected,
-              stroke: itemIconColorChildSelected
+              color: itemIconColorChildSelected
             })
           ])
         ]),
@@ -205,8 +202,7 @@ export default c([
             hoverStyle(null, [
               cE('icon', [
                 cB('icon', {
-                  fill: itemIconColorHover,
-                  stroke: itemIconColorHover
+                  color: itemIconColorHover
                 })
               ]),
               cB('menu-item-content-header', {
diff --git a/src/pagination/src/Pagination.vue b/src/pagination/src/Pagination.vue
index 5dcfd66fd..e3c1b169a 100644
--- a/src/pagination/src/Pagination.vue
+++ b/src/pagination/src/Pagination.vue
@@ -67,6 +67,15 @@
         <forward-icon />
       </div>
     </div>
+    <n-select
+      v-if="showSizePicker"
+      size="small"
+      placeholder=""
+      :options="pageSizeOptions"
+      :value="pageSize"
+      :disabled="disabled"
+      @update:value="handleSizePickerChange"
+    />
     <div
       v-if="showQuickJumper"
       class="n-pagination-quick-jumper"
@@ -79,15 +88,6 @@
         @keyup="handleQuickJumperKeyUp"
       />
     </div>
-    <n-select
-      v-if="showSizePicker"
-      size="small"
-      placeholder=""
-      :options="pageSizeOptions"
-      :value="pageSize"
-      :disabled="disabled"
-      @update:value="handleSizePickerChange"
-    />
   </div>
 </template>
 
diff --git a/src/pagination/src/styles/themed-base.cssr.js b/src/pagination/src/styles/themed-base.cssr.js
index 4afb8f185..3166e85c8 100644
--- a/src/pagination/src/styles/themed-base.cssr.js
+++ b/src/pagination/src/styles/themed-base.cssr.js
@@ -25,10 +25,11 @@ export default c([
         vertical-align: middle;
       `
     }, [
+      c('*:not(:last-child)', {
+        marginRight: '8px'
+      }),
       cB('select', {
-        raw: `
-          width: unset;
-        `
+        width: 'unset'
       }),
       cM('transition-disabled', [
         cB('pagination-item', {
@@ -48,9 +49,7 @@ export default c([
         color: itemTextColor
       }, [
         cB('input', {
-          raw: `
-            margin: 0 8px;
-          `
+          marginLeft: '8px'
         }, [
           cE('placeholder', {
             left: '6px',
@@ -90,11 +89,6 @@ export default c([
         color: itemTextColor,
         fill: itemTextColor
       }, [
-        c('&:not(:last-child)', {
-          raw: `
-            margin-right: 8px;
-          `
-        }),
         cE('more-icon, arrow-icon', {
           raw: `
             position: relative;
@@ -141,7 +135,12 @@ export default c([
           c('&:hover', {
             color: itemTextColorHover
           }, [
-            cM('fast-backward, fast-forward', [
+            cM('backward, forward', {
+              color: itemTextColor
+            }),
+            cM('fast-backward, fast-forward', {
+              color: itemTextColor
+            }, [
               cE('more-icon', {
                 raw: `
                   display: none;
diff --git a/src/steps/src/styles/steps/themed-base.cssr.js b/src/steps/src/styles/steps/themed-base.cssr.js
index a88f7e661..677daf6ec 100644
--- a/src/steps/src/styles/steps/themed-base.cssr.js
+++ b/src/steps/src/styles/steps/themed-base.cssr.js
@@ -210,8 +210,7 @@ function statusStyle (props, status) {
           color: props[createKey('indicatorTextColor', status)]
         }),
         cB('icon', {
-          fill: props[createKey('indicatorTextColor', status)],
-          stroke: props[createKey('indicatorTextColor', status)]
+          color: props[createKey('indicatorTextColor', status)]
         })
       ])
     ])