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/card/index.less
+39 -20
View File
@@ -1,12 +1,31 @@
@import './var.less';
:root {
--van-card-padding: @card-padding;
--van-card-font-size: @card-font-size;
--van-card-text-color: @card-text-color;
--van-card-background-color: @card-background-color;
--van-card-thumb-size: @card-thumb-size;
--van-card-thumb-border-radius: @card-thumb-border-radius;
--van-card-title-line-height: @card-title-line-height;
--van-card-desc-color: @card-desc-color;
--van-card-desc-line-height: @card-desc-line-height;
--van-card-price-color: @card-price-color;
--van-card-origin-price-color: @card-origin-price-color;
--van-card-num-color: @card-num-color;
--van-card-origin-price-font-size: @card-origin-price-font-size;
--van-card-price-font-size: @card-price-font-size;
--van-card-price-integer-font-size: @card-price-integer-font-size;
--van-card-price-font-family: @card-price-font-family;
}
.van-card {
position: relative;
box-sizing: border-box;
padding: @card-padding;
color: @card-text-color;
font-size: @card-font-size;
background-color: @card-background-color;
padding: var(--van-card-padding);
color: var(--van-card-text-color);
font-size: var(--van-card-font-size);
background-color: var(--van-card-background-color);
&:not(:first-child) {
margin-top: @padding-xs;
@@ -19,12 +38,12 @@
&__thumb {
position: relative;
flex: none;
width: @card-thumb-size;
height: @card-thumb-size;
width: var(--van-card-thumb-size);
height: var(--van-card-thumb-size);
margin-right: @padding-xs;
img {
border-radius: @card-thumb-border-radius;
border-radius: var(--van-card-thumb-border-radius);
}
}
@@ -35,7 +54,7 @@
flex-direction: column;
justify-content: space-between;
min-width: 0; /* hack for flex box ellipsis */
min-height: @card-thumb-size;
min-height: var(--van-card-thumb-size);
&--centered {
justify-content: center;
@@ -50,13 +69,13 @@
&__title {
max-height: 32px;
font-weight: @font-weight-bold;
line-height: @card-title-line-height;
line-height: var(--van-card-title-line-height);
}
&__desc {
max-height: @card-desc-line-height;
color: @card-desc-color;
line-height: @card-desc-line-height;
max-height: var(--van-card-desc-line-height);
color: var(--van-card-desc-color);
line-height: var(--van-card-desc-line-height);
}
&__bottom {
@@ -65,31 +84,31 @@
&__price {
display: inline-block;
color: @card-price-color;
color: var(--van-card-price-color);
font-weight: @font-weight-bold;
font-size: @card-price-font-size;
font-size: var(--van-card-price-font-size);
}
&__price-integer {
font-size: @card-price-integer-font-size;
font-family: @card-price-font-family;
font-size: var(--van-card-price-integer-font-size);
font-family: var(--van-card-price-font-family);
}
&__price-decimal {
font-family: @card-price-font-family;
font-family: var(--van-card-price-font-family);
}
&__origin-price {
display: inline-block;
margin-left: 5px;
color: @card-origin-price-color;
font-size: @card-origin-price-font-size;
color: var(--van-card-origin-price-color);
font-size: var(--van-card-origin-price-font-size);
text-decoration: line-through;
}
&__num {
float: right;
color: @card-num-color;
color: var(--van-card-num-color);
}
&__tag {