mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat: Field, Card, Cell 组件样式变量化 (#2212)
* feat(Cell): cell组件样式调整 * feat(Field): field组件样式调整 * feat(Cell): Cell组件的样式调整
This commit is contained in:
Lindy
rex
parent
dd48ce34a0
commit
6d13e10fb5
@ -7,14 +7,14 @@
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
.theme(color, '@text-color');
|
||||
.theme(background-color, '@white');
|
||||
.theme(padding, '@cell-vertical-padding @cell-horizontal-padding');
|
||||
.theme(font-size, '@cell-font-size');
|
||||
.theme(line-height, '@cell-line-height');
|
||||
.theme(color, '@cell-text-color');
|
||||
.theme(background-color, '@cell-background-color');
|
||||
|
||||
&::after {
|
||||
.hairline-bottom(@border-color, 15px);
|
||||
.hairline-bottom(@border-color, @padding-md);
|
||||
}
|
||||
|
||||
&--borderless::after {
|
||||
@ -22,21 +22,21 @@
|
||||
}
|
||||
|
||||
&-group {
|
||||
.theme(background-color, '@white');
|
||||
.theme(background-color, '@cell-background-color');
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
.theme(color, '@gray-dark');
|
||||
.theme(margin-top, '@cell-label-margin-top');
|
||||
.theme(font-size, '@cell-label-font-size');
|
||||
.theme(line-height, '@cell-label-line-height');
|
||||
.theme(color, '@cell-label-color');
|
||||
}
|
||||
|
||||
&__value {
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
.theme(color, '@gray-dark');
|
||||
.theme(color, '@cell-value-color');
|
||||
}
|
||||
|
||||
&__title,
|
||||
@ -52,8 +52,8 @@
|
||||
&__right-icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
.theme(height, '@cell-line-height');
|
||||
.theme(font-size, '@cell-icon-size');
|
||||
}
|
||||
|
||||
&__left-icon-wrap {
|
||||
@ -62,20 +62,20 @@
|
||||
|
||||
&__right-icon-wrap {
|
||||
margin-left: 5px;
|
||||
.theme(color, '@gray-dark');
|
||||
.theme(color, '@cell-right-icon-color');
|
||||
}
|
||||
|
||||
&__left-icon {
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
.theme(line-height, '@cell-line-height');
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
line-height: 24px;
|
||||
.theme(line-height, '@cell-line-height');
|
||||
}
|
||||
|
||||
&--clickable&--hover {
|
||||
.theme(background-color, '@active-color');
|
||||
.theme(background-color, '@cell-active-color');
|
||||
}
|
||||
|
||||
&--required {
|
||||
@ -83,10 +83,10 @@
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
font-size: 14px;
|
||||
content: '*';
|
||||
.theme(color, '@red');
|
||||
.theme(left, '@padding-xs');
|
||||
.theme(font-size, '@cell-font-size');
|
||||
.theme(color, '@cell-required-color');
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,15 +95,15 @@
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
.theme(padding-top, '@cell-large-vertical-padding');
|
||||
.theme(padding-bottom, '@cell-large-vertical-padding');
|
||||
|
||||
.van-cell__title {
|
||||
font-size: 16px;
|
||||
.theme(font-size, '@cell-large-title-font-size');
|
||||
}
|
||||
|
||||
.van-cell__label {
|
||||
font-size: 14px;
|
||||
.theme(font-size, '@cell-large-label-font-size');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -118,6 +118,27 @@
|
||||
@card-origin-price-color: @gray-darker;
|
||||
@card-origin-price-font-size: @font-size-xs;
|
||||
|
||||
// Cell
|
||||
@cell-font-size: @font-size-md;
|
||||
@cell-line-height: 24px;
|
||||
@cell-vertical-padding: 10px;
|
||||
@cell-horizontal-padding: @padding-md;
|
||||
@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: @font-size-sm;
|
||||
@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: @padding-sm;
|
||||
@cell-large-title-font-size: @font-size-lg;
|
||||
@cell-large-label-font-size: @font-size-md;
|
||||
|
||||
// Checkbox
|
||||
@checkbox-size: 20px;
|
||||
@checkbox-border-color: @gray-light;
|
||||
@ -146,6 +167,17 @@
|
||||
@count-down-font-size: @font-size-md;
|
||||
@count-down-line-height: 20px;
|
||||
|
||||
// Field
|
||||
@field-input-text-color: @text-color;
|
||||
@field-input-error-text-color: @red;
|
||||
@field-input-disabled-text-color: @gray-dark;
|
||||
@field-placeholder-text-color: @gray-dark;
|
||||
@field-clear-icon-color: @gray;
|
||||
@field-icon-container-color: @gray-dark;
|
||||
@field-error-message-color: @red;
|
||||
@field-error-message-text-font-size: @font-size-sm;
|
||||
@field-text-area-min-height: 18px;
|
||||
|
||||
// Image
|
||||
@image-placeholder-text-color: @gray-dark;
|
||||
@image-placeholder-font-size: @font-size-md;
|
||||
@ -304,4 +336,4 @@
|
||||
@dropdown-menu-title-disabled-text-color: @gray-dark;
|
||||
@dropdown-menu-title-padding: 0 @padding-xs;
|
||||
@dropdown-menu-title-line-height: 18px;
|
||||
@dropdown-menu-option-active-color: @blue;
|
||||
@dropdown-menu-option-active-color: @blue;
|
||||
@ -7,8 +7,8 @@
|
||||
align-items: center;
|
||||
|
||||
&--textarea {
|
||||
min-height: 24px;
|
||||
line-height: 1.2em;
|
||||
.theme(min-height, '@cell-line-height');
|
||||
}
|
||||
|
||||
&--textarea&--ios {
|
||||
@ -21,8 +21,6 @@
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
@ -30,21 +28,23 @@
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
resize: none;
|
||||
.theme(color, '@text-color');
|
||||
.theme(color, '@field-input-text-color');
|
||||
.theme(height, '@cell-line-height');
|
||||
.theme(min-height, '@cell-line-height');
|
||||
|
||||
&--textarea {
|
||||
height: 18px;
|
||||
min-height: 18px;
|
||||
.theme(height, '@field-text-area-min-height');
|
||||
.theme(min-height, '@field-text-area-min-height');
|
||||
}
|
||||
|
||||
&--error {
|
||||
.theme(color, '@red');
|
||||
.theme(color, '@field-input-error-text-color');
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
.theme(color, '@gray-dark');
|
||||
.theme(color, '@field-input-disabled-text-color');
|
||||
}
|
||||
|
||||
&--center {
|
||||
@ -62,25 +62,25 @@
|
||||
right: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
.theme(color, '@gray-dark');
|
||||
.theme(color, '@field-placeholder-text-color');
|
||||
|
||||
&--error {
|
||||
.theme(color, '@red');
|
||||
.theme(color, '@field-error-message-color');
|
||||
}
|
||||
}
|
||||
|
||||
&__icon-root {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
.theme(min-height, '@cell-line-height');
|
||||
}
|
||||
|
||||
&__clear-root,
|
||||
&__icon-container {
|
||||
margin-right: -10px;
|
||||
padding: 0 10px;
|
||||
line-height: inherit;
|
||||
vertical-align: middle;
|
||||
.theme(padding, '0 @padding-xs');
|
||||
.theme(margin-right, '-@padding-xs');
|
||||
}
|
||||
|
||||
&__clear-root,
|
||||
@ -90,11 +90,11 @@
|
||||
}
|
||||
|
||||
&__clear-root {
|
||||
.theme(color, '@gray');
|
||||
.theme(color, '@field-clear-icon-color');
|
||||
}
|
||||
|
||||
&__icon-container {
|
||||
.theme(color, '@gray-dark');
|
||||
.theme(color, '@field-icon-container-color');
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding-left: 10px;
|
||||
.theme(padding-left, '@padding-xs');
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
@ -110,9 +110,9 @@
|
||||
}
|
||||
|
||||
&__error-message {
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
.theme(color, '@red');
|
||||
.theme(font-size, '@field-error-message-text-font-size');
|
||||
.theme(color, '@field-error-message-color');
|
||||
|
||||
&--center {
|
||||
text-align: center;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user