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/coupon/index.less
+39 -19
View File
@@ -1,31 +1,50 @@
@import './var.less';
@import '../style/mixins/ellipsis';
:root {
--van-coupon-margin: @coupon-margin;
--van-coupon-content-height: @coupon-content-height;
--van-coupon-content-padding: @coupon-content-padding;
--van-coupon-background-color: @coupon-background-color;
--van-coupon-active-background-color: @coupon-active-background-color;
--van-coupon-border-radius: @coupon-border-radius;
--van-coupon-box-shadow: @coupon-box-shadow;
--van-coupon-head-width: @coupon-head-width;
--van-coupon-amount-color: @coupon-amount-color;
--van-coupon-amount-font-size: @coupon-amount-font-size;
--van-coupon-currency-font-size: @coupon-currency-font-size;
--van-coupon-name-font-size: @coupon-name-font-size;
--van-coupon-disabled-text-color: @coupon-disabled-text-color;
--van-coupon-description-padding: @coupon-description-padding;
--van-coupon-description-border-color: @coupon-description-border-color;
--van-coupon-corner-checkbox-icon-color: @coupon-corner-checkbox-icon-color;
}
.van-coupon {
margin: @coupon-margin;
margin: var(--van-coupon-margin);
overflow: hidden;
background-color: @coupon-background-color;
border-radius: @coupon-border-radius;
box-shadow: @coupon-box-shadow;
background-color: var(--van-coupon-background-color);
border-radius: var(--van-coupon-border-radius);
box-shadow: var(--van-coupon-box-shadow);
&:active {
background-color: @coupon-active-background-color;
background-color: var(--van-coupon-active-background-color);
}
&__content {
display: flex;
align-items: center;
box-sizing: border-box;
min-height: @coupon-content-height;
padding: @coupon-content-padding;
min-height: var(--van-coupon-content-height);
padding: var(--van-coupon-content-padding);
color: @gray-8;
}
&__head {
position: relative;
min-width: @coupon-head-width;
min-width: var(--van-coupon-head-width);
padding: 0 @padding-xs;
color: @coupon-amount-color;
color: var(--van-coupon-amount-color);
text-align: center;
}
@@ -39,12 +58,12 @@
&__amount {
margin-bottom: 6px;
font-weight: @font-weight-bold;
font-size: @coupon-amount-font-size;
font-size: var(--van-coupon-amount-font-size);
.ellipsis();
span {
font-weight: normal;
font-size: @coupon-currency-font-size;
font-size: var(--van-coupon-currency-font-size);
&:not(:empty) {
margin-left: 2px;
@@ -61,13 +80,14 @@
&__body {
position: relative;
flex: 1;
border-radius: 0 @coupon-border-radius @coupon-border-radius 0;
border-radius: 0 var(--van-coupon-border-radius)
var(--van-coupon-border-radius) 0;
}
&__name {
margin-bottom: 10px;
font-weight: bold;
font-size: @coupon-name-font-size;
font-size: var(--van-coupon-name-font-size);
line-height: @line-height-md;
}
@@ -82,24 +102,24 @@
bottom: 0;
.van-checkbox__icon--checked .van-icon {
background-color: @coupon-corner-checkbox-icon-color;
border-color: @coupon-corner-checkbox-icon-color;
background-color: var(--van-coupon-corner-checkbox-icon-color);
border-color: var(--van-coupon-corner-checkbox-icon-color);
}
}
&__description {
padding: @coupon-description-padding;
padding: var(--van-coupon-description-padding);
font-size: @font-size-sm;
border-top: 1px dashed @coupon-description-border-color;
border-top: 1px dashed var(--van-coupon-description-border-color);
}
&--disabled {
&:active {
background-color: @coupon-background-color;
background-color: var(--van-coupon-background-color);
}
.van-coupon-item__content {
height: @coupon-content-height - 10px;
height: calc(var(--van-coupon-content-height) - 10px);
}
.van-coupon__head {