Merge pull request #866 from Leopoldthecoder/master

Button: update text button style

examples/docs/zh-cn/table.md

@@ -513,8 +513,11 @@
       inline-template
       fixed="right"
       label="操作"
-      width="80">
-      <el-button type="text" size="small">编辑</el-button>
+      width="100">
+      <span>
+        <el-button type="text" size="small">查看</el-button>
+        <el-button type="text" size="small">编辑</el-button>
+      </span>
     </el-table-column>
   </el-table>
 </template>

packages/theme-default/src/button.css

@@ -17,6 +17,9 @@
     outline: none;
     margin: 0;
     @utils-user-select none;
+    & + .el-button {
+      margin-left: 10px;
+    }
     
     @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);
 
@@ -71,6 +74,10 @@
         border-color: var(--button-disabled-border);
       }
 
+      &.el-button--text {
+        background-color: transparent;
+      }
+
       &.is-plain {
         &,
         &:hover {
@@ -112,10 +119,21 @@
     @m info {
       @mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
     }
+    @m large {
+      @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
+    }
+    @m small {
+      @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
+    }
+    @m mini {
+      @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
+    }
     @m text {
       border: none;
       color: var(--color-primary);
       background: transparent;
+      padding-left: 0;
+      padding-right: 0;
 
       &:hover {
         color: tint(var(--color-primary), var(--button-hover-tint-percent));
@@ -124,15 +142,6 @@
         color: shade(var(--color-primary), var(--button-active-shade-percent));
       }
     }
-    @m large {
-      @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
-    }
-    @m small {
-      @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
-    }
-    @m mini {
-      @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
-    }
   }
 
   @b button-group {