560 lines
15 KiB
Plaintext
560 lines
15 KiB
Plaintext
// 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>`
|
|
@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;
|