ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 01:54:48 +00:00
Code Issues Actions 4 Packages 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
5 changed files with 27 additions and 16 deletions
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>