From 5fc37ce45b3a0fb83fd84bb6079bb79de2d8df21 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Mon, 2 Jul 2018 14:57:54 +0800
Subject: [PATCH] update Button style

---
 examples/routers/button.vue   | 31 +++++++++++++++++++++++++++++++
 src/styles/custom.less        |  9 ++++++---
 src/styles/mixins/button.less | 25 +++++++++++++++++++++----
 3 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/examples/routers/button.vue b/examples/routers/button.vue
index 6aabddd..af7f2e3 100644
--- a/examples/routers/button.vue
+++ b/examples/routers/button.vue
@@ -1,5 +1,36 @@
 <template>
     <div>
+        <Button icon="logo-github" size="small" shape="circle"></Button>
+        <Button icon="logo-github" size="large" shape="circle"></Button>
+        <Button icon="logo-github" shape="circle"></Button>
+        <Button icon="logo-github" size="small"></Button>
+        <Button size="small">EN</Button>
+        <Button icon="logo-github"></Button>
+        <Button>EN</Button>
+        <Button icon="logo-github" size="large"></Button>
+        <Button size="large">EN</Button>
+        <ButtonGroup size="small">
+            <Button icon="logo-github"></Button>
+            <Button icon="logo-twitter"></Button>
+            <Button>
+                EN
+            </Button>
+        </ButtonGroup>
+        <ButtonGroup>
+            <Button icon="logo-github"></Button>
+            <Button icon="logo-twitter"></Button>
+            <Button>
+                EN
+            </Button>
+        </ButtonGroup>
+        <ButtonGroup size="large">
+            <Button icon="logo-github"></Button>
+            <Button icon="logo-twitter"></Button>
+            <Button >
+                EN
+            </Button>
+        </ButtonGroup>
+        <br><br><br>
         <Button type="default">Default</Button>
         <Button type="primary">Primary</Button>
         <Button type="dashed">Dashed</Button>
diff --git a/src/styles/custom.less b/src/styles/custom.less
index 351f2ba..1a9f96e 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -67,9 +67,12 @@
 
 // Button
 @btn-font-weight        : normal;
-@btn-padding-base       : 6px 15px;
-@btn-padding-large      : 6px 15px 7px 15px;
-@btn-padding-small      : 2px 7px;
+@btn-padding-base       : 5px 15px 6px;
+@btn-padding-large      : 6px 15px 6px 15px;
+@btn-padding-small      : 1px 7px 2px;
+@btn-padding-base-icon  : 6px 15px 6px;
+@btn-padding-large-icon : 6px 15px 7px 15px;
+@btn-padding-small-icon : 2px 7px 2px;
 @btn-font-size          : 12px;
 @btn-font-size-large    : 14px;
 @btn-border-radius      : 4px;
diff --git a/src/styles/mixins/button.less b/src/styles/mixins/button.less
index 980fc79..f5377b6 100644
--- a/src/styles/mixins/button.less
+++ b/src/styles/mixins/button.less
@@ -68,17 +68,17 @@
     & .@{btnClassName}-icon-only .ivu-icon {
         font-size: 14px;
         position: relative;
-        top: 1px;
+        //top: 1px;
     }
 
     &-large .@{btnClassName}-icon-only .ivu-icon{
         font-size: 16px;
-        top: 2px;
+        //top: 2px;
     }
 
     &-small .@{btnClassName}-icon-only .ivu-icon{
         font-size: 12px;
-        top: 0;
+        //top: 0;
     }
 
     &-circle .@{btnClassName} {
@@ -106,6 +106,13 @@
             }
         }
     }
+
+    &-small .@{btnClassName}-icon-only{
+        .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
+    }
+    &-large .@{btnClassName}-icon-only{
+        .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
+    }
 }
 
 .button-group-vertical-base(@btnClassName) {
@@ -142,7 +149,7 @@
         vertical-align: middle;
     }
 
-    &-icon-only > .@{css-prefix-iconfont}{
+    &-icon-only&-circle > .@{css-prefix-iconfont}{
         vertical-align: baseline;
     }
 
@@ -180,6 +187,16 @@
     &-small {
         .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
     }
+
+    &-icon-only{
+        .button-size(@btn-padding-base-icon; @btn-font-size; @btn-border-radius);
+    }
+    &-icon-only&-small{
+        .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
+    }
+    &-icon-only&-large{
+        .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
+    }
 }
 
 // Default
--
libgit2 0.21.4