Commit b6af2c2a0027ffdf29315374799dadf67c4c7c76
1 parent
9acc9d63
update Button styles
Showing
3 changed files
with
54 additions
and
5 deletions
Show diff stats
examples/routers/button.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | + <Button>Default</Button> | ||
| 4 | + <Button type="primary">Primary</Button> | ||
| 5 | + <Button type="ghost">Ghost</Button> | ||
| 6 | + <Button type="dashed">Dashed</Button> | ||
| 7 | + <Button type="text">Text</Button> | ||
| 8 | + <br><br> | ||
| 9 | + <Button type="info">Info</Button> | ||
| 10 | + <Button type="success">Success</Button> | ||
| 11 | + <Button type="warning">Warning</Button> | ||
| 12 | + <Button type="error">Error</Button> | ||
| 13 | + <br><br> | ||
| 14 | + <Button type="primary" shape="circle" icon="ios-search"></Button> | ||
| 15 | + <Button type="primary" icon="ios-search">Search</Button> | ||
| 16 | + <Button type="primary" shape="circle" icon="ios-search">Search</Button> | ||
| 17 | + <Button type="primary" shape="circle">Circle</Button> | ||
| 18 | + <br><br> | ||
| 19 | + <Button type="ghost" shape="circle" icon="ios-search"></Button> | ||
| 20 | + <Button type="ghost" icon="ios-search">Search</Button> | ||
| 21 | + <Button type="ghost" shape="circle" icon="ios-search">Search</Button> | ||
| 22 | + <Button type="ghost" shape="circle">Circle</Button> | ||
| 23 | + <br><br> | ||
| 24 | + <Button>Default</Button> | ||
| 25 | + <Button disabled>Default(Disabled)</Button> | ||
| 26 | + <br> | ||
| 27 | + <Button type="primary">Primary</Button> | ||
| 28 | + <Button type="primary" disabled>Primary(Disabled)</Button> | ||
| 29 | + <br> | ||
| 30 | + <Button type="ghost">Ghost</Button> | ||
| 31 | + <Button type="ghost" disabled>Ghost(Disabled)</Button> | ||
| 32 | + <br> | ||
| 33 | + <Button type="dashed">Dashed</Button> | ||
| 34 | + <Button type="dashed" disabled>Dashed(Disabled)</Button> | ||
| 35 | + <br> | ||
| 36 | + <Button type="text">Text</Button> | ||
| 37 | + <Button type="text" disabled>Text(Disabled)</Button> | ||
| 38 | + <br><br> | ||
| 39 | + | ||
| 40 | + <br><br> | ||
| 3 | <h4>基本</h4> | 41 | <h4>基本</h4> |
| 4 | <br><br> | 42 | <br><br> |
| 5 | <Button-group> | 43 | <Button-group> |
src/styles/components/button.less
| @@ -4,11 +4,6 @@ | @@ -4,11 +4,6 @@ | ||
| 4 | .btn; | 4 | .btn; |
| 5 | .btn-default; | 5 | .btn-default; |
| 6 | 6 | ||
| 7 | - &.@{btn-prefix-cls}-focused { | ||
| 8 | - 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; | ||
| 9 | - z-index: 1; | ||
| 10 | - } | ||
| 11 | - | ||
| 12 | &-long{ | 7 | &-long{ |
| 13 | width: 100%; | 8 | width: 100%; |
| 14 | } | 9 | } |
src/styles/mixins/button.less
| @@ -186,6 +186,7 @@ | @@ -186,6 +186,7 @@ | ||
| 186 | &.active { | 186 | &.active { |
| 187 | .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%)); | 187 | .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%)); |
| 188 | } | 188 | } |
| 189 | + .active-btn-color(@primary-color); | ||
| 189 | } | 190 | } |
| 190 | 191 | ||
| 191 | // Primary | 192 | // Primary |
| @@ -198,6 +199,7 @@ | @@ -198,6 +199,7 @@ | ||
| 198 | &.active { | 199 | &.active { |
| 199 | color: @btn-primary-color; | 200 | color: @btn-primary-color; |
| 200 | } | 201 | } |
| 202 | + .active-btn-color(@primary-color); | ||
| 201 | } | 203 | } |
| 202 | 204 | ||
| 203 | // Ghost | 205 | // Ghost |
| @@ -213,6 +215,7 @@ | @@ -213,6 +215,7 @@ | ||
| 213 | &.active { | 215 | &.active { |
| 214 | .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%)); | 216 | .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%)); |
| 215 | } | 217 | } |
| 218 | + .active-btn-color(@primary-color); | ||
| 216 | } | 219 | } |
| 217 | 220 | ||
| 218 | // Dashed | 221 | // Dashed |
| @@ -229,6 +232,7 @@ | @@ -229,6 +232,7 @@ | ||
| 229 | &.active { | 232 | &.active { |
| 230 | .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%)); | 233 | .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%)); |
| 231 | } | 234 | } |
| 235 | + .active-btn-color(@primary-color); | ||
| 232 | } | 236 | } |
| 233 | 237 | ||
| 234 | // Text | 238 | // Text |
| @@ -257,9 +261,19 @@ | @@ -257,9 +261,19 @@ | ||
| 257 | &.active { | 261 | &.active { |
| 258 | .button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent); | 262 | .button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent); |
| 259 | } | 263 | } |
| 264 | + .active-btn-color(@primary-color); | ||
| 260 | } | 265 | } |
| 261 | 266 | ||
| 262 | // Color | 267 | // Color |
| 268 | +// for tabindex | ||
| 269 | +.active-btn-color(@color) { | ||
| 270 | + transition: all @transition-time @ease-in-out; | ||
| 271 | + &.@{btn-prefix-cls}-focused { | ||
| 272 | + | ||
| 273 | + box-shadow: 0 0 0 2px fade(@color, 20%); | ||
| 274 | + z-index: 1; | ||
| 275 | + } | ||
| 276 | +} | ||
| 263 | .btn-color(@color) { | 277 | .btn-color(@color) { |
| 264 | .button-variant(@btn-primary-color; @color; @color); | 278 | .button-variant(@btn-primary-color; @color; @color); |
| 265 | 279 | ||
| @@ -269,6 +283,8 @@ | @@ -269,6 +283,8 @@ | ||
| 269 | &.active { | 283 | &.active { |
| 270 | color: @btn-primary-color; | 284 | color: @btn-primary-color; |
| 271 | } | 285 | } |
| 286 | + | ||
| 287 | + .active-btn-color(@color); | ||
| 272 | } | 288 | } |
| 273 | 289 | ||
| 274 | // Circle for Icon | 290 | // Circle for Icon |