@import '../color/colors'; @hd: 1px; // 基本单位 // 支付宝钱包默认主题 // https://github.com/ant-design/ant-design-mobile/wiki/设计变量表及命名规范 // 色彩 // --- // 文字色 @color-text-base: #000; // 基本 @color-text-base-inverse: #fff; // 基本 - 反色 @color-text-secondary: #a4a9b0; // 辅助色 @color-text-placeholder: #bbb; // 文本框提示 @color-text-disabled: #bbb; // 失效 @color-text-caption: #888; // 辅助描述 @color-text-paragraph: #333; // 段落 @color-link: @brand-primary; // 链接 @primary-color: @blue-6; @info-color: @primary-color; @success-color: @green-6; @processing-color: @blue-6; @error-color: @red-5; @highlight-color: @red-5; @warning-color: @gold-6; @normal-color: #d9d9d9; @white: #fff; @black: #000; @heading-color: fade(@black, 85%); @text-color: fade(@black, 85%); @text-color-secondary: fade(@black, 45%); @text-color-inverse: @white; @text-color-dark: fade(@white, 85%); @text-color-secondary-dark: fade(@white, 65%); @text-selection-bg: @primary-color; @font-variant-base: tabular-nums; @font-feature-settings-base: 'tnum'; @font-size-base: 14px; @font-size-lg: @font-size-base + 2px; @font-size-sm: 12px; // Border color @border-color-base: hsv(0, 0, 85%); // base border outline a component @border-color-split: hsv(0, 0, 94%); // 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 // Background color for `` @body-background: #fff; // Base background color for most components @component-background: #fff; // Popover background color @popover-background: @component-background; @popover-customize-border-color: @border-color-split; @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; // 背景色 @fill-base: #fff; // 组件默认背景 @fill-body: #f5f5f9; // 页面背景 @fill-tap: #ddd; // 组件默认背景 - 按下 @fill-disabled: #ddd; // 通用失效背景 @fill-mask: rgba(0, 0, 0, 0.3); // 遮罩背景 @color-icon-base: #ccc; // 许多小图标的背景，比如一些小圆点，加减号 @fill-grey: #f7f7f7; // 透明度 @opacity-disabled: 0.3; // switch checkbox radio 等组件禁用的透明度 // 全局/品牌色 @brand-primary: #1677ff; @brand-primary-tap: #0e80d2; @brand-success: #6abf47; @brand-warning: #ffc600; @brand-error: #f4333c; @brand-important: #ff5b05; // 用于小红点 @brand-wait: #108ee9; // 边框色 @border-color-base: #eee; // 字体尺寸 // --- @font-size-icontext: 10 * @hd; @font-size-caption-sm: 12 * @hd; @font-size-base: 14 * @hd; @font-size-subhead: 15 * @hd; @font-size-caption: 16 * @hd; @font-size-heading: 17 * @hd; // 圆角 // --- @radius-xs: 2 * @hd; @radius-sm: 3 * @hd; @radius-md: 5 * @hd; @radius-lg: 7 * @hd; @radius-circle: 50%; // 边框尺寸 // --- @border-width-sm: 1PX; @border-width-md: 1PX; @border-width-lg: 2 * @hd; // 间距 // --- // 水平间距 @h-spacing-sm: 5 * @hd; @h-spacing-md: 8 * @hd; @h-spacing-lg: 15 * @hd; // 垂直间距 @v-spacing-xs: 3 * @hd; @v-spacing-sm: 6 * @hd; @v-spacing-md: 9 * @hd; @v-spacing-lg: 15 * @hd; @v-spacing-xl: 21 * @hd; // 高度 // --- @line-height-base: 1; // 单行行高 @line-height-paragraph: 1.5; // 多行行高 // 图标尺寸 // --- @icon-size-xxs: 15 * @hd; @icon-size-xs: 18 * @hd; @icon-size-sm: 21 * @hd; @icon-size-md: 22 * @hd; // 导航条上的图标、grid的图标大小 @icon-size-lg: 36 * @hd; // 动画缓动 @ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); @ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7); @ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); @ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); @ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); @ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); @ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); @ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46); @ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); @ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34); @ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); @ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); @ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); @ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); // 组件变量 // --- @actionsheet-item-height: 50 * @hd; @actionsheet-item-font-size: 18 * @hd; // button @button-height: 47 * @hd; @button-font-size: 18 * @hd; @button-height-sm: 30 * @hd; @button-font-size-sm: 13 * @hd; @primary-button-fill: @brand-primary; @primary-button-fill-tap: @brand-primary-tap; @ghost-button-color: @brand-primary; // 同时应用于背景、文字颜色、边框色 @ghost-button-fill-tap: fade(@brand-primary, 60%); @warning-button-fill: #e94f4f; @warning-button-fill-tap: #d24747; @link-button-fill-tap: #ddd; @link-button-font-size: 16 * @hd; // menu @menu-multi-select-btns-height: @button-height; // modal @modal-font-size-heading: 18 * @hd; @modal-button-font-size: 18 * @hd; // 按钮字号 @modal-button-height: 50 * @hd; // 按钮高度 // Modal // -- @modal-body-padding: 24px; @modal-header-bg: @component-background; @modal-header-border-color-split: @border-color-split; @modal-content-bg: @component-background; @modal-heading-color: @heading-color; @modal-footer-bg: transparent; @modal-footer-border-color-split: @border-color-split; @modal-mask-bg: fade(@black, 45%); // list @list-title-height: 30 * @hd; @list-item-height-sm: 35 * @hd; @list-item-height: 44 * @hd; // input @input-label-width: 17 * @hd; // InputItem、TextareaItem 文字长度基础值 @input-font-size: 17 * @hd; @input-color-icon: #ccc; // input clear icon 的背景色 @input-color-icon-tap: @brand-primary; // Animation @animation-duration-slow: 0.3s; // Modal @animation-duration-base: 0.2s; @animation-duration-fast: 0.1s; // Tooltip // tabs @tabs-color: @brand-primary; @tabs-height: 43 * @hd; @tabs-font-size-heading: 15 * @hd; @tabs-ink-bar-height: @border-width-lg; // segmented-control @segmented-control-color: @brand-primary; // 同时应用于背景、文字颜色、边框色 @segmented-control-height: 27 * @hd; @segmented-control-fill-tap: fade(@brand-primary, 0.1); // tab-bar @tab-bar-fill: #ebeeef; @tab-bar-height: 50 * @hd; // toast @toast-fill: rgba(58, 58, 58, 0.9); // toast, activity-indicator 的背景颜色 // search-bar @search-bar-fill: #efeff4; @search-bar-height: 44 * @hd; @search-bar-input-height: 28 * @hd; @search-bar-font-size: 15 * @hd; @search-color-icon: #bbb; // input search icon 的背景色 // notice-bar @notice-bar-fill: #fefcec; @notice-bar-height: 36 * @hd; @notice-bar-color: #f76a24; // switch @switch-fill: #4dd865; @switch-fill-android: @brand-primary; // tag @tag-height: 25 * @hd; @tag-height-sm: 15 * @hd; @tag-color: @brand-primary; // keyboard @keyboard-confirm-color: @brand-primary; @keyboard-confirm-tap-color: @brand-primary-tap; // picker @option-height: 42 * @hd; // picker 标题的高度 // z-index @progress-zindex: 2000; @popover-zindex: 1999; @toast-zindex: 1999; @action-sheet-zindex: 1000; // actonsheet 会放到 popup / modal 中 @picker-zindex: 1000; @popup-zindex: 999; @modal-zindex: 999; // modal.alert 应该最大，其他应该较小 @tabs-pagination-zindex: 999;