blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 06:31:45 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Checkbox: update disabled label color (#2260)

Browse Source
This commit is contained in:
neverland 2018-12-10 20:25:13 +08:00 committed by GitHub
parent 4fe387b7b1
commit abee937da9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/checkbox/index.less
View File

@ -18,11 +18,11 @@
color: transparent; color: transparent;
text-align: center; text-align: center;
line-height: inherit; line-height: inherit;
border: 1px solid @gray-light;
width: @checkbox-size; width: @checkbox-size;
height: @checkbox-size; height: @checkbox-size;
box-sizing: border-box; box-sizing: border-box;
transition: .2s; border: 1px solid @checkbox-border-color;
transition: @checkbox-transition-duration;
} }
&--round { &--round {
@ -34,33 +34,36 @@
&--checked { &--checked {
.van-icon { .van-icon {
color: @white; color: @white;
border-color: @blue; border-color: @checkbox-checked-icon-color;
background-color: @blue; background-color: @checkbox-checked-icon-color;
} }
} }
&--disabled { &--disabled {
.van-icon { .van-icon {
color: @background-color; border-color: @checkbox-disabled-icon-color;
border-color: @border-color; background-color: @checkbox-disabled-background-color;
background-color: currentColor;
} }
} }
&--disabled&--checked { &--disabled&--checked {
.van-icon { .van-icon {
border-color: @border-color; color: @checkbox-disabled-icon-color;
background-color: @border-color;
} }
} }
} }
&__label { &__label {
margin-left: 10px; color: @checkbox-label-color;
margin-left: @checkbox-label-margin;
&--left { &--left {
float: left; float: left;
margin: 0 10px 0 0; margin: 0 @checkbox-label-margin 0 0;
}
&--disabled {
color: @checkbox-disabled-label-color;
} }
} }
} }

4
packages/checkbox/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="b()"> <div :class="b()">
<div <div
:class="[b('icon', [shape, { disabled: isDisabled, checked }])]" :class="b('icon', [shape, { disabled: isDisabled, checked }])"
@click="toggle" @click="toggle"
> >
<slot <slot
@ -16,7 +16,7 @@
</div> </div>
<span <span
v-if="$slots.default" v-if="$slots.default"
:class="b('label', labelPosition)" :class="b('label', [labelPosition, { disabled: isDisabled }])"
@click="toggle('label')" @click="toggle('label')"
> >
<slot /> <slot />

4
packages/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -18,7 +18,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
</i> </i>
</div> <span class="van-checkbox__label"> </div> <span class="van-checkbox__label van-checkbox__label--disabled">
复选框 复选框
</span></div> </span></div>
<div class="van-checkbox"> <div class="van-checkbox">
@ -27,7 +27,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
</i> </i>
</div> <span class="van-checkbox__label"> </div> <span class="van-checkbox__label van-checkbox__label--disabled">
复选框 复选框
</span></div> </span></div>
</div> </div>

2
packages/mixins/bem.js
View File

@ -22,7 +22,7 @@ const prefix = (name, mods) => {
} }
const ret = {}; const ret = {};
Object.keys(mods).forEach(key => { mods && Object.keys(mods).forEach(key => {
ret[name + MODS + key] = mods[key]; ret[name + MODS + key] = mods[key];
}); });
return ret; return ret;

8
packages/style/var.less
View File

@ -39,6 +39,14 @@
// Checkbox // Checkbox
@checkbox-size: 20px; @checkbox-size: 20px;
@checkbox-border-color: @gray-light;
@checkbox-transition-duration: .2s;
@checkbox-label-margin: 10px;
@checkbox-label-color: @text-color;
@checkbox-checked-icon-color: @blue;
@checkbox-disabled-icon-color: @gray;
@checkbox-disabled-label-color: @gray;
@checkbox-disabled-background-color: @border-color;
// Info // Info
@info-size: 16px; @info-size: 16px;