yun-ui/packages/style/stylesheets/var-px.less

Mobile UI Components Library for Vue.js by yunzhijia.

@uiName: yun; //前缀

/* body */
@bodyFontSize: 14px;

/* App color 用于替换themeColor */
@themeColorBlue: #3CBAFF;
@themeColorDeepBlue: #4598F0;
@themeColorOlive: #32AA70;
@themeColorOrange: #E26735;
@themeColorYellow: #F59C25;
@themeColorPurple: #655DD4;
@themeColorPink: #DE4873;
@themeColorRed: #EA5E56;
@themeColorSkyBlue: #3FB7DF;
@themeColorRoyalBlue: #4570D3;
@themeColorGreen: #13BBAD;
@themeColorBrown: #BD784D;
@themeColorGrey: #484B51;
@themeColorWhiteSmoke: #EAEFF3;
@themeColorWhite: #FFFFFF;

/* color */
@themeColor: @themeColorBlue; //APP主题

/* font color */
@defaultFontColor: #030303; //默认
@secondaryFontColor: #768893; //辅助，次要
@setFontColor:#A4A8AB; //置灰
@tipsFontColor: #7a797b; //提示
@warnFontColor: #f35959; //警告
@activeFontColor: #3cbaff; //活动（被点击，高亮）
@whiteFontColor: #ffffff; //反色

/* font size */
@h1Size: 18px;
@h2Size: 17px;
@h3Size: 16px;
@h4Size: 14px;
@h5Size: 13px;
@h6Size: 12px;
@smallSize: 11px;

/* page color */
@borderColor: #E6E8EE; //分隔线
@bgColor: #F8F9FB; //背景
@warnColor: #fa5959; //badge/提醒（小红点，提醒标签）
@maskColor: rgba(14,46,70, 0.3); //遮罩层

/* ellipse */
@line-clamp-value: 2;

/* z-index */
@zIndexNormal: 1;

/* divided */
@dividedHeight: 14px;

/* tabItem */
@tabItemIconFontColor: #3cbaff; //字体图标引用进来的默认颜色
@tabItemIconFontSize: 20px; //字体图标默认大小

/* tabbar 底部选项卡*/
@labelPadding: 6px;
@labelFontSize: 12px;
@tabbarTabItemIconFontSize: 20px;

/* button */
@buttonBorderRadius: 4px;
@buttonColor: #4598F0;

@buttonNormalHeight: 44px;
@buttonNormalFontSize: 16px;

@buttonLargeHeight: 44px;
@buttonLargeFontSize: 16px;

@buttonMiddleHeight: 35px;
@buttonMiddlePadding: 44px;
@buttonMiddleFontSize: 14px;

@buttonSmallHeight: 28px;
@buttonSmallPadding: 12px;
@buttonSmallFontSize: 12px;

/* buttonGroup */
@buttonGroupHeight: 44px;
@buttonGroupFontSize: 14px;
@buttonGroupIconFontPadding: 5px;

/* navbar */
@navbarColor: #9a9a9a;
@navbarActiveColor: #3cbaff;
@navbarHeight: 40px;
@navbarFontSize: 16px;

/* list */
@listActiveBG: #f6f8fa;
@listFirstTitLeFontSize: 17px;
@listTileFontSize: 16px;
@listSecondaryTextFontSize: 14px;
@listAssistTextFontSize: 10px;
@blank: 12px; //元素之间的间隙
@list-link-width: 20px; //元素之间的间隙

@itemSingleLineHeight: 44px;
@itemSingleLineLineHeight: 22px;
@itemSingleLinePadding: 12px;
@itemSingleLineIconSize: 22px;

@itemMultiImgSize: 36px;
@itemMultiIconSize: 25px;

@itemAddIconSize: 13px;
@itemAddTextLineHeight: 26px;
@iconAddPadding: 8px;
@itemAddTextMargin: 6px;

//TODO 后期合并list和cell

/* form */
@formItemActiveBG: #f6f8fa;
@formItemHeight: 44px;
@formLabelFontSize: 16px; //标签
@formSecondaryTextFontSize: 14px; //辅助文本
@formBlank: 6px; //元素之间的间隙
@formPadding: 12px; //边距
@form-link-width: 20px;
@formError: #FFF2F2;

