update Button styles

梁灏
1 parent 9acc9d63
Showing 3 changed files with 54 additions and 5 deletions Show diff stats
examples/routers/button.vue
src/styles/components/button.less
src/styles/mixins/button.less
 <template>
     <div>
+        <Button>Default</Button>
+        <Button type="primary">Primary</Button>
+        <Button type="ghost">Ghost</Button>
+        <Button type="dashed">Dashed</Button>
+        <Button type="text">Text</Button>
+        <br><br>
+        <Button type="info">Info</Button>
+        <Button type="success">Success</Button>
+        <Button type="warning">Warning</Button>
+        <Button type="error">Error</Button>
+        <br><br>
+        <Button type="primary" shape="circle" icon="ios-search"></Button>
+        <Button type="primary" icon="ios-search">Search</Button>
+        <Button type="primary" shape="circle" icon="ios-search">Search</Button>
+        <Button type="primary" shape="circle">Circle</Button>
+        <br><br>
+        <Button type="ghost" shape="circle" icon="ios-search"></Button>
+        <Button type="ghost" icon="ios-search">Search</Button>
+        <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
+        <Button type="ghost" shape="circle">Circle</Button>
+        <br><br>
+        <Button>Default</Button>
+        <Button disabled>Default(Disabled)</Button>
+        <br>
+        <Button type="primary">Primary</Button>
+        <Button type="primary" disabled>Primary(Disabled)</Button>
+        <br>
+        <Button type="ghost">Ghost</Button>
+        <Button type="ghost" disabled>Ghost(Disabled)</Button>
+        <br>
+        <Button type="dashed">Dashed</Button>
+        <Button type="dashed" disabled>Dashed(Disabled)</Button>
+        <br>
+        <Button type="text">Text</Button>
+        <Button type="text" disabled>Text(Disabled)</Button>
+        <br><br>
+
+        <br><br>
         <h4>基本</h4>
         <br><br>
         <Button-group>
@@ -4,11 +4,6 @@
     .btn;
     .btn-default;
  
-    &.@{btn-prefix-cls}-focused {
-        box-shadow: 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color;
-        z-index: 1;
-    }
-
     &-long{
         width: 100%;
     }
@@ -186,6 +186,7 @@
     &.active {
         .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
     }
+    .active-btn-color(@primary-color);
 }
  
 // Primary
@@ -198,6 +199,7 @@
     &.active {
         color: @btn-primary-color;
     }
+    .active-btn-color(@primary-color);
 }
  
 // Ghost
@@ -213,6 +215,7 @@
     &.active {
         .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
     }
+    .active-btn-color(@primary-color);
 }
  
 // Dashed
@@ -229,6 +232,7 @@
     &.active {
         .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
     }
+    .active-btn-color(@primary-color);
 }
  
 // Text
@@ -257,9 +261,19 @@
     &.active {
         .button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
     }
+    .active-btn-color(@primary-color);
 }
  
 // Color
+// for tabindex
+.active-btn-color(@color) {
+    transition: all @transition-time @ease-in-out;
+    &.@{btn-prefix-cls}-focused {
+
+        box-shadow: 0 0 0 2px fade(@color, 20%);
+        z-index: 1;
+    }
+}
 .btn-color(@color) {
     .button-variant(@btn-primary-color; @color; @color);
  
@@ -269,6 +283,8 @@
     &.active {
         color: @btn-primary-color;
     }
+
+    .active-btn-color(@color);
 }
  
 // Circle for Icon