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] Cell: add less vars (#3122)

Browse Source
This commit is contained in:
neverland 2019-04-10 15:39:52 +08:00 committed by GitHub
parent b7b15fa183
commit f5abc9e46d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/cell/index.less
View File

@ -2,19 +2,19 @@
@import "../style/mixins/hairline"; @import "../style/mixins/hairline";
.van-cell { .van-cell {
width: 100%;
display: flex;
padding: 10px 15px;
box-sizing: border-box;
line-height: 24px;
position: relative; position: relative;
background-color: @white; display: flex;
color: @text-color; width: 100%;
font-size: 14px;
overflow: hidden; overflow: hidden;
box-sizing: border-box;
color: @cell-text-color;
font-size: @cell-font-size;
line-height: @cell-line-height;
background-color: @cell-background-color;
padding: @cell-vertical-padding @cell-horizontal-padding;
&:not(:last-child)::after { &:not(:last-child)::after {
.hairline-bottom(@border-color, 15px); .hairline-bottom(@cell-border-color, 15px);
} }
&--borderless::after { &--borderless::after {
@ -22,10 +22,10 @@
} }
&__label { &__label {
color: @gray-dark; color: @cell-label-color;
font-size: 12px; font-size: @cell-label-font-size;
margin-top: 3px; margin-top: @cell-label-margin-top;
line-height: 18px; line-height: @cell-label-line-height;
} }
&__title, &__title,
@ -34,7 +34,7 @@
} }
&__value { &__value {
color: @gray-dark; color: @cell-value-color;
overflow: hidden; overflow: hidden;
text-align: right; text-align: right;
position: relative; position: relative;
@ -48,10 +48,10 @@
&__left-icon, &__left-icon,
&__right-icon { &__right-icon {
height: 24px;
min-width: 1em; min-width: 1em;
font-size: 16px; height: @cell-line-height;
line-height: 24px; font-size: @cell-icon-size;
line-height: @cell-line-height;
} }
&__left-icon { &__left-icon {
@ -59,13 +59,13 @@
} }
&__right-icon { &__right-icon {
color: @gray-dark;
margin-left: 5px; margin-left: 5px;
color: @cell-right-icon-color;
} }
&--clickable { &--clickable {
&:active { &:active {
background-color: @active-color; background-color: @cell-active-color;
} }
} }
@ -76,8 +76,8 @@
content: '*'; content: '*';
position: absolute; position: absolute;
left: 7px; left: 7px;
font-size: 14px; font-size: @cell-font-size;
color: @red; color: @cell-required-color;
} }
} }
@ -86,15 +86,15 @@
} }
&--large { &--large {
padding-top: 12px; padding-top: @cell-large-vertical-padding;
padding-bottom: 12px; padding-bottom: @cell-large-vertical-padding;
.van-cell__title { .van-cell__title {
font-size: 16px; font-size: @cell-large-title-font-size;
} }
.van-cell__label { .van-cell__label {
font-size: 14px; font-size: @cell-large-label-font-size;
} }
} }
} }

21
packages/style/var.less
View File

@ -72,6 +72,27 @@
@button-plain-background-color: @white; @button-plain-background-color: @white;
@button-disabled-opacity: .5; @button-disabled-opacity: .5;
// Cell
@cell-font-size: 14px;
@cell-line-height: 24px;
@cell-vertical-padding: 10px;
@cell-horizontal-padding: 15px;
@cell-text-color: @text-color;
@cell-background-color: @white;
@cell-border-color: @border-color;
@cell-active-color: @active-color;
@cell-required-color: @red;
@cell-label-color: @gray-dark;
@cell-label-font-size: 12px;
@cell-label-line-height: 18px;
@cell-label-margin-top: 3px;
@cell-value-color: @gray-dark;
@cell-icon-size: 16px;
@cell-right-icon-color: @gray-dark;
@cell-large-vertical-padding: 12px;
@cell-large-title-font-size: 16px;
@cell-large-label-font-size: 14px;
// CellGroup // CellGroup
@cell-group-background-color: @white; @cell-group-background-color: @white;
@cell-group-title-color: @gray-dark; @cell-group-title-color: @gray-dark;