blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] Radio & Checkbox disabled color (#383)

Browse Source
This commit is contained in:
neverland 2017-12-06 16:02:40 +08:00 committed by GitHub
parent 80c2fdc18f
commit db524359e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/demos/views/checkbox.vue
View File

@ -5,7 +5,8 @@
</demo-block>
<demo-block :title="$t('disabled')">
<van-checkbox v-model="checkbox2" disabled>{{ $t('checkbox') }} 2</van-checkbox>
<van-checkbox :value="false" disabled>{{ $t('checkbox') }} 2</van-checkbox>
<van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox>
</demo-block>
<demo-block :title="$t('title3')">
@ -64,6 +65,8 @@ export default {
<style lang="postcss">
.demo-checkbox {
background: #fff;
.van-checkbox {
margin: 10px 0 0 20px;
}

2
docs/demos/views/radio.vue
View File

@ -66,6 +66,8 @@ export default {
<style lang="postcss">
.demo-radio {
background: #fff;
.van-radios {
padding: 0 20px;

10
packages/vant-css/src/checkbox.css
View File

@ -4,6 +4,7 @@ $van-checkbox-size: 20px;
.van-checkbox {
overflow: hidden;
user-select: none;
.van-icon-success {
color: $white;
@ -61,13 +62,14 @@ $van-checkbox-size: 20px;
&--disabled {
.van-icon-success {
border-color: #d1dbe5;
background-color: transparent;
color: $background-color;
border-color: $gray-light;
background-color: currentColor;
}
.van-checkbox__control:checked + .van-icon-success {
border-color: #d1dbe5;
background-color: #d1dbe5;
border-color: $gray-light;
background-color: $gray-light;
}
}
}

5
packages/vant-css/src/radio.css
View File

@ -4,6 +4,7 @@ $van-radio-size: 20px;
.van-radio {
overflow: hidden;
user-select: none;
&__input,
&__label {
@ -45,7 +46,9 @@ $van-radio-size: 20px;
&--disabled {
.van-icon {
color: #d1dbe5;
color: $gray-light;
border-radius: 100%;
background-color: $background-color;
}
}
}