blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-21 22:09:16 +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;
text-align: center;
line-height: inherit;
border: 1px solid @gray-light;
width: @checkbox-size;
height: @checkbox-size;
box-sizing: border-box;
transition: .2s;
border: 1px solid @checkbox-border-color;
transition: @checkbox-transition-duration;
}
&--round {
@ -34,33 +34,36 @@
&--checked {
.van-icon {
color: @white;
border-color: @blue;
background-color: @blue;
border-color: @checkbox-checked-icon-color;
background-color: @checkbox-checked-icon-color;
}
}
&--disabled {
.van-icon {
color: @background-color;
border-color: @border-color;
background-color: currentColor;
border-color: @checkbox-disabled-icon-color;
background-color: @checkbox-disabled-background-color;
}
}
&--disabled&--checked {
.van-icon {
border-color: @border-color;
background-color: @border-color;
color: @checkbox-disabled-icon-color;
}
}
}
&__label {
margin-left: 10px;
color: @checkbox-label-color;
margin-left: @checkbox-label-margin;
&--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>
<div :class="b()">
<div
:class="[b('icon', [shape, { disabled: isDisabled, checked }])]"
:class="b('icon', [shape, { disabled: isDisabled, checked }])"
@click="toggle"
>
<slot
@ -16,7 +16,7 @@
</div>
<span
v-if="$slots.default"
:class="b('label', labelPosition)"
:class="b('label', [labelPosition, { disabled: isDisabled }])"
@click="toggle('label')"
>
<slot />

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

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

2
packages/mixins/bem.js
View File

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

8
packages/style/var.less
View File

@ -39,6 +39,14 @@
// Checkbox
@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-size: 16px;