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/submit-bar/index.less
+42 -19
View File
@@ -1,27 +1,50 @@
@import './var.less';
@import '../style/mixins/safe-area.less';
:root {
--van-submit-bar-height: @submit-bar-height;
--van-submit-bar-z-index: @submit-bar-z-index;
--van-submit-bar-background-color: @submit-bar-background-color;
--van-submit-bar-button-width: @submit-bar-button-width;
--van-submit-bar-price-color: @submit-bar-price-color;
--van-submit-bar-price-font-size: @submit-bar-price-font-size;
--van-submit-bar-currency-font-size: @submit-bar-currency-font-size;
--van-submit-bar-text-color: @submit-bar-text-color;
--van-submit-bar-text-font-size: @submit-bar-text-font-size;
--van-submit-bar-tip-padding: @submit-bar-tip-padding;
--van-submit-bar-tip-font-size: @submit-bar-tip-font-size;
--van-submit-bar-tip-line-height: @submit-bar-tip-line-height;
--van-submit-bar-tip-color: @submit-bar-tip-color;
--van-submit-bar-tip-background-color: @submit-bar-tip-background-color;
--van-submit-bar-tip-icon-size: @submit-bar-tip-icon-size;
--van-submit-bar-button-height: @submit-bar-button-height;
--van-submit-bar-padding: @submit-bar-padding;
--van-submit-bar-price-font-size: @submit-bar-price-font-size;
--van-submit-bar-price-integer-font-size: @submit-bar-price-integer-font-size;
--van-submit-bar-price-font-family: @submit-bar-price-font-family;
}
.van-submit-bar {
position: fixed;
bottom: 0;
left: 0;
z-index: @submit-bar-z-index;
z-index: var(--van-submit-bar-z-index);
width: 100%;
background-color: @submit-bar-background-color;
background-color: var(--van-submit-bar-background-color);
user-select: none;
.safe-area-inset-bottom();
&__tip {
padding: @submit-bar-tip-padding;
color: @submit-bar-tip-color;
font-size: @submit-bar-tip-font-size;
line-height: @submit-bar-tip-line-height;
background-color: @submit-bar-tip-background-color;
padding: var(--van-submit-bar-tip-padding);
color: var(--van-submit-bar-tip-color);
font-size: var(--van-submit-bar-tip-font-size);
line-height: var(--van-submit-bar-tip-line-height);
background-color: var(--van-submit-bar-tip-background-color);
}
&__tip-icon {
min-width: @submit-bar-tip-icon-size * 1.5;
font-size: @submit-bar-tip-icon-size;
min-width: calc(var(--van-submit-bar-tip-icon-size) * 1.5);
font-size: var(--van-submit-bar-tip-icon-size);
vertical-align: middle;
}
@@ -33,15 +56,15 @@
display: flex;
align-items: center;
justify-content: flex-end;
height: @submit-bar-height;
padding: @submit-bar-padding;
font-size: @submit-bar-text-font-size;
height: var(--van-submit-bar-height);
padding: var(--van-submit-bar-padding);
font-size: var(--van-submit-bar-text-font-size);
}
&__text {
flex: 1;
padding-right: @padding-sm;
color: @submit-bar-text-color;
color: var(--van-submit-bar-text-color);
text-align: right;
span {
@@ -55,19 +78,19 @@
}
&__price {
color: @submit-bar-price-color;
color: var(--van-submit-bar-price-color);
font-weight: @font-weight-bold;
font-size: @submit-bar-price-font-size;
font-size: var(--van-submit-bar-price-font-size);
&-integer {
font-size: @submit-bar-price-integer-font-size;
font-family: @submit-bar-price-font-family;
font-size: var(--van-submit-bar-price-integer-font-size);
font-family: var(--van-submit-bar-price-font-family);
}
}
&__button {
width: @submit-bar-button-width;
height: @submit-bar-button-height;
width: var(--van-submit-bar-button-width);
height: var(--van-submit-bar-button-height);
font-weight: @font-weight-bold;
border: none;