// The prefix to use on all css classes from wux. @import "../../../../config/styles/mp/index.less"; @wux-prefix: wux; // -------- Colors ----------- @light: #fff; @stable: #f8f8f8; @positive: @oak-color-primary; @calm: @oak-color-info; @balanced: @oak-color-success; @energized: @oak-color-warning; @assertive: @oak-color-error; @royal: @oak-color-primary; @dark: #444; @light-inverse: #ddd; @stable-inverse: #b2b2b2; @white: #fff; @black: #000; // Base Scaffolding Variables // --- // Background color for `` @body-background: #fff; // Base background color for most components @component-background: #fff; @font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; @text-color: fade(@black, 65%); @text-color-secondary: fade(@black, 45%); @text-color-inverse: @white; @heading-color: fade(@black, 85%); @heading-color-dark: fade(@white, 100%); @text-color-dark: fade(@white, 85%); @text-color-secondary-dark: fade(@white, 65%); @font-variant-base: tabular-nums; @font-feature-settings-base: 'tnum'; @font-size-base: 14px; @font-size-lg: 16px; @font-size-sm: 12px; @line-height-base: 1.5; @line-height-lg: 2; @line-height-sm: 1; @border-radius-base: 4px; @border-radius-lg: 6px; @border-radius-sm: 2px; // SafeArea @safe-area-inset-top: 44px; @safe-area-inset-right: 0; @safe-area-inset-bottom: 34px; @safe-area-inset-left: 0; // Spacing @spacing-base: 10px; @spacing-xl: 20px; @spacing-lg: 15px; @spacing-sm: 5px; // Margin @margin-component-base: 5px; @margin-component-lg: 10px; @margin-component-sm: 2px; // Disabled states @disabled-opacity: .3; // Backdrop @backdrop-background: fade(@black, 40%); @backdrop-background-inverse: transparent; @background-color-base: #f5f5f5; @background-color-light: #fafafa; // Icon // Base background color for small icons. eg: dots @icon-color-base: #ccc; @icon-color-active: #888; // Scroll view max height @scroll-view-size: 270px; // The background color for active state // buttons & cells and so on @active-state-bg: #ececec; // Border color @border-color-base: #e8e8e8; // base border outline a component @border-color-split: #d9d9d9; // split border inside a component @border-color-inverse: @white; @border-width-base: 1PX; // width of the border for a component @border-style-base: solid; // style of a components border // Shadow @shadow-color: rgba(0, 0, 0, 0.15); @shadow-color-inverse: @component-background; @box-shadow-base: 0 2px 8px @shadow-color; // Buttons @button-border-radius: @border-radius-base; @button-block-margin: 10px; @button-opacity-hover: .3; @button-opacity-disabled: .4; @button-default-border: transparent; @button-font-size-base: @font-size-lg; @button-height-base: 44px; @button-padding-base: 12px; @button-font-size-lg: 20px; @button-height-lg: 59px; @button-padding-lg: 16px; @button-font-size-sm: 12px; @button-height-sm: 30px; @button-padding-sm: 4px; @button-light-bg: @light; @button-light-text: #444; @button-light-border: @light-inverse; @button-light-active-bg: darken(@button-light-bg, 10%); @button-light-active-border: transparent; @button-stable-bg: @stable; @button-stable-text: #444; @button-stable-border: @stable-inverse; @button-stable-active-bg: darken(@button-stable-bg, 10%); @button-stable-active-border: transparent; @button-positive-bg: @positive; @button-positive-text: #fff; @button-positive-border: transparent; @button-positive-active-bg: darken(@button-positive-bg, 10%); @button-positive-active-border: transparent; @button-calm-bg: @calm; @button-calm-text: #fff; @button-calm-border: transparent; @button-calm-active-bg: darken(@button-calm-bg, 10%); @button-calm-active-border: transparent; @button-assertive-bg: @assertive; @button-assertive-text: #fff; @button-assertive-border: transparent; @button-assertive-active-bg: darken(@button-assertive-bg, 10%); @button-assertive-active-border: transparent; @button-balanced-bg: @balanced; @button-balanced-text: #fff; @button-balanced-border: transparent; @button-balanced-active-bg: darken(@button-balanced-bg, 10%); @button-balanced-active-border: transparent; @button-energized-bg: @energized; @button-energized-text: #fff; @button-energized-border: transparent; @button-energized-active-bg: darken(@button-energized-bg, 10%); @button-energized-active-border: transparent; @button-royal-bg: @royal; @button-royal-text: #fff; @button-royal-border: transparent; @button-royal-active-bg: darken(@button-royal-bg, 10%); @button-royal-active-border: transparent; @button-dark-bg: @dark; @button-dark-text: #fff; @button-dark-border: transparent; @button-dark-active-bg: darken(@button-dark-bg, 10%); @button-dark-active-border: transparent; // Avatar @avatar-size-base: 32px; @avatar-size-lg: 40px; @avatar-size-sm: 24px; @avatar-font-size-base: 18px; @avatar-font-size-lg: 24px; @avatar-font-size-sm: 14px; @avatar-bg: @icon-color-base; @avatar-color: @text-color-inverse; @avatar-border-radius: @border-radius-base; // Progress @progress-remaining-color: #f3f3f3; @progress-default-color: @balanced; @progress-text-margin: @margin-component-base; @progress-radius: 100px; // Alert @alert-thumb-size: 20px; @alert-thumb-margin: @margin-component-base; @alert-font-size: @font-size-base; @alert-color: @text-color-inverse; @alert-border-radius: @border-radius-sm; @alert-light-bg: @light-inverse; @alert-stable-bg: @stable-inverse; @alert-positive-bg: @positive; @alert-calm-bg: @calm; @alert-assertive-bg: @assertive; @alert-balanced-bg: @balanced; @alert-energized-bg: @energized; @alert-royal-bg: @royal; @alert-dark-bg: @dark; // Spin @spin-font-size: @font-size-base; @spin-line-height: @line-height-base; @spin-color: #108ee9; @spin-dot-size-base: 20px; @spin-dot-size-lg: 32px; @spin-dot-size-sm: 14px; // Badge @badge-bg: #ed3f14; @badge-color: #fff; @badge-height: 18px; @badge-dot-size: 8px; @badge-status-size: 6px; @badge-font-size: @font-size-sm; @badge-success-bg: #52c41a; @badge-processing-bg: #1890ff; @badge-normal-bg: #d9d9d9; @badge-error-bg: #f5222d; @badge-warning-bg: #faad14; // Timeline @timeline-font-size: @font-size-base; @timeline-width: 2px; @timeline-color: @border-color-base; @timeline-dot-border-width: 2px; @timeline-dot-color: @positive; @timeline-dot-bg: @component-background; @timeline-dot-size: 12px; // Card @card-height: 96px; @card-bg: @component-background; @card-radius: 10px; @card-hd-padding: 9px @spacing-lg; @card-bd-padding: @spacing-lg @spacing-lg 6px; @card-ft-padding: 0 @spacing-lg; @card-icon-size: 32px; // Tabs @tabs-font-size: @font-size-base; @tabs-color: #80848f; @tabs-height: 44px; @tabs-bg: @component-background; @tabs-vertical-height: @scroll-view-size; @tabs-scrolling-size: 15px; @tabs-bar-size: 2px; @tabs-bar-light-bg: @light-inverse; @tabs-bar-stable-bg: @stable-inverse; @tabs-bar-positive-bg: @positive; @tabs-bar-calm-bg: @calm; @tabs-bar-assertive-bg: @assertive; @tabs-bar-balanced-bg: @balanced; @tabs-bar-energized-bg: @energized; @tabs-bar-royal-bg: @royal; @tabs-bar-dark-bg: @dark; // Switch @switch-height: 32px; @switch-bg: #dfdfdf; @switch-color: @balanced; // Pagination @pagination-height: 44px; @pagination-color: @positive; @pagination-dot-size: 8px; @pagination-dot-margin: @margin-component-sm; @pagination-dot-bg: @icon-color-base; @pagination-dot-active-bg: @icon-color-active; // InputNumber @input-number-disabled-color: @icon-color-base; @input-number-light-color: @light-inverse; @input-number-stable-color: @stable-inverse; @input-number-positive-color: @positive; @input-number-calm-color: @calm; @input-number-assertive-color: @assertive; @input-number-balanced-color: @balanced; @input-number-energized-color: @energized; @input-number-royal-color: @royal; @input-number-dark-color: @dark; // WhiteSpace @whitespace-size-base: @spacing-base; @whitespace-size-lg: @spacing-lg; @whitespace-size-sm: @spacing-sm; // WingBlank @wingblank-size-base: @spacing-base; @wingblank-size-lg: @spacing-lg; @wingblank-size-sm: @spacing-sm; // Toptips @toptips-font-size: @font-size-base; @toptips-color: @text-color-inverse; @toptips-success-bg: @balanced; @toptips-info-bg: @positive; @toptips-warn-bg: @energized; @toptips-cancel-bg: @assertive; // Steps @steps-default-color: @text-color-inverse; @steps-default-bg: #e9eaec; @steps-process-bg: @positive; @steps-wait-bg: @steps-default-bg; @steps-finish-bg: @steps-process-bg; @steps-error-bg: @assertive; @steps-line-size: 1px; @steps-icon-size: 24px; // Tag @tag-default-bg: @background-color-light; @tag-default-color: @text-color; @tag-font-size: @font-size-sm; // Tabbar @tabbar-height: 46px; @tabbar-bg: @component-background; @tabbar-font-size: @font-size-sm; @tabbar-default-color: #80848f; @tabbar-light-bg: @light-inverse; @tabbar-stable-bg: @stable-inverse; @tabbar-positive-bg: @positive; @tabbar-calm-bg: @calm; @tabbar-assertive-bg: @assertive; @tabbar-balanced-bg: @balanced; @tabbar-energized-bg: @energized; @tabbar-royal-bg: @royal; @tabbar-dark-bg: @dark; // Upload @upload-bg: @background-color-light; @upload-size: 78px; @upload-border-radius: @border-radius-base; @upload-icon-size: 15px; @upload-normal-border-style: dashed; @upload-success-border-style: solid; @upload-normal-border-color: #d9d9d9; @upload-error-border-color: #f5222d; // Action Sheets @action-sheet-margin: 8px; @action-sheet-border-radius: @border-radius-base; @action-sheet-options-bg: #f1f2f3; @action-sheet-options-active-bg: #e4e5e7; @action-sheet-options-normal-bg: #fff; @action-sheet-options-cancel-bg: #efeff4; // wx theme @action-sheet-options-text-color: #007aff; @action-sheet-options-destructive-text-color: #ff3b30; @action-sheet-options-border-color: #d1d3d6; @action-icon-size: 24px; // Navbar @navbar-size: 45px; @navbar-margin: @margin-component-lg; @navbar-font-size: @font-size-base; @navbar-default-color: #444; @navbar-active-color: @text-color-inverse; @navbar-light-bg: @light; @navbar-stable-bg: @stable; @navbar-positive-bg: @positive; @navbar-calm-bg: @calm; @navbar-assertive-bg: @assertive; @navbar-balanced-bg: @balanced; @navbar-energized-bg: @energized; @navbar-royal-bg: @royal; @navbar-dark-bg: @dark; // Grids @grids-bg: @component-background; @grids-color: @black; @grids-font-size: @font-size-base; @grids-icon-size: 28px; @grids-inner-padding: @spacing-base * 2 @spacing-base; // Fab Button @fab-button-icon-size: 20px; @fab-button-action-size: 50px; @fab-button-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); @fab-button-label-color: @text-color-dark; @fab-button-label-bg: rgba(0, 0, 0, 0.4); @fab-button-label-padding: 4px @spacing-base; @fab-button-light-bg: @light-inverse; @fab-button-stable-bg: @stable-inverse; @fab-button-positive-bg: @positive; @fab-button-calm-bg: @calm; @fab-button-assertive-bg: @assertive; @fab-button-balanced-bg: @balanced; @fab-button-energized-bg: @energized; @fab-button-royal-bg: @royal; @fab-button-dark-bg: @dark; // Slider @slider-font-size: @font-size-base; @slider-radius: @border-radius-base; @slider-margin: 12px; @slider-rail-margin: @spacing-lg 0; @slider-rail-size: 4px; @slider-rail-bg: #e9e9e9; @slider-track-bg: @balanced; @slider-handle-size: 28px; @slider-handle-bg: @component-background; @slider-mark-bg: @icon-color-base; // Sticky @sticky-font-size: @font-size-base; @sticky-item-size: 32px; @sticky-item-bg: @border-color-split; // Accordion @accordion-color: @black; @accordion-bg: @component-background; @accordion-icon-size: 20px; @accordion-hd-padding: @spacing-base @spacing-lg; @accordion-hd-padding-extra: @spacing-lg * 2; @accordion-bd-padding: @spacing-lg; // Skeleton @skeleton-bg: #f2f2f2; @skeleton-to-bg: shade(@skeleton-bg, 5%); @skeleton-radius: @border-radius-base; @skeleton-avatar-size-base: 40px; @skeleton-avatar-size-lg: 48px; @skeleton-avatar-size-sm: 32px; @skeleton-paragraph-size: 16px; // Segment @segment-size: 27px; @segment-margin: 0 @spacing-lg @spacing-lg; @segment-font-size: @font-size-base; @segment-radius: @border-radius-lg; @segment-default-color: @text-color-inverse; @segment-light-bg: @light-inverse; @segment-stable-bg: @stable-inverse; @segment-positive-bg: @positive; @segment-calm-bg: @calm; @segment-assertive-bg: @assertive; @segment-balanced-bg: @balanced; @segment-energized-bg: @energized; @segment-royal-bg: @royal; @segment-dark-bg: @dark; // Search Bar @search-bar-bg: #efeff4; @search-bar-input-height: 28px; @search-bar-font-size: @font-size-base; @search-bar-radius: @border-radius-base; // Rater @rater-star-color: @icon-color-base; // Notice Bar @notice-bar-bg: #fefcec; @notice-bar-color: #f76a24; @notice-bar-height: 36px; @notice-bar-font-size: @font-size-base; @notice-bar-icon-size: 15px; @notice-bar-icon-margin: @margin-component-lg; // Index List @index-indicator-size: 50px; @index-indicator-bg: fade(@black, 70%); @index-indicator-color: @text-color-inverse; @index-indicator-font-size: 24px; @index-indicator-border-radius: @border-radius-lg; @index-font-size: @font-size-base; @index-item-size: 32px; @index-item-bg: @border-color-split; // KeyBoard @keyboard-bg: @component-background; @keyboard-input-size: 40px; @keyboard-dot-size: 6px; @keyboard-dot-bg: @black; // Popover @popover-bg: @component-background; @popover-dark-bg: #333; @popover-dark-color: @text-color-inverse; @popover-arrow-width: 6px; @popover-distance: @popover-arrow-width + 4px; @popover-min-width: 120px; @popover-radius: @border-radius-base; @popover-font-size: @font-size-base; @popover-line-height: @line-height-base; // Calendar @calendar-height: 300px; @calendar-bg: @component-background; @calendar-text-color: #3d4145; @calendar-disabled-text-color: #d4d4d4; @calendar-prev-text-color: @icon-color-base; @calendar-next-text-color: @calendar-prev-text-color; @calendar-today-text-color: #e3e3e3; @calendar-active-text-color: @text-color-inverse; @calendar-active-text-bg: #0894ec; @calendar-text-size: 30px; @calendar-text-font-size: 15px; // Cascader @cascader-font-size: 17px; @cascader-bg: @background-color-base; @cascader-color: #444; @cascader-inner-bg: #fff; @cascader-item-size: 40px; @cascader-item-active-color: @assertive; // Cell Group @cell-bg: @component-background; @cell-icon-size: 20px; @cell-padding: @spacing-base @spacing-lg; @cell-group-hd-padding: @spacing-lg @spacing-lg 9px; @cell-group-ft-padding: 9px @spacing-lg @spacing-lg; // Prompt @prompt-bg: #f2f3f4; @prompt-color: @text-color-secondary; @prompt-icon-size: 64px; // Result @result-title-font-size: 20px; @result-bd-padding: @spacing-lg * 2 @spacing-base * 2; @result-ft-padding: @spacing-lg; // Toast @toast-bg: rgba(40, 40, 40, 0.75); // Notification @notification-bg: rgba(0, 0, 0, .85); // Popup @popup-width: 80%; @popup-max-width: 300px; @popup-hd-padding: 1.3em 1.6em 0.5em; @popup-bd-padding: 0 1.6em 0.8em; @popup-bd-font-size: 15px; @popup-title-font-size: 18px; @popup-content-bg: @component-background; // Z-Indexes @z-index-backdrop: 1000; @z-index-popup: 1000; // @z-index-dialog: 1000; @z-index-filterbar: 1000; @z-index-gallery: 1000; // @z-index-action-sheet: 1010; @z-index-fab-button: 1020; @z-index-popover: 1030; // @z-index-calendar: 1040; // @z-index-cascader: 1040; // @z-index-picker: 1040; @z-index-toast: 5000; @z-index-toptips: 5000; @z-index-notification: 9999;