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

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

Browse Source
This commit is contained in:
neverland 2018-12-12 16:38:06 +08:00 committed by GitHub
parent 2ca2ced432
commit 35b0a8e510
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/checkbox/index.less
View File

@ -1,7 +1,5 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@checkbox-size: 20px;
.van-checkbox { .van-checkbox {
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
@ -14,15 +12,15 @@
} }
&__icon { &__icon {
box-sizing: border-box;
display: block; display: block;
font-size: 14px;
width: @checkbox-size; width: @checkbox-size;
height: @checkbox-size; height: @checkbox-size;
border: 1px solid @gray-light;
color: transparent; color: transparent;
font-size: 14px;
text-align: center; text-align: center;
transition: .2s; box-sizing: border-box;
border: 1px solid @checkbox-border-color;
transition: @checkbox-transition-duration;
&--round { &--round {
border-radius: 100%; border-radius: 100%;
@ -30,28 +28,31 @@
&--checked { &--checked {
color: @white; color: @white;
border-color: @blue; border-color: @checkbox-checked-icon-color;
background-color: @blue; background-color: @checkbox-checked-icon-color;
} }
&--disabled { &--disabled {
border-color: @border-color; border-color: @checkbox-disabled-icon-color;
background-color: currentColor; background-color: @checkbox-disabled-background-color;
color: @background-color;
} }
&--disabled&--checked { &--disabled&--checked {
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 {
margin: 0 10px 0 0;
float: left; float: left;
margin: 0 @checkbox-label-margin 0 0;
}
&--disabled {
color: @checkbox-disabled-label-color;
} }
&:empty { &:empty {

2
packages/checkbox/index.wxml
View File

@ -12,7 +12,7 @@
custom-style="line-height: 20px;" custom-style="line-height: 20px;"
/> />
</view> </view>
<view class="van-checkbox__label van-checkbox__label--{{ labelPosition }} label-class" bindtap="onClickLabel"> <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
<slot /> <slot />
</view> </view>
</view> </view>

11
packages/common/style/var.less
View File

@ -37,6 +37,17 @@
@button-bottom-action-primary-color: @white; @button-bottom-action-primary-color: @white;
@button-bottom-action-primary-background-color: @red; @button-bottom-action-primary-background-color: @red;
// 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
@info-size: 16px; @info-size: 16px;
@info-color: @white; @info-color: @white;