// color // 主色调 $primary-color: #fa2c19 !default; $primary-color-end: #fa6419 !default; // 辅助色 $help-color: #f5f5f5 !default; // 标题常规文字 $title-color: #1a1a1a !default; // 副标题 $title-color2: #666666 !default; // 次内容 $text-color: #808080 !default; // 特殊禁用色 $disable-color: #cccccc !default; $white: #fff; $black: #000; // padding $padding-xs: 12px; $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default; // ---- Animation ---- $animation-duration: 0.25s !default; $animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default; // Font $font-size-0: 10px; $font-size-1: 12px; $font-size-2: 14px; $font-size-3: 16px; $font-size-4: 18px; $font-weight-bold: 400; $font-size-small: $font-size-1; $font-size-base: $font-size-2; $font-size-large: $font-size-3; $line-height-base: 1.5 !default; // button $button-border-radius: 25px; $button-border-width: 1px; $button-default-bg-color: $white; $button-default-border-color: rgba(204, 204, 204, 1); $button-default-color: rgba(102, 102, 102, 1); $button-small-height: 28px; $button-default-height: 38px; $button-large-height: 48px; $button-large-line-height: 46px; $button-small-line-height: 26px; $button-block-height: 48px; $button-default-line-height: 36px; $button-block-line-height: 46px; $button-default-font-size: $font-size-2; $button-disabled-opacity: 0.68; $button-primary-color: $white; $button-primary-border-color: $primary-color; $button-primary-background-color: linear-gradient( 135deg, $primary-color 0%, $primary-color-end 100% ); $button-info-color: $white; $button-info-border-color: rgba(73, 106, 242, 1); $button-info-background-color: linear-gradient( 315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100% ); $button-success-color: $white; $button-success-border-color: rgba(38, 191, 38, 1); $button-success-background-color: linear-gradient( 135deg, rgba(38, 191, 38, 1) 0%, rgba(39, 197, 48, 1) 45%, rgba(40, 207, 63, 1) 83%, rgba(41, 212, 70, 1) 100% ); $button-danger-color: $white; $button-danger-border-color: rgba(250, 44, 25, 1); $button-danger-background-color: rgba(250, 44, 25, 1); $button-warning-color: $white; $button-warning-border-color: rgba(255, 158, 13, 1); $button-warning-background-color: linear-gradient( 135deg, rgba(255, 158, 13, 1) 0%, rgba(255, 167, 13, 1) 45%, rgba(255, 182, 13, 1) 83%, rgba(255, 190, 13, 1) 100% ); $button-plain-background-color: #fff; $button-plain-background-color: $white; // cell $cell-color: $title-color2; $cell-title-font: $font-size-2; $cell-title-desc-font: $font-size-1; $cell-desc-font: $font-size-2; $cell-desc-color: $disable-color; $cell-border-radius: 6px; // cell-group $cell-group-title-padding: 0 10px; $cell-group-title-color: #909ca4; $cell-group-title-font-size: $font-size-2; $cell-group-title-line-height: 20px; $cell-group-background-color: $white; // icon $icon-height: 20px; $icon-width: 20px; $icon-line-height: 20px; // uploader $uploader-picture-width: 100px !default; $uploader-picture-height: 100px !default; $uploader-background: #f7f8fa !default; //input $input-border-bottom: #eaf0fb; $input-disabled-color: #c8c9cc; // textarea $textarea-font: $font-size-2; $textarea-height: 100px; $textarea-limit-color: $text-color; $textarea-text-color: $title-color; $textarea-disabled-color: $disable-color; // inputnumber $inputnumber-icon-color: $title-color; $inputnumber-icon-void-color: $disable-color; $inputnumber-input-background-color: $help-color; $inputnumber-input-border-radius: 4px; $inputnumber-input-width: 40px; $inputnumber-icon-size: 20px; // actionsheet $zindex-actionsheet: 10001 !default; $body-background: #f6f6f6 !default; $light-color: #f6f6f6 !default; $font-size-base: $font-size-2; $font-size-small: $font-size-1; //shortpassword $shortpsd-background-color: rgba(245, 245, 245, 1); $shortpsd-border-color: #ddd; $shortpsd-error: rgba(242, 39, 12, 1); $shortpsd-forget: rgba(128, 128, 128, 1); //price $price-big-size: 24px; //avatar $avatar-square: 5px; $avatar-large-width: 60px; $avatar-large-height: 60px; $avatar-small-width: 32px; $avatar-small-height: 32px; $avatar-normal-width: 40px; $avatar-normal-height: 40px; //switch $switch-close-bg-color: #ebebeb; $switch-close--cline-bg-color: #f0f0f0; //backtop $backtop-border-color: #e0e0e0; // calendar $calendar-primary-color: $primary-color; $calendar-choose-color: #fef6f6; $calendar-base-color: #333333; $calendar-disable-color: #d1d0d0; $calendar-title-font: $font-size-4; $calendar-base-font: $font-size-3; $calendar-text-font: $font-size-1; $calendar-day-font: 18px; //overlay $overlay-bg-color: rgba(0, 0, 0, 0.7); //popup $popup-close-icon-margin: 16px; $popup-border-radius: 20px; // Notify $notify-text-color: $white; $notify-padding: 12px 0; $notify-font-size: 14px; $notify-height: 44px; // NoticeBar $noticeBar-font-size: 14px !default; $noticeBar-height: 40px !default; $noticeBar-line-height: 24px !default; $noticeBar-left-icon-width: 16px !default; $noticeBar-right-icon-width: 16px !default; $notify-base-background-color: linear-gradient( 135deg, rgba(250, 44, 25, 1) 0%, rgba(250, 63, 25, 1) 45%, rgba(250, 89, 25, 1) 83%, rgba(250, 100, 25, 1) 100% ); $notify-primary-background-color: linear-gradient( 315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100% ); $notify-success-background-color: linear-gradient( 135deg, rgba(38, 191, 38, 1) 0%, rgba(39, 197, 48, 1) 45%, rgba(40, 207, 63, 1) 83%, rgba(41, 212, 70, 1) 100% ); $notify-danger-background-color: rgba(250, 50, 25, 1); $notify-warning-background-color: linear-gradient( 135deg, rgba(255, 93, 13, 1) 0%, rgba(255, 154, 13, 1) 100% ); // rate $rate-icon-color: $primary-color; $rate-icon-void-color: $disable-color; // tabbar $tabbar-active-color: $primary-color; $tabbar-border-color: #eee; //infiniteloading $infinite-bottom-color: #c8c8c8; //range $range-max: #333333; $rang-bg-color: rgba($primary-color, 0.5); $rang-bar-bg-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%); //address $address-region-tab-line: linear-gradient(90deg, $primary-color 0%, $primary-color-end 100%); //steps $steps-base-icon-width: 25px !default; $steps-base-icon-height: 25px !default; $steps-base-icon-line-height: 25px !default; $steps-base-icon-font-size: 13px !default; $steps-base-title-font-size: 14px !default; $steps-base-line-color: #909ca4 !default; $steps-base-title-color: #909ca4 !default; $steps-base-title-margin-bottom: 10px !default; $steps-base-content-font-size: 14px !default; $steps-base-content-color: #666 !default; $steps-wait-icon-bg-color: #959fb1 !default; $steps-wait-icon-color: $white !default; $steps-wait-head-color: #909ca4 !default; $steps-wait-head-border-color: #909ca4 !default; $steps-wait-content-color: #909ca4 !default; $steps-finish-head-color: $primary-color !default; $steps-finish-head-border-color: $primary-color !default; $steps-finish-title-color: $primary-color !default; $steps-finish-line-background: $primary-color !default; $steps-finish-icon-text-color: $white !default; $steps-process-head-color: $white !default; $steps-process-head-border-color: $primary-color !default; $steps-process-title-color: $primary-color !default; $steps-process-icon-text-color: $primary-color !default; // dialog $dialog-width: 296px; // checkbox $checkbox-label-color: #1d1e1e; $checkbox-label-disable-color: #999; //radio $radio-label-font-color: #1d1e1e !default; $radio-label-font-active-color: #f0250f !default; $radio-label-disable-color: #999 !default; $radio-icon-disable-color: #d6d6d6 !default; $radio-label-button-border-color: #f0250f !default; $radio-label-button-background: rgba(240, 37, 15, 0.05) !default; // signature $signature-border-color: #dadada; //fixednav $fixednav-bg-color: $white; $fixednav-font-color: $black; $fixednav-index: 201; $fixednav-btn-bg: linear-gradient(135deg, rgba(250, 25, 44, 1) 0%, rgba(250, 63, 25, 1) 100%); // Tag $tag-font-size: 12px !default; $tag-default-background-color: #000000 !default; $tag-primary-background-color: #3460fa !default; $tag-success-background-color: #4fc08d !default; $tag-danger-background-color: linear-gradient( 135deg, rgba(242, 20, 12, 1) 0%, rgba(232, 34, 14, 1) 69.83950099728881%, rgba(242, 77, 12, 1) 100% ) !default; $tag-warning-background-color: #f3812e !default; $tag-default-color: #ffffff !default; $tag-border-width: 1px !default; $tag-plain-background-color: #fff !default; $tag-plain-color: rgb(250, 36, 0) !default; //badge $badge-background-color: linear-gradient( 135deg, $primary-color 0%, $primary-color-end 100% ) !default; $badge-font-size: $font-size-1 !default; $badge-default-background-color: rgba(255, 255, 255, 1) !default; //popover $popover-white-background-color: rgba(255, 255, 255, 1) !default; $popover-dark-background-color: rgba(75, 76, 77, 1) !default; $popover-border-bottom-color: rgba(229, 229, 229, 1) !default; $popover-primary-text-color: rgba(51, 51, 51, 1) !default; $popover-disable-color: rgba(154, 155, 157, 1) !default; //pagination $pagination-color: $primary-color !default; $pagination-font-size: $font-size-2 !default; $pagination-item-border-color: #e4e7eb !default; $pagination-active-background-color: linear-gradient( 135deg, rgba(250, 44, 25, 1) 0%, rgba(250, 63, 25, 1) 44.59259259%, rgba(250, 89, 25, 1) 83.40740741%, rgba(250, 100, 25, 1) 100% ) !default; $pagination-disable-color: rgba(116, 116, 116, 0.31) !default; $pagination-disable-background-color: #f7f8fa !default; $pagination-item-border-width: 1px !default; $pagination-item-border-radius: 2px !default; $pagination-prev-next-padding: 0 11px !default; // dialog $dialog-min-height: 156px !default; $dialog-padding: 28px 24px 16px 24px !default; $dialog-header-height: 20px !default; $dialog-header-color: rgba(38, 38, 38, 1) !default; $dialog-content-margin: 20px 0 !default; $dialog-content-max-height: 268px !default; $dialog-content-line-height: 16px !default; $dialog-mask-z-index: 1050 !default; $dialog-mask-background-color: rgba($black, 0.7) !default; $dialog-outer-z-index: 2000 !default; $dialog-outer-bordder-radius: 20px !default; $dialog-vertical-footer-ok-margin-top: 10px !default; $dialog-footer-button-min-width: 100px !default; $dialog-footer-cancel-margin-right: 20px !default; $dialog-footer-ok-max-width: 128px !default; // 在组件中import //@import './mixins/index'; //@import './animation/index'; // tabs $tabs-tab-smile-color: $primary-color !default; $tabs-titles-border-radius: 0 !default; $tabs-titles-item-large-font-size: $font-size-3 !default; $tabs-titles-item-font-size: $font-size-2 !default; $tabs-titles-item-small-font-size: $font-size-1 !default; $tabs-titles-item-color: $title-color !default; $tabs-titles-background-color: $help-color !default; $tabs-horizontal-tab-line-color: linear-gradient( 90deg, $primary-color 0%, rgba($primary-color, 0.15) 100% ) !default; $tabs-horizontal-titles-height: 46px !default; $tabs-horizontal-titles-item-min-width: 50px !default; $tabs-horizontal-titles-item-active-line-width: 40px !default; $tabs-vertical-tab-line-color: linear-gradient( 180deg, $primary-color 0%, rgba($primary-color, 0.15) 100% ) !default; $tabs-vertical-titles-item-height: 40px !default; $tabs-vertical-titles-item-active-line-height: 14px !default; $tabs-vertical-titles-width: 100px !default; // empty $empty-padding: 32px 0 !default; $empty-image-size: 170px !default; $empty-description-margin-top: 4px !default; $empty-description-color: #666666 !default; $empty-description-font-size: 14px !default; $empty-description-line-height: 20px !default; $empty-description-padding: 0 40px !default; // indicator $indicator-color: $primary-color !default; $indicator-dot-color: $disable-color !default; $indicator-white: $white !default; $indicator-size: 18px !default; $indicator-dot-size: calc($indicator-size / 3) !default; $indicator-border-size: $indicator-size + 2 !default; $indicator-number-font-size: 10px !default; // circleProgress $circleprogress-primary-color: $primary-color !default; $circleprogress-path-color: #e5e9f2 !default; $circleprogress-text-color: #000000 !default; $circleprogress-text-size: $font-size-3 !default;