blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 02:16:12 +08:00
Code Issues Projects Releases Wiki Activity

Button: reduce unnecessary styles

Browse Source
This commit is contained in:
陈嘉涵 2017-08-22 17:13:38 +08:00
parent 15569b0e51
commit 28cd16c7f0
3 changed files with 13 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/examples-docs/button.md
View File

@ -48,10 +48,10 @@ Vue.component(Button.name, Button);
:::demo 按钮尺寸 :::demo 按钮尺寸
```html ```html
<van-button size="large">large</van-button> <van-button size="large">Large</van-button>
<van-button size="normal">normal</van-button> <van-button size="normal">Normal</van-button>
<van-button size="small">small</van-button> <van-button size="small">Small</van-button>
<van-button size="mini">mini</van-button> <van-button size="mini">Mini</van-button>
``` ```
::: :::
@ -61,7 +61,7 @@ Vue.component(Button.name, Button);
:::demo 禁用状态 :::demo 禁用状态
```html ```html
<van-button disabled>diabled</van-button> <van-button disabled>Diabled</van-button>
``` ```
::: :::

46
packages/vant-css/src/button.css
View File

@ -1,5 +1,4 @@
@import './common/var.css'; @import './common/var.css';
@import './loading.css';
.van-button { .van-button {
position: relative; position: relative;
@ -11,9 +10,9 @@
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
appearance: none;
outline: 0; outline: 0;
overflow: hidden; overflow: hidden;
-webkit-appearance: none;
&::after { &::after {
content: " "; content: " ";
@ -22,8 +21,8 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #000;
opacity: 0; opacity: 0;
background-color: #000;
border-radius: inherit; /* inherit parent's border radius */ border-radius: inherit; /* inherit parent's border radius */
} }
@ -33,9 +32,6 @@
&__icon-loading { &__icon-loading {
display: inline-block; display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
} }
&--default { &--default {
@ -44,8 +40,6 @@
border: 1px solid $button-default-border-color; border: 1px solid $button-default-border-color;
&:active { &:active {
border-color: #cacaca;
background-color: $c-gray-light;
color: $c-gray-dark; color: $c-gray-dark;
} }
} }
@ -54,30 +48,18 @@
color: $button-primary-color; color: $button-primary-color;
background-color: $button-primary-background-color; background-color: $button-primary-background-color;
border: 1px solid $button-primary-border-color; border: 1px solid $button-primary-border-color;
&:active {
border-color: #00AA00;
background-color: #00AA00;
color: #66CC66;
}
} }
&--danger { &--danger {
color: $button-danger-color; color: $button-danger-color;
background-color: $button-danger-background-color; background-color: $button-danger-background-color;
border: 1px solid $button-danger-border-color; border: 1px solid $button-danger-border-color;
&:active {
border-color: #D43333;
background-color: #D43333;
}
} }
&--large { &--large {
width: 100%; width: 100%;
height: 50px; height: 50px;
line-height: 48px; line-height: 48px;
font-size: 16px;
} }
&--normal { &--normal {
@ -92,9 +74,7 @@
font-size: 12px; font-size: 12px;
} }
/* /* mini图标默认宽度50px，文字不能超过4个 */
mini图标默认宽度50px，文字不能超过4个
*/
&--mini { &--mini {
display: inline-block; display: inline-block;
width: 50px; width: 50px;
@ -114,14 +94,8 @@
} }
&--block { &--block {
display: block;
width: 100%; width: 100%;
} display: block;
&--loading {
.van-button__text {
display: none;
}
} }
&--bottom-action { &--bottom-action {
@ -130,24 +104,16 @@
line-height: 50px; line-height: 50px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background-color: $bottom-action-button-default-background-color;
color: $bottom-action-button-default-color; color: $bottom-action-button-default-color;
font-size: 16px; background-color: $bottom-action-button-default-background-color;
&:active { &:active {
border-color: #DD6F44;
background-color: #DD6F44;
color: #fff; color: #fff;
} }
&.van-button--primary { &.van-button--primary {
background-color: $bottom-action-button-primary-background-color;
color: $bottom-action-button-primary-color; color: $bottom-action-button-primary-color;
background-color: $bottom-action-button-primary-background-color;
&:active {
border-color: #D43333;
background-color: #D43333;
}
} }
} }
} }

2
packages/vant-css/src/common/var.css
View File

@ -23,7 +23,7 @@ $button-primary-border-color: #0a0;
$button-default-color: $c-black; $button-default-color: $c-black;
$button-default-background-color: $c-white; $button-default-background-color: $c-white;
$button-default-border-color: #bbb; $button-default-border-color: #ccc;
$button-danger-color: $c-white; $button-danger-color: $c-white;
$button-danger-background-color: #f44; $button-danger-background-color: #f44;