blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 10:56:35 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Card: add less vars (#3167)

Browse Source
This commit is contained in:
neverland 2019-04-17 16:31:24 +08:00 committed by GitHub
parent ce4e0cc3e9
commit b5f7e55716
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/card/index.less
View File

@ -3,11 +3,11 @@
.van-card { .van-card {
position: relative; position: relative;
color: @text-color; color: @card-text-color;
font-size: 12px; padding: @card-padding;
padding: 5px 15px; font-size: @card-font-size;
box-sizing: border-box; box-sizing: border-box;
background-color: @background-color-light; background-color: @card-background-color;
&:not(:first-child) { &:not(:first-child) {
margin-top: 10px; margin-top: 10px;
@ -19,8 +19,8 @@
&__thumb { &__thumb {
position: relative; position: relative;
width: 90px; width: @card-thumb-size;
height: 90px; height: @card-thumb-size;
margin-right: 10px; margin-right: 10px;
flex: none; flex: none;
align-items: center; align-items: center;
@ -37,7 +37,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex: 1; flex: 1;
height: 90px; height: @card-thumb-size;
flex-direction: column; flex-direction: column;
min-width: 0; /* hack for flex box ellipsis */ min-width: 0; /* hack for flex box ellipsis */
@ -52,17 +52,17 @@
} }
&__title { &__title {
line-height: 16px; line-height: @card-title-line-height;
max-height: 32px; max-height: 32px;
font-weight: bold; font-weight: 500;
.multi-ellipsis(2); .multi-ellipsis(2);
} }
&__desc { &__desc {
color: @gray-darker; color: @card-desc-color;
max-height: 20px; max-height: @card-desc-line-height;
line-height: 20px; line-height: @card-desc-line-height;
} }
&__bottom { &__bottom {
@ -71,15 +71,15 @@
&__price { &__price {
display: inline-block; display: inline-block;
color: @red; color: @card-price-color;
font-weight: bold; font-weight: 500;
} }
&__origin-price { &__origin-price {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
font-size: 10px; color: @card-origin-price-color;
color: @gray-darker; font-size: @card-origin-price-font-size;
text-decoration: line-through; text-decoration: line-through;
} }

13
packages/style/var.less
View File

@ -87,6 +87,19 @@
@button-plain-background-color: @white; @button-plain-background-color: @white;
@button-disabled-opacity: .5; @button-disabled-opacity: .5;
// Card
@card-padding: 5px 15px;
@card-font-size: 12px;
@card-text-color: @text-color;
@card-background-color: @background-color-light;
@card-thumb-size: 90px;
@card-title-line-height: 16px;
@card-desc-color: @gray-darker;
@card-desc-line-height: 20px;
@card-price-color: @red;
@card-origin-price-color: @gray-darker;
@card-origin-price-font-size: 10px;
// Cell // Cell
@cell-font-size: 14px; @cell-font-size: 14px;
@cell-line-height: 24px; @cell-line-height: 24px;