update Button style

examples/routers/button.vue

@@ -1,14 +1,18 @@
 <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="large" 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>
@@ -16,13 +20,15 @@
                 EN
             </Button>
         </ButtonGroup>
+
         <ButtonGroup>
             <Button icon="logo-github"></Button>
             <Button icon="logo-twitter"></Button>
             <Button>
-                EN
+                ENs
             </Button>
         </ButtonGroup>
+
         <ButtonGroup size="large">
             <Button icon="logo-github"></Button>
             <Button icon="logo-twitter"></Button>
@@ -155,8 +161,8 @@
             </Button>
         </Button-group>
         <Button-group>
-            <Button type="primary" icon="ios-skipbackward"></Button>
+            <Button type="primary" icon="ios-skip-backward"></Button>
-            <Button type="primary" icon="ios-skipforward"></Button>
+            <Button type="primary" icon="ios-skip-forward"></Button>
         </Button-group>
         <Button-group>
             <Button type="default" icon="ios-color-wand-outline"></Button>
@@ -178,8 +184,8 @@
             </Button>
         </Button-group>
         <Button-group shape="circle">
-            <Button type="primary" icon="ios-skipbackward"></Button>
+            <Button type="primary" icon="ios-skip-backward"></Button>
-            <Button type="primary" icon="ios-skipforward"></Button>
+            <Button type="primary" icon="ios-skip-forward"></Button>
         </Button-group>
         <Button-group shape="circle">
             <Button type="default" icon="ios-color-wand-outline"></Button>
@@ -223,6 +229,24 @@
         <br><br>
         <Button to="/icon">Open New Window</Button>
         <br><br><br>
+        <ButtonGroup vertical size="small">
+            <Button icon="logo-facebook"></Button>
+            <Button icon="logo-twitter"></Button>
+            <Button icon="logo-googleplus"></Button>
+            <Button icon="logo-tumblr"></Button>
+        </ButtonGroup>
+        <ButtonGroup vertical>
+            <Button icon="logo-facebook"></Button>
+            <Button icon="logo-twitter"></Button>
+            <Button icon="logo-googleplus"></Button>
+            <Button icon="logo-tumblr"></Button>
+        </ButtonGroup>
+        <ButtonGroup vertical size="large">
+            <Button icon="logo-facebook"></Button>
+            <Button icon="logo-twitter"></Button>
+            <Button icon="logo-googleplus"></Button>
+            <Button icon="logo-tumblr"></Button>
+        </ButtonGroup>
     </div>
 </template>
 <script>

src/components/button/button.vue

@@ -61,12 +61,10 @@
                 default: false
             }
         },
-        data () {
-            return {
-                showSlot: true
-            };
-        },
         computed: {
+            showSlot () {
+                return !!this.$slots.default;
+            },
             classes () {
                 return [
                     `${prefixCls}`,
@@ -109,9 +107,6 @@
 
                 this.handleCheckClick(event, openInNewWindow);
             }
-        },
-        mounted () {
-            this.showSlot = this.$slots.default !== undefined;
         }
     };
 </script>

src/styles/custom.less

@@ -34,7 +34,7 @@
 @heading-color-dark: fade(@white, 100%);
 @font-size-base         : 14px;
 @font-size-small        : 12px;
-@font-size-large        : 16px;
+@font-size-large        : @font-size-base + 2px;
 @line-height-base       : 1.5;
 @line-height-computed   : floor((@font-size-base * @line-height-base));
 @border-radius-base     : 6px;
@@ -78,15 +78,21 @@
 @shadow-right           : 1px 0 6px @shadow-color;
 
 // Button
+@btn-height-base        : 32px;
+@btn-height-large       : 40px;
+@btn-height-small       : 24px;
+
+@btn-padding-base       : 0 @padding-md - 1px;
+@btn-padding-large      : @btn-padding-base;
+@btn-padding-small      : 0 @padding-xs - 1px;
+
 @btn-font-weight        : normal;
-@btn-padding-base       : 5px 15px 6px;
-@btn-padding-large      : 6px 15px 6px 15px;
-@btn-padding-small      : 1px 7px 2px;
 @btn-padding-base-icon  : 5px 15px 6px;
 @btn-padding-large-icon : 6px 15px 6px 15px;
 @btn-padding-small-icon : 1px 7px 2px;
-@btn-font-size          : 12px;
+@btn-font-size          : @font-size-base;
-@btn-font-size-large    : 14px;
+@btn-font-size-large    : @font-size-large;
+@btn-font-size-small    : @font-size-base;
 @btn-border-radius      : 4px;
 @btn-border-radius-small: 3px;
 @btn-group-border       : shade(@primary-color, 5%);
@@ -106,9 +112,13 @@
 @btn-ghost-bg           : #fff;
 @btn-ghost-border       : @border-color-base;
 
-@btn-circle-size        : 32px;
+@btn-circle-size        : @btn-height-base;
-@btn-circle-size-large  : 36px;
+@btn-circle-size-large  : @btn-height-large;
-@btn-circle-size-small  : 24px;
+@btn-circle-size-small  : @btn-height-small;
+
+@btn-square-size        : @btn-height-base;
+@btn-square-size-large  : @btn-height-large;
+@btn-square-size-small  : @btn-height-small;
 
 // Layout and Grid
 @grid-columns                : 24;

src/styles/mixins/button.less

