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] Collapse: content default style (#2275)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/collapse-item/index.less
View File

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

6
packages/collapse/demo/index.vue
View File

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

9
packages/style/var.less
View File

@ -48,6 +48,15 @@
@checkbox-disabled-label-color: @gray;
@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-size: 16px;
@info-color: @white;