jimu-mobile/src/styles/themes/default.less

积木组件库助力移动端开发

@hd: 1px; // 基本单位
// 色彩
// ---
// 文字色
@color-text-base: #333;                  // 基本
@color-text-base-inverse: #fff;          // 基本 - 反色
@color-text-highlight: #343C5C;          // 基本 - 高亮色
@color-text-highlight-focus: #293049;    // 基本 - 高亮色 - active / hover
@color-text-placeholder: #ccc;           // 文本框提示
@color-text-disabled: #ccc;              // 失效
@color-text-selected: #4a4c5b;           // 选中
@color-text-title: #222;                 // 标题
@color-text-paragraph: #333;             // 段落
@color-text-light: #999;                 // 段落 - 浅色
@color-text-default: #666;               // 段落 - 浅色
@color-link: #7e8c8d;                    // 链接
@color-link-normal: #666;                // 链接 - 普通
@color-link-danger: #FF3B30;             // 链接 - 危险提示
@color-icon-base: #1E96FA;               // 图标颜色
@color-icon-base-type1: #FC9153;         // 图标颜色 - 2
@color-icon-base-type2: #31C8A4;         // 图标颜色 - 3

// 背景色
@fill-base: #fff;                        // 组件默认背景
@fill-body: #f0f0f0;                     // 页面背景
@fill-highlight: #343C5C;                // 页面高亮
@fill-highlight-disabled: #d7d8df;       // 页面高亮
@fill-disabled: #e5e5e5;                 // disabled
@fill-float: #FAFAFA;                    // button-float:active
@fill-href-active: #efefef;              // a href-active
@fill-danger: #FF3B30;                   // 背景 - 危险提示
@fill-btn-default: #ccc;                 // 背景 - 按钮默认

// 透明度
@opacity-base: 0.3;   // 透明度 - 普通
@opacity-mask: 0.5;   // 透明度 - mask

// 字体尺寸
// ---
@font-size-icontext: 10 * @hd;
@font-size-caption-sm: 12 * @hd;
@font-size-caption-big: 13 * @hd;
@font-size-base: 14 * @hd;
@font-size-subhead: 15 * @hd;
@font-size-caption: 16 * @hd;
@font-size-heading: 17 * @hd;
@font-size-head-title: 18 * @hd;
@icon-size-head-title: 20 * @hd;
@icon-size-base: 24 * @hd;
@icon-size-big: 32 * @hd;

// 边框色
@border-color-base: #ccc;           // 默认色
@border-color-highlight: #343C5C;   // 高亮色
@border-color-light: #E5E5E5;       // 浅色
@border-color-selected: #4a4c5b;    // 浅色 - selected
@border-color-active: #666;         // 默认色 - active
@border-color-disable: #ccc;        // 浅色 - disable

// 圆角
@radius-xs: 2 * @hd;
@radius-xm: 3 * @hd;

// 边框尺寸
@border-width-sm: 1 *  @hd;

// 高度
// ---
@line-height-default: 1;        // 默认行高
@line-height-base: 1.2;         // 单行行高
@line-height-paragraph: 1.5;    // 多行行高

// button
@button-big-height: 44 * @hd;
@button-middle-height: 28 * @hd;
@button-small-height: 18 * @hd;
@button-small-line-height: 15 * @hd;

// Layout
@layout-ft-color: #CECECE;

// Tabs
@tabs-bar-line-height: 48 * @hd;
@tabs-bar-line-height-sm: 25 * @hd;
@tabs-bar-bord-width: 2 * @hd;
@tabs-bar-color: @color-icon-base;


// checkbox 、radio
@form-line-height: 20 * @hd;
@form-icon-fontsize: @icon-size-base;

// Stepper
@stepper-btn-height: 18 * @hd;

// Star
@star-font-size: 20 * @hd;
@star-font-size-big: 34 * @hd;
@star-font-size-color:#FFB500;
@star-font-color:#ccc;


// switch
@switch-width: 50 * @hd;
@switch-height: 25 * @hd;
@switch-default-bg :#ccc;
@switch-btn-width: 21 * @hd;
@switch-btn-open-left: 27 * @hd;
@switch-btn-close-left: 2 * @hd;
@switch-width-sm: 40 * @hd;
@switch-btn-width-sm: 21 * @hd;
@switch-btn-open-left-sm: 17 * @hd;
@switch-btn-close-left-sm: 2 * @hd;

// picker
@picker-box-font-size: 22 * @hd;

// Verification
@verification-input-font-size: 22 * @hd;
@verification-box-size: 45 * @hd;

// badge
@badge-spot-size: 6 * @hd;
@badge-box-size: 18 * @hd;

// city
@city-max-char-font-size: 50 * @hd;

// noticebar
@noticebar-layout-bg-color: #FFF4EE;
@noticebar-layout-font-color:@color-icon-base-type1;

// result
@result-icon-size-big: 50 * @hd;
@result-icon-type-successful: #00c3a5;
@result-icon-type-warning: #ff8743;
@result-icon-type-error: #ff4252;

// record
@record-icon-to :@color-icon-base-type2;
@record-icon-from :@color-icon-base-type1;