@@ -1,4 +1,5 @@
-.button-size(@padding; @font-size; @border-radius) {
+.button-size(@height; @padding; @font-size; @border-radius) {
+    height: @height;
     padding: @padding;
     font-size: @font-size;
     border-radius: @border-radius;
@@ -65,21 +66,22 @@
         }
     }
 
-    & .@{btnClassName}-icon-only .ivu-icon {
-        font-size: 13px;
-        position: relative;
-        //top: 1px;
-    }
 
-    &-large .@{btnClassName}-icon-only .ivu-icon{
+    //& .@{btnClassName}-icon-only .ivu-icon {
-        font-size: 15px;
+    //    font-size: 13px;
-        //top: 2px;
+    //    position: relative;
-    }
+    //    //top: 1px;
-
+    //}
-    &-small .@{btnClassName}-icon-only .ivu-icon{
+    //
-        font-size: 12px;
+    //&-large .@{btnClassName}-icon-only .ivu-icon{
-        //top: 0;
+    //    font-size: 15px;
-    }
+    //    //top: 2px;
+    //}
+    //
+    //&-small .@{btnClassName}-icon-only .ivu-icon{
+    //    font-size: 12px;
+    //    //top: 0;
+    //}
 
     &-circle .@{btnClassName} {
         border-radius: @btn-circle-size;
@@ -91,7 +93,7 @@
     }
     &-large {
         & > .@{btnClassName} {
-            .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
+            .button-size(@btn-height-large; @btn-padding-large; @btn-font-size-large; @btn-border-radius);
         }
     }
 
@@ -100,19 +102,21 @@
     }
     &-small {
         & > .@{btnClassName}{
-            .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
+            .button-size(@btn-height-small; @btn-padding-small; @btn-font-size; @btn-border-radius-small);
             > .@{css-prefix-iconfont} {
                 font-size: @btn-font-size;
             }
         }
     }
 
-    //&-small .@{btnClassName}-icon-only{
+    &-small .@{btnClassName}-icon-only{
-    //    .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
+        .square(@btn-height-small);
-    //}
+        padding: 0;
-    //&-large .@{btnClassName}-icon-only{
+    }
-    //    .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
+    &-large .@{btnClassName}-icon-only{
-    //}
+        .square(@btn-height-large);
+        padding: 0;
+    }
 }
 
 .button-group-vertical-base(@btnClassName) {
@@ -123,6 +127,41 @@
         width: 100%;
         max-width: 100%;
         float: none;
+        min-width: @btn-height-base;
+
+    }
+    &.@{btnClassName}-group-small > .@{btnClassName}{
+        min-width: @btn-height-small;
+    }
+    &.@{btnClassName}-group-large > .@{btnClassName}{
+        min-width: @btn-height-large;
+    }
+
+    //> .@{btnClassName}-icon-only {
+    //    height: @btn-height-base;
+    //    padding: 0;
+    //}
+    //> .@{btnClassName}-small.@{btnClassName}-icon-only {
+    //    height: @btn-height-small;
+    //    padding: 0;
+    //}
+    //> .@{btnClassName}-large.@{btnClassName}-icon-only {
+    //    height: @btn-height-large;
+    //    padding: 0;
+    //}
+}
+
+// square button: the content only contains icon
+.btn-square(@btnClassName) {
+    .square(@btn-square-size);
+    .button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius);
+    &.@{btnClassName}-large {
+        .square(@btn-square-size-large);
+        .button-size(@btn-square-size-large; 0; @btn-font-size-large + 2px; @btn-border-radius);
+    }
+    &.@{btnClassName}-small {
+        .square(@btn-square-size-small);
+        .button-size(@btn-square-size-small; 0; @font-size-base; @btn-border-radius);
     }
 }
 
@@ -139,7 +178,7 @@
     white-space: nowrap;
     line-height: @line-height-base;
     user-select: none;
-    .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
+    .button-size(@btn-height-base; @btn-padding-base; @btn-font-size; @btn-border-radius);
     //transform: translate3d(0, 0, 0);
     //transition: all @transition-time linear;
     transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;
@@ -181,21 +220,15 @@
     }
 
     &-large {
-        .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
+        .button-size(@btn-height-large; @btn-padding-large; @btn-font-size-large; @btn-border-radius);
     }
 
     &-small {
-        .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
+        .button-size(@btn-height-small; @btn-padding-small; @btn-font-size; @btn-border-radius-small);
     }
 
     &-icon-only{
-        .button-size(@btn-padding-base-icon; @btn-font-size; @btn-border-radius);
+        .btn-square(@btn-prefix-cls);
-    }
-    &-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);
     }
 }
 
@@ -324,16 +357,16 @@
 
     &.@{btnClassName}-icon-only{
         .square(@btn-circle-size);
-        .button-size(0; @font-size-base + 2; 50%);
+        .button-size(@btn-height-base; 0; @font-size-base + 2; 50%);
 
         &.@{btnClassName}-large{
             .square(@btn-circle-size-large);
-            .button-size(0; @btn-font-size-large + 2; 50%);
+            .button-size(@btn-height-large; 0; @btn-font-size-large + 2; 50%);
         }
 
         &.@{btnClassName}-small{
             .square(@btn-circle-size-small);
-            .button-size(0; @font-size-base; 50%);
+            .button-size(@btn-height-small; 0; @font-size-base; 50%);
         }
     }
 }