[improvement] SubmitBar: add less vars

This commit is contained in:
陈嘉涵 2019-05-10 16:11:53 +08:00
parent 9b03d1f395
commit ed4d0aa656
2 changed files with 33 additions and 16 deletions

View File

@ -328,6 +328,23 @@
@stepper-input-disabled-color: @active-color; @stepper-input-disabled-color: @active-color;
@stepper-border-radius: 4px; @stepper-border-radius: 4px;
// SubmitBar
@submit-bar-height: 50px;
@submit-bar-z-index: 100;
@submit-bar-background-color: @white;
@submit-bar-button-width: 110px;
@submit-bar-price-color: @red;
@submit-bar-price-font-size: 18px;
@submit-bar-currency-font-size: 14px;
@submit-bar-text-color: @text-color;
@submit-bar-text-font-size: 14px;
@submit-bar-tip-padding: 10px;
@submit-bar-tip-font-size: 12px;
@submit-bar-tip-line-height: 1.5;
@submit-bar-tip-color: #f56723;
@submit-bar-tip-background-color: #fff7cc;
@submit-bar-tip-icon-size: 12px;
// TreeSelect // TreeSelect
@tree-select-font-size: 14px; @tree-select-font-size: 14px;
@tree-select-nav-background-color: @background-color-light; @tree-select-nav-background-color: @background-color-light;

View File

@ -4,22 +4,22 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 100; z-index: @submit-bar-z-index;
width: 100%; width: 100%;
background-color: @white; background-color: @submit-bar-background-color;
user-select: none; user-select: none;
&__tip { &__tip {
padding: 10px; padding: @submit-bar-tip-padding;
color: #f56723; color: @submit-bar-tip-color;
font-size: 12px; font-size: @submit-bar-tip-font-size;
line-height: 18px; line-height: @submit-bar-tip-line-height;
background-color: #fff7cc; background-color: @submit-bar-tip-background-color;
} }
&__tip-icon { &__tip-icon {
min-width: 18px; min-width: @submit-bar-tip-icon-size * 1.5;
font-size: 12px; font-size: @submit-bar-tip-icon-size;
vertical-align: middle; vertical-align: middle;
} }
@ -31,14 +31,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
height: 50px; height: @submit-bar-height;
font-size: 14px; font-size: @submit-bar-text-font-size;
} }
&__text { &__text {
flex: 1; flex: 1;
padding-right: 12px; padding-right: 12px;
color: @text-color; color: @submit-bar-text-color;
font-weight: 500; font-weight: 500;
text-align: right; text-align: right;
@ -52,16 +52,16 @@
} }
&__price { &__price {
color: @red; color: @submit-bar-price-color;
font-size: 18px; font-size: @submit-bar-price-font-size;
&::first-letter { &::first-letter {
font-size: 14px; font-size: @submit-bar-currency-font-size;
} }
} }
&__button { &__button {
width: 110px; width: @submit-bar-button-width;
} }
&--safe-area-inset-bottom { &--safe-area-inset-bottom {