[dev](button):按钮组件增加文字按钮的样式

linwens · Aug 28, 2019 · 136caf2 · 136caf2
1 parent c57b46e
commit 136caf2
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 2 deletions.
diff --git a/examples/docs/button.md b/examples/docs/button.md
@@ -120,6 +120,20 @@
 
 ```
 :::
+### 文字按钮
+<!-- {.md} -->
+
+<div class="demo-block">
+  <xu-button type="text">文字按钮</xu-button>
+  <xu-button type="text" disabled>文字按钮</xu-button>
+</div>
+
+::: demo
+```html
+  <xu-button type="text">文字按钮</xu-button>
+  <xu-button type="text" disabled>文字按钮</xu-button>
+```
+:::
 
 ### 图标按钮
 <!-- {.md} -->

diff --git a/packages/button/src/button.vue b/packages/button/src/button.vue
@@ -24,7 +24,7 @@
       },
       size: {
         type: String,
-        default: 'default'
+        default: 'medium'
       },
       icon: {
         type: String,

diff --git a/packages/theme-default/lib/index.css b/packages/theme-default/lib/index.css
diff --git a/packages/theme-default/src/button.scss b/packages/theme-default/src/button.scss
@@ -43,6 +43,36 @@
     padding: 7px 15px;
   }
 
+  @include m(text) {
+    border-color: transparent;
+    background: transparent;
+    padding-left: 0;
+    padding-right: 0;
+    color: $--color-primary;
+    &:hover,
+    &:focus {
+      color: adjust-color($--color-primary, $alpha: -0.2);
+    }
+    &:active {
+
+    }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      color: $--color-black;
+    }
+    @include when(plain) {
+      &:hover,
+      &:focus {
+        color: $--color-primary;
+      }
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        color: $--color-black;
+      }
+    }
+  }
   @include m(default) {
     &:hover,
     &:focus {