[improvement] Collapse: content default style (#2275)

This commit is contained in:
neverland 2018-12-12 17:26:16 +08:00 committed by GitHub
parent 267e5eda1d
commit 21e79239d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 11 deletions

View File

@ -3,8 +3,8 @@
.van-collapse-item { .van-collapse-item {
&__title { &__title {
.van-cell__right-icon::before { .van-cell__right-icon::before {
transition: .3s;
transform: rotate(90deg); transform: rotate(90deg);
transition: @collapse-item-transition-duration;
} }
&::after { &::after {
@ -24,7 +24,7 @@
&--disabled { &--disabled {
&, &,
& .van-cell__right-icon { & .van-cell__right-icon {
color: @gray; color: @collapse-item-title-disabled-color;
} }
&:active { &:active {
@ -36,11 +36,14 @@
&__wrapper { &__wrapper {
overflow: hidden; overflow: hidden;
will-change: height; will-change: height;
transition: height .3s ease-in-out; transition: height @collapse-item-transition-duration ease-in-out;
} }
&__content { &__content {
padding: 15px; color: @collapse-item-content-text-color;
background-color: @white; padding: @collapse-item-content-padding;
font-size: @collapse-item-content-font-size;
line-height: @collapse-item-content-line-height;
background-color: @collapse-item-content-background-color;
} }
} }

View File

@ -81,12 +81,6 @@ export default {
@import '../../style/var'; @import '../../style/var';
.demo-collapse { .demo-collapse {
.van-collapse-item__content {
font-size: 13px;
line-height: 1.5;
color: @gray-darker;
}
.van-icon-question { .van-icon-question {
color: @blue; color: @blue;
vertical-align: -3px; vertical-align: -3px;

View File

@ -48,6 +48,15 @@
@checkbox-disabled-label-color: @gray; @checkbox-disabled-label-color: @gray;
@checkbox-disabled-background-color: @border-color; @checkbox-disabled-background-color: @border-color;
// Collapse
@collapse-item-transition-duration: .3s;
@collapse-item-content-padding: 15px;
@collapse-item-content-font-size: 13px;
@collapse-item-content-line-height: 1.5;
@collapse-item-content-text-color: @gray-dark;
@collapse-item-content-background-color: @white;
@collapse-item-title-disabled-color: @gray;
// Info // Info
@info-size: 16px; @info-size: 16px;
@info-color: @white; @info-color: @white;