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/cell/index.less
+44 -22
View File
@@ -1,20 +1,42 @@
@import './var.less';
@import '../style/mixins/hairline';
:root {
--van-cell-font-size: @cell-font-size;
--van-cell-line-height: @cell-line-height;
--van-cell-vertical-padding: @cell-vertical-padding;
--van-cell-horizontal-padding: @cell-horizontal-padding;
--van-cell-text-color: @cell-text-color;
--van-cell-background-color: @cell-background-color;
--van-cell-border-color: @cell-border-color;
--van-cell-active-color: @cell-active-color;
--van-cell-required-color: @cell-required-color;
--van-cell-label-color: @cell-label-color;
--van-cell-label-font-size: @cell-label-font-size;
--van-cell-label-line-height: @cell-label-line-height;
--van-cell-label-margin-top: @cell-label-margin-top;
--van-cell-value-color: @cell-value-color;
--van-cell-icon-size: @cell-icon-size;
--van-cell-right-icon-color: @cell-right-icon-color;
--van-cell-large-vertical-padding: @cell-large-vertical-padding;
--van-cell-large-title-font-size: @cell-large-title-font-size;
--van-cell-large-label-font-size: @cell-large-label-font-size;
}
.van-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: @cell-vertical-padding @cell-horizontal-padding;
padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
overflow: hidden;
color: @cell-text-color;
font-size: @cell-font-size;
line-height: @cell-line-height;
background-color: @cell-background-color;
color: var(--van-cell-text-color);
font-size: var(--van-cell-font-size);
line-height: var(--van-cell-line-height);
background-color: var(--van-cell-background-color);
&::after {
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
.hairline-bottom(var(--van-cell-border-color), @padding-md, @padding-md);
}
&:last-child::after,
@@ -23,10 +45,10 @@
}
&__label {
margin-top: @cell-label-margin-top;
color: @cell-label-color;
font-size: @cell-label-font-size;
line-height: @cell-label-line-height;
margin-top: var(--van-cell-label-margin-top);
color: var(--van-cell-label-color);
font-size: var(--van-cell-label-font-size);
line-height: var(--van-cell-label-line-height);
}
&__title,
@@ -37,7 +59,7 @@
&__value {
position: relative;
overflow: hidden;
color: @cell-value-color;
color: var(--van-cell-value-color);
text-align: right;
vertical-align: middle;
word-wrap: break-word;
@@ -50,9 +72,9 @@
&__left-icon,
&__right-icon {
height: @cell-line-height;
font-size: @cell-icon-size;
line-height: @cell-line-height;
height: var(--van-cell-line-height);
font-size: var(--van-cell-icon-size);
line-height: var(--van-cell-line-height);
}
&__left-icon {
@@ -61,14 +83,14 @@
&__right-icon {
margin-left: @padding-base;
color: @cell-right-icon-color;
color: var(--van-cell-right-icon-color);
}
&--clickable {
cursor: pointer;
&:active {
background-color: @cell-active-color;
background-color: var(--van-cell-active-color);
}
}
@@ -78,8 +100,8 @@
&::before {
position: absolute;
left: @padding-xs;
color: @cell-required-color;
font-size: @cell-font-size;
color: var(--van-cell-required-color);
font-size: var(--van-cell-font-size);
content: '*';
}
}
@@ -89,15 +111,15 @@
}
&--large {
padding-top: @cell-large-vertical-padding;
padding-bottom: @cell-large-vertical-padding;
padding-top: var(--van-cell-large-vertical-padding);
padding-bottom: var(--van-cell-large-vertical-padding);
.van-cell__title {
font-size: @cell-large-title-font-size;
font-size: var(--van-cell-large-title-font-size);
}
.van-cell__label {
font-size: @cell-large-label-font-size;
font-size: var(--van-cell-large-label-font-size);
}
}
}