97 lines
2.2 KiB
Plaintext

:root {
--van-checkbox-size: 20px;
--van-checkbox-border-color: var(--van-gray-5);
--van-checkbox-duration: var(--van-duration-fast);
--van-checkbox-label-margin: var(--van-padding-xs);
--van-checkbox-label-color: var(--van-text-color);
--van-checkbox-checked-icon-color: var(--van-primary-color);
--van-checkbox-disabled-icon-color: var(--van-gray-5);
--van-checkbox-disabled-label-color: var(--van-text-color-3);
--van-checkbox-disabled-background: var(--van-border-color);
}
.van-checkbox {
display: flex;
align-items: center;
overflow: hidden;
cursor: pointer;
user-select: none;
&--disabled {
cursor: not-allowed;
}
&--label-disabled {
cursor: default;
}
&--horizontal {
margin-right: var(--van-padding-sm);
}
&__icon {
flex: none;
height: 1em;
font-size: var(--van-checkbox-size);
line-height: 1em;
cursor: pointer;
.van-icon {
display: block;
box-sizing: border-box;
width: 1.25em;
height: 1.25em;
color: transparent;
font-size: 0.8em;
line-height: 1.25;
text-align: center;
border: 1px solid var(--van-checkbox-border-color);
transition-duration: var(--van-checkbox-duration);
transition-property: color, border-color, background-color;
}
&--round {
.van-icon {
border-radius: 100%;
}
}
&--checked {
.van-icon {
color: var(--van-white);
background-color: var(--van-checkbox-checked-icon-color);
border-color: var(--van-checkbox-checked-icon-color);
}
}
&--disabled {
cursor: not-allowed;
.van-icon {
background-color: var(--van-checkbox-disabled-background);
border-color: var(--van-checkbox-disabled-icon-color);
}
}
&--disabled&--checked {
.van-icon {
color: var(--van-checkbox-disabled-icon-color);
}
}
}
&__label {
margin-left: var(--van-checkbox-label-margin);
color: var(--van-checkbox-label-color);
line-height: var(--van-checkbox-size);
&--left {
margin: 0 var(--van-checkbox-label-margin) 0 0;
}
&--disabled {
color: var(--van-checkbox-disabled-label-color);
}
}
}