| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- // Color Palette
- @black: #000;
- @white: #fff;
- @gray-1: #f7f8fa;
- @gray-2: #f2f3f5;
- @gray-3: #ebedf0;
- @gray-4: #dcdee0;
- @gray-5: #c8c9cc;
- @gray-6: #969799;
- @gray-7: #646566;
- @gray-8: #27282A;
- @red: #FF3959;
- @blue: #3370FF;
- @orange: #FF7426;
- @orange-dark: #ed6a0c;
- @orange-light: #fffbe8;
- @green: #3EC40F;
- @bg-gray-1: #F7F8FA;
- // Gradient Colors
- @gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
- @gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
- // Component Colors
- @text-color: @gray-8;
- @active-color: @gray-2;
- @active-opacity: 0.7;
- @disabled-opacity: 0.5;
- @background-color: @gray-1;
- @background-color-light: #fafafa;
- @text-link-color: #576b95;
- // Padding
- @padding-base: 2px;
- @padding-xs: @padding-base * 2;
- @padding-sm: @padding-base * 3;
- @padding-md: @padding-base * 4;
- @padding-lg: @padding-base * 6;
- @padding-xl: @padding-base * 8;
- // Font
- @font-size-xs: 4px;
- @font-size-sm: 12px;
- @font-size-md: 14px;
- @font-size-lg: 16px;
- @font-weight-bold: 500;
- @line-height-xs: 14px;
- @line-height-sm: 18px;
- @line-height-md: 20px;
- @line-height-lg: 22px;
- @base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
- Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
- 'Microsoft Yahei', sans-serif;
- @price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
- sans-serif;
- // Animation
- @animation-duration-base: 0.3s;
- @animation-duration-fast: 0.2s;
- @animation-timing-function-enter: ease-out;
- @animation-timing-function-leave: ease-in;
- // Border
- @border-color: @gray-3;
- @border-width-base: 1px;
- @border-radius-sm: 2px;
- @border-radius-md: 4px;
- @border-radius-lg: 8px;
- @border-radius-common: 28px;
- @border-radius-max: 999px;
- // button
- @button-primary-background-color: @orange;
- @button-primary-border-color: @orange;
- @button-border-radius: 28px;
- // filed
- @field-placeholder-text-color: #999;
- @checkbox-checked-icon-color: @orange;
- .van-button {
- font-size: 16px;
- .van-button__icon {
- margin-right: 6px;
- }
- }
- .van-button--gray {
- color: #999;
- background-color: @bg-gray-1;
- border: @button-border-width solid @bg-gray-1;
- }
- .van-button--black {
- color: #EDCFB3;
- background-color: #333;
- border: @button-border-width solid #333;
- padding: 0 6px;
- font-size: 12px;
- }
- .van-tag {
- border-radius: 4px;
- }
- .van-tag--primary {
- background-color: @orange;
- }
- .van-tag--medium {
- padding: 4px 8px;
- }
- //tab
- // .u-tabs__wrapper {
- // height: auto;
- // .u-tabs__wrapper__nav {
- // font-size: 16px;
- // color: #595959;
- // justify-content: flex-start;
- // flex: none;
- // padding: 0 15px;
- // &:first-child {
- // padding-left: 20px;
- // }
- // }
- // // .van-tab--active {
- // // font-size: 20px;
- // // color: #000000;
- // // font-weight: 600;
- // // }
- // .van-tabs__nav--line {
- // padding-bottom: 5px;
- // }
- // .u-tabs__wrapper__nav__line {
- // background: linear-gradient(90deg, #EF6E4D 0%, rgba(255, 255, 255, 0) 100%);
- // border-radius: 13px;
- // height: 5px;
- // bottom: 0;
- // // left: -10px;
- // transform: translateX(-100%);
- // }
- // }
|