// Variable format should follow the `$component-modifier-state-property` order. // Body // // Settings for the `` element. $body-bg: $bg-color !default; $body-color: $gray-9; // Fonts // // Font, line-height, and color for body text, headings, and more. //图标字体路径 $icon-font-path: '../fonts' !default; $font-size-base: 0.32rem; // Assumes the browser default, typically `16px` $font-size-xs: 0.24rem; $font-size-sm: 0.28rem; $font-size-m: 0.30rem; $font-size-lg: 0.36rem; // Grid columns // // Set the number of columns and specify the width of the gutters. $grid-columns: 12; $grid-gutter-width: 30px; // Components // // // Prefix $css-prefix: ''; // border $border-width: 0.04rem; $border-width-sm: 0.02rem; $border-radius: 0.08rem; // transition $transition-time: 0.2s; $transition-time: 0.2s; // z-index $progress-zindex: 2000; $popover-zindex: 1999; $toast-zindex: 1999; $picker-zindex: 1000; $popup-zindex: 1000; $modal-zindex: 1000; $fixed-zindex: 999; $menu-zindex: 999; $tabs-pagination-zindex: 999; // line-height $line-height-paragraph: 0.48rem; // 蒙版色 $mask-bg: $black-50; // 分割线 $segment-line-color: $gray-seg; // 以8px为基数 $spacers: ( 0: 0, 8: 0.08rem, 16: 0.16rem, 20: 0.20rem, // cmmc特殊添加间距 24: 0.24rem, 30: 0.30rem, // cmmc特殊添加间距 32: 0.32rem, 40: 0.4rem, 48: 0.48rem, 56: 0.56rem, 64: 0.64rem, 72: 0.72rem, 80: 0.8rem ); // Buttons // // define text, background and border color. $button-prefix-cls: $css-prefix + 'btn'; $button-height: 0.88rem; $button-bg: #e6ebee; $button-group-bg: $white; $button-group-height: 1.28rem; //block // $button-block-height: 0.88rem; // $button-block-font-size: $font-size-base; /* NOTE: 修改button样式 */ // $button-padding-x: 0.4rem; $button-padding-x: .32rem; $button-font-size: $font-size-base; $button-icon-spacer-x: 0.24rem; $button-icon-font-size: 0.4rem; $button-sm-height: 0.64rem; $button-sm-padding-x: 0.32rem; $button-sm-font-size: $font-size-base; $button-sm-icon-font-size: $font-size-base; // Segment // // $segment-prefix-cls: $css-prefix + 'segment'; $segment-font-size: $font-size-base; $segment-item-height: 0.68rem; // tab-bar // // $tab-bar-prefix-cls: $css-prefix + 'tab-bar'; $tab-bar-height: 1rem; $tab-bar-tab-title-font-size: 0.2rem; $tab-bar-tab-title-margin-top: 0.08rem; /* NOTE: 修改标签大小为 */ $tab-bar-tab-icon-font-size: .48rem; // $tab-bar-tab-icon-font-size: .32rem; $tab-bar-tab-icon-color: $gray-11; // tabs // // $tabs-prefix-cls: $css-prefix + 'tabs'; // $tabs-tab-font-size: $font-size-base; /* NOTE: 修改字体大小为14px */ $tabs-tab-font-size: $font-size-base; $tabs-tab-retro-font-size: $font-size-lg; // $tabs-tab-height: 0.88rem; /* NOTE: 修改高度为 48px */ $tabs-tab-height: 0.84rem; // nav-bar // // $nav-bar-prefix-cls: $css-prefix + 'nav-bar'; $nav-bar-height: 0.88rem; $nav-bar-padding-x: 0.32rem; $nav-bar-font-size: $font-size-base; $nav-bar-icon-font-size: 0.6rem; $nav-bar-title-font-size: $font-size-lg; // search-bar // // $search-bar-prefix-cls: $css-prefix + 'search-bar'; $search-bar-height: 0.68rem; $search-bar-padding: 0; $search-bar-input-height: .68rem; $search-bar-input-font-size: .28rem; $search-bar-input-padding-x: 0.2rem 0.2rem; $search-bar-input-icon-margin-x: 0.1rem; $search-bar-input-icon-font-size: $font-size-lg; $search-bar-cancel-margin-x: 0.2rem; // radio // // $radio-prefix-cls: $css-prefix + 'radio'; $radio-size: 0.32rem; $radio-margin-x: 0.16rem; $radio-item-font-size: .28rem; // checkbox // // $checkbox-prefix-cls: $css-prefix + 'checkbox'; // switch // // $switch-prefix-cls: $css-prefix + 'switch'; // $switch-width: 0.64rem; /* NOTE: 修改宽度 */ $switch-width: 1rem; $switch-height: .6rem; $switch-inner-height: 0.52rem; $switch-trigger-spacer: 0.04rem; // input // // $input-prefix-cls: $css-prefix + 'input'; $input-font-size: $font-size-base; $input-height: 0.72rem; /* NOTE: 修改 */ // $input-padding-x: .32rem; $input-padding-x: .3rem; /* NOTE: 修改input的颜色值和placeholder */ $input-color: #333; $search-bar-input-icon-color: #C9C9CD; $input-placeholder-color: $gray-11; $input-clear-icon-font-size: 0.32rem; $input-label-font-size: $font-size-sm; $input-label-margin-bottom: 0.1rem; $input-label-top-margin-bottom: 0.4rem; $textarea-line-height: 0.5rem; $textarea-count-position: 0.3rem; $input-modal-height: 0.64rem; $input-modal-padding-x: 0.2rem; $input-modal-font-size: 0.26rem; $input-modal-margin-top: 0.16rem; // picker // // $picker-prefix-cls: $css-prefix + 'picker'; $picker-mask-bg-color: $black-50; $picker-header-height: 0.98rem; $picker-header-item-font-size: $font-size-base; $picker-header-item-padding-x: 0.38rem; $picker-header-title-font-size: $font-size-lg; /* NOTE: 颜色 */ $picker-col-item-height: 1rem; $picker-col-item-font-size: $font-size-sm; $picker-col-item-selected-font-size: 0.32rem; // list // // $list-prefix-cls: $css-prefix + 'list'; $list-body-padding-y: .16rem; $list-body-color: rgba(0, 0, 0, .5); /* NOTE: NOTE */ // $list-body-font-size: $font-size-sm; $list-body-font-size: .24rem; $list-item-height: .88rem; $list-item-padding-x: 0.3rem; /* NOTE: border 颜色 */ $list-body-border-color: $gray-seg; //* NOTE: cmcc 修改为32px*/ $list-item-form-padding-x: 0.3rem; $list-item-padding-y: 0.24rem; $list-item-content-line-height: .4rem; $list-thumb-size: 0.72rem; $list-thumb-icon-font-size: .24rem; /* NOTE: 修改 */ $list-thumb-margin-right: 0.24rem; $list-content-margin-right: 0.08rem; $list-brief-margin-top: 0; $list-arrow-font-size: .48rem; // alerts // // Define colors for form feedback states and, by default, alerts. $alert-prefix-cls: $css-prefix + 'alert'; $alert-bg: $white; $alert-success-bg: rgba($brand-success, 0.1); $alert-info-bg: #e1f3ff; $alert-warning-bg: #fff4dc; $alert-danger-bg: #ffe2e2; $alert-height: 0.9rem; $alert-padding-x: 0.3rem; $alert-margin-bottom: 0.2rem; $alert-font-size: $font-size-base; $alert-icon-font-size: $font-size-base; $alert-content-padding-x: 0.1rem; /* NOTE: 修改内容padding为16px */ $alert-content-cmcc-padding-x: 0.2rem; $alert-close-font-size: $font-size-sm; $alert-close-icon-font-size: 0.48rem; // toast // // $toast-prefix-cls: $css-prefix + 'toast'; $toast-text-font-size: .32rem; $toast-padding: 0.2rem 0.26rem; $toast-box-shadow: 0 0.04rem 0.06rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.08); $toast-border-radius: 0.14rem; $toast-icon-font-size: 0.96rem; $toast-icon-text-font-size: 0.28rem; $toast-icon-padding: 0.28rem 0.4rem; $toast-inverse-bg: $mask-bg; // modal // // $modal-prefix-cls: $css-prefix + 'modal'; $modal-box-shadow: 0 0.02rem 0.1rem 0 rgba(0, 0, 0, 0.08); $modal-header-padding: 0.32rem 0.4rem; $modal-header-font-size: $font-size-lg; // $modal-body-padding: 0.4rem; /* NOTE: 修改modal的padding */ $modal-body-padding: .5rem; $modal-body-padding-bottom: .3rem; $modal-button-height: 1rem; $modal-button-font-size: $font-size-lg; $modal-title-color: $black; // image-picker // // $image-picker-prefix-cls: $css-prefix + 'image-picker'; $image-picker-item-padding-x: 0.28rem; $image-picker-remove-size: 0.4rem; $image-picker-remove-icon-font-size: 0.28rem; $image-picker-remove-padding: 0.06rem; $image-picker-upload-btn-font-size: 0.6rem; // badge // // $badge-prefix-cls: $css-prefix + 'badge'; $badge-height: 0.48rem; /* NOTE: 修改内边距宽度 */ // $badge-padding-x: 0.12rem; $badge-padding-y: .08rem; $badge-padding-x: .16rem; $badge-border-radius: 0.04rem; $badge-font-size: 0.24rem; $badge-dot-size: 0.2rem; $badge-dot-lg-size: 0.2rem; // slider // // $slider-prefix-cls: $css-prefix + 'slider'; $slider-rail-height: 0.1rem; $slider-handle-size: 0.26rem; $slider-handle-box-shadow: 0 0 0 .8rem rgba($brand-primary, .2); $slider-step-height: 0.2rem; $slider-icon-font-size: 0.6rem; $slider-icon-padding-x: 0.1rem; $slider-rail-background: rgba(0, 0, 0, .08); // menu // // $menu-prefix-cls: $css-prefix + 'menu'; $menu-item-height: 0.96rem; $menu-item-font-size: $font-size-lg; $menu-item-padding-x: 0.4rem; // accordion // // $accordion-prefix-cls: $css-prefix + 'accordion'; $accordion-header-icon-font-size: 0.48rem; // drawer // // $drawer-prefix-cls: $css-prefix + 'drawer'; // stepper // // $stepper-prefix-cls: $css-prefix + 'stepper'; $stepper-width: 2.15rem; $stepper-handler-size: 0.6rem; $stepper-handler-font-size: 0.4rem; $stepper-input-font-size: $font-size-base; $stepper-input-color: #333; $stepper-handler-color: rgba(0, 0, 0, .8); $stepper-handler-background-color: rgba(0, 0, 0, .08); // progress // // $progress-prefix-cls: $css-prefix + 'progress'; $progress-height: 0.2rem; // Steps // // $steps-prefix-cls: $css-prefix + 'steps'; $steps-head-size: 0.48rem; $steps-head-font-size: $font-size-base; $steps-head-margin-x: 0.32rem; $steps-main-title-font-size: $font-size-base; $steps-main-title-margin-y: 0.08rem 0.04rem; $steps-main-description-font-size: $font-size-sm; $steps-main-description-width: 1.5rem; // carousel // // $carousel-prefix-cls: $css-prefix + 'carousel'; $carousel-height: 4.16rem; /* NOTE: 修改indicator大小为16px */ // $carousel-indicators-size: 0.08rem; $carousel-indicators-size: .16rem; $carousel-indicators-margin-y: 0.2rem; $carousel-indicators-margin-x: 0.12rem; // cell // // $cell-prefix-cls: $css-prefix + 'cell'; /* NOTE: 修改图标字体颜色 */ // $cell-icon-font-size: 0.8rem; $cell-icon-font-size: .7rem; $cell-icon-margin-y: .2rem; $cell-text-font-size: $font-size-sm; $cell-item-border-color: $gray-seg; /* NOTE: 图标active or unactive 颜色 */ $cell-icon-font-color: #32AAFF; $cell-content-color: #333; // timeline // // $timeline-prefix-cls: $css-prefix + 'timeline'; $timeline-font-size-sm: $font-size-sm; // .28rem $timeline-font-size-m: $font-size-m; // .30rem $timeline-font-size-base: $font-size-base; // .32rem // table // // $table-prefix-cls: $css-prefix + 'table'; $table-td-padding: 0.3rem; // loading // // $loading-prefix-cls: $css-prefix + 'loading'; $loading-spinner-width: .8rem; $loading-spinner-cell-width: .1rem; $loading-spinner-cell-height: .24rem; $loading-spinner-padding: 0; $loading-spinner-lg-width: 1.14rem; $loading-spinner-lg-cell-width: .11rem; $loading-spinner-lg-cell-height: .3rem; $loading-spinner-lg-padding: 0; $loading-spinner-sm-width: .7rem; $loading-spinner-sm-cell-width: .07rem; $loading-spinner-sm-cell-height: .2rem; $loading-spinner-sm-padding: 0; // $loading-dot-width: .8rem; // $loading-dot-size: 0.16rem; // $loading-dot-padding: 0; // $loading-dot-sm-width: .6rem; // $loading-dot-sm-size: 0.14rem; // $loading-dot-sm-padding: 0; // $loading-dot-lg-width: 1.14rem; // $loading-dot-lg-size: 0.16rem; // $loading-dot-lg-padding: 0; $loading-font-size: .4rem; $loading-dot-size: .18rem; $loading-text-margin-bottom: .18rem; $loading-font-size-sm: .28rem; $loading-dot-size-sm: .12rem; $loading-text-margin-bottom-sm: .12rem; $loading-font-size-lg: .64rem; $loading-dot-size-lg: .28rem; $loading-text-margin-bottom-lg: .28rem; // card // // $card-prefix-cls: $css-prefix + 'card'; $card-header-padding: 0.3rem 0.2rem; $card-header-title-font-size: $font-size-base; $card-footer-content-font-size: $font-size-sm; // load-and-refresh // // $load-and-refresh-prefix-cls: $css-prefix + 'load-and-refresh'; $load-and-refresh-indicator-height: 2rem; $load-and-load-indicator-height: 0.6rem; $load-and-refresh-indicator-text-font-size: $font-size-sm; $load-and-refresh-indicator-icon-margin-x: 0.16rem; $refresh-icon-size: 0.6rem; // swipe // // $swipe-prefix-cls: $css-prefix + 'swipe'; // swiper-page $swiper-page-prefix-cls: $css-prefix + 'swipe-page'; $notice-bar-prefix-cls: $css-prefix + 'notice-bar'; $upload-prefix-cls: $css-prefix + 'upload'; // index-list $index-list-item-height: 1.08rem; // Animation $animation-time: .3s; $animation-time-lg: .6s; $transition-time: .2s; // Popovers $zindex-popover: 1060; $popover-prefix-cls: $css-prefix+"popper"; $popover-bg: $white; $popover-color: $body-color; $popover-min-width: 1.5rem; $popover-max-width: 3rem; $popover-border-width: $border-width; $popover-border-color: $body-color; $popover-box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .12); $popover-arrow-width: .1rem; $popover-arrow-color: $popover-bg; $popover-arrow-outer-width: $popover-arrow-width; $popover-arrow-outer-color: $popover-border-color; $popover-content-padding-x: .14rem; $popover-content-padding-y: .14rem; $popover-title-bg: $white; $popover-title-font-size: $font-size-sm; $popover-title-padding-x: 0; $popover-title-padding-y: .08rem; $popover-body-font-size: $font-size-xs; // t-cell // 用于cell组件, 因为已经存在 cell 的class $t-cell-prefix-cls: $css-prefix+"t-cell"; // t-cell-swipe $cell-swipe-prefix-cls: $css-prefix+"cell-swipe"; // field $field-prefix-cls: $css-prefix+"field";