yun-ui
Version:
Mobile UI Components Library for Vue.js by yunzhijia.
226 lines (182 loc) • 6.19 kB
text/less
@uiName: yun; //前缀
/* body */
@bodyFontSize: 0.28rem;
/* 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: 0.36rem;
@h2Size: 0.34rem;
@h3Size: 0.32rem;
@h4Size: 0.28rem;
@h5Size: 0.26rem;
@h6Size: 0.22rem;
@smallSize: 0.22rem;
/* page color */
@borderColor: #eaeff3; //分隔线
@bgColor: #eaeff3; //背景
@warnColor: #fa5959; //badge/提醒（小红点，提醒标签）
@maskColor: rgba(14,46,70, 0.3); //遮罩层
/* ellipse */
@line-clamp-value: 2;
/* z-index */
@zIndexNormal: 1;
/* divided */
@dividedHeight: 0.3rem;
/* tabItem */
@tabItemIconFontColor: #3cbaff; //字体图标引用进来的默认颜色
@tabItemIconFontSize: 0.3rem; //字体图标默认大小
/* tabbar 底部选项卡*/
@labelPadding: 0.12rem;
@labelFontSize: 0.2rem;
@tabbarTabItemIconFontSize: 0.34rem;
/* button */
@buttonBorderRadius: 0.08rem;
@buttonColor: #4598F0;
@buttonNormalHeight: 0.88rem;
@buttonNormalFontSize: 0.3rem;
@buttonLargeHeight: 0.88rem;
@buttonLargeFontSize: 0.3rem;
@buttonMiddleHeight: 0.7rem;
@buttonMiddlePadding: 0.88rem;
@buttonMiddleFontSize: 0.28rem;
@buttonSmallHeight: 0.56rem;
@buttonSmallPadding: 0.24rem;
@buttonSmallFontSize: 0.24rem;
/* buttonGroup */
@buttonGroupHeight: 0.88rem;
@buttonGroupFontSize: 0.28rem;
@buttonGroupIconFontPadding: 0.1rem;
/* navbar */
@navbarColor: #9a9a9a;
@navbarActiveColor: #3cbaff;
@navbarHeight: 0.8rem;
@navbarFontSize: 0.3rem;
/* list */
@listActiveBG: #f6f8fa;
@listFirstTitLeFontSize: 0.32rem;
@listTileFontSize: 0.3rem;
@listSecondaryTextFontSize: 0.26rem;
@listAssistTextFontSize: 0.22rem;
@blank: 0.2rem; //元素之间的间隙
@list-link-width: 0.4rem; //元素之间的间隙
@itemSingleLineHeight: 0.88rem;
@itemSingleLineLineHeight: 0.44rem;
@itemSingleLinePadding: 0.24rem;
@itemSingleLineIconSize: 0.44rem;
@itemMultiImgSize: 0.8rem;
@itemMultiIconSize: 0.5rem;
//TODO 后期合并list和cell
/* form */
@formItemActiveBG: #f6f8fa;
@formItemHeight: 0.88rem;
@formLabelFontSize: 0.3rem; //标签
@formSecondaryTextFontSize: 0.26rem; //辅助文本
@formBlank: 0.12rem; //元素之间的间隙
@formPadding: 0.24rem; //边距
@form-link-width: 0.4rem;
@formError: #FFF2F2;
@formTextareaHeight: 2.8rem; //多行输入框的默认高度
@formTextareaMaxHeight: 3.96rem; //多行输入框的最大高度
@formRadioInnerSize: 0.48rem; //单选钩
@iconContainerSize: 0.48rem; //选择器添加文件图标容器
@addFieldTconSize: 0.44rem; //选择器添加文件图标大小
@imageItemSize: 1.1rem; //上传图片组件下方图片大小
@imageItemRadius: 0.12rem; //上传图片组件下方图片大小
@deleteImageIconSize: 0.28rem;
@fieldPadding: 0.14rem;
@deleteFieldIconSize: 0.4rem;
@fieldIconSize: 0.6rem;
@fieldNameFontSize: 0.2rem;
@fieldInfoFontSize: 0.2rem;
/* checkbox */
@checkboxSize: 0.44rem; //复选组件尺寸
@checkboxInnerSize: 0.24rem; //对勾尺寸
/* counter */
@counterIconSize: 0.44rem;
@counterNumberFontSize: 0.32rem;
/* switch */
@switchWidth: 0.88rem;
@switchHeight: 0.48rem;
@switchInnerHeight: 0.36rem;
/* popup */
@popupWidth: 5.6rem;
@popupRadius: 0.12rem;
@popupTitleFontSize: 0.32rem;
@popupTitleLineHeight: 1rem;
@popupItemPadding: 0.32rem; //popup容器里的子项距离
@popupListPadding: 0.12rem; //popup容器list子项 li
@popupItemInputHeight: 0.6rem; //输入框项高度
@popupItemTextareaHeight: 1.8rem; //多行输入框高度
@popupItemFontSize: 0.28rem; //多行输入框高度
@popupListItemFontSize: 0.24rem; //列表字体大小
@popupCoverHeight: 3.3rem; //宣传弹窗的封面高度
/* loading */
@loadingBG: rgb(12, 33, 63);
@loadingSize: 1.44rem;
@loadingRadius: 0.16rem;
@loadingIconSize: 0.8rem;
@loadingFontSize: 0.22rem;
@loadingRefreshIconSize: 0.4rem; //刷新类型loading的icon尺寸
@loadingRefreshBG: #fff;
@loadingPadding: 0.22rem; //loading元素的边距
/* toast */
@toastBG: rgb(12, 33, 63);
@toastSize: 2.4rem;
@toastBigRadius:0.12rem;
@toastRadius: 0.08rem;
@toastIconSize: 0.8rem;
@toastIconWaitingSize: 1rem;
@toastFontSize: 0.22rem;
@toastLineHeight: 0.31rem;
@toastPadding: 0.24rem; //toast元素的边距
@toastPadding-top: 0.14rem; //toast元素的上边距
/* badge */
@badgeSize: 0.3rem; //徽标数的尺寸
@badgeRadius: 0.3rem; //徽标圆角
@badgeFontSize: 0.2rem;
@badgeDotSize: 0.16rem; //提醒红点尺寸
/* search */
@searchBarHeight: 0.88rem; //搜索栏高度
@searchBarPadding: 0.24rem;
@searchBarInputPadding: 0.60rem;
@searchBarBorderRadius: 0.06rem;
@searchBarInputColor: #030303;
@searchCancelFontSize: 0.3rem; //搜索按钮
/* actionSheet */
@actionSheetPadding: 0.24rem; //操作面板默认边距
@actionSheetPanelPadding: 0.4rem; //操作分享型面板的边距
@actionSheetItemName: 0.2rem; //操作分享型面板的字体大小
@actionSheetTitleFontSize: 0.3rem; //标题的文字大小
@actionSheetButtonFontSize: 0.3rem; //底部按钮的文字大小
@actionSheetButtonMarginTop: 0.16rem; //底部按钮与内容间距
@actionSheetLineHeight: 0.88rem;
@actionSheetHeader: 0.7rem;
@actionSheetImageSize: 0.96rem;
// imagePicker
@imagePickerTitleLineHeight: 0.4rem;
@imagePickerPadding: 0.26rem 0.24rem;
@imageItemSize: 1.1rem; //上传图片组件下方图片大小