├── .editorconfig ├── .gitignore ├── .picklogrc.js ├── .stylelintignore ├── .stylelintrc.js ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.txt ├── README.md ├── README_cn.md ├── dist ├── example │ ├── example.css │ ├── example.js │ ├── images │ │ ├── icon_footer.png │ │ ├── icon_footer_link.png │ │ ├── icon_intro.png │ │ ├── icon_nav_feedback.png │ │ ├── icon_nav_form.png │ │ ├── icon_nav_layout.png │ │ ├── icon_nav_nav.png │ │ ├── icon_nav_search.png │ │ ├── icon_nav_special.png │ │ ├── icon_nav_z-index.png │ │ ├── icon_tabbar.png │ │ ├── layers │ │ │ ├── content.png │ │ │ ├── navigation.png │ │ │ ├── popout.png │ │ │ └── transparent.gif │ │ ├── logo.png │ │ ├── pic_160.png │ │ ├── pic_article.png │ │ ├── pic_gongan.png │ │ └── vcode.jpg │ ├── index.html │ ├── wah.js │ └── zepto.min.js └── style │ ├── weui.css │ └── weui.min.css ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── example ├── actionsheet │ └── actionsheet.html ├── article │ └── article.html ├── badge │ └── badge.html ├── button │ ├── button.html │ ├── button_bottom_fixed.html │ └── button_default.html ├── dialog │ └── dialog.html ├── example.js ├── example.less ├── flex │ └── flex.html ├── footer │ └── footer.html ├── form │ ├── form.html │ ├── form_access.html │ ├── form_bottom_fixed.html │ ├── form_checkbox.html │ ├── form_input_status.html │ ├── form_page.html │ ├── form_page_old.html │ ├── form_primary.html │ ├── form_radio.html │ ├── form_select.html │ ├── form_select_primary.html │ ├── form_switch.html │ ├── form_textarea.html │ ├── form_vcode.html │ └── form_vertical.html ├── gallery │ └── gallery.html ├── grid │ └── grid.html ├── half-screen-dialog │ └── half-screen-dialog.html ├── home.html ├── icons │ └── icons.html ├── images │ ├── icon_footer.png │ ├── icon_footer_link.png │ ├── icon_intro.png │ ├── icon_nav_feedback.png │ ├── icon_nav_form.png │ ├── icon_nav_layout.png │ ├── icon_nav_nav.png │ ├── icon_nav_search.png │ ├── icon_nav_special.png │ ├── icon_nav_z-index.png │ ├── icon_tabbar.png │ ├── layers │ │ ├── content.png │ │ ├── navigation.png │ │ ├── popout.png │ │ └── transparent.gif │ ├── logo.png │ ├── pic_160.png │ ├── pic_article.png │ ├── pic_gongan.png │ └── vcode.jpg ├── index.html ├── information-bar │ └── information-bar.html ├── input │ └── input.html ├── layers.html ├── list │ └── list.html ├── loading │ └── loading.html ├── loadmore │ └── loadmore.html ├── msg │ ├── msg.html │ ├── msg_custom_area_cell.html │ ├── msg_custom_area_preview.html │ ├── msg_custom_area_tips.html │ ├── msg_success.html │ ├── msg_text.html │ ├── msg_text_primary.html │ └── msg_warn.html ├── navbar │ └── navbar.html ├── panel │ └── panel.html ├── picker │ └── picker.html ├── preview │ └── preview.html ├── progress │ └── progress.html ├── searchbar │ ├── searchbar.html │ ├── searchbar_filled.html │ ├── searchbar_grey.html │ ├── searchbar_homepage.html │ └── searchbar_outlined.html ├── slider │ └── slider.html ├── steps │ ├── steps.html │ ├── steps_horizonal.html │ └── steps_vertical.html ├── tabbar │ └── tabbar.html ├── toast │ └── toast.html ├── uploader │ └── uploader.html ├── wah.js └── zepto.min.js └── style ├── base ├── a11y.less ├── fn.less ├── mixin │ ├── btnWrapLayout.less │ ├── mobile.less │ ├── setArrow.less │ ├── setLoading.less │ ├── setOnepx.less │ └── text.less ├── patch.less ├── reset.less ├── theme │ ├── fn.less │ ├── index.less │ ├── less-vars │ │ ├── care-dark.less │ │ ├── care-light.less │ │ ├── dark.less │ │ └── light.less │ └── vars │ │ ├── care-dark.less │ │ ├── care-light.less │ │ ├── dark.less │ │ └── light.less └── variable │ ├── color.less │ ├── global.less │ ├── weui-button.less │ ├── weui-cell.less │ ├── weui-dialog.less │ ├── weui-grid.less │ ├── weui-msg.less │ ├── weui-progress.less │ └── weui-tab.less ├── icon └── weui-icon.less ├── weui.less └── widget ├── weui-agree └── weui-agree.less ├── weui-animate └── weui-animate.less ├── weui-button ├── weui-btn_bottom-fixed.less ├── weui-btn_cell.less ├── weui-btn_default.less ├── weui-btn_disabled.less ├── weui-btn_global.less ├── weui-btn_loading.less ├── weui-btn_overlay.less ├── weui-btn_primary.less ├── weui-btn_warn.less └── weui-button.less ├── weui-cell ├── weui-access.less ├── weui-cell_global.less ├── weui-cell_swiped.less ├── weui-cells__group.less ├── weui-check.less ├── weui-check │ ├── weui-check_common.less │ ├── weui-checkbox.less │ └── weui-radio.less ├── weui-form.less ├── weui-form │ ├── weui-form-preview.less │ ├── weui-form_common.less │ ├── weui-select.less │ └── weui-vcode.less ├── weui-gallery.less ├── weui-switch.less └── weui-uploader.less ├── weui-flex └── weui-flex.less ├── weui-footer └── weui-footer.less ├── weui-grid └── weui-grid.less ├── weui-loading ├── weui-loading.less └── weui-primary-loading.less ├── weui-media-box └── weui-media-box.less ├── weui-page ├── weui-article.less ├── weui-form.less └── weui-msg.less ├── weui-panel └── weui-panel.less ├── weui-picker └── weui-picker.less ├── weui-progress └── weui-progress.less ├── weui-searchbar └── weui-searchbar.less ├── weui-slider └── weui-slider.less ├── weui-steps └── weui-steps.less ├── weui-tab ├── weui-navbar.less ├── weui-tab.less └── weui-tabbar.less ├── weui-text └── weui-link.less └── weui-tips ├── weui-actionsheet.less ├── weui-badge.less ├── weui-dialog.less ├── weui-half-screen-dialog.less ├── weui-information-bar.less ├── weui-list-tips.less ├── weui-loadmore.less ├── weui-mask.less ├── weui-toast.less └── weui-toptips.less /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | node_modules 3 | npm-debug.log 4 | .DS_Store 5 | *.swp 6 | -------------------------------------------------------------------------------- /.picklogrc.js: -------------------------------------------------------------------------------- 1 | const origin = 'https://github.com/Tencent/weui'; 2 | const comparePath = `${origin}/compare/`; 3 | const commitPath = `${origin}/commit/`; 4 | 5 | const logs = []; 6 | 7 | module.exports = { 8 | filters: [ 9 | { 10 | name: 'Features', 11 | regExp: /^(?:feat|add):/i, 12 | }, 13 | { 14 | name: 'Bugfixes', 15 | regExp: /^fix:/i, 16 | }, 17 | { 18 | name: 'Performance', 19 | regExp: /^perf:/i, 20 | } 21 | ], 22 | parse(commits){ 23 | // RegExp.prototype.toJSON = RegExp.prototype.toString; // JSON.stringify会调用正则表达式的toJSON 24 | // return JSON.stringify(commits, null, 2); // output commits 25 | 26 | let output = ''; 27 | 28 | commits.forEach((log) => { 29 | let date = new Date(log.timestamp * 1000); 30 | date = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).substr(-2)}-${('0' + date.getDate()).substr(-2)}`; 31 | 32 | let currentTag = log.tag || log.commits[0].h; 33 | let prevTag = log.previousTag || log.commits[log.commits.length - 1].h; 34 | output += `### [${currentTag}](${comparePath}${prevTag || ''}...${currentTag}) (${date})\n\n`; 35 | 36 | log.results.forEach((result) => { 37 | output += `#### ${result.filter.name}\n`; 38 | 39 | result.commits.forEach((commit) => { 40 | if (logs.indexOf(commit.s) > -1) return; 41 | 42 | logs.push(commit.s); 43 | output += `* ${commit.s}([${commit.h}](${commitPath}${commit.h}))\n`; 44 | }); 45 | 46 | output += '\n'; 47 | }); 48 | 49 | output += '\n\n'; 50 | }); 51 | 52 | return output; 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.ttf 3 | *.gif 4 | *.png 5 | *.jpg 6 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'extends': 'stylelint-config-standard', 3 | 4 | 'rules': { 5 | 'indentation': 4, 6 | 'selector-pseudo-element-colon-notation': 'single', 7 | 'no-descending-specificity': null, 8 | 'no-eol-whitespace': null, 9 | 'block-no-empty': null, 10 | 'rule-empty-line-before': null, 11 | 'max-empty-lines': null, 12 | 'function-calc-no-invalid': null, 13 | 'declaration-block-no-duplicate-properties': null, 14 | 'declaration-block-no-shorthand-property-overrides': null, 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "10" 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ### Contributing 2 | 3 | 欢迎参与 WeUI 的贡献，你可以给我们提出意见、建议，报告 bug，或者贡献代码。在参与贡献之前，请阅读以下指引。 4 | 5 | #### 关于命名规范 6 | WeUI 1.0.0与以往版本不同，采用了新的命名规范。但为了大家便于理解，可以按BEM来看WeUI的代码。其中 横杠是连词符，双下划线区分B与E，单下划线后面跟Modify。 7 | 8 | #### 咨询问题 9 | 10 | 简单的咨询，如询问如何使用、询问示例是如何实现的或其他和 WeUI 无关的技术问题，请在官方 QQ 群（478234996）中询问，效率更高。 11 | 12 | #### 关于 issue 13 | 14 | WeUI 的发展，离不开社区的贡献。如果你对 WeUI 的现状有意见、建议或者发现了 bug，欢迎通过 issue 给我们提出。提 issue 之前，请阅读以下指引。 15 | 16 | - 搜索以往的 issue ，看是否已经提过，避免重复提出； 17 | - 请确认你遇到的问题，是否在最新版本已被修复； 18 | - 提出意见或建议时，请描述： 19 | - 现状 20 | - 给你带来了什么问题 21 | - 你的期望结果 22 | - 可能的实现方式（可选） 23 | - 如果是报告 bug，请提供可以复现的条件： 24 | - 机型 25 | - 平台 26 | - 系统版本 27 | - 微信客户端版本 28 | - WeUI 版本 29 | - bug 表现 30 | - 是否必现 31 | - 最好可以提供截图 32 | - 最好可以提供示例代码，推荐使用 http://codepen.io 33 | - 如果你的问题已经得到解决，请关闭你的 issue。 34 | 35 | #### 贡献者名单 36 | 37 | 非常感谢以下几位贡献者对weui做出的贡献： 38 | 39 | - 感谢@Paranoid_K、@AmMRLi、@qichhhhh 在交流群内积极参与weui相关问题的讨论和答疑解惑。 40 | 41 | - 感谢@n7best（n7best@gmail.com） 积极参与`react-weui`的开发工作，贡献了大量代码，使得`react-weui`依赖的`weui`版本升级到 1.x ，同时提升了 `react-weui` 代码质量。 42 | 43 | *@Paranoid_K、@AmMRLi、@qichhhhh 的QB奖励以及 @n7best 优秀贡献者证书已由腾讯开源工作人员联系发放。 44 | 45 | #### 参与贡献 46 | 47 | 如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests，为提升微信 Web 体验贡献力量。
详见：[CONTRIBUTING.md](https://github.com/Tencent/weui/blob/master/CONTRIBUTING.md) 48 | 49 | [腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | WeUI - tailor-made for WeChat web service 2 | ==== 3 | 4 | [![Build Status](https://travis-ci.org/Tencent/weui.svg?branch=master)](https://travis-ci.org/Tencent/weui) 5 | [![npm version](https://img.shields.io/npm/v/weui.svg)](https://www.npmjs.org/package/weui) 6 | 7 | [中文版本](README_cn.md) 8 | 9 | ## Introduction 10 | 11 | WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order to improve and standardize the experience for WeChat users. Including components such as `button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`. 12 | 13 | ## Documentations 14 | 15 | - WeUI documentation [Wiki](https://github.com/Tencent/weui/wiki) 16 | - WeUI design reference [weui-design](https://github.com/weui/weui-design) 17 | 18 | ## Mobile demo 19 | 20 | ![https://weui.io](https://cloud.githubusercontent.com/assets/4652816/15662614/178efd46-2725-11e6-8952-09d7836e968d.png) 21 | 22 | [https://weui.io](https://weui.io) 23 | 24 | Legacy version 1.x: [https://weui.io/1.x](https://weui.io/1.x) 25 | 26 | Legacy version 0.4.x: [https://weui.io/0.4.x](https://weui.io/0.4.x) 27 | 28 | ## Development 29 | 30 | - [WeUI for 小程序 (weui-wxss)](https://github.com/Tencent/weui-wxss/) 31 | - [WeUI for Work (企业微信版)](https://work.weixin.qq.com/api/doc#12146) 32 | - [weui.js](https://github.com/weui/weui.js/) 33 | - [react-weui](https://github.com/weui/react-weui/) 34 | 35 | ## License 36 | 37 | The MIT License(http://opensource.org/licenses/MIT) 38 | 39 | Please feel free to use and contribute to the development. 40 | 41 | ## Contribution 42 | 43 | If you have any ideas or suggestions to improve Wechat WeUI, welcome to submit an issue/pull request. 44 | -------------------------------------------------------------------------------- /README_cn.md: -------------------------------------------------------------------------------- 1 | WeUI 为微信 Web 服务量身设计 2 | ==== 3 | 4 | [![Build Status](https://travis-ci.org/Tencent/weui.svg?branch=master)](https://travis-ci.org/Tencent/weui) 5 | [![npm version](https://img.shields.io/npm/v/weui.svg)](https://www.npmjs.org/package/weui) 6 | 7 | [English version](README.md) 8 | 9 | ## 概述 10 | 11 | WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`等各式元素。 12 | 13 | ## 文档 14 | - WeUI 说明文档参考 [Wiki](https://github.com/Tencent/weui/wiki) 15 | - WeUI 视觉标准参考 [weui-design](https://github.com/weui/weui-design) 16 | 17 | ## 手机预览 18 | 19 | ![https://weui.io](https://cloud.githubusercontent.com/assets/4652816/15662614/178efd46-2725-11e6-8952-09d7836e968d.png) 20 | 21 | [https://weui.io](https://weui.io) 22 | 23 | 老版本 1.x: [https://weui.io/1.x](https://weui.io/1.x) 24 | 25 | 老版本 0.4.x: [https://weui.io/0.4.x](https://weui.io/0.4.x) 26 | 27 | ## 扩展 28 | - [WeUI for 小程序 (weui-wxss)](https://github.com/Tencent/weui-wxss/) 29 | - [WeUI for Work (企业微信版)](https://work.weixin.qq.com/api/doc#12146) 30 | - [weui.js](https://github.com/weui/weui.js/) 31 | - [react-weui](https://github.com/weui/react-weui/) 32 | 33 | ## License 34 | The MIT License(http://opensource.org/licenses/MIT) 35 | 36 | 请自由地享受和参与开源 37 | 38 | ## 参与贡献 39 | 40 | 如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests，为提升微信 Web 体验贡献力量。
详见：[CONTRIBUTING.md](https://github.com/Tencent/weui/blob/master/CONTRIBUTING.md) 41 | 42 | [腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。 43 | -------------------------------------------------------------------------------- /dist/example/images/icon_footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_footer.png -------------------------------------------------------------------------------- /dist/example/images/icon_footer_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_footer_link.png -------------------------------------------------------------------------------- /dist/example/images/icon_intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_intro.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_nav_feedback.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_nav_form.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_nav_layout.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_nav_nav.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_nav_search.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_nav_special.png -------------------------------------------------------------------------------- /dist/example/images/icon_nav_z-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_nav_z-index.png -------------------------------------------------------------------------------- /dist/example/images/icon_tabbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/icon_tabbar.png -------------------------------------------------------------------------------- /dist/example/images/layers/content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/layers/content.png -------------------------------------------------------------------------------- /dist/example/images/layers/navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/layers/navigation.png -------------------------------------------------------------------------------- /dist/example/images/layers/popout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/layers/popout.png -------------------------------------------------------------------------------- /dist/example/images/layers/transparent.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/layers/transparent.gif -------------------------------------------------------------------------------- /dist/example/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/logo.png -------------------------------------------------------------------------------- /dist/example/images/pic_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/pic_160.png -------------------------------------------------------------------------------- /dist/example/images/pic_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/pic_article.png -------------------------------------------------------------------------------- /dist/example/images/pic_gongan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/pic_gongan.png -------------------------------------------------------------------------------- /dist/example/images/vcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/dist/example/images/vcode.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weui", 3 | "version": "2.6.21", 4 | "description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.", 5 | "keywords": [ 6 | "weui", 7 | "wechat", 8 | "weixin", 9 | "css", 10 | "less", 11 | "mobile" 12 | ], 13 | "style": "dist/style/weui.css", 14 | "less": "src/style/weui.less", 15 | "main": "dist/style/weui.css", 16 | "scripts": { 17 | "start": "gulp -ws", 18 | "test": "gulp build", 19 | "changelog": "picklog -l -w CHANGELOG.md", 20 | "build": "gulp build", 21 | "release": "gulp tag && git add -A . && git push && git push --tags", 22 | "lint": "stylelint src", 23 | "lint:fix": "stylelint src --fix" 24 | }, 25 | "author": "wechat ui team", 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/weui/weui.git" 29 | }, 30 | "homepage": "https://github.com/weui/weui", 31 | "bugs": { 32 | "url": "https://github.com/weui/weui/issues" 33 | }, 34 | "license": "MIT", 35 | "devDependencies": { 36 | "autoprefixer": "^6.3.1", 37 | "browser-sync": "^2.9.11", 38 | "gulp": "^4.0.2", 39 | "gulp-convert-css-var": "^0.1.3", 40 | "gulp-cssnano": "^2.0.0", 41 | "gulp-header": "^1.7.1", 42 | "gulp-less": "^4.0.1", 43 | "gulp-postcss": "^6.0.1", 44 | "gulp-rename": "^1.2.2", 45 | "gulp-replace": "^0.5.2", 46 | "gulp-sourcemaps": "^2.2.0", 47 | "gulp-tap": "^0.1.3", 48 | "picklog": "^2.1.3", 49 | "postcss-discard-comments": "^2.0.4", 50 | "stylelint": "^13.0.0", 51 | "stylelint-config-standard": "^19.0.0", 52 | "yargs": "^1.3.3" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/example/actionsheet/actionsheet.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

ActionSheet

4 |

弹出式菜单

5 |
6 |
7 | ActionSheet 8 |
9 | 10 |
11 | 12 | 28 |
29 | 30 | 40 | 41 |
42 | 82 | -------------------------------------------------------------------------------- /src/example/badge/badge.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Badge

4 |

徽章

5 |
6 | 7 |
8 |
新消息提示跟摘要信息后，统一在列表右侧
9 |
10 |
11 | 12 | 16 |
17 |
18 | 19 |
未读数红点跟在主题信息后，统一在列表左侧
20 |
21 |
22 | 26 | 30 |
31 |
32 | 36 | 37 |
38 |
39 | 44 | 45 |
46 | 47 |
48 | 52 | 53 |
54 |
55 |
56 |
57 | -------------------------------------------------------------------------------- /src/example/button/button.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Button

4 |

按钮

5 |
6 |
7 | 普通型 8 | 底部悬浮型 9 |
10 |
11 | -------------------------------------------------------------------------------- /src/example/button/button_bottom_fixed.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
Dolor tempora dolore aperiam fuga necessitatibus? Odio atque tempora deleniti voluptates voluptatem. Dolorem earum voluptas blanditiis labore quisquam? Quibusdam nesciunt consequatur aliquam ea corrupti animi, itaque consequatur neque? At porroSit nemo aliquid quas error doloremque Reiciendis ratione repellendus quae sit commodi amet architecto? Aut officiis aliquam fugit nulla at necessitatibus Optio totam quibusdam laboriosam aperiam libero! Officiis reiciendis Elit quaerat sed vero perferendis architecto consequatur. Consequuntur ad illum dolore ut accusamus. Cum possimus odit sequi quaerat beatae, eveniet. Rerum dolore ipsam quia consectetur iste Veniam mollitia dolores tempore? Dolor tempora dolore aperiam fuga necessitatibus? Odio atque tempora deleniti voluptates voluptatem. Dolorem earum voluptas blanditiis labore quisquam? Quibusdam nesciunt consequatur aliquam ea corrupti animi, itaque consequatur neque? At porroSit nemo aliquid quas error doloremque Reiciendis ratione repellendus quae sit commodi amet architecto? Aut officiis aliquam fugit nulla at necessitatibus Optio totam quibusdam laboriosam aperiam libero! Officiis reiciendis Elit quaerat sed vero perferendis architecto consequatur. Consequuntur ad illum dolore ut accusamus. Cum possimus odit sequi quaerat beatae, eveniet. Rerum dolore ipsam quia consectetur iste Veniam mollitia dolores tempore?
5 |
6 |
7 |
8 | 12 |
13 |
14 | 阅读并同意 15 | 取消 16 |
17 |
18 |
19 | 67 | 68 |
69 | -------------------------------------------------------------------------------- /src/example/flex/flex.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Flex

4 |

Flex布局

5 |
6 |
7 |
8 |
weui
9 |
10 |
11 |
weui
12 |
weui
13 |
14 |
15 |
weui
16 |
weui
17 |
weui
18 |
19 |
20 |
weui
21 |
weui
22 |
weui
23 |
weui
24 |
25 |
26 |
weui
27 |
weui
28 |
weui
29 |
30 |
31 |
-------------------------------------------------------------------------------- /src/example/footer/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Footer

4 |

页脚

5 |
6 |
7 |
8 |

Copyright © 2008-2022 weui.io

9 |
10 |
11 |
12 |
13 |

14 | 底部链接 15 |

16 |

Copyright © 2008-2022 weui.io

17 |
18 |
19 |
20 |
21 |

22 | 底部链接 23 | 底部链接 24 |

25 |

Copyright © 2008-2022 weui.io

26 |
27 |
28 |

29 | WeUI首页 30 |

31 |

Copyright © 2008-2022 weui.io

32 | 33 | 备案号：粤B2-20090059 34 | 35 |
36 |
37 |
38 | -------------------------------------------------------------------------------- /src/example/form/form.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Form

4 |

表单页

5 |
6 |
7 | 表单结构 8 | 9 | 输入框状态 10 | 验证码 11 | 底部悬浮 12 | 复选框 13 | 跳转列表项 14 | 单选框 15 | 开关 16 | 原生选择框 17 | 模拟选择框 18 | 文本域 19 | 上下结构 20 |
21 |
22 | -------------------------------------------------------------------------------- /src/example/form/form_access.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

跳转列表项

6 |
7 |
8 |
9 |
10 | 11 |

cell standard

12 |
13 | 14 | 15 |

cell standard

16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /src/example/form/form_checkbox.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

复选框样式展示

6 |
7 |
8 |
9 |
10 | 19 | 28 | 37 | 38 |
添加更多
39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 | 下一步 47 |
48 |
49 |

50 | 点击下一步即表示同意用户协议 51 |

52 |
53 |
54 |
55 | 62 |
63 | 64 | 82 | -------------------------------------------------------------------------------- /src/example/form/form_radio.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

单选框样式展示

6 |
7 |
8 |
9 |
10 | 19 | 29 | 30 |
添加更多
31 | 32 |
33 |
34 |
35 |
36 |
37 |
38 | 确定 39 |
40 |
41 |
42 | 49 |
50 | 51 | 71 | -------------------------------------------------------------------------------- /src/example/form/form_switch.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

开关样式展示

6 |
7 |
8 |
9 |
10 | 16 | 22 | 31 |
32 |
33 |
34 |
35 |
36 |
37 | 确定 38 |
39 |
40 |
41 | 48 |
49 | 50 | 70 | -------------------------------------------------------------------------------- /src/example/form/form_textarea.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

文本域

6 |
输入更多内容的输入区域样式展示
7 |
8 |
9 |
10 |
问题描述
11 |
12 |
13 |
14 | 15 |
0/200
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 确定 25 |
26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /src/example/form/form_vertical.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

上下结构

6 |
上下结构样式
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | 15 |
0/200
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 确定 25 |
26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /src/example/gallery/gallery.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Gallery

4 |

画廊，可实现上传图片的展示或幻灯片播放

5 |
6 | 14 |
15 | 26 | -------------------------------------------------------------------------------- /src/example/grid/grid.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Grid

4 |

九宫格

5 |
6 |
7 | 8 |
9 | 10 |
11 |

Grid

12 | 13 | 14 |
15 | 16 |
17 |

Grid

18 | 19 | 20 |
21 | 22 |
23 |

Grid

24 | 25 | 26 |
27 | 28 |
29 |

Grid

30 | 31 | 32 |
33 | 34 |
35 |

Grid

36 | 37 | 38 |
39 | 40 |
41 |

Grid

42 | 43 | 44 |
45 | 46 |
47 |

Grid

48 | 49 | 50 |
51 | 52 |
53 |

Grid

54 | 55 | 56 |
57 | 58 |
59 |

Grid

60 | 61 |
62 |
63 | -------------------------------------------------------------------------------- /src/example/icons/icons.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Icons

4 |

图标

5 |
6 |
7 |
8 | 9 | 13 |
14 |
15 | 16 | 20 |
21 |
22 | 23 | 27 |
28 |
29 | 30 | 34 |
35 |
36 | 37 | 41 |
42 | 68 |
69 |
70 | -------------------------------------------------------------------------------- /src/example/images/icon_footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_footer.png -------------------------------------------------------------------------------- /src/example/images/icon_footer_link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_footer_link.png -------------------------------------------------------------------------------- /src/example/images/icon_intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_intro.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_nav_feedback.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_nav_form.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_nav_layout.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_nav_nav.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_nav_search.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_nav_special.png -------------------------------------------------------------------------------- /src/example/images/icon_nav_z-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_nav_z-index.png -------------------------------------------------------------------------------- /src/example/images/icon_tabbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/icon_tabbar.png -------------------------------------------------------------------------------- /src/example/images/layers/content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/layers/content.png -------------------------------------------------------------------------------- /src/example/images/layers/navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/layers/navigation.png -------------------------------------------------------------------------------- /src/example/images/layers/popout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/layers/popout.png -------------------------------------------------------------------------------- /src/example/images/layers/transparent.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/layers/transparent.gif -------------------------------------------------------------------------------- /src/example/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/logo.png -------------------------------------------------------------------------------- /src/example/images/pic_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/pic_160.png -------------------------------------------------------------------------------- /src/example/images/pic_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/pic_article.png -------------------------------------------------------------------------------- /src/example/images/pic_gongan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/pic_gongan.png -------------------------------------------------------------------------------- /src/example/images/vcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/example/images/vcode.jpg -------------------------------------------------------------------------------- /src/example/information-bar/information-bar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Information Bar

4 |

信息提示条

5 |
6 |
7 | 19 | 31 | 43 | 55 | 67 |
68 |
69 | 79 | -------------------------------------------------------------------------------- /src/example/layers.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

WeUI页面层级

5 |

用于规范WeUI页面元素所属层级、层级顺序及组合规范。

6 |
7 | 11 | 15 | 19 | 23 |
24 |
25 |
26 |
Popout
27 |
Mask
28 |
Navigation
29 |
Content
30 |
31 |
32 |
33 | -------------------------------------------------------------------------------- /src/example/loading/loading.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Loading

4 |

正在加载

5 |
6 |
7 |
8 |
9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | -------------------------------------------------------------------------------- /src/example/loadmore/loadmore.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Loadmore

4 |

加载更多

5 |
6 |
7 | 13 |
14 | 暂无数据 15 |
16 |
17 |
已无更多数据
18 | 19 |
20 |
21 |
22 | 24 | -------------------------------------------------------------------------------- /src/example/msg/msg.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Msg

4 |

提示页

5 |
6 |
7 | 成功提示页 8 | 失败提示页 9 | 无图标提示页 10 | 无图标提示页 11 | key-value场景 12 | 描述列表场景 13 | 跳转列表场景 14 |
15 |
16 | -------------------------------------------------------------------------------- /src/example/msg/msg_custom_area_cell.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

操作成功

6 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

7 |
8 |
9 |
10 | 11 | cell standard 12 | 13 | 14 | 15 | cell standard 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |

24 | 推荐操作 25 |

26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /src/example/msg/msg_custom_area_preview.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

操作成功

6 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

7 |
8 |
    9 |

  • 张三

    • 10 |

  • zhangsan

    • 11 |
12 |
13 |
14 |
15 |

16 | 推荐操作 17 |

18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /src/example/msg/msg_custom_area_tips.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

操作成功

6 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

7 |
8 |
    9 |
  • 列表提示项
    • 10 |
  • 列表提示项
    • 11 |
  • 列表提示项
    • 12 |
13 |
14 |
15 |
16 |

17 | 推荐操作 18 |

19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /src/example/msg/msg_success.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

操作成功

6 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

7 |
8 |
9 |

10 | 推荐操作 11 |

12 |
13 |
14 |

提示详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

15 |
16 |
17 |
18 |

19 | 底部链接文本 20 |

21 |

Copyright © 2008-2016 weui.io

22 |
23 |
24 |
25 |
26 | -------------------------------------------------------------------------------- /src/example/msg/msg_text.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

操作成功

5 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

6 |
7 |
8 |

9 | 推荐操作 10 |

11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /src/example/msg/msg_text_primary.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现

5 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现

6 |
7 |
8 |

9 | 推荐操作 10 |

11 |
12 |
13 |

提示详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

14 |
15 |
16 |
17 | -------------------------------------------------------------------------------- /src/example/msg/msg_warn.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

操作失败

6 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

7 |
8 |
9 |

提示详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

10 |
11 |
12 |

13 | 辅助操作 14 |

15 |
16 |
17 |
18 |

19 | 底部链接文本 20 |

21 |

Copyright © 2008-2016 weui.io

22 |
23 |
24 |
25 |
26 | -------------------------------------------------------------------------------- /src/example/navbar/navbar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 8 | 11 | 14 |
15 |
Sit sit quibusdam assumenda facilis magnam temporibus? Molestiae qui ad accusantium minus mollitia Esse maiores voluptates suscipit fugit veritatis numquam repellat omnis. Dolores facilis deleniti reiciendis ea beatae Quaerat soluta
16 | 17 | 18 |
19 |
20 |
21 | 32 | -------------------------------------------------------------------------------- /src/example/picker/picker.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Picker

4 |

多列选择器，需要配合js实现

5 |
6 |
7 | 单列选择器 8 | 日期选择器 9 |
10 |
11 | 12 | 55 | -------------------------------------------------------------------------------- /src/example/preview/preview.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Preview

4 |

表单预览

5 |
6 |
7 |
8 |
9 |
10 | 11 | ¥2400.00 12 |
13 |
14 |
15 |
16 | 17 | 电动打蛋机 18 |
19 |
20 | 21 | 名字名字名字 22 |
23 |
24 | 25 | 很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字 26 |
27 |
28 |
29 | 操作 30 |
31 |
32 |
33 |
34 |
35 | 36 | ¥2400.00 37 |
38 |
39 |
40 | 41 | 电动打蛋机 42 |
43 |
44 | 45 | 名字名字名字 46 |
47 |
48 | 49 | 很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字 50 |
51 |
52 |
53 | 辅助操作 54 | 操作 55 |
56 |
57 |
58 |
59 | -------------------------------------------------------------------------------- /src/example/progress/progress.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Progress

4 |

进度条

5 |
6 |
7 |
8 |
9 |
10 |
11 | 12 | 13 | 14 | 0% 15 |
16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 | 50% 26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 | 34 | 35 | 80% 36 |
37 |
38 | 39 |
40 |
41 |
42 | 78 | -------------------------------------------------------------------------------- /src/example/searchbar/searchbar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

SearchBar

4 |

搜索栏

5 |
6 |
7 | Filled (default) 8 | Filled Grey 9 | Outlined 10 | Homepage 11 |
12 |
13 | -------------------------------------------------------------------------------- /src/example/searchbar/searchbar_grey.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

SearchBar

4 |

搜索栏 Grey

5 |
6 |
7 | 24 |
25 |
26 | 70 | -------------------------------------------------------------------------------- /src/example/searchbar/searchbar_homepage.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

SearchBar

4 |

搜索栏 Homepage

5 |
6 |
7 | 15 |
16 |
17 | 20 | -------------------------------------------------------------------------------- /src/example/searchbar/searchbar_outlined.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

SearchBar

4 |

搜索栏 Outlined

5 |
6 |
7 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /src/example/slider/slider.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Slider

4 |

滑块

5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 | 54 | -------------------------------------------------------------------------------- /src/example/steps/steps.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Steps

4 |

步骤条

5 |
6 |
7 | 垂直型 8 | 水平型 9 |
10 |
11 | -------------------------------------------------------------------------------- /src/style/base/a11y.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "fn"; 18 | 19 | .weui-hidden_abs { 20 | opacity: 0; 21 | position: absolute; 22 | width: 1px;//1px是为了兼容ios15 23 | height: 1px; 24 | overflow: hidden; 25 | } 26 | .weui-a11y_ref { 27 | display: none; 28 | } 29 | .weui-hidden-space:empty { 30 | &::before { 31 | content: "\00A0"; 32 | position: absolute; 33 | width: 1px; 34 | height: 1px; 35 | overflow: hidden; 36 | } 37 | } 38 | .weui-a11y-combo { 39 | position: relative; 40 | } 41 | .weui-a11y-combo__helper { 42 | opacity: 0; 43 | position: absolute; 44 | width: 100%; 45 | height: 100%; 46 | overflow: hidden; 47 | } 48 | .weui-a11y-combo__content { 49 | position: relative; 50 | z-index: 1; 51 | } 52 | 53 | .weui-wa-hotarea-el { 54 | position: absolute; 55 | top: 50%; 56 | left: 50%; 57 | transform: translate(-50%, -50%); 58 | min-width: 44px; 59 | min-height: 44px; 60 | width: 100%; 61 | height: 100%; 62 | } 63 | .weui-wa-hotarea-el__wrp, 64 | .weui-wa-hotarea, 65 | .weui-wa-hotarea_before { 66 | position: relative; 67 | 68 | // 如果是合法的点击嵌套，例如label[for]里的出现链接，需要把层级提高 69 | a, 70 | button, 71 | navigator { 72 | position: relative; 73 | z-index: 1; 74 | } 75 | } 76 | .weui-wa-hotarea_before::before, 77 | .weui-wa-hotarea::after { 78 | content: ""; 79 | pointer-events: auto; 80 | .weui-wa-hotarea-el; 81 | } 82 | 83 | -------------------------------------------------------------------------------- /src/style/base/fn.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | // theme 18 | @import "./theme/index"; 19 | 20 | // mixin 21 | @import "./mixin/mobile"; 22 | @import "./mixin/setOnepx"; 23 | @import "./mixin/setArrow"; 24 | @import "./mixin/setLoading"; 25 | @import "./mixin/text"; 26 | @import "./mixin/btnWrapLayout"; 27 | 28 | 29 | // variable 30 | @import "./variable/global"; 31 | @import "./variable/color"; 32 | @import "./variable/weui-tab"; 33 | @import "./variable/weui-cell"; 34 | @import "./variable/weui-button"; 35 | @import "./variable/weui-msg"; 36 | @import "./variable/weui-grid"; 37 | @import "./variable/weui-progress"; 38 | @import "./variable/weui-dialog"; 39 | -------------------------------------------------------------------------------- /src/style/base/mixin/btnWrapLayout.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | .weuiBtnWrapLayoutDefault() { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | 22 | .weui-btn { 23 | width: @weuiBtnWidth; 24 | padding-left: 16px; 25 | padding-right: 16px; 26 | } 27 | .weui-btn:nth-last-child(n+2), 28 | .weui-btn:nth-last-child(n+2) + .weui-btn { 29 | margin: 0 8px; 30 | width: 136px; 31 | min-width: 0; 32 | &:first-child { 33 | margin-left: 0; 34 | } 35 | &:last-child { 36 | margin-right: 0; 37 | } 38 | } 39 | } 40 | .weuiBtnWrapLayoutWrap() { 41 | flex-direction: column; 42 | .weui-btn:nth-last-child(n+2), 43 | .weui-btn:nth-last-child(n+2) + .weui-btn { 44 | width: 184px; 45 | margin: 16px 0 0; 46 | &:first-child { 47 | margin-top: 0; 48 | } 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /src/style/base/mixin/mobile.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | .setTapColor(@c:rgba(0,0,0,0)) { 18 | -webkit-tap-highlight-color: @c; 19 | } 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/style/base/mixin/setArrow.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | ._setArrow(@arrowsize, @borderColor, @borderWidth) { 18 | display: inline-block; 19 | height: @arrowsize; 20 | width: @arrowsize; 21 | border-width: @borderWidth @borderWidth 0 0; 22 | border-color: @borderColor; 23 | border-style: solid; 24 | } 25 | 26 | .setArrow(@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top) { 27 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 28 | 29 | transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg) 30 | } 31 | 32 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) { 33 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 34 | 35 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg); 36 | position: relative; 37 | top: -2px; 38 | } 39 | 40 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) { 41 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 42 | 43 | transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg); 44 | position: relative; 45 | top: -3px; 46 | } 47 | 48 | .setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) { 49 | ._setArrow(@arrowsize, @borderColor, @borderWidth); 50 | 51 | transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg); 52 | position: relative; 53 | top: -2px; 54 | } 55 | -------------------------------------------------------------------------------- /src/style/base/mixin/setLoading.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | .setCircleLoading(@color:currentColor,@size:80px,@wide:7px) { 18 | display: inline-flex; 19 | position: relative; 20 | width: @size; 21 | height: @size; 22 | vertical-align: middle; 23 | color: @color; 24 | animation: circleLoading 1s steps(60, end) infinite; 25 | 26 | &::before, 27 | &::after { 28 | content: ""; 29 | display: block; 30 | width: @size/2; 31 | height: @size; 32 | box-sizing: border-box; 33 | border: @wide solid; 34 | border-color: currentColor; 35 | } 36 | 37 | &::before { 38 | border-right-width: 0; 39 | border-top-left-radius: @size; 40 | border-bottom-left-radius: @size; 41 | -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0.3) 95%); 42 | } 43 | &::after { 44 | border-left-width: 0; 45 | border-top-right-radius: @size; 46 | border-bottom-right-radius: @size; 47 | -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.3) 95%); 48 | } 49 | &__dot { 50 | position: absolute; 51 | top: 0; 52 | left: 50%; 53 | margin-left: -@wide/2; 54 | width: @wide; 55 | height: @wide; 56 | border-top-right-radius: 100%; 57 | border-bottom-right-radius: 100%; 58 | background: currentColor; 59 | } 60 | 61 | @keyframes circleLoading { 62 | 0% { 63 | transform: rotate3d(0, 0, 1, 0deg); 64 | } 65 | 66 | 100% { 67 | transform: rotate3d(0, 0, 1, 360deg); 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/style/base/mixin/setOnepx.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../variable/color"; 18 | 19 | .setTopLine(@c: @weuiLineColorLight) { 20 | content: " "; 21 | position: absolute; 22 | left: 0; 23 | top: 0; 24 | right: 0; 25 | height: 1px; 26 | border-top: 1px solid @c; 27 | color: @c; 28 | transform-origin: 0 0; 29 | transform: scaleY(0.5); 30 | } 31 | 32 | .setBottomLine(@c: @weuiLineColorLight) { 33 | content: " "; 34 | position: absolute; 35 | left: 0; 36 | bottom: 0; 37 | right: 0; 38 | height: 1px; 39 | border-bottom: 1px solid @c; 40 | color: @c; 41 | transform-origin: 0 100%; 42 | transform: scaleY(0.5); 43 | } 44 | 45 | .setLeftLine(@c: @weuiLineColorLight) { 46 | content: " "; 47 | position: absolute; 48 | left: 0; 49 | top: 0; 50 | width: 1px; 51 | bottom: 0; 52 | border-left: 1px solid @c; 53 | color: @c; 54 | transform-origin: 0 0; 55 | transform: scaleX(0.5); 56 | } 57 | 58 | .setRightLine(@c: @weuiLineColorLight) { 59 | content: " "; 60 | position: absolute; 61 | right: 0; 62 | top: 0; 63 | width: 1px; 64 | bottom: 0; 65 | border-right: 1px solid @c; 66 | color: @c; 67 | transform-origin: 100% 0; 68 | transform: scaleX(0.5); 69 | } 70 | 71 | .setLines(@c: @weuiLineColorLight) { 72 | content: " "; 73 | position: absolute; 74 | top: 0; 75 | left: 0; 76 | width: 200%; 77 | bottom: -100%; 78 | border: 1px solid @c; 79 | color: @c; 80 | transform-origin: 0 0; 81 | transform: scale(0.5); 82 | } 83 | -------------------------------------------------------------------------------- /src/style/base/mixin/text.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | .ellipsis(@w:auto) { 18 | width: @w; 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | white-space: nowrap; 22 | word-wrap: normal; 23 | } 24 | 25 | .ellipsisLn(@line) { 26 | overflow: hidden; 27 | text-overflow: ellipsis; 28 | display: -webkit-box; 29 | -webkit-box-orient: vertical; 30 | -webkit-line-clamp: @line; 31 | } 32 | .text_wrap() { 33 | word-wrap: break-word; 34 | word-break: break-all; 35 | } 36 | .hyphens() { 37 | word-wrap: break-word; 38 | -webkit-hyphens: auto; 39 | hyphens: auto; 40 | } 41 | -------------------------------------------------------------------------------- /src/style/base/patch.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/weui/8a4f37de9383a947a2a3b0e8b45bc4fb32c0926e/src/style/base/patch.less -------------------------------------------------------------------------------- /src/style/base/reset.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "fn"; 18 | 19 | html { 20 | -ms-text-size-adjust: 100%; 21 | -webkit-text-size-adjust: 100%; 22 | } 23 | 24 | body { 25 | line-height: 1.6; 26 | font-family: @weuiFontDefault; 27 | } 28 | 29 | * { 30 | margin: 0; 31 | padding: 0; 32 | outline: 0; 33 | .setTapColor; 34 | } 35 | 36 | a img { 37 | border: 0; 38 | } 39 | 40 | a { 41 | text-decoration: none; 42 | cursor: default; 43 | } 44 | input, 45 | textarea { 46 | caret-color: @weuiColorPrimary; 47 | } 48 | ::placeholder, { 49 | color: var(--weui-FG-2); 50 | } 51 | -------------------------------------------------------------------------------- /src/style/base/theme/fn.less: -------------------------------------------------------------------------------- 1 | @import 'less-vars/light'; 2 | @import 'less-vars/dark'; 3 | @import 'less-vars/care-light'; 4 | @import 'less-vars/care-dark'; 5 | @import 'vars/light'; 6 | @import 'vars/dark'; 7 | @import 'vars/care-light'; 8 | @import 'vars/care-dark'; 9 | 10 | .dark(@rule) { 11 | .wx-root[data-weui-theme='dark'] &, 12 | body[data-weui-theme='dark'] & { 13 | @rule(); 14 | } 15 | 16 | @media (prefers-color-scheme: dark) { 17 | .wx-root:not([data-weui-theme='light']) &, 18 | body:not([data-weui-theme='light']) & { 19 | @rule(); 20 | } 21 | } 22 | } 23 | .setColor(@var, @color) { 24 | .setColor(@var, @color, @color); 25 | } 26 | .setColor(@var, @light, @dark) { 27 | ._setColor({ 28 | @{var}: @light; 29 | }, { 30 | @{var}: @dark; 31 | }); 32 | } 33 | ._setColor(@lightRule, @darkRule) { 34 | .wx-root, 35 | body { 36 | @lightRule(); 37 | } 38 | .wx-root[data-weui-theme='dark'], 39 | body[data-weui-theme='dark'] { 40 | @darkRule(); 41 | } 42 | 43 | @media (prefers-color-scheme: dark) { 44 | .wx-root:not([data-weui-theme='light']), 45 | body:not([data-weui-theme='light']) { 46 | @darkRule(); 47 | } 48 | } 49 | } 50 | 51 | .care(@rule) { 52 | .wx-root[data-weui-mode='care'] &, 53 | body[data-weui-mode='care'] & { 54 | @rule(); 55 | } 56 | } 57 | .setCareColor(@var, @color) { 58 | .setCareColor(@var, @color, @color); 59 | } 60 | .setCareColor(@var, @light, @dark) { 61 | ._setCareColor({ 62 | @{var}: @light; 63 | }, { 64 | @{var}: @dark; 65 | }); 66 | } 67 | ._setCareColor(@lightRule, @darkRule) { 68 | .wx-root[data-weui-mode='care'], 69 | body[data-weui-mode='care'] { 70 | @lightRule(); 71 | } 72 | .wx-root[data-weui-mode='care'][data-weui-theme='dark'], 73 | body[data-weui-mode='care'][data-weui-theme='dark'] { 74 | @darkRule(); 75 | } 76 | 77 | @media (prefers-color-scheme: dark) { 78 | .wx-root[data-weui-mode='care']:not([data-weui-theme='light']), 79 | body[data-weui-mode='care']:not([data-weui-theme='light']) { 80 | @darkRule(); 81 | } 82 | } 83 | } 84 | 85 | 86 | // 定义局部作用域的颜色变量 87 | .setThisColor(@var, @color) { 88 | .setColor(@var, @color, @color); 89 | } 90 | .setThisColor(@var, @light, @dark) { 91 | ._setThisColor({ 92 | @{var}: @light; 93 | }, { 94 | @{var}: @dark; 95 | }); 96 | } 97 | ._setThisColor(@lightRule, @darkRule) { 98 | & { 99 | @lightRule(); 100 | } 101 | .wx-root[data-weui-theme='dark'] &, 102 | body[data-weui-theme='dark'] & { 103 | @darkRule(); 104 | } 105 | 106 | @media (prefers-color-scheme: dark) { 107 | .wx-root:not([data-weui-theme='light']) &, 108 | body:not([data-weui-theme='light']) & { 109 | @darkRule(); 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/style/base/theme/index.less: -------------------------------------------------------------------------------- 1 | @import 'fn'; 2 | 3 | body, 4 | .wx-root { 5 | .varsLight(); 6 | } 7 | 8 | @media (prefers-color-scheme: dark) { 9 | .wx-root:not([data-weui-theme='light']), 10 | body:not([data-weui-theme='light']) { 11 | .varsDark(); 12 | } 13 | } 14 | .wx-root[data-weui-theme='dark'], 15 | body[data-weui-theme='dark'] { 16 | .varsDark(); 17 | } 18 | 19 | 20 | .wx-root[data-weui-mode='care'], 21 | body[data-weui-mode='care'] { 22 | .varsCareLight(); 23 | } 24 | 25 | @media (prefers-color-scheme: dark) { 26 | .wx-root[data-weui-mode='care']:not([data-weui-theme='light']), 27 | body[data-weui-mode='care']:not([data-weui-theme='light']) { 28 | .varsCareDark(); 29 | } 30 | } 31 | .wx-root[data-weui-mode='care'][data-weui-theme='dark'], 32 | body[data-weui-mode='care'][data-weui-theme='dark'] { 33 | .varsCareDark(); 34 | } 35 | -------------------------------------------------------------------------------- /src/style/base/variable/color.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../theme/index"; 18 | 19 | .setColor(--weui-BG-COLOR-ACTIVE, #ececec, overlay(rgba(255, 255, 255, 0.05), #2c2c2c)); 20 | 21 | // color 22 | @weuiColorPrimary: var(--weui-BRAND); 23 | @weuiColorWarn: var(--weui-RED); 24 | 25 | // active mask 26 | @weuiActiveMaskBlack: rgba(0, 0, 0, 0.15); 27 | 28 | // link 29 | @weuiLinkColorDefault: var(--weui-LINK); 30 | 31 | // background 32 | @weuiBgColorDefault: var(--weui-BG-0); 33 | @weuiBgColorPrimary: var(--weui-BG-1); 34 | @weuiBgColorActive: var(--weui-BG-COLOR-ACTIVE); 35 | 36 | // line 37 | @weuiLineColorLight: var(--weui-FG-3); 38 | @weuiLineColorDark: var(--weui-FG-2); 39 | 40 | // text 41 | @weuiTextColorTitle: var(--weui-FG-0); 42 | @weuiTextColorDesc: var(--weui-FG-1); 43 | @weuiTextColorTips: var(--weui-FG-2); 44 | @weuiTextColorWarn: @weuiColorWarn; 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/style/base/variable/global.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | // font 18 | @weuiFontEN: system-ui, -apple-system, "Helvetica Neue"; 19 | @weuiFontCN: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"; 20 | @weuiFontSans: sans-serif; 21 | @weuiFontDefault: @weuiFontEN, @weuiFontSans; 22 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-button.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | 20 | body, 21 | .wx-root, 22 | page { 23 | --weui-BTN-HEIGHT: 48; 24 | --weui-BTN-HEIGHT-MEDIUM: 40; 25 | --weui-BTN-HEIGHT-SMALL: 32; 26 | } 27 | .setColor(--weui-BTN-ACTIVE-MASK, rgba(0,0,0,0.2), rgba(255,255,255,0.2)); 28 | 29 | 30 | 31 | .setColor(--weui-BTN-DEFAULT-ACTIVE-BG, overlay(rgba(0, 0, 0, 0.05), #f2f2f2), overlay(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.08))); 32 | 33 | @weuiBtnWidth: 184px; 34 | @weuiBtnHeight: 48px; 35 | @weuiBtnFontSize: 17px; 36 | @weuiBtnBorderRadius: 8px; 37 | @weuiBtnDefaultGap: 16px; 38 | 39 | @weuiBtnMiniFontSize: 14px; 40 | @weuiBtnMiniHeight: 32px; 41 | 42 | @weuiBtnCellHeight: 56px; 43 | @weuiBtnCellGap: 16px; 44 | @weuiBtnCellLineHeight:unit(((@weuiBtnCellHeight - 2 * @weuiBtnCellGap) / @weuiBtnFontSize)); 45 | 46 | @weuiBtnFontColor: #fff; 47 | @weuiBtnDisabledFontColor: var(--weui-FG-4); 48 | @weuiBtnDisabledBg: var(--weui-FG-5); 49 | 50 | 51 | // default 52 | @weuiBtnDefaultFontColor: var(--weui-FG-0); 53 | @weuiBtnDefaultDisabledFontColor: @weuiBtnDisabledFontColor; 54 | @weuiBtnDefaultBg: var(--weui-FG-5); 55 | @weuiBtnDefaultActiveBg: var(--weui-BTN-DEFAULT-ACTIVE-BG); 56 | @weuiBtnDefaultDisabledBg: @weuiBtnDisabledBg; 57 | 58 | // primary 59 | @weuiBtnPrimaryFontColor: @weuiBtnFontColor; 60 | @weuiBtnPrimaryDisabledFontColor: @weuiBtnDisabledFontColor; 61 | @weuiBtnPrimaryBg: var(--weui-BRAND); 62 | @weuiBtnPrimaryActiveBg: var(--weui-TAG-TEXT-GREEN); 63 | @weuiBtnPrimaryDisabledBg: @weuiBtnDisabledBg; 64 | 65 | // warn 66 | @weuiBtnWarnFontColor: @weuiBtnFontColor; 67 | @weuiBtnWarnDisabledFontColor: @weuiBtnDisabledFontColor; 68 | @weuiBtnWarnBg: var(--weui-RED-100); 69 | @weuiBtnWarnActiveBg: @weuiBtnDefaultActiveBg; 70 | @weuiBtnwarnDisabledBg: @weuiBtnDefaultDisabledBg; 71 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-cell.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | @weuiCellBg: var(--weui-BG-2); 20 | @weuiCellBorderColor: @weuiLineColorLight; 21 | @weuiCellGapV: 16px; 22 | @weuiCellGapH: 16px; 23 | @weuiCellInnerGapH: 16px; 24 | @weuiCellHeight: 56px; 25 | @weuiCellFontSize: 17px; 26 | @weuiCellTipsFontSize: 14px; 27 | @weuiCellLabelWidth: 105px; 28 | @weuiCellActiveBg: @weuiBgColorActive; 29 | 30 | @weuiCellLineHeight: unit(((@weuiCellHeight - 2 * @weuiCellGapV) / @weuiCellFontSize)); // 高度减去上下padding的行高 31 | @weuiCellsMarginTop: 8px; 32 | 33 | // weui switch 34 | @weuiSwitchHeight: 32px; 35 | 36 | // weui uploader 37 | @weuiUploaderFileSpacing: 8px; 38 | @weuiUploaderSize: 96px; 39 | @weuiUploaderBorderWidth: 1px; 40 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-dialog.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .setColor(--weui-DIALOG-LINE-COLOR, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); 20 | 21 | @weuiDialogBackgroundColor: var(--weui-BG-2); 22 | @weuiDialogLineColor: var(--weui-DIALOG-LINE-COLOR); 23 | @weuiDialogLinkColor: @weuiLinkColorDefault; 24 | @weuiDialogLinkActiveBc: @weuiBgColorActive; 25 | @weuiDialogGapWidth: 24px; 26 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-grid.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | @weuiGridBorderColor: var(--weui-FG-3); 20 | @weuiGridFontSize: 14px; 21 | @weuiGridIconSize: 28px; 22 | @weuiGridColumnCount: 3; 23 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-msg.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @weuiMsgPaddingTop: 48px; 18 | @weuiMsgTitleGap: 16px; 19 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-progress.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | @weuiProgressBg: @weuiBgColorDefault; 20 | @weuiProgressColor: @weuiColorPrimary; 21 | @weuiProgressHeight: 3px; 22 | -------------------------------------------------------------------------------- /src/style/base/variable/weui-tab.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @weuiNavBarHeight: 56px; 18 | @weuiTabBarHeight: 60px; 19 | -------------------------------------------------------------------------------- /src/style/weui.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "./base/reset"; 18 | 19 | // theme 20 | @import "./base/theme/index"; 21 | 22 | // icon font 23 | @import "./icon/weui-icon"; 24 | 25 | //a11y 26 | @import "./base/a11y"; 27 | 28 | // text 29 | @import "./widget/weui-text/weui-link"; 30 | 31 | // button 32 | @import "./widget/weui-button/weui-button"; 33 | 34 | // cell 35 | @import "./widget/weui-cell/weui-cell_global"; 36 | @import "./widget/weui-cell/weui-cell_swiped"; 37 | @import "./widget/weui-cell/weui-access"; 38 | @import "./widget/weui-cell/weui-check"; 39 | @import "./widget/weui-cell/weui-form"; 40 | @import "./widget/weui-cell/weui-gallery"; 41 | @import "./widget/weui-cell/weui-switch"; 42 | @import "./widget/weui-cell/weui-uploader"; 43 | 44 | // msg 45 | @import "./widget/weui-page/weui-msg"; 46 | 47 | // steps 48 | @import "./widget/weui-steps/weui-steps"; 49 | 50 | // form 51 | @import "./widget/weui-page/weui-form"; 52 | 53 | // article 54 | @import "./widget/weui-page/weui-article"; 55 | 56 | // tab 57 | @import "./widget/weui-tab/weui-tab"; 58 | 59 | // progress 60 | @import "./widget/weui-progress/weui-progress"; 61 | 62 | // panel 63 | @import "./widget/weui-panel/weui-panel"; 64 | 65 | // media box 66 | @import "./widget/weui-media-box/weui-media-box"; 67 | 68 | // grid 69 | @import "./widget/weui-grid/weui-grid"; 70 | 71 | // copyright 72 | @import "./widget/weui-footer/weui-footer"; 73 | 74 | 75 | // flex 76 | @import "./widget/weui-flex/weui-flex"; 77 | 78 | // tips 79 | @import "./widget/weui-tips/weui-dialog"; 80 | @import "./widget/weui-tips/weui-half-screen-dialog"; 81 | @import "./widget/weui-tips/weui-toast"; 82 | @import "./widget/weui-tips/weui-mask"; 83 | @import "./widget/weui-tips/weui-actionsheet"; 84 | @import "./widget/weui-tips/weui-loadmore"; 85 | @import "./widget/weui-tips/weui-badge"; 86 | @import "./widget/weui-tips/weui-toptips"; 87 | @import "./widget/weui-tips/weui-information-bar"; 88 | @import "./widget/weui-tips/weui-list-tips"; 89 | 90 | //searchbar 91 | @import "./widget/weui-searchbar/weui-searchbar"; 92 | 93 | // picker 94 | @import "./widget/weui-picker/weui-picker"; 95 | 96 | // animate 97 | @import "./widget/weui-animate/weui-animate"; 98 | 99 | // agree 100 | @import "./widget/weui-agree/weui-agree"; 101 | 102 | // loading 103 | @import "./widget/weui-loading/weui-loading"; 104 | 105 | // slider 106 | @import "./widget/weui-slider/weui-slider"; 107 | 108 | 109 | 110 | // 小程序 patch 兼容文件，放在最后 111 | @import "./base/patch"; 112 | -------------------------------------------------------------------------------- /src/style/widget/weui-animate/weui-animate.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | @keyframes weuiSlideUp { 20 | from { 21 | transform: translate3d(0, 100%, 0); 22 | } 23 | 24 | to { 25 | transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | 29 | .weui-animate_slide-up, 30 | .weui-animate-slide-up { 31 | animation: weuiSlideUp ease 0.3s forwards; 32 | } 33 | 34 | @keyframes weuiSlideDown { 35 | from { 36 | transform: translate3d(0, 0, 0); 37 | } 38 | 39 | to { 40 | transform: translate3d(0, 100%, 0); 41 | } 42 | } 43 | 44 | .weui-animate_slide-down, 45 | .weui-animate-slide-down { 46 | animation: weuiSlideDown ease 0.3s forwards; 47 | } 48 | 49 | @keyframes weuiFadeIn { 50 | from { 51 | opacity: 0; 52 | } 53 | to { 54 | opacity: 1; 55 | } 56 | } 57 | 58 | .weui-animate_fade-in, 59 | .weui-animate-fade-in { 60 | animation: weuiFadeIn ease 0.3s forwards; 61 | } 62 | 63 | @keyframes weuiFadeOut { 64 | from { 65 | opacity: 1; 66 | } 67 | to { 68 | opacity: 0; 69 | } 70 | } 71 | 72 | .weui-animate_fade-out, 73 | .weui-animate-fade-out { 74 | animation: weuiFadeOut ease 0.3s forwards; 75 | } 76 | 77 | 78 | // transition 79 | //模态弹窗/提示组件通用显示 80 | .weui-transition { 81 | &.weui-mask { 82 | transition: opacity 0.3s, visibility 0.3s; 83 | opacity: 0; 84 | visibility: hidden; 85 | } 86 | &.weui-half-screen-dialog { 87 | transition: transform 0.3s; 88 | transform: translateY(100%); 89 | } 90 | } 91 | .weui-transition_show { 92 | &.weui-mask { 93 | opacity: 1; 94 | visibility: visible; 95 | } 96 | &.weui-half-screen-dialog { 97 | transform: translateY(0); 98 | } 99 | } 100 | 101 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-btn_cell.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-btn_cell { 20 | position: relative; 21 | display: block; 22 | margin-left: auto; 23 | margin-right: auto; 24 | box-sizing: border-box; 25 | font-size: @weuiBtnFontSize; 26 | text-align: center; 27 | text-decoration: none; 28 | color: @weuiBtnFontColor; 29 | line-height: @weuiBtnCellLineHeight; 30 | padding: @weuiBtnCellGap; 31 | .setTapColor(); 32 | 33 | overflow: hidden; 34 | background-color: var(--weui-BG-5); 35 | & + & { 36 | margin-top: @weuiBtnDefaultGap; 37 | } 38 | &:active { 39 | background-color: @weuiBgColorActive; 40 | } 41 | } 42 | .weui-btn_cell__icon { 43 | display: inline-block; 44 | vertical-align: middle; 45 | width: 24px; 46 | height: 24px; 47 | margin: -0.2em 0.34em 0 0; 48 | } 49 | .weui-btn_cell-default { 50 | color: var(--weui-FG-0); 51 | } 52 | .weui-btn_cell-primary { 53 | color: @weuiLinkColorDefault; 54 | } 55 | .weui-btn_cell-warn { 56 | color: @weuiColorWarn; 57 | } 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-btn_default.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-btn_default { 20 | color: var(--weui-FG-0); 21 | background-color: var(--weui-FG-5); 22 | &:not(.weui-btn_disabled):visited { 23 | color: var(--weui-FG-0); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-btn_disabled.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-btn_disabled, 20 | .weui-btn[disabled] { 21 | color: var(--weui-FG-4); 22 | background-color: var(--weui-FG-5); 23 | } 24 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-btn_global.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-btn { 20 | position: relative; 21 | display: block; 22 | min-width: @weuiBtnWidth; 23 | max-width: 280px; 24 | width: fit-content; 25 | margin-left: auto; 26 | margin-right: auto; 27 | padding: 12px 24px; 28 | box-sizing: border-box; 29 | font-weight: 500; 30 | font-size: @weuiBtnFontSize; 31 | text-align: center; 32 | text-decoration: none; 33 | color: #fff; 34 | line-height: unit(((@weuiBtnHeight - 24) / @weuiBtnFontSize)); 35 | border-radius: @weuiBtnBorderRadius; 36 | .setTapColor(); 37 | 38 | cursor: default; 39 | user-select: none; 40 | 41 | &:active { 42 | &::before { 43 | content: ""; 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | height: 100%; 49 | background-color: var(--weui-BTN-ACTIVE-MASK); 50 | border-radius: @weuiBtnBorderRadius; 51 | } 52 | 53 | &.weui-btn_loading, 54 | &.weui-btn_disabled, 55 | &[disabled] { 56 | &::before { 57 | display: none; 58 | } 59 | } 60 | } 61 | } 62 | .weui-btn__inner { 63 | .ellipsisLn(2); 64 | .hyphens; 65 | } 66 | .weui-btn_block { 67 | width: auto; 68 | } 69 | .weui-btn_inline { 70 | display: inline-block; 71 | } 72 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-btn_loading.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-btn_loading { 20 | .weui-mask-loading { 21 | font-size: 20px; 22 | margin: -0.2em 4px 0 0; 23 | color: currentColor; 24 | 25 | // 临时用，为了向后兼容，等designtoken完成后再改成默认loading，按需loading+text 26 | &.weui-mask-loading_only { 27 | margin-right: 0; 28 | } 29 | } 30 | 31 | &.weui-btn_default { 32 | .weui-mask-loading { 33 | color: #606060; 34 | } 35 | } 36 | 37 | .weui-loading { 38 | font-size: 20px; 39 | margin: -0.2em 4px 0 0; 40 | } 41 | .weui-primary-loading { 42 | font-size: 20px; 43 | margin: -0.2em 4px 0 0; 44 | vertical-align: middle; 45 | color: currentColor; 46 | &::before { 47 | content: ""; 48 | } 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-btn_overlay.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | 20 | .weui-btn_overlay { 21 | &.weui-btn_primary { 22 | color: @LIGHT_FG_0; 23 | background-color: #fff; 24 | &:not(.weui-btn_disabled):visited { 25 | color: @LIGHT_FG_0; 26 | } 27 | } 28 | 29 | &.weui-btn_default { 30 | color: #fff; 31 | background-color: rgba(247, 247, 247, 0.3); 32 | &:not(.weui-btn_disabled):visited { 33 | color: #fff; 34 | } 35 | } 36 | 37 | &.weui-btn_warn { 38 | color: #fff; 39 | background-color: var(--weui-RED-100); 40 | &:not(.weui-btn_disabled):visited { 41 | color: #fff; 42 | } 43 | } 44 | 45 | &.weui-btn_disabled, 46 | &[disabled] { 47 | color: rgba(247, 247, 247, 0.3); 48 | background-color: rgba(255, 255, 255, 0.3); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-btn_primary.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-btn_primary { 20 | background-color: var(--weui-BRAND); 21 | &:not(.weui-btn_disabled):visited { 22 | color: #fff; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-btn_warn.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-btn_warn { 20 | background-color: var(--weui-RED-100); 21 | &:not(.weui-btn_disabled):visited { 22 | color: #fff; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/style/widget/weui-button/weui-button.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | @import "weui-btn_global"; 19 | @import "weui-btn_default"; 20 | @import "weui-btn_primary"; 21 | @import "weui-btn_warn"; 22 | @import "weui-btn_overlay"; 23 | @import "weui-btn_disabled"; 24 | @import "weui-btn_loading"; 25 | @import "weui-btn_cell"; 26 | @import "weui-btn_bottom-fixed"; 27 | 28 | button, 29 | input { 30 | &.weui-btn { 31 | border-width: 0; 32 | outline: 0; 33 | -webkit-appearance: none; 34 | &:focus { 35 | outline: 0; 36 | } 37 | } 38 | &.weui-btn_inline, 39 | &.weui-btn_mini { 40 | width: auto; 41 | min-width: 0; 42 | } 43 | } 44 | 45 | .weui-btn_medium { 46 | font-size: 14px; 47 | padding: 10px 24px; 48 | line-height: ~"calc((var(--weui-BTN-HEIGHT-MEDIUM) - 20) / 14)"; 49 | } 50 | 51 | .weui-btn_mini { 52 | display: inline-block; 53 | min-width: 0; 54 | line-height: ~"calc((32 - 12) / 14)"; 55 | padding: 6px 12px; 56 | font-size: 14px; 57 | border-radius: 6px; 58 | } 59 | 60 | .weui-btn_xmini { 61 | display: inline-block; 62 | min-width: 0; 63 | padding: 4px 12px; 64 | line-height: ~"calc((28 - 8) / 14)"; 65 | font-size: 14px; 66 | font-weight: 500; 67 | border-radius: 4px; 68 | } 69 | 70 | 71 | 72 | /* gap between btn */ 73 | .weui-btn { 74 | & + .weui-btn { 75 | margin-top: @weuiBtnDefaultGap; 76 | } 77 | &.weui-btn_mini + .weui-btn.weui-btn_mini { 78 | margin-top: auto; 79 | } 80 | &.weui-btn_xmini + .weui-btn.weui-btn_xmini { 81 | margin-top: auto; 82 | } 83 | } 84 | 85 | .weui-btn.weui-btn_inline + .weui-btn.weui-btn_inline { 86 | margin-left: @weuiBtnDefaultGap; 87 | } 88 | 89 | .weui-btn-area { 90 | margin: 48px @weuiBtnDefaultGap 8px; 91 | } 92 | .weui-btn-area_inline { 93 | display: flex; 94 | .weui-btn { 95 | margin-top: auto; 96 | margin-right: @weuiBtnDefaultGap; 97 | width: 100%; 98 | flex: 1; 99 | &:last-child { 100 | margin-right: 0; 101 | } 102 | } 103 | } 104 | 105 | .weui-btn_reset { 106 | background: transparent; 107 | border: 0; 108 | padding: 0; 109 | outline: 0; 110 | font-size: inherit; 111 | } 112 | .weui-btn_icon { 113 | background: transparent; 114 | border: 0; 115 | padding: 0; 116 | outline: 0; 117 | font-size: 0; 118 | &:active { 119 | [class*="weui-icon-"] { 120 | color: var(--weui-FG-1); 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-access.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-cell_access { 20 | .setTapColor(); 21 | 22 | &:active { 23 | &::after { 24 | content: ""; 25 | position: absolute; 26 | left: 0; 27 | right: 0; 28 | top: 0; 29 | bottom: 0; 30 | background: var(--weui-FG-3); 31 | pointer-events: none; 32 | } 33 | } 34 | .weui-cell__ft { 35 | padding-right: 24px; 36 | position: relative; 37 | &::after { 38 | content: " "; 39 | width: 12px; 40 | height: 24px; 41 | mask-position: 0 0; 42 | mask-repeat: no-repeat; 43 | mask-size: 100%; 44 | background-color: currentColor; 45 | color: @weuiTextColorTips; 46 | mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); 47 | position: absolute; 48 | top: 50%; 49 | right: 0; 50 | margin-top: -12px; 51 | } 52 | } 53 | } 54 | .weui-cell_link { 55 | color: @weuiLinkColorDefault; 56 | 57 | // 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来 58 | &:first-child { 59 | &::before { 60 | display: block; 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-cell_global.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | /* 20 | z-index: 21 | 0: .weui-swiped-btn 22 | 1: .weui-cell_swiped .weui-cell__bd 23 | 2: .weui-cells和.weui-cell的1px线 24 | */ 25 | 26 | .weui-cells { 27 | margin-top: @weuiCellsMarginTop; 28 | background-color: @weuiCellBg; 29 | overflow: hidden; //因为每个cell的border使用before元素left搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效 30 | 31 | // onepx 32 | position: relative; 33 | &::before { 34 | .setTopLine(@weuiCellBorderColor); 35 | 36 | z-index: 2; 37 | } 38 | &::after { 39 | .setBottomLine(@weuiCellBorderColor); 40 | 41 | z-index: 2; 42 | } 43 | } 44 | 45 | .weui-cells__title { 46 | margin-top: 16px; 47 | margin-bottom: 3px; 48 | padding-left: @weuiCellGapH; 49 | padding-right: @weuiCellGapH; 50 | color: @weuiTextColorDesc; 51 | font-size: @weuiCellTipsFontSize; 52 | line-height: 1.4; 53 | 54 | & + .weui-cells { 55 | margin-top: 0; 56 | } 57 | } 58 | 59 | .weui-cells__tips { 60 | margin-top: 8px; 61 | color: @weuiTextColorDesc; 62 | padding-left: @weuiCellGapH; 63 | padding-right: @weuiCellGapH; 64 | font-size: @weuiCellTipsFontSize; 65 | line-height: 1.4; 66 | a, 67 | navigator { 68 | color: @weuiLinkColorDefault; 69 | } 70 | navigator { 71 | display: inline; 72 | } 73 | } 74 | 75 | .weui-cell { 76 | padding: @weuiCellGapV; 77 | position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的 78 | display: flex; 79 | align-items: center; 80 | line-height: @weuiCellLineHeight; 81 | font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致 82 | color: @weuiTextColorTitle; 83 | &::before { 84 | .setTopLine(@weuiCellBorderColor); 85 | 86 | left: @weuiCellGapH; 87 | z-index: 2; 88 | } 89 | &:first-child { 90 | &::before { 91 | display: none; 92 | } 93 | } 94 | } 95 | .weui-cell_active { 96 | &:active { 97 | &::after { 98 | content: ""; 99 | position: absolute; 100 | left: 0; 101 | right: 0; 102 | top: 0; 103 | bottom: 0; 104 | background: var(--weui-FG-3); 105 | pointer-events: none; 106 | } 107 | } 108 | } 109 | .weui-cell_primary { 110 | align-items: flex-start; 111 | } 112 | .weui-cell__bd { 113 | flex: 1; 114 | min-width: 0; 115 | } 116 | .weui-cell__ft { 117 | text-align: right; 118 | color: @weuiTextColorDesc; 119 | button { 120 | vertical-align: bottom; 121 | } 122 | } 123 | .weui-cell__desc { 124 | font-size: 12px; 125 | color: var(--weui-FG-2); 126 | line-height: 1.4; 127 | padding-top: 4px; 128 | } 129 | 130 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-cell_swiped.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-cell_swiped { 20 | display: block; 21 | padding: 0; 22 | > .weui-cell__bd { 23 | position: relative; 24 | z-index: 1; 25 | background-color: @weuiCellBg; 26 | } 27 | > .weui-cell__ft { 28 | position: absolute; 29 | right: 0; 30 | top: 0; 31 | bottom: 0; 32 | display: flex; 33 | color: #fff; // 固定色值 34 | } 35 | } 36 | .weui-swiped-btn { 37 | display: flex; 38 | align-items: center; 39 | padding: @weuiCellGapV 1em; 40 | line-height: @weuiCellLineHeight; 41 | color: inherit; 42 | } 43 | .weui-swiped-btn_default { 44 | background-color: @weuiBgColorDefault; 45 | } 46 | .weui-swiped-btn_warn { 47 | background-color: @weuiColorWarn; 48 | } 49 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-check.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | @import "./weui-check/weui-check_common"; 19 | @import "./weui-check/weui-radio"; 20 | @import "./weui-check/weui-checkbox"; 21 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-check/weui-check_common.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../../base/fn"; 18 | 19 | .weui-check__label { 20 | .setTapColor(); 21 | &.weui-cell_readonly, 22 | &.weui-cell_disabled { 23 | color: var(--weui-FG-2); 24 | } 25 | } 26 | 27 | .weui-check { 28 | opacity: 0; 29 | position: absolute; 30 | width: 0; 31 | height: 0; 32 | overflow: hidden; 33 | &[disabled] + .weui-icon-checked { 34 | opacity: 0.3; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-check/weui-checkbox.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../../base/fn"; 18 | 19 | .weui-cells_checkbox { 20 | .weui-check__label { 21 | &::before { left: 55px; } 22 | } 23 | .weui-cell__hd { 24 | padding-right: @weuiCellInnerGapH; 25 | font-size: 0; 26 | } 27 | .weui-icon-checked { 28 | mask: none; 29 | background: transparent url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.1' y='0.6' width='22.8' height='22.8' rx='11.4' stroke='black' stroke-opacity='0.3' style='stroke:black;stroke-opacity:0.3;' stroke-width='1.2'/%3E%3C/svg%3E%0A") 50% 50% no-repeat; 30 | background-size: 100% 2.4em; 31 | .dark({ 32 | background-image:url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.1' y='0.6' width='22.8' height='22.8' rx='11.4' stroke='white' stroke-opacity='0.3' style='stroke:white;stroke-opacity:0.3;' stroke-width='1.2'/%3E%3C/svg%3E%0A"); 33 | }); 34 | } 35 | } 36 | 37 | // method2 accessbility 38 | .weui-check { 39 | // checkbox 40 | .weui-cells_checkbox & { 41 | &:checked, 42 | &[aria-checked="true"] { 43 | & + .weui-icon-checked { 44 | background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='24' height='24' rx='12' fill='%2307C160' style='fill:%2307C160;fill:color(display-p3 0.0275 0.7569 0.3765);fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2712 16.2899L6.5 12.5187L7.44281 11.5759L10.7426 14.8757L18.2851 7.33325L19.2279 8.27606L11.214 16.2899C10.9537 16.5503 10.5316 16.5503 10.2712 16.2899Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A"); 45 | .dark({ 46 | background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='24' height='24' rx='12' fill='%2307C160' style='fill:%2307C160;fill:color(display-p3 0.0275 0.7569 0.3765);fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2712 16.2899L6.5 12.5187L7.44281 11.5759L10.7426 14.8757L18.2851 7.33325L19.2279 8.27606L11.214 16.2899C10.9537 16.5503 10.5316 16.5503 10.2712 16.2899Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A"); 47 | }); 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-check/weui-radio.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../../base/fn"; 18 | 19 | // method2 accessbility 20 | .weui-cells_radio { 21 | .weui-cell__ft { 22 | padding-left: @weuiCellInnerGapH; 23 | font-size: 0; 24 | } 25 | } 26 | .weui-check { 27 | // radio 28 | .weui-cells_radio & { 29 | & + .weui-icon-checked { 30 | min-width: 16px; 31 | color: transparent; 32 | } 33 | &:checked, 34 | &[aria-checked="true"] { 35 | & + .weui-icon-checked { 36 | color: @weuiColorPrimary; 37 | mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | @import "./weui-form/weui-form_common"; 19 | @import "./weui-form/weui-form-preview"; 20 | @import "./weui-form/weui-select"; 21 | @import "./weui-form/weui-vcode"; 22 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-form-preview.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../../base/fn"; 18 | 19 | .weui-form-preview { 20 | position: relative; 21 | background-color: var(--weui-BG-2); 22 | &::before { 23 | .setTopLine(@weuiCellBorderColor); 24 | } 25 | &::after { 26 | .setBottomLine(@weuiCellBorderColor); 27 | } 28 | } 29 | .weui-form-preview__hd { 30 | position: relative; 31 | padding: @weuiCellGapV; 32 | text-align: right; 33 | line-height: 2.5em; 34 | &::after { 35 | .setBottomLine(@weuiCellBorderColor); 36 | 37 | left: @weuiCellGapH; 38 | } 39 | .weui-form-preview__value { 40 | font-style: normal; 41 | font-size: 1.6em; 42 | } 43 | } 44 | .weui-form-preview__bd { 45 | padding: @weuiCellGapV; 46 | font-size: 0.9em; 47 | text-align: right; 48 | color: @weuiTextColorDesc; 49 | line-height: 2; 50 | } 51 | .weui-form-preview__ft { 52 | position: relative; 53 | line-height: 50px; 54 | display: flex; 55 | &::before { 56 | .setTopLine(@weuiDialogLineColor); 57 | } 58 | } 59 | .weui-form-preview__item { 60 | overflow: hidden; 61 | } 62 | .weui-form-preview__label { 63 | float: left; 64 | margin-right: 1em; 65 | width: 4.2em; 66 | color: @weuiTextColorDesc; 67 | text-align: left; 68 | } 69 | .weui-form-preview__value { 70 | display: block; 71 | overflow: hidden; 72 | word-break: normal; 73 | word-wrap: break-word; 74 | color: var(--weui-FG-0); 75 | } 76 | .weui-form-preview__btn { 77 | position: relative; 78 | display: block; 79 | flex: 1; 80 | color: @weuiDialogLinkColor; 81 | text-align: center; 82 | .setTapColor(); 83 | button& { 84 | background-color: transparent; 85 | border: 0; 86 | outline: 0; 87 | line-height: inherit; 88 | font-size: inherit; 89 | } 90 | &:active { 91 | background-color: @weuiDialogLinkActiveBc; 92 | } 93 | &::after { 94 | .setLeftLine(@weuiDialogLineColor); 95 | } 96 | &:first-child { 97 | &::after { 98 | display: none; 99 | } 100 | } 101 | } 102 | .weui-form-preview__btn_default { 103 | color: var(--weui-FG-HALF); 104 | } 105 | .weui-form-preview__btn_primary { 106 | color: @weuiLinkColorDefault; 107 | } 108 | 109 | // 列表块，一般放msg组件的自定义区域 110 | .weui-form-preview__list { 111 | padding-top: 24px; 112 | padding-bottom: 24px; 113 | line-height: 1.4; 114 | font-size: 14px; 115 | position: relative; 116 | &::before { 117 | content: ""; 118 | .setTopLine(var(--weui-FG-3)); 119 | } 120 | &:last-child { 121 | padding-bottom: 0; 122 | } 123 | .weui-form-preview__label { 124 | text-align: left; 125 | width: 6em; 126 | } 127 | .weui-form-preview__value { hyphens: auto; } 128 | .weui-form-preview__item { 129 | margin-top: 12px; 130 | &:first-child { margin-top: 0; } 131 | } 132 | & > .weui-cells__title { 133 | &:first-child { 134 | margin-top: 0; 135 | } 136 | } 137 | } 138 | 139 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-form_common.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../../base/fn"; 18 | 19 | .weui-label { 20 | display: block; 21 | width: @weuiCellLabelWidth; 22 | .hyphens(); 23 | } 24 | .weui-input { 25 | width: 100%; 26 | border: 0; 27 | outline: 0; 28 | -webkit-appearance: none; 29 | background-color: transparent; 30 | font-family: inherit; 31 | font-size: inherit; 32 | color: inherit; 33 | height: unit(@weuiCellLineHeight, em); 34 | line-height: @weuiCellLineHeight; 35 | 36 | // hides the spin-button 37 | &::-webkit-outer-spin-button, 38 | &::-webkit-inner-spin-button { 39 | -webkit-appearance: none; 40 | margin: 0; 41 | } 42 | &:focus { 43 | &:not(:placeholder-shown) { 44 | & + .weui-btn_input-clear { 45 | display: inline; 46 | } 47 | } 48 | } 49 | } 50 | 51 | .weui-textarea { 52 | display: block; 53 | border: 0; 54 | resize: none; 55 | background: transparent; 56 | width: 100%; 57 | color: inherit; 58 | font-size: 1em; 59 | font-family: inherit; 60 | line-height: inherit; 61 | height: 80px; 62 | outline: 0; 63 | } 64 | 65 | .weui-textarea-counter { 66 | color: @weuiTextColorTips; 67 | text-align: right; 68 | font-size: 14px; 69 | .weui-cell_warn & { 70 | color: @weuiTextColorWarn; 71 | } 72 | } 73 | 74 | .weui-cell_warn { 75 | color: @weuiTextColorWarn; 76 | .weui-icon-warn { display: inline-block; } 77 | } 78 | .weui-cell_readonly, 79 | .weui-cell_disabled { 80 | .weui-input, 81 | .weui-textarea { 82 | &:disabled { 83 | opacity: 1; 84 | -webkit-text-fill-color: @weuiTextColorDesc; 85 | } 86 | &[disabled], 87 | &[readonly] { 88 | color: @weuiTextColorDesc; 89 | } 90 | } 91 | } 92 | .weui-btn_input-clear { 93 | display: none; 94 | padding-left: 8px; 95 | [class*="weui-icon-"] { 96 | width: 18px; 97 | } 98 | } 99 | 100 | 101 | // todo: 以下为兼容最开始版本的表单，新表单、反色表单均不需要 102 | .weui-cells_form { 103 | .weui-cell_switch, 104 | .weui-cell_vcode, 105 | .weui-cell_readonly, 106 | .weui-cell_disabled { 107 | &:active { 108 | background-color: transparent; 109 | } 110 | } 111 | .weui-cell__ft { 112 | font-size: 0; 113 | } 114 | .weui-icon-warn { 115 | display: none; 116 | } 117 | input, 118 | textarea, 119 | label[for] { 120 | .setTapColor(); 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-select.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../../base/fn"; 18 | 19 | .weui-cell_select { 20 | padding: 0; 21 | 22 | .weui-cell__bd { 23 | &::after { 24 | content: " "; 25 | width: 12px; 26 | height: 24px; 27 | mask-position: 0 0; 28 | mask-repeat: no-repeat; 29 | mask-size: 100%; 30 | background-color: currentColor; 31 | color: @weuiTextColorTips; 32 | mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); 33 | position: absolute; 34 | top: 50%; 35 | right: @weuiCellGapH; 36 | margin-top: -12px; 37 | } 38 | } 39 | } 40 | 41 | .weui-select { 42 | -webkit-appearance: none; 43 | border: 0; 44 | outline: 0; 45 | background-color: transparent; 46 | width: 100%; 47 | font-size: inherit; 48 | min-height: @weuiCellHeight; 49 | line-height: @weuiCellHeight; 50 | position: relative; 51 | z-index: 1; 52 | padding-left: @weuiCellGapH; 53 | padding-right: @weuiCellGapH + 24px; 54 | color: var(--weui-FG-0); 55 | vertical-align: bottom; 56 | box-sizing: border-box; 57 | 58 | div& { 59 | .ellipsis; 60 | } 61 | } 62 | 63 | .weui-cell_select-before { 64 | .weui-cell__hd { 65 | padding-left: 0; 66 | position: relative; 67 | &::after { 68 | .setRightLine(@weuiCellBorderColor); 69 | } 70 | &::before { 71 | content: " "; 72 | width: 12px; 73 | height: 24px; 74 | mask-position: 0 0; 75 | mask-repeat: no-repeat; 76 | mask-size: 100%; 77 | background-color: currentColor; 78 | color: @weuiTextColorTips; 79 | mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); 80 | position: absolute; 81 | top: 50%; 82 | right: @weuiCellGapH; 83 | margin-top: -12px; 84 | } 85 | } 86 | .weui-cell__bd { 87 | padding-left: @weuiCellGapH; 88 | &::after { 89 | display: none; 90 | } 91 | } 92 | .weui-select { 93 | max-width: 5em; 94 | width: @weuiCellLabelWidth; 95 | box-sizing: content-box; 96 | } 97 | } 98 | 99 | .weui-cell_select-after { 100 | .weui-cell__hd { 101 | padding-left: @weuiCellGapH; 102 | } 103 | .weui-select { 104 | padding-left: 0; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-form/weui-vcode.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../../base/fn"; 18 | 19 | .weui-cell_vcode { 20 | padding-top: 0; 21 | padding-right: 0; 22 | padding-bottom: 0; 23 | } 24 | .weui-vcode-img { 25 | margin-left: 5px; 26 | height: @weuiCellHeight; 27 | vertical-align: middle; 28 | } 29 | 30 | .weui-vcode-btn { 31 | display: inline-block; 32 | height: @weuiCellHeight; 33 | margin-left: 5px; 34 | padding: 0 0.6em 0 0.7em; 35 | line-height: @weuiCellHeight; 36 | vertical-align: middle; 37 | font-size: @weuiCellFontSize; 38 | color: @weuiDialogLinkColor; 39 | position: relative; 40 | &::after { 41 | .setLeftLine(@weuiLineColorLight); 42 | } 43 | button& { 44 | background-color: transparent; 45 | border: 0; 46 | outline: 0; 47 | } 48 | &:active { 49 | color: var(--weui-LINK-ACTIVE); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-gallery.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | @weuiGalleryOprHeight: 60px; 20 | .weui-gallery { 21 | display: none; 22 | position: fixed; 23 | top: 0; 24 | right: 0; 25 | bottom: 0; 26 | left: 0; 27 | background-color: #000; // 固定色值 28 | z-index: 1000; 29 | } 30 | .weui-gallery__img, 31 | .weui-gallery__opr { 32 | position: absolute; 33 | left: 0; 34 | left: constant(safe-area-inset-left); 35 | left: env(safe-area-inset-left); 36 | right: 0; 37 | right: constant(safe-area-inset-right); 38 | right: env(safe-area-inset-right); 39 | } 40 | .weui-gallery__img { 41 | top: 0; 42 | top: constant(safe-area-inset-top); 43 | top: env(safe-area-inset-top); 44 | bottom: @weuiGalleryOprHeight; 45 | bottom: calc(@weuiGalleryOprHeight ~"+ constant(safe-area-inset-bottom)"); 46 | bottom: calc(@weuiGalleryOprHeight ~"+ env(safe-area-inset-bottom)"); 47 | width: 100%; 48 | background: center center no-repeat; 49 | background-size: contain; 50 | } 51 | .weui-gallery__opr { 52 | position: absolute; 53 | bottom: 0; 54 | background-color: #0d0d0d; // 固定色值 55 | color: var(--weui-WHITE); 56 | line-height: @weuiGalleryOprHeight; 57 | text-align: center; 58 | } 59 | .weui-gallery__del { 60 | display: block; 61 | padding-bottom: 0; 62 | padding-bottom: constant(safe-area-inset-bottom); 63 | padding-bottom: env(safe-area-inset-bottom); 64 | &:active { 65 | opacity: 0.5; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-switch.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-cell_switch { 20 | padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2; 21 | padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2; 22 | &.weui-cell_readonly, 23 | &.weui-cell_disabled { 24 | color: var(--weui-FG-3); 25 | } 26 | } 27 | .weui-switch { 28 | appearance: none; 29 | } 30 | .weui-switch, 31 | .weui-switch-cp__box { 32 | vertical-align: bottom; 33 | position: relative; 34 | width: 52px; 35 | height: @weuiSwitchHeight; 36 | background-color: var(--weui-FG-3); 37 | border: 0; 38 | padding: 2px; 39 | outline: 0; 40 | border-radius: 16px; 41 | box-sizing: border-box; 42 | transition: background-color 0.1s, border 0.1s; 43 | 44 | &::after { 45 | content: " "; 46 | position: absolute; 47 | top: 2px; 48 | left: 2px; 49 | width: @weuiSwitchHeight - 4; 50 | height: @weuiSwitchHeight - 4; 51 | border-radius: 15px; 52 | background-color: #fff; // 固定色值 53 | box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.06); 54 | transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35); 55 | } 56 | } 57 | .weui-switch:checked, 58 | .weui-switch-cp__input:checked + .weui-switch-cp__box, 59 | .weui-switch-cp__input[aria-checked="true"] + .weui-switch-cp__box { 60 | background-color: @weuiColorPrimary; 61 | &::after { 62 | transform: translateX(20px); 63 | } 64 | } 65 | .weui-switch[disabled], 66 | .weui-switch-cp__input[disabled] + .weui-switch-cp__box, 67 | .weui-switch-cp__input[aria-disabled="true"] + .weui-switch-cp__box { 68 | opacity: 0.1; 69 | } 70 | 71 | 72 | // 兼容小程序/IE Edge的版本 73 | .weui-switch-cp__input { 74 | position: absolute; 75 | width: 0; 76 | height: 0; 77 | opacity: 0; 78 | overflow: hidden; 79 | } 80 | .weui-switch-cp__box { 81 | display: block; 82 | } 83 | -------------------------------------------------------------------------------- /src/style/widget/weui-cell/weui-uploader.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-cell_uploader { 20 | padding-bottom: 24px; 21 | } 22 | .weui-uploader { 23 | flex: 1; 24 | } 25 | .weui-uploader__hd { 26 | display: flex; 27 | padding-bottom: 12px; 28 | align-items: center; 29 | } 30 | .weui-uploader__title { 31 | flex: 1; 32 | } 33 | .weui-uploader__info { 34 | color: @weuiTextColorTips; 35 | } 36 | 37 | .weui-uploader__bd { 38 | margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing); 39 | margin-right: -@weuiUploaderFileSpacing; 40 | overflow: hidden; 41 | } 42 | .weui-uploader__files { 43 | list-style: none; 44 | } 45 | .weui-uploader__file { 46 | float: left; 47 | margin-right: @weuiUploaderFileSpacing; 48 | margin-bottom: @weuiUploaderFileSpacing; 49 | width: @weuiUploaderSize; 50 | height: @weuiUploaderSize; 51 | background: no-repeat center center; 52 | background-size: cover; 53 | } 54 | .weui-uploader__file_status { 55 | position: relative; 56 | &::before { 57 | content: " "; 58 | position: absolute; 59 | top: 0; 60 | right: 0; 61 | bottom: 0; 62 | left: 0; 63 | background-color: rgba(0, 0, 0, 0.5); // 固定色值 64 | } 65 | .weui-uploader__file-content { 66 | display: block; 67 | } 68 | } 69 | .weui-uploader__file-content { 70 | display: none; 71 | position: absolute; 72 | top: 50%; 73 | left: 50%; 74 | transform: translate(-50%, -50%); 75 | color: var(--weui-WHITE); 76 | .weui-icon-warn { 77 | display: inline-block; 78 | } 79 | } 80 | .weui-uploader__input-box { 81 | float: left; 82 | position: relative; 83 | margin-right: @weuiUploaderFileSpacing; 84 | margin-bottom: @weuiUploaderFileSpacing; 85 | width: @weuiUploaderSize; 86 | height: @weuiUploaderSize; 87 | box-sizing: border-box; 88 | background-color: #ededed; 89 | .dark({ 90 | background-color: #2e2e2e; 91 | }); 92 | &::before, 93 | &::after { 94 | content: " "; 95 | position: absolute; 96 | top: 50%; 97 | left: 50%; 98 | transform: translate(-50%, -50%); 99 | background-color: #a3a3a3; 100 | .dark({ 101 | background-color: #6d6d6d; 102 | }); 103 | } 104 | &::before { 105 | width: @weuiUploaderBorderWidth + 1; 106 | height: 33.33%; 107 | } 108 | &::after { 109 | width: 33.33%; 110 | height: @weuiUploaderBorderWidth + 1; 111 | } 112 | &:active { 113 | &::before, 114 | &::after { 115 | opacity: 0.7; 116 | } 117 | } 118 | } 119 | .weui-uploader__input { 120 | position: absolute; 121 | z-index: 1; 122 | top: 0; 123 | left: 0; 124 | width: 100%; 125 | height: 100%; 126 | opacity: 0; 127 | .setTapColor(); 128 | } 129 | -------------------------------------------------------------------------------- /src/style/widget/weui-flex/weui-flex.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-flex { 20 | display: flex; 21 | } 22 | .weui-flex__item { 23 | flex: 1; 24 | min-width: 0; 25 | } 26 | -------------------------------------------------------------------------------- /src/style/widget/weui-footer/weui-footer.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-footer { 20 | color: rgba(0, 0, 0, 0.2); 21 | .dark({ 22 | color:rgba(255,255,255,0.2); 23 | }); 24 | 25 | font-size: 14px; 26 | line-height: 1.4; 27 | text-align: center; 28 | a, 29 | navigator { 30 | color: @weuiLinkColorDefault; 31 | } 32 | navigator { 33 | display: inline; 34 | } 35 | } 36 | .weui-footer_fixed-bottom { 37 | position: fixed; 38 | bottom: 0; 39 | left: 0; 40 | right: 0; 41 | padding-top: 16px; 42 | padding-bottom: 16px; 43 | padding-bottom: calc(16px ~"+ constant(safe-area-inset-bottom)"); 44 | padding-bottom: calc(16px ~"+ env(safe-area-inset-bottom)"); 45 | left: constant(safe-area-inset-left); 46 | left: env(safe-area-inset-left); 47 | right: constant(safe-area-inset-right); 48 | right: env(safe-area-inset-right); 49 | } 50 | .weui-footer__links { 51 | font-size: 0; 52 | } 53 | .weui-footer__link { 54 | display: inline-block; 55 | vertical-align: top; 56 | margin: 0 8px; 57 | position: relative; 58 | font-size: 14px; 59 | &::before { 60 | .setLeftLine(); 61 | 62 | left: -8px; 63 | top: 0.36em; 64 | bottom: 0.36em; 65 | } 66 | &:first-child { 67 | &::before { 68 | display: none; 69 | } 70 | } 71 | } 72 | .weui-footer__text { 73 | padding: 0 16px; 74 | font-size: 12px; 75 | } 76 | -------------------------------------------------------------------------------- /src/style/widget/weui-grid/weui-grid.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-grids { 20 | position: relative; 21 | overflow: hidden; 22 | 23 | &::before { 24 | .setTopLine(@weuiGridBorderColor); 25 | } 26 | &::after { 27 | .setLeftLine(@weuiGridBorderColor); 28 | } 29 | } 30 | 31 | .weui-grid { 32 | position: relative; 33 | float: left; 34 | padding: 20px 10px; 35 | width: 100% / @weuiGridColumnCount; 36 | box-sizing: border-box; 37 | 38 | &::before { 39 | .setRightLine(@weuiGridBorderColor); 40 | } 41 | &::after { 42 | .setBottomLine(@weuiGridBorderColor); 43 | } 44 | 45 | &:active { 46 | background-color: @weuiBgColorActive; 47 | } 48 | } 49 | 50 | .weui-grid__icon { 51 | width: @weuiGridIconSize; 52 | height: @weuiGridIconSize; 53 | margin: 0 auto; 54 | 55 | img { 56 | display: block; 57 | width: 100%; 58 | height: 100%; 59 | } 60 | 61 | & + .weui-grid__label { 62 | margin-top: 4px; 63 | } 64 | } 65 | 66 | .weui-grid__label { 67 | display: block; 68 | text-align: center; 69 | color: @weuiTextColorTitle; 70 | font-size: @weuiGridFontSize; 71 | white-space: nowrap; 72 | text-overflow: ellipsis; 73 | overflow: hidden; 74 | } 75 | -------------------------------------------------------------------------------- /src/style/widget/weui-loading/weui-primary-loading.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | 20 | // css画的圆圈loading 21 | 22 | // 默认色 23 | .weui-primary-loading { 24 | font-size: 16px; 25 | .setCircleLoading(#606060,1em,0.0875em); 26 | } 27 | 28 | // 跟随系统切换的品牌色 29 | .weui-primary-loading_brand { 30 | color: var(--weui-BRAND); 31 | } 32 | 33 | // 固定白色半透明 34 | .weui-primary-loading_transparent { 35 | color: #ededed; 36 | } 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/style/widget/weui-media-box/weui-media-box.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-media-box { 20 | padding: 16px; 21 | position: relative; 22 | &::before { 23 | .setTopLine(@weuiLineColorLight); 24 | 25 | left: 16px; 26 | } 27 | &:first-child { 28 | &::before { 29 | display: none; 30 | } 31 | } 32 | 33 | a& { 34 | color: #000; 35 | .setTapColor(); 36 | &:active { 37 | background-color: @weuiBgColorActive; 38 | } 39 | } 40 | } 41 | .weui-media-box__title { 42 | display: block; 43 | font-weight: 400; 44 | font-size: 17px; 45 | line-height: 1.4; 46 | color: @weuiTextColorTitle; 47 | .ellipsis(); 48 | .hyphens; 49 | } 50 | .weui-media-box__desc { 51 | color: @weuiTextColorTips; 52 | font-size: 14px; 53 | line-height: 1.4; 54 | padding-top: 4px; 55 | .ellipsisLn(2); 56 | .hyphens; 57 | } 58 | .weui-media-box__info { 59 | display: block; 60 | margin-top: 16px; 61 | padding-bottom: 4px; 62 | font-size: 13px; 63 | color: @weuiTextColorTips; 64 | line-height: 1em; 65 | list-style: none; 66 | overflow: hidden; 67 | } 68 | .weui-media-box__info__meta { 69 | float: left; 70 | padding-right: 1em; 71 | } 72 | .weui-media-box__info__meta_extra { 73 | padding-left: 1em; 74 | border-left: 1px solid @weuiTextColorTips; 75 | } 76 | .weui-media-box_appmsg { 77 | display: flex; 78 | align-items: center; 79 | .weui-media-box__hd { 80 | margin-right: 16px; 81 | width: 60px; 82 | height: 60px; 83 | line-height: 60px; 84 | text-align: center; 85 | } 86 | .weui-media-box__thumb { 87 | width: 100%; 88 | max-height: 100%; 89 | vertical-align: top; 90 | } 91 | .weui-media-box__bd { 92 | flex: 1; 93 | min-width: 0; 94 | } 95 | } 96 | .weui-media-box_small-appmsg { 97 | padding: 0; 98 | .weui-cells { 99 | margin-top: 0; 100 | &::before { 101 | display: none; 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/style/widget/weui-page/weui-article.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-article { 20 | padding: 48px 24px; 21 | padding: 48px calc(24px ~"+ constant(safe-area-inset-right)") calc(48px ~"+ constant(safe-area-inset-bottom)") calc(24px ~"+ constant(safe-area-inset-left)"); 22 | padding: 48px calc(24px ~"+ env(safe-area-inset-right)") calc(48px ~"+ env(safe-area-inset-bottom)") calc(24px ~"+ env(safe-area-inset-left)"); 23 | color: var(--weui-FG-0); 24 | font-size: 17px; 25 | line-height: 1.6; 26 | .hyphens; 27 | section { 28 | margin-bottom: 48px; 29 | section { 30 | margin-bottom: 32px; 31 | section { 32 | margin-bottom: 24px; 33 | } 34 | } 35 | } 36 | h1, 37 | h2, 38 | h3, 39 | h4, 40 | h5, 41 | h6 { line-height: 1.4; } 42 | h1 { 43 | font-size: 22px; 44 | font-weight: 500; 45 | margin-bottom: 48px; 46 | text-align: center; 47 | } 48 | h2 { 49 | font-size: 20px; 50 | font-weight: 500; 51 | margin-bottom: 16px; 52 | } 53 | h3 { 54 | font-size: 17px; 55 | font-weight: 500; 56 | margin-bottom: 8px; 57 | } 58 | h4 { 59 | font-size: 17px; 60 | font-weight: 400; 61 | margin-bottom: 4px; 62 | } 63 | h5, 64 | h6 { 65 | font-weight: 400; 66 | font-size: 17px; 67 | } 68 | * { 69 | max-width: 100%; 70 | box-sizing: border-box; 71 | word-wrap: break-word; 72 | } 73 | img { 74 | vertical-align: bottom; 75 | } 76 | p { 77 | margin: 0 0 24px; 78 | } 79 | ol, 80 | ul { 81 | margin-left: 1.2em; 82 | margin-bottom: 24px; 83 | & ol, 84 | & ul { 85 | margin: 0.5em 0 0.5em 1.2em; 86 | } 87 | } 88 | ol { 89 | list-style: decimal; 90 | } 91 | ul { 92 | list-style: disc; 93 | } 94 | li { 95 | margin: 0.5em 0; 96 | } 97 | .weui-article__list_inside { 98 | margin-left: 0; 99 | li { 100 | list-style-position: inside; 101 | } 102 | } 103 | .weui-article__list_none { 104 | margin-left: 0; 105 | li { 106 | list-style: none; 107 | } 108 | } 109 | } 110 | 111 | 112 | -------------------------------------------------------------------------------- /src/style/widget/weui-page/weui-form.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | @import "../weui-cell/weui-cells__group"; 19 | 20 | .weui-form { 21 | padding: 56px 0 0; 22 | padding: calc(56px ~"+ constant(safe-area-inset-top)") constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); 23 | padding: calc(56px ~"+ env(safe-area-inset-top)") env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); 24 | display: flex; 25 | flex-direction: column; 26 | line-height: 1.4; 27 | min-height: 100%; 28 | box-sizing: border-box; 29 | background-color: var(--weui-BG-2); 30 | 31 | .weui-footer, 32 | .weui-footer__link { 33 | font-size: 14px; 34 | } 35 | } 36 | .weui-form__bd { 37 | flex: 1; 38 | display: flex; 39 | flex-direction: column; 40 | } 41 | 42 | .weui-form__text-area { 43 | padding: 0 32px; 44 | color: var(--weui-FG-0); 45 | text-align: center; 46 | } 47 | .weui-form__control-area { 48 | flex: 1; 49 | margin: 48px 0; 50 | } 51 | .weui-form__tips-area, 52 | .weui-form__extra-area { 53 | margin-bottom: 24px; 54 | padding: 0 32px; 55 | text-align: center; 56 | } 57 | .weui-form__extra-area { 58 | margin-top: 52px; 59 | } 60 | .weui-form__opr-area { 61 | padding: 0 32px; 62 | &:last-child { 63 | margin-bottom: 96px; 64 | } 65 | & + .weui-form__tips-area { 66 | margin-top: 16px; 67 | margin-bottom: 0; 68 | } 69 | } 70 | .weui-form__tips-area { 71 | & + .weui-form__extra-area { 72 | margin-top: 32px; 73 | } 74 | &:last-child { 75 | margin-bottom: 60px; 76 | } 77 | } 78 | .weui-form__title { 79 | font-size: 22px; 80 | font-weight: 500; 81 | line-height: 1.36; 82 | } 83 | .weui-form__desc { 84 | font-size: 17px; 85 | margin-top: 16px; 86 | } 87 | .weui-form__tips__group { 88 | display: flex; 89 | flex-direction: column; 90 | } 91 | .weui-form__tips__group_primary { 92 | display: inline-flex; 93 | max-width: 100%; 94 | } 95 | .weui-form__tips__wrp { 96 | display: inline-flex; 97 | text-align: left; 98 | margin: 8px 0; 99 | 100 | &:first-child { 101 | margin-top: 0; 102 | } 103 | &:last-child { 104 | margin-bottom: 0; 105 | } 106 | } 107 | .weui-form__tips { 108 | color: @weuiTextColorDesc; 109 | font-size: 14px; 110 | a, 111 | navigator { 112 | color: @weuiLinkColorDefault; 113 | } 114 | navigator { 115 | display: inline; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/style/widget/weui-page/weui-msg.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | @import "../weui-button/weui-button"; 19 | 20 | a { 21 | .weui-msg__desc &, 22 | .weui-msg__desc-primary &, 23 | .weui-msg__tips & { 24 | color: @weuiLinkColorDefault; 25 | display: inline-block; 26 | vertical-align: baseline; 27 | } 28 | } 29 | .weui-msg { 30 | padding-top: @weuiMsgPaddingTop; 31 | padding: calc(@weuiMsgPaddingTop ~"+ constant(safe-area-inset-top)") constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); 32 | padding: calc(@weuiMsgPaddingTop ~"+ env(safe-area-inset-top)") env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); 33 | text-align: center; 34 | line-height: 1.4; 35 | min-height: 100%; 36 | box-sizing: border-box; 37 | display: flex; 38 | flex-direction: column; 39 | background-color: var(--weui-BG-2); 40 | } 41 | .weui-msg__icon-area { 42 | margin-bottom: 32px; 43 | } 44 | .weui-msg__text-area { 45 | margin-bottom: 32px; 46 | padding: 0 32px; 47 | flex: 1; 48 | line-height: 1.6; 49 | .hyphens; 50 | &:first-child { padding-top: 96px; } 51 | } 52 | .weui-msg__title { 53 | margin-bottom: @weuiMsgTitleGap; 54 | font-weight: 500; 55 | font-size: 22px; 56 | color: @weuiTextColorTitle; 57 | } 58 | .weui-msg__desc { 59 | font-size: 17px; 60 | font-weight: 400; 61 | color: @weuiTextColorTitle; 62 | margin-bottom: 16px; 63 | } 64 | .weui-msg__desc-primary { 65 | font-size: 14px; 66 | color: @weuiTextColorDesc; 67 | margin-bottom: 16px; 68 | } 69 | .weui-msg__custom-area { 70 | text-align: left; 71 | word-wrap: break-word; 72 | hyphens: auto; 73 | margin-bottom: 16px; 74 | .weui-msg__title + & { 75 | margin-top: 48px; 76 | } 77 | .weui-msg__desc + &, 78 | .weui-msg__desc-primary + & { 79 | margin-top: 40px; 80 | } 81 | .weui-cells__group_form { 82 | .weui-cells { 83 | margin: 0; 84 | } 85 | } 86 | } 87 | .weui-msg__opr-area { 88 | margin-bottom: 16px; 89 | .weui-btn-area { margin: 0; } 90 | .weui-btn + .weui-btn { margin-bottom: 16px; } 91 | &:last-child { margin-bottom: 96px; } 92 | & + .weui-msg__extra-area { 93 | margin-top: 48px; 94 | } 95 | } 96 | .weui-msg__tips-area { 97 | margin-bottom: 16px; 98 | padding: 0 40px; 99 | .hyphens; 100 | .weui-msg__opr-area + & { 101 | margin-bottom: 48px; 102 | } 103 | &:last-child { 104 | margin-bottom: 64px; 105 | } 106 | } 107 | .weui-msg__tips { 108 | font-size: 14px; 109 | color: @weuiTextColorDesc; 110 | } 111 | .weui-msg__extra-area { 112 | margin-bottom: 24px; 113 | padding: 0 32px; 114 | box-sizing: border-box; 115 | font-size: 12px; 116 | color: @weuiTextColorDesc; 117 | a, 118 | navigator { 119 | color: @weuiLinkColorDefault; 120 | } 121 | navigator { 122 | display: inline; 123 | } 124 | } 125 | 126 | // 部分场景需要去掉头部间距 127 | .weui-msg_align-top { 128 | .weui-msg__text-area { 129 | &:first-child { padding-top: 0; } 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/style/widget/weui-panel/weui-panel.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | 20 | .weui-panel { 21 | background-color: var(--weui-BG-2); 22 | margin-top: 10px; 23 | &:first-child { 24 | margin-top: 0; 25 | } 26 | 27 | position: relative; 28 | overflow: hidden; 29 | &::before { 30 | .setTopLine(@weuiLineColorLight); 31 | } 32 | &::after { 33 | .setBottomLine(@weuiLineColorLight); 34 | } 35 | .weui-cells { 36 | &::after { 37 | display: none; 38 | } 39 | } 40 | } 41 | 42 | .weui-panel__hd { 43 | padding: 16px 16px 13px; 44 | color: @weuiTextColorTitle; 45 | font-size: 15px; 46 | font-weight: 500; 47 | position: relative; 48 | &::after { 49 | .setBottomLine(@weuiLineColorLight); 50 | 51 | left: 15px; 52 | } 53 | } 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /src/style/widget/weui-progress/weui-progress.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-progress { 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | .weui-progress__bar { 25 | background-color: @weuiProgressBg; 26 | height: @weuiProgressHeight; 27 | flex: 1; 28 | } 29 | 30 | .weui-progress__inner-bar { 31 | width: 0; 32 | height: 100%; 33 | background-color: @weuiProgressColor; 34 | } 35 | 36 | .weui-progress__opr { 37 | display: block; 38 | margin-left: 15px; 39 | font-size: 0; 40 | } 41 | -------------------------------------------------------------------------------- /src/style/widget/weui-slider/weui-slider.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-slider { 20 | padding: 15px 18px; 21 | user-select: none; 22 | } 23 | 24 | .weui-slider__inner { 25 | position: relative; 26 | height: 2px; 27 | background-color: @weuiLineColorLight; 28 | } 29 | 30 | .weui-slider__track { 31 | height: 100%; 32 | background-color: @weuiColorPrimary; 33 | width: 0; 34 | } 35 | 36 | .weui-slider__handler { 37 | position: absolute; 38 | left: 0; 39 | top: 50%; 40 | width: 28px; 41 | height: 28px; 42 | margin-left: -14px; 43 | margin-top: -14px; 44 | border-radius: 50%; 45 | background-color: #fff; // 固定色值 46 | box-shadow: 0 0 4px var(--weui-FG-3); 47 | } 48 | 49 | 50 | .weui-slider-box { 51 | display: flex; 52 | align-items: center; 53 | .weui-slider { 54 | flex: 1; 55 | } 56 | } 57 | .weui-slider-box__value { 58 | margin-left: 0.5em; 59 | min-width: 24px; 60 | color: @weuiTextColorDesc; 61 | text-align: center; 62 | font-size: 14px; 63 | } 64 | -------------------------------------------------------------------------------- /src/style/widget/weui-tab/weui-navbar.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-navbar { 20 | display: flex; 21 | position: relative; 22 | z-index: 500; 23 | background-color: var(--weui-BG-2); 24 | padding-top: constant(safe-area-inset-top); 25 | padding-top: env(safe-area-inset-top); 26 | 27 | &::after { 28 | .setBottomLine(@weuiLineColorLight); 29 | } 30 | 31 | & + .weui-tab__panel { 32 | padding-bottom: constant(safe-area-inset-bottom); 33 | padding-bottom: env(safe-area-inset-bottom); 34 | } 35 | } 36 | 37 | .weui-navbar__item { 38 | position: relative; 39 | display: block; 40 | flex: 1; 41 | padding: 16px 0; 42 | padding-top: calc(16px ~"+ constant(safe-area-inset-top)"); 43 | padding-top: calc(16px ~"+ env(safe-area-inset-top)"); 44 | text-align: center; 45 | font-size: 17px; 46 | line-height: unit(((@weuiNavBarHeight - 32) / 17)); 47 | .setTapColor(); 48 | 49 | &:active { 50 | background-color: @weuiBgColorActive; 51 | } 52 | 53 | &.weui-bar__item_on { 54 | background-color: @weuiBgColorActive; 55 | } 56 | 57 | &::after { 58 | .setRightLine(@weuiLineColorLight); 59 | } 60 | 61 | &:first-child { 62 | padding-left: constant(safe-area-inset-left); 63 | padding-left: env(safe-area-inset-left); 64 | } 65 | &:last-child { 66 | padding-right: constant(safe-area-inset-right); 67 | padding-right: env(safe-area-inset-right); 68 | &::after { 69 | display: none; 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/style/widget/weui-tab/weui-tab.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | @import "weui-tabbar"; 19 | @import "weui-navbar"; 20 | 21 | .weui-tab { 22 | display: flex; 23 | height: 100%; 24 | box-sizing: border-box; 25 | flex-direction: column; 26 | } 27 | 28 | .weui-tab__panel { 29 | box-sizing: border-box; 30 | flex: 1; 31 | overflow: auto; 32 | -webkit-overflow-scrolling: touch; 33 | } 34 | .weui-tab__content { 35 | display: none; 36 | } 37 | -------------------------------------------------------------------------------- /src/style/widget/weui-tab/weui-tabbar.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-tabbar { 20 | display: flex; 21 | position: relative; 22 | z-index: 500; 23 | background-color: @weuiBgColorPrimary; 24 | 25 | &::before { 26 | .setTopLine(@weuiLineColorLight); 27 | } 28 | } 29 | 30 | .weui-tabbar__item { 31 | display: block; 32 | flex: 1; 33 | padding: 8px 0; 34 | padding-bottom: calc(8px ~"+ constant(safe-area-inset-bottom)"); 35 | padding-bottom: calc(8px ~"+ env(safe-area-inset-bottom)"); 36 | font-size: 0; 37 | color: @weuiTextColorDesc; 38 | text-align: center; 39 | .setTapColor(); 40 | 41 | &:first-child { 42 | padding-left: constant(safe-area-inset-left); 43 | padding-left: env(safe-area-inset-left); 44 | } 45 | &:last-child { 46 | padding-right: constant(safe-area-inset-right); 47 | padding-right: env(safe-area-inset-right); 48 | } 49 | 50 | &.weui-bar__item_on { 51 | .weui-tabbar__icon, 52 | .weui-tabbar__icon > i, 53 | .weui-tabbar__label { 54 | color: @weuiColorPrimary; 55 | } 56 | } 57 | } 58 | 59 | .weui-tabbar__icon { 60 | display: inline-block; 61 | font-size: 10px; 62 | width: unit(((@weuiTabBarHeight - 8*2 - 10*1.4 - 2)/10), em); 63 | height: unit(((@weuiTabBarHeight - 8*2 - 10*1.4 - 2)/10), em); 64 | margin-bottom: 2px; 65 | 66 | i&, 67 | > i { 68 | font-size: 24px; 69 | color: @weuiTextColorDesc; 70 | } 71 | 72 | img { 73 | width: 100%; 74 | height: 100%; 75 | } 76 | } 77 | 78 | .weui-tabbar__label { 79 | color: @weuiTextColorTitle; 80 | font-size: 10px; 81 | line-height: 1.4; 82 | } 83 | -------------------------------------------------------------------------------- /src/style/widget/weui-text/weui-link.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-link { 20 | color: @weuiLinkColorDefault; 21 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 22 | &:visited { 23 | color: @weuiLinkColorDefault; 24 | } 25 | &:active { 26 | opacity: 0.5; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-badge.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-badge { 20 | display: inline-block; 21 | padding: 0.15em 0.4em; 22 | min-width: unit((8/12), em); 23 | border-radius: 18px; 24 | background-color: @weuiColorWarn; 25 | color: #fff; // 固定色值 26 | line-height: 1.2; 27 | text-align: center; 28 | font-size: 12px; 29 | vertical-align: middle; 30 | } 31 | .weui-badge_dot { 32 | padding: 0.4em; 33 | min-width: 0; 34 | } 35 | -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-list-tips.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-list-tips { 20 | list-style: none; 21 | padding-top: 24px; 22 | padding-bottom: 24px; 23 | line-height: 1.4; 24 | font-size: 14px; 25 | color: var(--weui-FG-1); 26 | position: relative; 27 | &::before { 28 | content: ""; 29 | .setTopLine(var(--weui-FG-3)); 30 | } 31 | &:last-child { 32 | padding-bottom: 0; 33 | } 34 | } 35 | .weui-list-tips__item { 36 | position: relative; 37 | padding-left: 15px; 38 | margin: 16px 0; 39 | &::before { 40 | content: "\2022"; 41 | position: absolute; 42 | left: 0; 43 | top: -0.1em; 44 | } 45 | &:first-child { 46 | margin-top: 0; 47 | } 48 | .weui-form-preview__list + .weui-list-tips > & { 49 | &:first-child { 50 | margin-top: 6px; 51 | } 52 | } 53 | } 54 | 55 | -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-loadmore.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-loadmore { 20 | width: 65%; 21 | margin: 20px auto; 22 | text-align: center; 23 | font-size: 0; 24 | 25 | .weui-loading, 26 | .weui-primary-loading { 27 | margin-right: 8px; 28 | } 29 | } 30 | .weui-loadmore__tips { 31 | display: inline-block; 32 | vertical-align: middle; 33 | font-size: 14px; 34 | line-height: 1.6; 35 | color: var(--weui-FG-1); 36 | } 37 | 38 | .weui-loadmore_line { 39 | border-top: 1px solid @weuiLineColorLight; 40 | margin-top: 32px; 41 | .weui-loadmore__tips { 42 | position: relative; 43 | top: -0.9em; 44 | padding: 0 8px; 45 | background-color: var(--weui-BG-2); 46 | } 47 | } 48 | .weui-loadmore_dot { 49 | .weui-loadmore__tips { 50 | &::before { 51 | content: " "; 52 | width: 4px; 53 | height: 4px; 54 | border-radius: 50%; 55 | background-color: @weuiLineColorLight; 56 | display: inline-block; 57 | position: relative; 58 | vertical-align: 0; 59 | top: -0.16em; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-mask.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-mask { 20 | position: fixed; 21 | z-index: 1000; 22 | top: 0; 23 | right: 0; 24 | left: 0; 25 | bottom: 0; 26 | background: rgba(0, 0, 0, 0.5); 27 | } 28 | 29 | .weui-mask_transparent { 30 | position: fixed; 31 | z-index: 1000; 32 | top: 0; 33 | right: 0; 34 | left: 0; 35 | bottom: 0; 36 | } 37 | -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-toast.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-toast { 20 | position: fixed; 21 | z-index: 5500; 22 | min-width: 132px; 23 | max-width: 320px; 24 | padding: 28px 20px; 25 | top: 40%; 26 | left: 50%; 27 | transform: translate(-50%, -50%); 28 | text-align: center; 29 | border-radius: 8px; 30 | color: rgba(255, 255, 255, 0.9); 31 | display: flex; 32 | flex-direction: column; 33 | align-items: center; 34 | justify-content: center; 35 | background-color: var(--weui-BG-4); 36 | filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.1)); 37 | box-sizing: border-box; 38 | line-height: 1.4; 39 | } 40 | .weui-toast__wrp { 41 | z-index: 5500; 42 | position: fixed; 43 | top: 0; 44 | left: 0; 45 | right: 0; 46 | bottom: 0; 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | 51 | .weui-toast { 52 | position: static; 53 | transform: none; 54 | margin-top: -10%; 55 | } 56 | } 57 | .weui-toast_text { 58 | padding: 12px 20px; 59 | min-width: 0; 60 | min-height: 0; 61 | } 62 | .weui-icon_toast { 63 | // 重置weui-icon权重 64 | && { 65 | width: 4em; 66 | height: 4em; 67 | } 68 | 69 | display: block; 70 | margin-bottom: 16px; 71 | flex-shrink: 0; 72 | &.weui-icon-success-no-circle { 73 | color: rgba(255, 255, 255, 0.9); 74 | } 75 | &.weui-icon-warn { 76 | color: rgba(255, 255, 255, 0.9); 77 | } 78 | &.weui-loading { 79 | width: 1em; 80 | height: 1em; 81 | font-size: 40px; 82 | } 83 | &.weui-primary-loading { 84 | display: flex; 85 | width: 1em; 86 | height: 1em; 87 | font-size: 40px; 88 | color: #ededed; 89 | &::before { 90 | border-width: 4px 0 4px 4px; 91 | } 92 | &::after { 93 | border-width: 4px 4px 4px 0; 94 | } 95 | .weui-primary-loading__dot { 96 | width: 4px; 97 | height: 4px; 98 | border-top-right-radius: 4px; 99 | border-bottom-right-radius: 4px; 100 | } 101 | } 102 | } 103 | 104 | .weui-toast__content { 105 | font-size: 14px; 106 | .hyphens; 107 | 108 | max-width: 100%; 109 | } 110 | 111 | // 多行文本场景 112 | .weui-toast_text-more { 113 | } 114 | 115 | -------------------------------------------------------------------------------- /src/style/widget/weui-tips/weui-toptips.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making WeUI available. 3 | * 4 | * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the MIT License (the "License"); you may not use this file except in compliance 7 | * with the License. You may obtain a copy of the License at 8 | * 9 | * http://opensource.org/licenses/MIT 10 | * 11 | * Unless required by applicable law or agreed to in writing, software distributed under the License is 12 | * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 13 | * either express or implied. See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | @import "../../base/fn"; 18 | 19 | .weui-toptips { 20 | display: none; 21 | position: fixed; 22 | transform: translateZ(0); 23 | top: 8px; 24 | left: 8px; 25 | right: 8px; 26 | padding: 10px; 27 | border-radius: 8px; 28 | font-size: 14px; 29 | text-align: center; 30 | color: #fff; // 固定色值 31 | z-index: 5500; 32 | .text_wrap(); 33 | } 34 | .weui-toptips_warn { 35 | background-color: @weuiColorWarn; 36 | } 37 | --------------------------------------------------------------------------------