@formTextareaHeight: 70px; //多行输入框的默认高度
@formTextareaMaxHeight: 99px; //多行输入框的最大高度

@formRadioInnerSize: 24px; //单选钩

@iconContainerSize: 24px; //选择器添加文件图标容器
@addFieldTconSize: 0.44rem; //选择器添加文件图标大小

@imageItemRadius: 6px; //上传图片组件下方图片大小
@deleteImageIconSize: 14px;

@fieldPadding: 8px;
@deleteFieldIconSize: 20px;
@fieldIconSize: 30px;
@fieldNameFontSize: 12px;
@fieldInfoFontSize: 12px;

/* checkbox */
@checkboxSize: 22px; //复选组件尺寸
@checkboxInnerSize: 12px; //对勾尺寸

/* counter */
@counterIconSize: 22px;
@counterNumberFontSize: 16px;

/* switch */
@switchWidth: 44px;
@switchHeight: 24px;
@switchInnerHeight: 18px;

/* popup */
@popupWidth: 280px;
@popupRadius: 6px;
@popupTitleFontSize: 16px;
@popupTitleLineHeight: 50px;
@popupItemPadding: 16px; //popup容器里的子项距离
@popupListPadding: 6px; //popup容器list子项 li
@popupItemInputHeight: 30px; //输入框项高度
@popupItemTextareaHeight: 90px; //多行输入框高度
@popupItemFontSize: 14px; //多行输入框高度
@popupListItemFontSize: 12px; //列表字体大小
@popupCoverHeight: 165px; //宣传弹窗的封面高度

/* loading */
@loadingBG: rgb(12, 33, 63);
@loadingSize: 72px;
@loadingImageSize: 100%;
@loadingRadius: 8px;

@loadingIconSize: 40px;
@loadingFontSize: 12px;

@loadingRefreshIconSize: 20px; //刷新类型loading的icon尺寸
@loadingRefreshIconHeight: 15px;
@loadingRefreshBG: #fff;

@loadingPadding: 11px; //loading元素的边距

/* toast */
@toastBG: rgb(12, 33, 63);
@toastSize: 120px;
@toastBigRadius: 6px;
@toastRadius: 4px;

@toastIconSize: 40px;
@toastIconWidth: 40px;
@toastIconHeight: 27px;
@toastIconWaitingWidth: 50px;
@toastIconWaitingHeight: 30px;
@toastIconWaitingPadding: 20px 12px;
@toastFontSize: 12px;
@toastLineHeight: 17px;

@toastPadding: 12px; //toast元素的边距
@toastPadding-top: 7px; //toast元素的上边距

/* badge */
@badgeSize: 14px; //徽标数的尺寸
@badgeRadius: 14px; //徽标圆角
@badgeFontSize: 12px;

@badgeDotSize: 8px; //提醒红点尺寸

/* search */
@searchBarHeight: 44px; //搜索栏高度
@searchBarPadding: 12px;
@searchBarInputPadding: 30px;
@searchBarBorderRadius: 3px;
@searchBarInputColor: #030303;
@searchCancelFontSize: 14px; //搜索按钮

/* actionSheet */
@actionSheetPadding: 12px; //操作面板默认边距
@actionSheetPanelPadding: 20px; //操作分享型面板的边距
@actionSheetItemName: 12px; //操作分享型面板的字体大小
@actionSheetTitleFontSize: 16px; //标题的文字大小
@actionSheetButtonFontSize: 16px; //底部按钮的文字大小
@actionSheetButtonMarginTop: 8px; //底部按钮与内容间距
@actionSheetLineHeight: 44px;
@actionSheetHeader: 36px;

@actionSheetImageSize: 48px;

// imagePicker
@imagePickerTitleLineHeight: 20px;
@imagePickerPadding: 12px;
@imageItemSize: 55px; //上传图片组件下方图片大小
@imageDeleteIconSize: 16px;
@addFieldTconSize: 1rem;

@filePadding: 8px 12px 9px;
@fileFieldPadding: 9px 14px;
@fileFieldMargin: 8px;
@filePicSize: 33px;
@fileNameFontsize: 15px;
@fileNameLineHeight: 21px;