alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(style): add component css variables

Browse Source
This commit is contained in:
chenjiahan
2021-06-12 15:52:22 +08:00
committed by neverland
parent dafea4e1e8
commit fe1cba97b7
73 changed files with 1702 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/field/index.less
+40 -19
View File
@@ -1,13 +1,34 @@
@import './var.less';
@import '../cell/var.less';
:root {
--van-field-label-width: @field-label-width;
--van-field-label-color: @field-label-color;
--van-field-label-margin-right: @field-label-margin-right;
--van-field-input-text-color: @field-input-text-color;
--van-field-input-error-text-color: @field-input-error-text-color;
--van-field-input-disabled-text-color: @field-input-disabled-text-color;
--van-field-placeholder-text-color: @field-placeholder-text-color;
--van-field-icon-size: @field-icon-size;
--van-field-clear-icon-size: @field-clear-icon-size;
--van-field-clear-icon-color: @field-clear-icon-color;
--van-field-right-icon-color: @field-right-icon-color;
--van-field-error-message-color: @field-error-message-color;
--van-field-error-message-text-color: @field-error-message-text-color;
--van-field-text-area-min-height: @field-text-area-min-height;
--van-field-word-limit-color: @field-word-limit-color;
--van-field-word-limit-font-size: @field-word-limit-font-size;
--van-field-word-limit-line-height: @field-word-limit-line-height;
--van-field-disabled-text-color: @field-disabled-text-color;
}
.van-field {
&__label {
flex: none;
box-sizing: border-box;
width: @field-label-width;
margin-right: @field-label-margin-right;
color: @field-label-color;
width: var(--van-field-label-width);
margin-right: var(--van-field-label-margin-right);
color: var(--van-field-label-color);
text-align: left;
word-wrap: break-word;
@@ -22,7 +43,7 @@
&--disabled {
.van-field__label {
color: @field-disabled-text-color;
color: var(--van-field-disabled-text-color);
}
}
@@ -42,7 +63,7 @@
min-width: 0; // for flex-shrink in field__button
margin: 0;
padding: 0;
color: @field-input-text-color;
color: var(--van-field-input-text-color);
line-height: inherit;
text-align: left;
background-color: transparent;
@@ -50,15 +71,15 @@
resize: none;
&::placeholder {
color: @field-placeholder-text-color;
color: var(--van-field-placeholder-text-color);
}
&:disabled {
color: @field-input-disabled-text-color;
color: var(--van-field-input-disabled-text-color);
cursor: not-allowed;
opacity: 1;
// fix disabled color in mobile safari
-webkit-text-fill-color: @field-input-disabled-text-color;
-webkit-text-fill-color: var(--van-field-input-disabled-text-color);
}
&:read-only {
@@ -109,15 +130,15 @@
}
&__clear {
color: @field-clear-icon-color;
font-size: @field-clear-icon-size;
color: var(--van-field-clear-icon-color);
font-size: var(--van-field-clear-icon-size);
cursor: pointer;
}
&__left-icon .van-icon,
&__right-icon .van-icon {
display: block;
font-size: @field-icon-size;
font-size: var(--van-field-icon-size);
line-height: inherit;
}
@@ -126,7 +147,7 @@
}
&__right-icon {
color: @field-right-icon-color;
color: var(--van-field-right-icon-color);
}
&__button {
@@ -134,8 +155,8 @@
}
&__error-message {
color: @field-error-message-color;
font-size: @field-error-message-text-color;
color: var(--van-field-error-message-color);
font-size: var(--van-field-error-message-text-color);
text-align: left;
&--center {
@@ -149,9 +170,9 @@
&__word-limit {
margin-top: @padding-base;
color: @field-word-limit-color;
font-size: @field-word-limit-font-size;
line-height: @field-word-limit-line-height;
color: var(--van-field-word-limit-color);
font-size: var(--van-field-word-limit-font-size);
line-height: var(--van-field-word-limit-line-height);
text-align: right;
}
@@ -159,7 +180,7 @@
.van-field__control {
&,
&::placeholder {
color: @field-input-error-text-color;
color: var(--van-field-input-error-text-color);
-webkit-text-fill-color: currentColor;
}
}
@@ -167,7 +188,7 @@
&--min-height {
.van-field__control {
min-height: @field-text-area-min-height;
min-height: var(--van-field-text-area-min-height);
}
}
}