├── .gitignore ├── LICENSE ├── README.md ├── dist ├── nest.css └── nest.js ├── examples ├── demos.tag ├── index.html ├── normalize.css └── riot+compiler.js ├── gulpfile.js ├── package.json ├── server.js ├── site ├── base.html ├── components.html ├── example.css ├── index.html ├── layout.html ├── layout │ ├── content_end.html │ ├── content_start.html │ ├── footer.html │ └── header.html ├── partials │ ├── badge │ │ └── badge.html │ ├── breadcrumb │ │ └── breadcrumb-basic.html │ ├── button │ │ ├── button-basic.html │ │ ├── button-block.html │ │ ├── button-disabled.html │ │ ├── button-link.html │ │ ├── button-loading.html │ │ ├── button-outline.html │ │ ├── button-size.html │ │ └── button-with-icon.html │ ├── checkbox │ │ └── checkbox-basic.html │ ├── input │ │ └── input-basic.html │ ├── json-tree │ │ └── json-tree-basic.html │ ├── link │ │ └── link-basic.html │ ├── pagination │ │ └── pagination-basic.html │ ├── progress-bar │ │ ├── progress-bar-basic.html │ │ └── progress-bar-with-label.html │ ├── radio │ │ ├── radio-basic.html │ │ └── radio-button.html │ ├── rate │ │ └── rate-basic.html │ ├── slider │ │ └── slider-basic.html │ ├── spinner │ │ ├── basic.html │ │ └── block.html │ ├── switch │ │ ├── switch-basic.html │ │ └── switch-disabled.html │ ├── tag │ │ ├── tag-basic.html │ │ ├── tag-invert.html │ │ └── tag-round.html │ ├── tooltip │ │ └── tooltip-basic.html │ └── tree │ │ └── tree-basic.html ├── reset.css ├── riot+compiler.js ├── riot.js └── site.css ├── src ├── animations.less ├── components │ ├── alert │ │ ├── alert.less │ │ ├── alert.tag │ │ └── package.json │ ├── badge │ │ ├── badge.less │ │ ├── badge.tag │ │ └── package.json │ ├── breadcrumb-item │ │ ├── breadcrumb-item.less │ │ ├── breadcrumb-item.tag │ │ └── package.json │ ├── breadcrumb │ │ ├── breadcrumb.less │ │ ├── breadcrumb.tag │ │ └── package.json │ ├── button │ │ ├── button.less │ │ ├── button.tag │ │ └── package.json │ ├── checkbox-group │ │ ├── checkbox-group.less │ │ ├── checkbox-group.tag │ │ └── package.json │ ├── checkbox │ │ ├── checkbox.less │ │ ├── checkbox.tag │ │ └── package.json │ ├── col │ │ ├── col.less │ │ ├── col.tag │ │ └── package.json │ ├── collapse-pane │ │ ├── collapse-pane.less │ │ ├── collapse-pane.tag │ │ └── package.json │ ├── collapse │ │ ├── collapse.less │ │ ├── collapse.tag │ │ └── package.json │ ├── color-picker │ │ ├── color-picker.less │ │ ├── color-picker.tag │ │ └── package.json │ ├── context-menu │ │ ├── context-menu.less │ │ ├── context-menu.tag │ │ └── package.json │ ├── date-picker │ │ ├── date-picker.less │ │ ├── date-picker.tag │ │ └── package.json │ ├── dropdown │ │ ├── dropdown.less │ │ ├── dropdown.tag │ │ └── package.json │ ├── grid │ │ ├── grid.less │ │ ├── grid.tag │ │ └── package.json │ ├── icon │ │ ├── icon.less │ │ ├── icon.tag │ │ └── package.json │ ├── input-nao │ │ ├── input-nao.less │ │ ├── input-nao.tag │ │ └── package.json │ ├── input │ │ ├── input.less │ │ ├── input.tag │ │ └── package.json │ ├── json-tree │ │ ├── json-tree.less │ │ ├── json-tree.tag │ │ └── package.json │ ├── link │ │ ├── link.less │ │ ├── link.tag │ │ └── package.json │ ├── menu-item │ │ ├── menu-item.less │ │ ├── menu-item.tag │ │ └── package.json │ ├── menu │ │ ├── menu.less │ │ ├── menu.tag │ │ └── package.json │ ├── message │ │ ├── message.less │ │ ├── message.tag │ │ └── package.json │ ├── modal │ │ ├── modal.less │ │ ├── modal.tag │ │ └── package.json │ ├── number-input │ │ ├── number-input.less │ │ ├── number-input.tag │ │ └── package.json │ ├── pagination │ │ ├── package.json │ │ ├── pagination.less │ │ └── pagination.tag │ ├── popover │ │ ├── package.json │ │ ├── popover.less │ │ └── popover.tag │ ├── progress-bar │ │ ├── package.json │ │ ├── progress-bar.less │ │ └── progress-bar.tag │ ├── radio-button │ │ ├── package.json │ │ ├── radio-button.less │ │ └── radio-button.tag │ ├── radio-group │ │ ├── package.json │ │ ├── radio-group.less │ │ └── radio-group.tag │ ├── radio │ │ ├── package.json │ │ ├── radio.less │ │ └── radio.tag │ ├── rate │ │ ├── package.json │ │ ├── rate.less │ │ └── rate.tag │ ├── renderer │ │ ├── package.json │ │ ├── renderer.less │ │ └── renderer.tag │ ├── row │ │ ├── package.json │ │ ├── row.less │ │ └── row.tag │ ├── slider │ │ ├── package.json │ │ ├── slider.less │ │ └── slider.tag │ ├── spinner │ │ ├── package.json │ │ ├── spinner.less │ │ └── spinner.tag │ ├── step │ │ ├── package.json │ │ ├── step.less │ │ └── step.tag │ ├── steps │ │ ├── package.json │ │ ├── steps.less │ │ └── steps.tag │ ├── submenu │ │ ├── package.json │ │ ├── submenu.less │ │ └── submenu.tag │ ├── switch │ │ ├── package.json │ │ ├── switch.less │ │ └── switch.tag │ ├── table │ │ ├── package.json │ │ ├── table.less │ │ └── table.tag │ ├── tabs │ │ ├── package.json │ │ ├── tabs.less │ │ └── tabs.tag │ ├── tag │ │ ├── package.json │ │ ├── tag.less │ │ └── tag.tag │ ├── time-picker │ │ ├── package.json │ │ ├── time-picker.less │ │ └── time-picker.tag │ ├── tooltip │ │ ├── package.json │ │ ├── tooltip.less │ │ └── tooltip.tag │ ├── tree-node │ │ ├── package.json │ │ ├── tree-node.less │ │ └── tree-node.tag │ └── tree │ │ ├── package.json │ │ ├── tree.less │ │ └── tree.tag ├── font │ ├── demo.css │ ├── demo.html │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.svg │ ├── iconfont.ttf │ └── iconfont.woff ├── helper.less ├── index.js ├── theme.less └── util │ ├── debug.js │ └── extend.js ├── todo.md └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .dev 3 | /site/partials-escape 4 | /public 5 | /dist/nest.js.map 6 | /dist/nest.css.map 7 | npm-debug.log* -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 fengzilong 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nest [![npm package](https://img.shields.io/npm/v/nest-ui.svg?style=flat-square)](https://www.npmjs.org/package/nest-ui) 2 | 3 | > Yet another UI framework for Web, built with [riot](https://github.com/riot/riot) 4 | 5 | ## Demo 6 | 7 | https://fengzilong.github.io/Nest/ 8 | 9 | ## Docs 10 | 11 | coming soon... 12 | 13 | ## Installation 14 | 15 | ```bash 16 | $ npm install nest-ui --save 17 | ``` 18 | 19 | ## Usage 20 | 21 | **Option #1:** with webpack or any other bundler: 22 | 23 | ```js 24 | import 'nest-ui'; 25 | import 'nest-ui/dist/nest.css'; 26 | ``` 27 | 28 | **Option #2**: hot-link 29 | 30 | hot-link nest.css ([unpkg](https://unpkg.com/nest-ui/dist/nest.css)) 31 | 32 | ```html 33 | 34 | ``` 35 | 36 | hot-link riot.js ([unpkg](https://unpkg.com/riot/riot.min.js)) and nest.js ([unpkg](https://unpkg.com/nest-ui)) 37 | 38 | ```html 39 | 40 | 41 | ``` 42 | 43 | ## License 44 | 45 | MIT © [fengzilong](https://github.com/fengzilong) 46 | -------------------------------------------------------------------------------- /dist/nest.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("riot")):"function"==typeof define&&define.amd?define(["riot"],e):"object"==typeof exports?exports.nest=e(require("riot")):t.nest=e(t.riot)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";n(3),n(9),n(18),n(21),n(24),n(27),n(30),n(33),n(36),n(39),n(42),n(45),n(46),n(49),n(52),n(55),n(56),n(59),n(62),n(65),n(68),n(71),n(74),n(77),n(80),n(83),n(86),n(89),n(100),n(103),n(107),n(109)},,,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var s=n(4),r=o(s),a=n(5),u=o(a);n(9),riot.tag2("ui-button",'',"","",function(t){var e,n=this;this.styles=u["default"];var o=function(t){return"undefined"==typeof t};this.uiCls=(0,r["default"])((e={},i(e,u["default"].base,!0),i(e,u["default"].basic,o(this.opts.primary)&&o(this.opts.success)&&o(this.opts.warning)&&o(this.opts.danger)),i(e,u["default"].link,!o(this.opts.link)),i(e,u["default"].primary,!o(this.opts.primary)),i(e,u["default"].success,!o(this.opts.success)),i(e,u["default"].warning,!o(this.opts.warning)),i(e,u["default"].danger,!o(this.opts.danger)),i(e,u["default"].outline,!o(this.opts.outline)),i(e,u["default"].lg,!o(this.opts.lg)),i(e,u["default"].md,o(this.opts.lg)&&o(this.opts.sm)),i(e,u["default"].sm,!o(this.opts.sm)),e)),this.onClick=function(){n.opts.__disabled||n.opts.onClick&&n.opts.onClick()}})},function(t,e,n){var o,i;/*! 2 | Copyright (c) 2016 Jed Watson. 3 | Licensed under the MIT License (MIT), see 4 | http://jedwatson.github.io/classnames 5 | */ 6 | !function(){"use strict";function n(){for(var t=[],e=0;e{icon}',"","",function(t){var e=this,n={"arrow-left":"","arrow-right":"",loading:"",info:"","caret-right":"","caret-down":"",code:"",heart:"",star:""},o=function(t){return t=t.replace(/(\\u)(\w{4})/gi,function(t){return String.fromCharCode(parseInt(escape(t).replace(/(%5Cu)(\w{4})/g,"$2"),16))}),t=t.replace(/(&#x)(\w{4});/gi,function(t){return String.fromCharCode(parseInt(escape(t).replace(/(%26%23x)(\w{4})(%3B)/g,"$2"),16))})};this.one("update",function(){e.icon=e.opts.icon,!e.opts.icon&&n[e.opts.type]&&(e.icon=o(n[e.opts.type]))})})},function(t,e){},,,,,,function(t,e){},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(19),s=o(i);riot.tag2("ui-badge",' {!countStr || opts.dot === true ? \'\' : countStr} ',"","",function(t){var e=this;this.styles=s["default"],this.on("mount",function(){}),this.on("update",function(){var t=e.opts.max;t=parseInt(t),isNaN(t)&&(t=1/0);var n=e.opts.count;if(n=parseInt(n),!isNaN(n)){var o=n;n>t&&(o=t+"+"),e.countStr=o}})})},function(t,e){t.exports={base:"badge__base--6c8aa",count:"badge__count--05ce4",dot:"badge__dot--8a1d4"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var s=n(22),r=n(4),a=o(r);riot.tag2("ui-link",' ',"","",function(t){var e,n=function(t){return"undefined"==typeof t};this.classnames=(0,a["default"])((e={},i(e,s.base,!0),i(e,s.primary,!0),i(e,s.success,!n(this.opts.success)),i(e,s.warning,!n(this.opts.warning)),i(e,s.danger,!n(this.opts.danger)),e))})},function(t,e){t.exports={base:"link__base--90129",primary:"link__primary--d8678",success:"link__success--e20bf",warning:"link__warning--c1989",danger:"link__danger--ce8a1"}},,function(t,e,n){"use strict";n(25),riot.tag2("ui-input-nao",' ',"","",function(t){var e=this,n=this.opts.value;this.hasValue=!("undefined"==typeof n||""===n),this.onChange=function(t){var n=t.target.value;e.hasValue=!("undefined"==typeof n||""===n)}})},function(t,e){},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var s=n(4),r=o(s),a=n(28),u=o(a);riot.tag2("ui-input",'',"","",function(t){var e,n=this,o=function(t){return"undefined"==typeof t};this.uiCls=(0,r["default"])((e={},i(e,u["default"].base,!0),i(e,u["default"].sm,!o(this.opts.sm)),i(e,u["default"].lg,!o(this.opts.lg)),e)),this.on("update",function(){n.stateCls=(0,r["default"])(i({},u["default"].disabled,t.__disabled===!0))}),this.onChange=function(){n.opts.onChange&&n.opts.onChange()},this.onInput=function(){n.opts.onInput&&n.opts.onInput()},this.onFocus=function(){n.opts.onFocus&&n.opts.onFocus()},this.onBlur=function(){n.opts.onBlur&&n.opts.onBlur()}})},function(t,e){t.exports={base:"input__base--4a527",sm:"input__sm--8bd7d",lg:"input__lg--ae4c0",disabled:"input__disabled--e7b86"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(31),s=o(i);riot.tag2("ui-radio"," ","","",function(t){var e=this;this.styles=s["default"],this.checked=this.opts.__checked||!1;var n=function(){e.checked||(e.opts.onChange&&e.opts.onChange(e.checked),e.trigger("change"))};this.on("mount",function(){e.root.addEventListener("click",n,!1)}),this.on("unmount",function(){e.root.removeEventListener("click",n,!1)})})},function(t,e){t.exports={base:"radio__base--9b7f4",checked:"radio__checked--8c355"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(34),s=o(i);riot.tag2("ui-radio-button"," ","","",function(t){var e=this;this.styles=s["default"],this.checked=!1;var n=function(){e.checked||(e.opts.onChange&&e.opts.onChange(),e.trigger("change"))};this.on("mount",function(){e.root.addEventListener("click",n,!1)}),this.on("unmount",function(){e.root.removeEventListener("click",n,!1)})})},function(t,e){t.exports={base:"radio-button__base--94ffe",checked:"radio-button__checked--df45a"}},,function(t,e,n){"use strict";n(37),riot.tag2("ui-radio-group","","","",function(t){var e=this;this.on("mount",function(){var t=[],n=e.tags["ui-radio"],o=e.tags["ui-radio-button"];n||(n=[]),"undefined"==typeof n.length&&(n=[n]),o||(o=[]),"undefined"==typeof o.length&&(o=[o]),t.push.apply(t,n),t.push.apply(t,o);for(var i=function(n){for(var o=0,i=t.length;i>o;o++)n===o?t[o].checked=!0:t[o].checked=!1;e.update()},s=e.opts.value,r=e.opts.onChange||function(){},a=function(n,o){e.opts.value&&t[n].opts.value===e.opts.value&&i(n),t[n].on("change",function(){i(n),n!==s&&(s=n,r(t[n].opts.value,n))})},u=0,c=t.length;c>u;u++)a(u,c)})})},function(t,e){},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var s=n(4),r=o(s),a=n(40),u=o(a);riot.tag2("ui-checkbox",' ',"","",function(t){var e=this;this.styles=u["default"],this.checked=this.opts.checked||!1;var n=function(){"-"===e.checked?e.checked=!0:e.checked=!e.checked,e.update(),e.opts.onChange&&e.opts.onChange(e.checked),e.trigger("change")};this.on("update",function(){var t;e.stateCls=(0,r["default"])((t={},i(t,u["default"].checked,e.checked===!0),i(t,u["default"].halfchecked,"-"===e.checked),i(t,u["default"].unchecked,e.checked===!1),t))}),this.on("mount",function(){e.root.addEventListener("click",n,!1)}),this.on("unmount",function(){e.root.removeEventListener("click",n,!1)})})},function(t,e){t.exports={base:"checkbox__base--d105c",unchecked:"checkbox__unchecked--7191d",checked:"checkbox__checked--90d92",halfchecked:"checkbox__halfchecked--b985b"}},,function(t,e,n){"use strict";n(43),riot.tag2("ui-checkbox-group","","","",function(t){var e=this;this.on("mount",function(){var t=e.tags["ui-checkbox"];if(t){t.length||(t=[t]);for(var n=function(){for(var e={keys:[],values:[]},n=0;ns;s++)~o.indexOf(t[s].opts.value)&&(t[s].checked=!0,t[s].update()),t[s].on("change",function(){var t=n();i(t.values,t.keys)})}})})},function(t,e){},,function(t,e){"use strict";riot.tag2("ui-breadcrumb","","","",function(t){})},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(47),s=o(i);riot.tag2("ui-breadcrumb-item",' {sep}',"","",function(t){this.styles=s["default"],this.sep="/"})},function(t,e){t.exports={sep:"breadcrumb-item__sep--17210"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(50),s=o(i);riot.tag2("ui-tag","","","",function(t){this.styles=s["default"]})},function(t,e){},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},s=n(53);o(s);riot.tag2("ui-json-tree","","","",function(t){var e=this,n=Object.hasOwnProperty,o=function(t,e){if(Array.isArray(t))for(var o=0,i=t.length;i>o;o++)e(t[o],o);else for(var o in t)n.call(t,o)&&e(t[o],o)},s=function(){return'\n
\n '},r=function(){return"\n
\n "},a=function(t,e){var n=!1,o="undefined"==typeof e?"undefined":i(e);return"string"==typeof e?e='"'+e+'"':Array.isArray(e)?(e="Array["+e.length+"]",n=!0):"object"===o&&(e="Object",n=!0),'\n
'+(n?'
':'
')+('\n
\n '+t+':\n '+e+"\n
\n
")},u=function(){return'\n
\n '},c=function(){return"\n
\n "},l=function f(t){var e="";return o(t,function(t,n){e+=s(),"number"==typeof t?e+=a(n,t):"string"==typeof t?e+=a(n,t):"boolean"==typeof t?e+=a(n,t):Array.isArray(t)?(e+=a(n,t),e+=u(),e+=f(t),e+=c()):"object"===("undefined"==typeof t?"undefined":i(t))&&(e+=a(n,t),e+=u(),e+=f(t),e+=c()),e+=r()}),e},d=void 0;this.on("updated",function(){if(e.opts.json!==d){var t=l(e.opts.json);e.root.innerHTML=t;var n=e.root.querySelectorAll(".title");n&&Array.prototype.slice.call(n).forEach(function(t){t.addEventListener("click",function(){if(t.nextElementSibling){var e=t.parentNode;e.classList.contains("open")?e.classList.remove("open"):e.classList.add("open")}},!1)}),d=e.opts.json}}),this.on("mount",function(){})})},function(t,e){},,function(t,e){"use strict";riot.tag2("ui-tree","","","",function(t){var e=this,n={CHECKED:0,UNCHECKED:1,HALF_CHECKED:2};this.nodes={},this.one("update",function(){var t=e.tags["ui-tree-node"];t?"undefined"==typeof t.length&&(t=[t]):t=[];for(var n=0,o=t.length;o>n;n++)t[n].treeNodeId=n+""}),this.on("tree-node-change",function(t){var o=e.nodes;if(o[t].status!==n.CHECKED?o[t].status=n.CHECKED:o[t].status=n.UNCHECKED,o[t].status===n.CHECKED)for(var i in o)i!==t&&i.startsWith(t)&&(o[i].status=n.CHECKED,o[i].update());else for(var i in o)i!==t&&i.startsWith(t)&&(o[i].status=n.UNCHECKED,o[i].update());if(o[t].status===n.CHECKED)for(var s=t.slice(0,-1),r=!1;s.length>0;){if(!r)for(var i in o)if(i!==s&&i.startsWith(s)&&o[i].status!==n.CHECKED){r=!0;break}r?o[s].status=n.HALF_CHECKED:o[s].status=n.CHECKED,o[s].update(),s=s.slice(0,-1)}else for(var s=t.slice(0,-1),a=!1;s.length>0;){if(!a)for(var i in o)if(i!==s&&i.startsWith(s)&&o[i].status===n.CHECKED){a=!0;break}a?o[s].status=n.HALF_CHECKED:o[s].status=n.UNCHECKED,o[s].update(),s=s.slice(0,-1)}})})},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(57),s=o(i);riot.tag2("ui-tree-node",' {opts.title}
',"","",function(t){var e=this,n={CHECKED:0,UNCHECKED:1,HALF_CHECKED:2},o=function(t){var e="";switch(t){case n.CHECKED:e=!0;break;case n.UNCHECKED:e=!1;break;case n.HALF_CHECKED:e="-"}return e},i=this.tags["ui-checkbox"];this.styles=s["default"],this.status=n.UNCHECKED;var r=o(this.status);this.on("updated",function(){i.checked=o(e.status),i.checked!==r&&(i.update(),e.trigger("change",e.opts.key,i.checked,r),e.opts.onChange&&e.opts.onChange(e.opts.key,i.checked,r),e.tree.trigger("change",e.opts.key,i.checked,r),e.tree.opts.onChange&&e.tree.opts.onChange(e.opts.key,i.checked,r),r=i.checked)}),this.on("mount",function(){var t=e.parent;"UI-TREE"===t.root.tagName?e.tree=t:t.tree&&(e.tree=t.tree),e.tree.nodes[e.treeNodeId]=e;var n=e.treeNodeId||"",o=e.tags["ui-tree-node"];o?"undefined"==typeof o.length&&(o=[o]):o=[];for(var i=0,s=o.length;s>i;i++)o[i].treeNodeId=n+i+""}),this.onCheckChange=function(){e.tree.trigger("tree-node-change",e.treeNodeId)}})},function(t,e){t.exports={title:"tree-node__title--1ff24",children:"tree-node__children--94f11"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(60),s=o(i);riot.tag2("ui-pagination",' {parent.opts.prevText || \'prev\'} {parent.min} ... {parent.current - 2} {parent.current - 1} {v} {parent.current || parent.min} {v} {parent.current + 1} {parent.current + 2} ... {parent.max} {parent.opts.nextText || \'next\'} ',"","",function(t){var e=this;this.styles=s["default"],this.min2current=[],this.current2max=[],this.onChangeFactory=function(t){return function(){e.opts.onChange&&e.opts.onChange(t),e.update()}},this.on("update",function(){var t=parseInt(e.opts.min)||1,n=parseInt(e.opts.max)||1,o=parseInt(e.opts.current)||t;e.min=t,e.max=n,e.current=o;var i=!1;o-t>3&&(i=!0);var s=!1;if(n-o>3&&(s=!0),e.isBeforeHidden=i,e.isAfterHidden=s,!i){for(var r=[],a=t;o>a;a++)r.push(a);e.min2current=r}if(!s){for(var u=[],a=o+1;n>=a;a++)u.push(a);e.current2max=u}})})},function(t,e){t.exports={more:"pagination__more--07727"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=(n(63),n(4));o(i);riot.tag2("ui-menu","","","",function(t){this.on("update",function(){})})},function(t,e){},,function(t,e,n){"use strict";var o=n(66);riot.tag2("ui-submenu",'{opts.text}
',"","",function(t){this.styles={items:o.items}})},function(t,e){t.exports={items:"submenu__items--453df"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var s=n(69),r=n(4),a=o(r);riot.tag2("ui-menu-item",'
{opts.text}
',"","",function(t){var e=this;this.on("mount",function(){}),this.on("update",function(){e.classnames=(0,a["default"])(i({},s.base,!0))})})},function(t,e){t.exports={base:"menu-item__base--744fe"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var s=n(72),r=o(s),a=n(4),u=o(a);riot.tag2("ui-switch",'
',"","",function(t){var e,n=this;this.disabled=this.opts.__disabled||!1;var o=!!this.opts.__checked;this.styles=r["default"],this.uiCls=(0,u["default"])((e={},i(e,r["default"].base,!0),i(e,r["default"].sm,"undefined"!=typeof this.opts.sm),i(e,r["default"].lg,"undefined"!=typeof this.opts.lg),e)),this.root.$toggle=function(t){n.disabled||(o=!o,t||n.update(),n.onChange&&n.onChange(o))},this.root.$check=function(){o=!0,n.update(),n.onChange&&n.onChange(o)},this.root.$uncheck=function(){o=!1,n.update(),n.onChange&&n.onChange(o)},this.root.$enable=function(){n.disabled=!1,n.update()},this.root.$disable=function(){n.disabled=!0,n.update()},this.on("update",function(){var t;n.stateCls=(0,u["default"])((t={},i(t,r["default"].on,o),i(t,r["default"].off,!o),i(t,r["default"].disabled,n.disabled),t))})})},function(t,e){t.exports={base:"switch__base--d8803",off:"switch__off--f5f12",on:"switch__on--e6918",sm:"switch__sm--30f39",lg:"switch__lg--4bee6",disabled:"switch__disabled--10aff"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var s=n(75),r=o(s),a=n(4),u=o(a);riot.tag2("ui-progress-bar",'
{this.opts.value}%
',"","",function(t){var e;this.styles=r["default"],this.colorCls=(0,u["default"])((e={},i(e,r["default"].primary,!0),i(e,r["default"].success,"undefined"!=typeof this.opts.success),i(e,r["default"].warning,"undefined"!=typeof this.opts.warning),i(e,r["default"].danger,"undefined"!=typeof this.opts.danger),e))})},function(t,e){t.exports={progressbar:"progress-bar__progressbar--6b84c",outter:"progress-bar__outter--45df2",inner:"progress-bar__inner--7cfae",label:"progress-bar__label--8a483",primary:"progress-bar__primary--4a533",success:"progress-bar__success--ec469",warning:"progress-bar__warning--50b47",danger:"progress-bar__danger--502a3"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(78),s=o(i);riot.tag2("ui-popover",'
hover
',"","",function(t){var e=this;this.styles=s["default"],this.on("mount",function(){e.root.addEventListener("mouseenter",function(){console.log("enter")},!1)})})},function(t,e){t.exports={popover:"popover__popover--729c4"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(81),s=o(i);n(9),riot.tag2("ui-message",'
{opts.content}
',"","",function(t){this.styles=s["default"]})},function(t,e){t.exports={icon:"message__icon--173e9"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(84),s=o(i);riot.tag2("ui-collapse","","","",function(t){this.styles=s["default"],this.on("mount",function(){})})},function(t,e){},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(87),s=o(i);riot.tag2("ui-collapse-pane",'
{opts.title}
',"","",function(t){var e=this;this.styles=s["default"],this.expand=!1;var n=function(){e.expand=!e.expand,e.update()};this.on("mount",function(){e.root.addEventListener("click",n,!1)}),this.on("unmount",function(){e.root.removeEventListener("click",n,!1)})})},function(t,e){t.exports={title:"collapse-pane__title--a2e22","title-inner":"collapse-pane__title-inner--3e867",content:"collapse-pane__content--d96c2","content-box":"collapse-pane__content-box--a1b5b","content-inactive":"collapse-pane__content-inactive--c959a","content-active":"collapse-pane__content-active--4cc8c"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(90),s=o(i),r=n(98),a=o(r);riot.tag2("ui-tooltip",'
{opts.title}
',"","",function(t){var e=this;this.styles=a["default"],this.manual=!1,this.triggered=!1,this.defaultPlaceholder="top";var n=["tc","bc"],o=[0,0];switch(this.opts.placement||this.defaultPlaceholder){case"top":n=["bc","tc"],o=[0,-2];break;case"bottom":n=["tc","bc"],o=[0,2];break;case"left":n=["cr","cl"],o=[-2,0];break;case"right":n=["cl","cr"],o=[2,0]}var i=function(){e.triggered=!0,e.update(),(0,s["default"])(e.s,e.t,{points:n,offset:o})},r=function(){e.triggered=!1,e.update()},u=function(t){e.root.contains(t.target)||r()},c=void 0;this.on("updated",function(){var t=!e.manual&&e.triggered||e.manual&&e.opts.show,i=e.opts.track&&e.opts.track instanceof HTMLElement;t&&i&&"undefined"!=typeof e.opts.trackby&&e.opts.trackby!==c&&(c=e.opts.trackby,(0,s["default"])(e.s,e.opts.track,{points:n,offset:o}))}),this.on("before-mount",function(){var t=e.opts.trigger||"hover";switch(t){case"hover":e.t.addEventListener("mouseenter",i,!1),e.t.addEventListener("mouseleave",r,!1);break;case"click":e.t.addEventListener("click",i,!1),document.addEventListener("click",u,!1);break;case"manual":e.manual=!0}}),this.on("unmount",function(){var t=e.opts.trigger||"hover";switch(t){case"hover":e.t.removeEventListener("mouseenter",i,!1),e.t.removeEventListener("mouseleave",r,!1);break;case"click":e.t.removeEventListener("click",i,!1),document.removeEventListener("click",u,!1);break;case"manual":}})})},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n){return t.leftn.right}function s(t,e,n){return t.topn.bottom}function r(t,e,n){return t.left>n.right||t.left+e.widthn.bottom||t.top+e.height=s)&&(s=void 0,u=w(t,e),(null===u||void 0===u||Number(u)<0)&&(u=t.style[e]||0),u=parseFloat(u)||0),void 0===o&&(o=a?D:W);var c=void 0!==s||a,l=s||u;return o===W?c?l-g(t,["border","padding"],i,r):u:c?o===D?l:l+(o===O?-g(t,["border"],i,r):g(t,["margin"],i,r)):u+g(t,j.slice(o),i,r)}function m(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];var o=void 0,i=e[0];return 0!==i.offsetWidth?o=_.apply(void 0,e):v(i,A,function(){o=_.apply(void 0,e)}),o}function y(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}Object.defineProperty(e,"__esModule",{value:!0});var k=/[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source,w=void 0,C=new RegExp("^("+k+")(?!px)[a-z%]+$","i"),x=/^(top|right|bottom|left)$/,E="currentStyle",M="runtimeStyle",H="left",L="px";"undefined"!=typeof window&&(w=window.getComputedStyle?u:c);var j=["margin","border","padding"],W=-1,O=2,D=1,P=0,R={};p(["Width","Height"],function(t){R["doc"+t]=function(e){var n=e.document;return Math.max(n.documentElement["scroll"+t],n.body["scroll"+t],R["viewport"+t](n))},R["viewport"+t]=function(e){var n="client"+t,o=e.document,i=o.body,s=o.documentElement,r=s[n];return"CSS1Compat"===o.compatMode&&r||i&&i[n]||r}});var A={position:"absolute",visibility:"hidden",display:"block"};p(["width","height"],function(t){var e=t.charAt(0).toUpperCase()+t.slice(1);R["outer"+e]=function(e,n){return e&&m(e,t,n?P:D)};var o="width"===t?["Left","Right"]:["Top","Bottom"];R[t]=function(e,i){var s=i;{if(void 0===s)return e&&m(e,t,W);if(e){var r=w(e),a=h(e);return a&&(s+=g(e,["padding","border"],o,r)),n(e,t,s)}}}});var F={getWindow:function(t){if(t&&t.document&&t.setTimeout)return t;var e=t.ownerDocument||t;return e.defaultView||e.parentWindow},offset:function(t,e,n){return"undefined"==typeof e?a(t):void f(t,e,n||{})},isWindow:b,each:p,css:n,clone:function(t){var e=void 0,n={};for(e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);var o=t.overflow;if(o)for(e in t)t.hasOwnProperty(e)&&(n.overflow[e]=t.overflow[e]);return n},mix:y,getWindowScrollLeft:function(t){return s(t)},getWindowScrollTop:function(t){return r(t)},merge:function(){for(var t={},e=arguments.length,n=Array(e),o=0;e>o;o++)n[o]=arguments[o];for(var i=0;i=0&&e.left>=0&&e.bottom>e.top&&e.right>e.left?e:null}Object.defineProperty(e,"__esModule",{value:!0});var s=n(91),r=o(s),a=n(92),u=o(a);e["default"]=i,t.exports=e["default"]},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n,o){var i=r["default"].clone(t),s={width:e.width,height:e.height};return o.adjustX&&i.left=n.left&&i.left+s.width>n.right&&(s.width-=i.left+s.width-n.right),o.adjustX&&i.left+s.width>n.right&&(i.left=Math.max(n.right-s.width,n.left)),o.adjustY&&i.top=n.top&&i.top+s.height>n.bottom&&(s.height-=i.top+s.height-n.bottom), 7 | o.adjustY&&i.top+s.height>n.bottom&&(i.top=Math.max(n.bottom-s.height,n.top)),r["default"].mix(i,s)}Object.defineProperty(e,"__esModule",{value:!0});var s=n(91),r=o(s);e["default"]=i,t.exports=e["default"]},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t){var e=void 0,n=void 0,o=void 0;if(r["default"].isWindow(t)||9===t.nodeType){var i=r["default"].getWindow(t);e={left:r["default"].getWindowScrollLeft(i),top:r["default"].getWindowScrollTop(i)},n=r["default"].viewportWidth(i),o=r["default"].viewportHeight(i)}else e=r["default"].offset(t),n=r["default"].outerWidth(t),o=r["default"].outerHeight(t);return e.width=n,e.height=o,e}Object.defineProperty(e,"__esModule",{value:!0});var s=n(91),r=o(s);e["default"]=i,t.exports=e["default"]},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e,n,o,i){var s=void 0,a=void 0,u=void 0,c=void 0;return s={left:t.left,top:t.top},u=(0,r["default"])(e,n[1]),c=(0,r["default"])(t,n[0]),a=[c.left-u.left,c.top-u.top],{left:s.left-a[0]+o[0]-i[0],top:s.top-a[1]+o[1]-i[1]}}Object.defineProperty(e,"__esModule",{value:!0});var s=n(97),r=o(s);e["default"]=i,t.exports=e["default"]},function(t,e){"use strict";function n(t,e){var n=e.charAt(0),o=e.charAt(1),i=t.width,s=t.height,r=void 0,a=void 0;return r=t.left,a=t.top,"c"===n?a+=s/2:"b"===n&&(a+=s),"c"===o?r+=i/2:"r"===o&&(r+=i),{left:r,top:a}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=n,t.exports=e["default"]},function(t,e){t.exports={target:"tooltip__target--7b8bb",base:"tooltip__base--48015",arrow:"tooltip__arrow--f1c68",content:"tooltip__content--04b9a",bottom:"tooltip__bottom--16830",top:"tooltip__top--37a8a",left:"tooltip__left--0dc63",right:"tooltip__right--60295"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(101),s=o(i);n(89),riot.tag2("ui-slider",'
',"","",function(t){var e=this,n=this.opts.min||0,o=this.opts.max||100,i=this.opts.step||1,r=i/(o-n)*100,a=this.opts.value||n;this.styles=s["default"],this.showTooltip=!1,this.offsetRate=a/(o-n)*100,"function"==typeof this.opts.tipFormatter?this.tipContent=this.opts.tipFormatter(this.offsetRate):this.tipContent=parseInt(this.offsetRate/100*(o-n)+n);var u=0,c=!1;this.onMouseDown=function(t){var i=(t.target,t.pageX),s=e.offsetRate,a=i;c=!0,e.showTooltip=!0;var l=function p(){c=!1,e.showTooltip=!1,e.update(),e.offsetRate!==s&&e.opts.onChanged&&e.opts.onChanged(e.offsetRate),document.removeEventListener("mousemove",f,!1),document.removeEventListener("mouseup",p,!1)},d=0,f=function(t){d=t.pageX-a,a=t.pageX;var c=t.pageX-i,l=c/u*100,f=Math.round((s+l)/r)*r;(0>d&&f-e.offsetRate<0||d>0&&f-e.offsetRate>0)&&(e.offsetRate=f),e.offsetRate<0&&(e.offsetRate=0),e.offsetRate>100&&(e.offsetRate=100),"function"==typeof e.opts.tipFormatter?e.tipContent=e.opts.tipFormatter(e.offsetRate):e.tipContent=parseInt(e.offsetRate/100*(o-n)+n),e.update(),e.offsetRate!==s&&e.opts.onChange&&e.opts.onChange(e.offsetRate)};document.addEventListener("mouseup",l,!1),document.addEventListener("mousemove",f,!1)},this.onMouseEnter=function(){e.showTooltip=!0},this.onMouseLeave=function(){c||(e.showTooltip=!1)},this.one("updated",function(){u=e.tracker.clientWidth})})},function(t,e){t.exports={base:"slider__base--93502",handle:"slider__handle--fd370",tracker:"slider__tracker--26f65","tracker-inner":"slider__tracker-inner--4dcf9"}},,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(104),s=o(i);riot.tag2("ui-spinner",'
',"","",function(t){this.styles=s["default"]})},function(t,e){t.exports={rect:"spinner__rect--cab18 animations__spin--d8e10",rect2:"spinner__rect2--befca",rect3:"spinner__rect3--c38c6"}},,,function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}var i=n(108),s=o(i);s["default"].tag2("ui-renderer","","","",function(t){function e(t,e){t.innerHTML=e,s["default"].mount(t,"*")}var n=this;this.on("mount",function(){var t=n.root;"undefined"!=typeof n.opts.alive&&n.opts.alive!==!1&&n.on("updated",function(){e.call(n,t,n.opts.content)}),e.call(n,t,n.opts.content)})})},function(e,n){e.exports=t},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}n(9);var i=n(110),s=o(i);riot.tag2("ui-rate",'
',"","",function(t){var e=this;this.styles=s["default"],this.value=.5*parseInt(parseFloat(this.opts.value)/.5),this.onMouseMove=function(t){return function(n){if(!e.opts.__disabled){var o=(n.item,n.target),i=o.getBoundingClientRect(),s=i.width,r=n.pageX-i.left,a="";t+=1,s/3>r?a=t-1:r>=s/3&&s/3*2>=r?a=t-.5:r>s/3*2&&(a=t),e.value=a}}};var n=this.value;this.onConfirm=function(){e.opts.__disabled||(n=e.value,e.trigger("change",n),e.opts.onChange&&e.opts.onChange(n))},this.onLeave=function(){e.opts.__disabled||(e.value=n)},this.on("update",function(){for(var t=e.value||0,n=.5*parseInt(t/.5),o=parseInt(e.opts.total)||5,i=[],r=0;o>r;)r++,n>=r?i.push(s["default"].full):r-.5===n?i.push(s["default"].half):r>n&&i.push(s["default"].zero);e.states=i})})},function(t,e){t.exports={wrapper:"rate__wrapper--cb08e",base:"rate__base--f7192",disabled:"rate__disabled--da63e",star:"rate__star--6bee2",full:"rate__full--982b6",half:"rate__half--4b632",zero:"rate__zero--e1273"}}])}); -------------------------------------------------------------------------------- /examples/demos.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 选项一 7 | 选项二 8 | 选项三 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | 29 |
30 |
31 | 32 |
33 | 34 | normal 35 | primary 36 | success 37 | warning 38 | danger 39 | 40 |
41 |
42 | 43 | normal 44 | primary 45 | success 46 | warning 47 | danger 48 | 49 |
50 |
51 | 52 | normal 53 | primary 54 | success 55 | warning 56 | danger 57 | 58 |
59 |
60 | 61 | 62 | 63 | 64 | bottom 65 | 66 | 67 | bottom 68 | 69 | 70 | bottom 71 | 72 | 73 | bottom 74 | 75 | 76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 首页 85 | 86 | 87 | 88 | 89 | 一级导航 90 | 91 | 92 | 93 | 94 | 二级导航 95 | 96 | 97 | 98 | 当前节点 99 | 100 | 101 | 102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 |
122 |
123 | 124 | 125 | 126 | 127 | 128 | 面板1 129 | 130 | 131 | 面板2 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
143 |
144 | 145 | 146 | 147 | 148 |
149 | 150 | 151 | 152 |
153 | 154 | 155 |
156 |
157 | 158 | 159 | 160 | 161 |
162 | 163 |
164 | 165 |
166 | 167 | 168 |
169 |
170 | 171 | 172 | 173 | { parent.text } 174 | 175 | 176 |
177 |
178 | 179 | 180 | { parent.text } 181 | 182 | 183 | 184 | { parent.text } 185 | 186 | 187 | 188 | { parent.text } 189 | 190 | 191 | 192 | { parent.text } 193 | 194 | 195 |
196 |
197 | 198 | 199 | { parent.text } 200 | 201 | 202 | 203 | { parent.text } 204 | 205 | 206 | 207 | { parent.text } 208 | 209 | 210 | 211 | { parent.text } 212 | 213 | 214 |
215 |
216 | 217 | 218 | { parent.text } 219 | 220 | 221 | 222 | { parent.text } 223 | 224 | 225 | 226 | { parent.text } 227 | 228 | 229 | 230 | { parent.text } 231 | 232 | 233 |
234 |
235 | 236 | 237 | { parent.text } 238 | 239 | 240 | 241 | { parent.text } 242 | 243 | 244 | 245 | { parent.text } 246 | 247 | 248 |
249 |
250 | 251 | 252 | 253 | { parent.text } 254 | 255 | 256 | 257 | { parent.text } 258 | 259 | 260 | 261 |
262 |
263 | 264 | 265 | 正在加载中 266 | 267 | 268 |
269 |
270 | 271 | 272 | { parent.text } 273 | 274 | 275 |
276 |
277 | 278 | 279 | 280 |
281 | 文字文字文字文字文字文字链接文字文字文字文字文字文字文字 282 |
283 |
284 | 文字文字文字文字文字文字链接文字文字文字文字文字文字文字 285 |
286 |
287 | 文字文字文字文字文字文字链接文字文字文字文字文字文字文字 288 |
289 |
290 | 文字文字文字文字文字文字链接文字文字文字文字文字文字文字 291 |
292 | 293 |
294 |
295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 |
303 |
304 | 305 | 306 | 307 |
308 |
309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 |
318 |
319 | 320 | 321 | 322 | 323 | 北京 324 | 上海 325 | 广州 326 | 杭州 327 | 328 | 329 |
330 |
331 | 332 | 333 | 334 | 335 | 选项一 336 | 选项二 337 | 338 | 339 |
340 |
341 | 342 | 343 | 344 | 345 | 选项一 346 | 选项二 347 | 选项三 348 | 349 | 350 |
351 |
352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 鼠标移到这里 369 | 370 | 371 | 430 | 431 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo 6 | 7 | 8 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /examples/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * 1. Remove the gray background on active links in IE 10. 89 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 90 | */ 91 | 92 | a { 93 | background-color: transparent; /* 1 */ 94 | -webkit-text-decoration-skip: objects; /* 2 */ 95 | } 96 | 97 | /** 98 | * Remove the outline on focused links when they are also active or hovered 99 | * in all browsers (opinionated). 100 | */ 101 | 102 | a:active, 103 | a:hover { 104 | outline-width: 0; 105 | } 106 | 107 | /* Text-level semantics 108 | ========================================================================== */ 109 | 110 | /** 111 | * 1. Remove the bottom border in Firefox 39-. 112 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: none; /* 1 */ 117 | text-decoration: underline; /* 2 */ 118 | text-decoration: underline dotted; /* 2 */ 119 | } 120 | 121 | /** 122 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: inherit; 128 | } 129 | 130 | /** 131 | * Add the correct font weight in Chrome, Edge, and Safari. 132 | */ 133 | 134 | b, 135 | strong { 136 | font-weight: bolder; 137 | } 138 | 139 | /** 140 | * Add the correct font style in Android 4.3-. 141 | */ 142 | 143 | dfn { 144 | font-style: italic; 145 | } 146 | 147 | /** 148 | * Correct the font size and margin on `h1` elements within `section` and 149 | * `article` contexts in Chrome, Firefox, and Safari. 150 | */ 151 | 152 | h1 { 153 | font-size: 2em; 154 | margin: 0.67em 0; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Remove the border on images inside links in IE 10-. 200 | */ 201 | 202 | img { 203 | border-style: none; 204 | } 205 | 206 | /** 207 | * Hide the overflow in IE. 208 | */ 209 | 210 | svg:not(:root) { 211 | overflow: hidden; 212 | } 213 | 214 | /* Grouping content 215 | ========================================================================== */ 216 | 217 | /** 218 | * 1. Correct the inheritance and scaling of font size in all browsers. 219 | * 2. Correct the odd `em` font sizing in all browsers. 220 | */ 221 | 222 | code, 223 | kbd, 224 | pre, 225 | samp { 226 | font-family: monospace, monospace; /* 1 */ 227 | font-size: 1em; /* 2 */ 228 | } 229 | 230 | /** 231 | * Add the correct margin in IE 8. 232 | */ 233 | 234 | figure { 235 | margin: 1em 40px; 236 | } 237 | 238 | /** 239 | * 1. Add the correct box sizing in Firefox. 240 | * 2. Show the overflow in Edge and IE. 241 | */ 242 | 243 | hr { 244 | box-sizing: content-box; /* 1 */ 245 | height: 0; /* 1 */ 246 | overflow: visible; /* 2 */ 247 | } 248 | 249 | /* Forms 250 | ========================================================================== */ 251 | 252 | /** 253 | * 1. Change font properties to `inherit` in all browsers (opinionated). 254 | * 2. Remove the margin in Firefox and Safari. 255 | */ 256 | 257 | button, 258 | input, 259 | select, 260 | textarea { 261 | font: inherit; /* 1 */ 262 | margin: 0; /* 2 */ 263 | } 264 | 265 | /** 266 | * Restore the font weight unset by the previous rule. 267 | */ 268 | 269 | optgroup { 270 | font-weight: bold; 271 | } 272 | 273 | /** 274 | * Show the overflow in IE. 275 | * 1. Show the overflow in Edge. 276 | */ 277 | 278 | button, 279 | input { /* 1 */ 280 | overflow: visible; 281 | } 282 | 283 | /** 284 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 285 | * 1. Remove the inheritance of text transform in Firefox. 286 | */ 287 | 288 | button, 289 | select { /* 1 */ 290 | text-transform: none; 291 | } 292 | 293 | /** 294 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 295 | * controls in Android 4. 296 | * 2. Correct the inability to style clickable types in iOS and Safari. 297 | */ 298 | 299 | button, 300 | html [type="button"], /* 1 */ 301 | [type="reset"], 302 | [type="submit"] { 303 | -webkit-appearance: button; /* 2 */ 304 | } 305 | 306 | /** 307 | * Remove the inner border and padding in Firefox. 308 | */ 309 | 310 | button::-moz-focus-inner, 311 | [type="button"]::-moz-focus-inner, 312 | [type="reset"]::-moz-focus-inner, 313 | [type="submit"]::-moz-focus-inner { 314 | border-style: none; 315 | padding: 0; 316 | } 317 | 318 | /** 319 | * Restore the focus styles unset by the previous rule. 320 | */ 321 | 322 | button:-moz-focusring, 323 | [type="button"]:-moz-focusring, 324 | [type="reset"]:-moz-focusring, 325 | [type="submit"]:-moz-focusring { 326 | outline: 1px dotted ButtonText; 327 | } 328 | 329 | /** 330 | * Change the border, margin, and padding in all browsers (opinionated). 331 | */ 332 | 333 | fieldset { 334 | border: 1px solid #c0c0c0; 335 | margin: 0 2px; 336 | padding: 0.35em 0.625em 0.75em; 337 | } 338 | 339 | /** 340 | * 1. Correct the text wrapping in Edge and IE. 341 | * 2. Correct the color inheritance from `fieldset` elements in IE. 342 | * 3. Remove the padding so developers are not caught out when they zero out 343 | * `fieldset` elements in all browsers. 344 | */ 345 | 346 | legend { 347 | box-sizing: border-box; /* 1 */ 348 | color: inherit; /* 2 */ 349 | display: table; /* 1 */ 350 | max-width: 100%; /* 1 */ 351 | padding: 0; /* 3 */ 352 | white-space: normal; /* 1 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 404 | */ 405 | 406 | ::-webkit-input-placeholder { 407 | color: inherit; 408 | opacity: 0.54; 409 | } 410 | 411 | /** 412 | * 1. Correct the inability to style clickable types in iOS and Safari. 413 | * 2. Change font properties to `inherit` in Safari. 414 | */ 415 | 416 | ::-webkit-file-upload-button { 417 | -webkit-appearance: button; /* 1 */ 418 | font: inherit; /* 2 */ 419 | } 420 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require( 'gulp' ); 2 | const serve = require( 'gulp-serve' ); 3 | const nunjucks = require( 'gulp-nunjucks' ); 4 | const escape = require( 'gulp-html-escape' ); 5 | const replace = require( 'gulp-replace' ); 6 | const opn = require( 'opn' ); 7 | 8 | const HOST = '127.0.0.1'; 9 | const PORT = 3030; 10 | 11 | gulp.task( 'serve', serve({ 12 | root: [ './public' ], 13 | hostname: HOST, 14 | port: PORT 15 | }) ); 16 | 17 | gulp.task( 'partial:escape', function() { 18 | return gulp.src( 'site/partials/**/*.html' ) 19 | .pipe( escape({}) ) 20 | .pipe( replace(/\{/g, '\\{') ) 21 | .pipe( replace(/\}/g, '\\}') ) 22 | .pipe( gulp.dest('site/partials-escape') ) 23 | } ); 24 | 25 | gulp.task( 'html', [ 'partial:escape' ], function() { 26 | return gulp.src( 'site/*.html' ) 27 | .pipe(nunjucks.compile({ 28 | time: Date.now(), 29 | title: 'Nest', 30 | })) 31 | .pipe( gulp.dest( 'public' ) ) 32 | } ); 33 | 34 | gulp.task( 'site:css', function() { 35 | return gulp.src([ 36 | 'site/site.css', 37 | 'site/reset.css', 38 | 'site/example.css' 39 | ]) 40 | .pipe( gulp.dest( 'public' ) ) 41 | } ); 42 | 43 | gulp.task( 'site:js', function() { 44 | return gulp.src( 'site/**/*.js' ) 45 | .pipe( gulp.dest( 'public' ) ) 46 | } ); 47 | 48 | gulp.task( 'nest:css', function() { 49 | return gulp.src( 'dist/nest.css' ) 50 | .pipe( gulp.dest( 'public' ) ) 51 | } ); 52 | 53 | gulp.task( 'nest:js', function() { 54 | return gulp.src( 'dist/nest.js' ) 55 | .pipe( gulp.dest( 'public' ) ) 56 | } ); 57 | 58 | gulp.task( 'watch', function() { 59 | gulp.watch( './site/**/*.html', [ 'html' ] ) 60 | gulp.watch( './site/**/*.css', [ 'site:css' ] ) 61 | gulp.watch( './site/**/*.js', [ 'site:js' ] ) 62 | gulp.watch( './dist/**/*.css', [ 'nest:css' ] ) 63 | gulp.watch( './dist/**/*.js', [ 'nest:js' ] ) 64 | } ); 65 | 66 | gulp.task( 'opn', [ 'serve' ], function() { 67 | opn( 'http://' + HOST + ':' + PORT ); 68 | } ); 69 | 70 | gulp.task( 'site:dist', [ 'html', 'site:css', 'site:js', 'nest:css', 'nest:js' ] ); 71 | gulp.task( 'site:dev', [ 'serve', 'site:dist', 'watch', 'opn' ] ); 72 | gulp.task( 'default', [ 'site:dev' ] ); 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nest-ui", 3 | "version": "0.0.9", 4 | "description": "Yet another UI framework for Web, built with riot", 5 | "main": "dist/nest.js", 6 | "directories": {}, 7 | "scripts": { 8 | "dev": "node server", 9 | "dist": "better-npm-run dist", 10 | "site-dev": "gulp site:dev", 11 | "site-dist": "gulp site:dist", 12 | "gh-pages": "npm run dist && gulp site:dist && gh-pages -d public" 13 | }, 14 | "betterScripts": { 15 | "dist": { 16 | "command": "webpack", 17 | "env": { 18 | "NODE_ENV": "production" 19 | } 20 | } 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/fengzilong/Nest.git" 25 | }, 26 | "keywords": [ 27 | "riot", 28 | "component", 29 | "UI library" 30 | ], 31 | "author": "fengzilong", 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/fengzilong/Nest/issues" 35 | }, 36 | "homepage": "https://github.com/fengzilong/Nest#readme", 37 | "devDependencies": { 38 | "autoprefixer": "^6.3.1", 39 | "babel": "^6.3.26", 40 | "babel-loader": "^6.2.1", 41 | "babel-plugin-transform-runtime": "^6.4.3", 42 | "babel-preset-es2015": "^6.3.13", 43 | "babel-runtime": "^6.3.19", 44 | "better-npm-run": "0.0.8", 45 | "body-parser": "^1.15.0", 46 | "cookie-parser": "^1.4.1", 47 | "css-loader": "^0.23.1", 48 | "es6-promise": "^3.0.2", 49 | "express": "^4.13.4", 50 | "extract-text-webpack-plugin": "^1.0.1", 51 | "file-loader": "^0.8.5", 52 | "gulp": "^3.9.1", 53 | "gulp-html-escape": "0.0.3", 54 | "gulp-nunjucks": "^2.2.0", 55 | "gulp-replace": "^0.5.4", 56 | "gulp-serve": "^1.2.0", 57 | "less": "^2.6.0", 58 | "less-loader": "^2.2.2", 59 | "nest-loader": "^0.1.1", 60 | "opn": "^4.0.2", 61 | "postcss-loader": "^0.8.0", 62 | "riot": "^2.3.15", 63 | "style-loader": "^0.13.0", 64 | "url-loader": "^0.5.7", 65 | "webpack": "^1.12.12", 66 | "webpack-dev-server": "^1.14.1" 67 | }, 68 | "dependencies": { 69 | "dom-align": "^1.4.0" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const WebpackDevServer = require( 'webpack-dev-server' ); 2 | const webpack = require( 'webpack' ); 3 | const express = require( 'express' ); 4 | const cookieParser = require( 'cookie-parser' ); 5 | const bodyParser = require( 'body-parser' ); 6 | const opn = require( 'opn' ); 7 | const config = require( './webpack.config.js' ); 8 | const cwd = process.cwd(); 9 | 10 | const app = express(); 11 | app.use( cookieParser() ); 12 | app.use( bodyParser.json() ); 13 | app.use( bodyParser.urlencoded( { extended: true } ) ); 14 | app.use( express.static( __dirname ) ); 15 | 16 | const staticServerPort = 80; 17 | app.listen( staticServerPort, function() { 18 | console.log( '[Server] http://127.0.0.1:' + staticServerPort ); 19 | opn( 'http://127.0.0.1:' + staticServerPort + '/examples' ); 20 | } ); 21 | 22 | const compiler = webpack( config ); 23 | const serverOptions = { 24 | quiet: false, 25 | watchOptions: { 26 | aggregateTimeout: 300, 27 | poll: 1000 28 | }, 29 | publicPath: '/dist' 30 | }; 31 | const devServer = new WebpackDevServer( compiler, serverOptions ); 32 | 33 | const devServerPort = 8080; 34 | devServer.listen(devServerPort, 'localhost', function(){ 35 | console.log( '[devServer] http://127.0.0.1:' + devServerPort ); 36 | }); 37 | -------------------------------------------------------------------------------- /site/base.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ title }} 8 | {% block styles %} 9 | 10 | 11 | {% endblock %} 12 | 13 | 14 | 15 | {% block main %} 16 | {% endblock %} 17 | 18 | {% block scripts %} 19 | {% endblock %} 20 | 21 | 22 | -------------------------------------------------------------------------------- /site/components.html: -------------------------------------------------------------------------------- 1 | 2 | {% macro snippet( title, path ) %} 3 |
4 | {{ title }} 5 |
6 |
7 |
8 | {% include "./partials/" + path %} 9 |
10 |
11 | 

 12 | 				{%- include "./partials-escape/" + path -%}
 13 |
14 |
15 |
16 | {% endmacro %} 17 | 18 | {% include "layout/header.html" %} 19 | {% include "layout/content_start.html" %} 20 | 21 | {# Button #} 22 | {{ snippet( 'Button Basic', 'button/button-basic.html' ) }} 23 | {{ snippet( 'Button Outline', 'button/button-outline.html' ) }} 24 | {{ snippet( 'Button Link', 'button/button-link.html' ) }} 25 | {{ snippet( 'Button Size', 'button/button-size.html' ) }} 26 | {{ snippet( 'Button Block', 'button/button-block.html' ) }} 27 | {{ snippet( 'Button With Icon', 'button/button-with-icon.html' ) }} 28 | {{ snippet( 'Button Loading', 'button/button-loading.html' ) }} 29 | {{ snippet( 'Button Disabled', 'button/button-disabled.html' ) }} 30 | 31 | {# Input #} 32 | 33 | {{ snippet( 'Input Basic', 'input/input-basic.html' ) }} 34 | 35 | {# Badge #} 36 | 37 | {{ snippet( 'Badge Basic', 'badge/badge.html' ) }} 38 | 39 | {# Progress Bar #} 40 | 41 | {{ snippet( 'ProgressBar Basic', 'progress-bar/progress-bar-basic.html' ) }} 42 | {{ snippet( 'ProgressBar With Label', 'progress-bar/progress-bar-with-label.html' ) }} 43 | 44 | {# Link #} 45 | 46 | {{ snippet( 'Link Basic', 'link/link-basic.html' ) }} 47 | 48 | {# Switch #} 49 | 50 | {{ snippet( 'Switch Basic', 'switch/switch-basic.html' ) }} 51 | {{ snippet( 'Switch Disabled', 'switch/switch-disabled.html' ) }} 52 | 53 | {# Checkbox #} 54 | 55 | {{ snippet( 'Checkbox Basic', 'checkbox/checkbox-basic.html' ) }} 56 | 57 | {# Radio #} 58 | 59 | {{ snippet( 'Radio Basic', 'radio/radio-basic.html' ) }} 60 | {{ snippet( 'Radio Button', 'radio/radio-button.html' ) }} 61 | 62 | {# Breadcrumb #} 63 | 64 | {{ snippet( 'Breadcrumb Basic', 'breadcrumb/breadcrumb-basic.html' ) }} 65 | 66 | {# Tooltip #} 67 | 68 | {{ snippet( 'Tooltip Basic', 'tooltip/tooltip-basic.html' ) }} 69 | 70 | {# Rate #} 71 | 72 | {{ snippet( 'Rate Basic', 'rate/rate-basic.html' ) }} 73 | 74 | {# Tag #} 75 | 76 | {{ snippet( 'Tag Basic', 'tag/tag-basic.html' ) }} 77 | {{ snippet( 'Tag Round', 'tag/tag-round.html' ) }} 78 | {{ snippet( 'Tag Invert', 'tag/tag-invert.html' ) }} 79 | 80 | {# Slider #} 81 | 82 | {{ snippet( 'Slider Basic', 'slider/slider-basic.html' ) }} 83 | 84 | {# Pagination #} 85 | 86 | {{ snippet( 'Pagination Basic', 'pagination/pagination-basic.html' ) }} 87 | 88 | {# Spinner #} 89 | 90 | {{ snippet( 'Spinner Basic', 'spinner/basic.html' ) }} 91 | {{ snippet( 'Spinner Block', 'spinner/block.html' ) }} 92 | 93 | {# Tree #} 94 | 95 | {{ snippet( 'Tree Basic', 'tree/tree-basic.html' ) }} 96 | 97 | {# Json Tree #} 98 | 99 | {{ snippet( 'Json Tree Basic', 'json-tree/json-tree-basic.html' ) }} 100 | 101 | {% include "layout/content_end.html" %} 102 | {% include "layout/footer.html" %} 103 | 104 | 122 | 123 | -------------------------------------------------------------------------------- /site/example.css: -------------------------------------------------------------------------------- 1 | .example-badge-block { 2 | width: 40px; 3 | height: 40px; 4 | background-color: #DDD; 5 | border-radius: 5px; 6 | } 7 | -------------------------------------------------------------------------------- /site/index.html: -------------------------------------------------------------------------------- 1 | {% extends "base.html" %} 2 | 3 | {% block styles %} 4 | {{ super() }} 5 | 6 | 7 | 8 | {% endblock %} 9 | 10 | {% block main %} 11 | 12 | {% endblock %} 13 | 14 | {% block scripts %} 15 | 16 | 17 | 18 | 23 | {% endblock %} 24 | -------------------------------------------------------------------------------- /site/layout.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengzilong/Nest/60b193de305771b985837efa7a3cf0931d750c92/site/layout.html -------------------------------------------------------------------------------- /site/layout/content_end.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /site/layout/content_start.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | -------------------------------------------------------------------------------- /site/layout/footer.html: -------------------------------------------------------------------------------- 1 |
2 | with by fengzilong 3 | 6 |
7 | -------------------------------------------------------------------------------- /site/layout/header.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 |

Nest

6 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /site/partials/badge/badge.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |
6 | 7 | -------------------------------------------------------------------------------- /site/partials/breadcrumb/breadcrumb-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Home 5 | 6 | 7 | 8 | 9 | First 10 | 11 | 12 | 13 | 14 | Second 15 | 16 | 17 | 18 | Current 19 | 20 | 21 | -------------------------------------------------------------------------------- /site/partials/button/button-basic.html: -------------------------------------------------------------------------------- 1 | Primary 2 | Success 3 | Warning 4 | Danger 5 | Normal 6 | -------------------------------------------------------------------------------- /site/partials/button/button-block.html: -------------------------------------------------------------------------------- 1 | Block Button 2 | -------------------------------------------------------------------------------- /site/partials/button/button-disabled.html: -------------------------------------------------------------------------------- 1 | Disabled 2 | -------------------------------------------------------------------------------- /site/partials/button/button-link.html: -------------------------------------------------------------------------------- 1 | Primary 2 | Success 3 | Warning 4 | Danger 5 | -------------------------------------------------------------------------------- /site/partials/button/button-loading.html: -------------------------------------------------------------------------------- 1 | Loading 2 | -------------------------------------------------------------------------------- /site/partials/button/button-outline.html: -------------------------------------------------------------------------------- 1 | Primary 2 | Success 3 | Warning 4 | Danger 5 | -------------------------------------------------------------------------------- /site/partials/button/button-size.html: -------------------------------------------------------------------------------- 1 | Small 2 | Medium 3 | Large 4 | -------------------------------------------------------------------------------- /site/partials/button/button-with-icon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Prev 4 | 5 | 6 | 7 | Next 8 | 9 | 10 | -------------------------------------------------------------------------------- /site/partials/checkbox/checkbox-basic.html: -------------------------------------------------------------------------------- 1 | 2 | Option 1 3 | Option 2 4 | Option 3 5 | 6 | -------------------------------------------------------------------------------- /site/partials/input/input-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /site/partials/json-tree/json-tree-basic.html: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /site/partials/link/link-basic.html: -------------------------------------------------------------------------------- 1 | normal 2 | success 3 | warning 4 | danger 5 | -------------------------------------------------------------------------------- /site/partials/pagination/pagination-basic.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /site/partials/progress-bar/progress-bar-basic.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 |
7 | 8 | -------------------------------------------------------------------------------- /site/partials/progress-bar/progress-bar-with-label.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 |
7 | 8 | -------------------------------------------------------------------------------- /site/partials/radio/radio-basic.html: -------------------------------------------------------------------------------- 1 | 2 | Option 1 3 | Option 2 4 | 5 | -------------------------------------------------------------------------------- /site/partials/radio/radio-button.html: -------------------------------------------------------------------------------- 1 | 2 | Option 1 3 | Option 2 4 | Option 3 5 | Option 4 6 | 7 | -------------------------------------------------------------------------------- /site/partials/rate/rate-basic.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /site/partials/slider/slider-basic.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 15 | -------------------------------------------------------------------------------- /site/partials/spinner/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /site/partials/spinner/block.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /site/partials/switch/switch-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /site/partials/switch/switch-disabled.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /site/partials/tag/tag-basic.html: -------------------------------------------------------------------------------- 1 | normal 2 | primary 3 | success 4 | warning 5 | danger 6 | -------------------------------------------------------------------------------- /site/partials/tag/tag-invert.html: -------------------------------------------------------------------------------- 1 | normal 2 | primary 3 | success 4 | warning 5 | danger 6 | -------------------------------------------------------------------------------- /site/partials/tag/tag-round.html: -------------------------------------------------------------------------------- 1 | normal 2 | primary 3 | success 4 | warning 5 | danger 6 | -------------------------------------------------------------------------------- /site/partials/tooltip/tooltip-basic.html: -------------------------------------------------------------------------------- 1 | 2 | Tooltip on left 3 | 4 | 5 | 6 | Tooltip on top 7 | 8 | 9 | 10 | Tooltip on bottom 11 | 12 | 13 | 14 | Tooltip on right 15 | 16 | -------------------------------------------------------------------------------- /site/partials/tree/tree-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /site/reset.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | html * { 6 | box-sizing: inherit; 7 | } 8 | 9 | body, ul, h1, h2, h3, h4, h5 { 10 | margin: 0; 11 | } 12 | 13 | body { 14 | font-size: 1rem; 15 | line-height: 1.5; 16 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 17 | tab-size: 32px; 18 | } 19 | 20 | button, input, textarea { 21 | outline: none; 22 | } 23 | 24 | hr { 25 | height: 1px; 26 | background-color: #ccc; 27 | margin: 20px 0; 28 | border: none; 29 | } 30 | 31 | pre { 32 | margin: 0; 33 | } 34 | 35 | pre > code { 36 | font-size: 1rem; 37 | } 38 | 39 | fieldset { 40 | border: none; 41 | padding: 0; 42 | margin: 0; 43 | } 44 | -------------------------------------------------------------------------------- /site/site.css: -------------------------------------------------------------------------------- 1 | .sans-serif { 2 | font-family: -apple-system, BlinkMacSystemFont, 3 | 'avenir next', avenir, 4 | helvetica, 'helvetica neue', 5 | Ubuntu, 6 | 'segoe ui', arial, 7 | sans-serif; 8 | } 9 | 10 | /* Monospaced Typefaces (for code) */ 11 | 12 | /* From http://cssfontstack.com */ 13 | code, .code { 14 | font-family: Consolas, 15 | monaco, 16 | monospace; 17 | } 18 | 19 | /* Sans-Serif Typefaces */ 20 | 21 | .helvetica { 22 | font-family: helvetica, 'helvetica neue', 23 | arial, 24 | sans-serif; 25 | } 26 | 27 | /* Serif Typefaces */ 28 | 29 | .georgia { 30 | font-family: georgia, 31 | serif; 32 | } 33 | 34 | .times { 35 | font-family: Times, 36 | serif; 37 | } 38 | 39 | a { 40 | color: #333; 41 | } 42 | .brand { 43 | background-color: #64B5F6; 44 | padding: 100px 0 70px; 45 | min-height: 40%; 46 | color: white; 47 | position: relative 48 | } 49 | .brand .site-name { 50 | font-size: 4rem; 51 | font-weight: 400; 52 | display: inline-block; 53 | } 54 | .copyright { 55 | font-size: 14px; 56 | color: #999; 57 | margin-top: 40px !important 58 | } 59 | .copyright a { 60 | color: #778087; 61 | } 62 | pre { 63 | overflow: auto; 64 | } 65 | .container { 66 | max-width: 620px; 67 | margin: 0 auto; 68 | padding: 0 10px; 69 | } 70 | .main { 71 | padding: 20px 0 0 0; 72 | line-height: 1.7; 73 | font-size: 1.2rem 74 | } 75 | .main p { 76 | margin: 0 0 15px 0; 77 | } 78 | .nav { 79 | position: absolute; 80 | bottom: 0 81 | } 82 | .nav .nav-list { 83 | list-style: none; 84 | padding-left: 0; 85 | overflow: hidden; 86 | } 87 | .nav .nav-item { 88 | float: left; 89 | } 90 | .nav .nav-item a { 91 | margin-right: 20px; 92 | color: white; 93 | text-decoration: none; 94 | border-bottom: 3px solid transparent; 95 | display: block; 96 | height: 40px; 97 | line-height: 40px; 98 | transition: all .3s ease; 99 | } 100 | .nav .nav-item a.active { 101 | border-color: #4780AF; 102 | } 103 | .box-header { 104 | margin-bottom: 20px; 105 | border-bottom: 1px solid #e2e2e2; 106 | padding-bottom: 10px; 107 | } 108 | .box-sub-title { 109 | font-size: 1rem; 110 | margin-bottom: 10px; 111 | } 112 | .element-inline { 113 | border: 1px solid #e2e2e2; 114 | padding: 10px; 115 | border-radius: 2px 2px 0 0; 116 | font-size: 1rem; 117 | } 118 | .example-code { 119 | margin-bottom: 20px; 120 | border: 1px solid #e2e2e2; 121 | border-top: none 122 | } 123 | .example-code pre > code { 124 | font-size: 13px; 125 | } 126 | .footer { 127 | padding: 30px 0 60px; 128 | text-align: center; 129 | } 130 | .footer strong { 131 | color: #E66D6D; 132 | } 133 | 134 | .github-corner:hover .octo-arm { 135 | animation:octocat-wave 560ms ease-in-out 136 | } 137 | @keyframes octocat-wave { 138 | 0%,100% { 139 | transform:rotate(0) 140 | } 141 | 20%,60% { 142 | transform:rotate(-25deg) 143 | } 144 | 40%,80% { 145 | transform:rotate(10deg) 146 | } 147 | } 148 | @media (max-width:500px) { 149 | .github-corner:hover .octo-arm { 150 | animation:none 151 | } 152 | .github-corner .octo-arm { 153 | animation:octocat-wave 560ms ease-in-out 154 | } 155 | } 156 | 157 | /* Override github highlight */ 158 | 159 | .hljs-tag, .hljs-name, .hljs-attribute { 160 | color: #3e3e90; 161 | } 162 | 163 | .hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { 164 | color: #317f7f; 165 | } 166 | 167 | .hljs-string, .hljs-doctag { 168 | color: #cd1a47; 169 | } 170 | -------------------------------------------------------------------------------- /src/animations.less: -------------------------------------------------------------------------------- 1 | @keyframes spin { 2 | 0%, 40%, to { 3 | transform: scaleY(.4) 4 | } 5 | 20% { 6 | transform: scaleY(1) 7 | } 8 | } 9 | 10 | :local(.spin) { 11 | animation: spin 1.2s infinite ease-in-out 12 | } 13 | -------------------------------------------------------------------------------- /src/components/alert/alert.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/alert/alert.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/alert/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "alert.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/badge/badge.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | display: inline-block; 5 | position: relative; 6 | vertical-align: middle; 7 | line-height: 1; 8 | margin-right: 16px; 9 | } 10 | 11 | :local(.count) { 12 | box-sizing: border-box; 13 | display: block; 14 | padding: 0 6px; 15 | border-radius: 10px; 16 | background-color: @badge-background-color; 17 | position: absolute; 18 | top: -10px; 19 | right: 0; 20 | color: #FFF; 21 | font-size: 12px; 22 | min-width: 20px; 23 | height: 20px; 24 | line-height: 18px; 25 | transform: translateX(50%); 26 | box-shadow: 0 0 0 1px #fff; 27 | border: solid 1px transparent; 28 | } 29 | 30 | :local(.dot) { 31 | min-width: auto; 32 | width: 10px; 33 | height: 10px; 34 | padding: 0; 35 | top: -5px; 36 | } 37 | -------------------------------------------------------------------------------- /src/components/badge/badge.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | { !countStr || opts.dot === true ? '' : countStr } 5 | 6 | 7 | 40 | 41 | -------------------------------------------------------------------------------- /src/components/badge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "badge.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/breadcrumb-item/breadcrumb-item.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-breadcrumb-item { 4 | font-size: 13px; 5 | color: #666; 6 | 7 | &:last-child { 8 | font-weight: bold; 9 | 10 | :local(.sep) { 11 | display: none; 12 | } 13 | } 14 | 15 | a { 16 | color: #666; 17 | text-decoration: none; 18 | } 19 | } 20 | 21 | :local(.sep) { 22 | display: inline-block; 23 | padding: 0 4px; 24 | color: #C5C5C5; 25 | } 26 | -------------------------------------------------------------------------------- /src/components/breadcrumb-item/breadcrumb-item.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | { sep } 4 | 5 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/breadcrumb-item/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "breadcrumb-item.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | @import "../../helper.less"; 3 | 4 | ui-breadcrumb { 5 | display: inline-block; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/breadcrumb/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "breadcrumb.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/button/button.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | .button-color(@color; @background; @border){ 4 | color: @color; 5 | background-color: @background; 6 | border: solid 1px @border; 7 | } 8 | .button-style(@color; @background; @border){ 9 | .button-color(@color; @background; @border); 10 | 11 | &:hover { 12 | .button-color(@color; tint(@background, 20%); tint(@border, 20%)); 13 | } 14 | 15 | &:active { 16 | .button-color(@color; shade(@background, 6%); shade(@border, 6%)); 17 | text-shadow: 0 0 1px @color; 18 | } 19 | 20 | &:focus { 21 | box-shadow: 0 0 0 3px tint(@background, 85%); 22 | } 23 | } 24 | .button-outline-style(@color; @background; @border){ 25 | .button-color(@color; @background; @border); 26 | 27 | &:hover { 28 | .button-color(@color; tint(@color, 95%); tint(@border, 20%)); 29 | } 30 | 31 | &:active { 32 | .button-color(@color; tint(@color, 85%); @border); 33 | } 34 | 35 | &:focus { 36 | box-shadow: 0 0 0 3px transparent; 37 | text-shadow: none; 38 | } 39 | } 40 | 41 | .button-link-style(@color; @background; @border) { 42 | .button-color(@color; @background; @border); 43 | 44 | &:active { 45 | .button-color(shade(@color, 10%); @background; @border); 46 | } 47 | 48 | &:focus { 49 | box-shadow: 0 0 0 3px transparent; 50 | text-shadow: none; 51 | } 52 | } 53 | 54 | ui-button { 55 | display: inline-block; 56 | } 57 | 58 | /* Base */ 59 | 60 | :local(.base) { 61 | display: inline-block; 62 | box-sizing: border-box; 63 | border-radius: 4px; 64 | text-align: center; 65 | cursor: pointer; 66 | outline: none; 67 | user-select: none; 68 | white-space: nowrap; 69 | transition: all .15s cubic-bezier(.645,.045,.355,1); 70 | transform: translate3d(0,0,0); 71 | box-shadow: 0 0 0 3px transparent; 72 | } 73 | 74 | :local(.base) > ui-icon { 75 | font-size: 12px; 76 | } 77 | 78 | /* Color */ 79 | 80 | :local(.basic) { 81 | .button-color(#666; #f4f4f4; #d9d9d9); 82 | &:hover { 83 | .button-color(@primary-color; #FFF; @primary-color); 84 | } 85 | &:active { 86 | .button-color(shade(@primary-color, 15%); #FFF; shade(@primary-color, 15%)); 87 | } 88 | } 89 | 90 | :local(.primary) { 91 | .button-style(#FFF; @primary-color; @primary-color); 92 | } 93 | 94 | :local(.success) { 95 | .button-style(#FFF; @success-color; @success-color); 96 | } 97 | 98 | :local(.warning) { 99 | .button-style(#666; @warning-color; @warning-color); 100 | } 101 | 102 | :local(.danger) { 103 | .button-style(#FFF; @danger-color; @danger-color); 104 | } 105 | 106 | /* Outline */ 107 | 108 | :local(.primary.outline) { 109 | .button-outline-style(@primary-color; #FFF; @primary-color); 110 | } 111 | 112 | :local(.success.outline) { 113 | .button-outline-style(@success-color; #FFF; @success-color); 114 | } 115 | 116 | :local(.warning.outline) { 117 | .button-outline-style(@warning-color; #FFF; @warning-color); 118 | } 119 | 120 | :local(.danger.outline) { 121 | .button-outline-style(@danger-color; #FFF; @danger-color); 122 | } 123 | 124 | /* Link */ 125 | 126 | :local(.primary.link) { 127 | .button-link-style(@primary-color; transparent; transparent); 128 | } 129 | 130 | :local(.success.link) { 131 | .button-link-style(@success-color; transparent; transparent); 132 | } 133 | 134 | :local(.warning.link) { 135 | .button-link-style(@warning-color; transparent; transparent); 136 | } 137 | 138 | :local(.danger.link) { 139 | .button-link-style(@danger-color; transparent; transparent); 140 | } 141 | 142 | /* Size */ 143 | 144 | :local(.sm) { 145 | font-size: 11px; 146 | padding: 0 11px; 147 | height: 30px; 148 | } 149 | 150 | :local(.md) { 151 | font-size: 13px; 152 | padding: 0 15px; 153 | height: 32px; 154 | } 155 | 156 | :local(.lg) { 157 | font-size: 15px; 158 | padding: 0 15px; 159 | height: 37px; 160 | } 161 | 162 | /* Disabled */ 163 | 164 | :local(.disabled) { 165 | cursor: @disabled-cursor; 166 | .button-color(@disabled-text-color; #f4f4f4; #d9d9d9); 167 | 168 | &:hover { 169 | .button-color(@disabled-text-color; #f4f4f4; #d9d9d9); 170 | } 171 | 172 | &:active { 173 | .button-color(@disabled-text-color; #f4f4f4; #d9d9d9); 174 | } 175 | 176 | &:focus { 177 | box-shadow: none; 178 | } 179 | } 180 | 181 | /* */ 182 | 183 | @keyframes loadingCircle { 184 | 0% { 185 | transform-origin: 50% 50%; 186 | transform: rotate(0deg); 187 | } 188 | 189 | 100% { 190 | transform-origin: 50% 50%; 191 | transform: rotate(360deg); 192 | } 193 | } 194 | 195 | :local(.loading) { 196 | animation: loadingCircle .9s infinite linear; 197 | } 198 | 199 | /* block */ 200 | 201 | ui-button[block] { 202 | width: 100%; 203 | 204 | :local(.base) { 205 | width: 100%; 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /src/components/button/button.tag: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 42 | 43 | -------------------------------------------------------------------------------- /src/components/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "button.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/checkbox-group/checkbox-group.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-checkbox-group { 4 | ui-checkbox { 5 | margin-right: 8px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/checkbox-group/checkbox-group.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/checkbox-group/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "checkbox-group.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-checkbox { 4 | display: inline-block; 5 | cursor: pointer; 6 | color: #666; 7 | user-select: none; 8 | } 9 | 10 | :local(.base) { 11 | box-sizing: border-box; 12 | position: relative; 13 | display: inline-block; 14 | vertical-align: middle; 15 | width: 16px; 16 | height: 16px; 17 | border-radius: 3px; 18 | border: solid 1px #DDD; 19 | 20 | &::after { 21 | content: ""; 22 | position: absolute; 23 | transition: all .2s cubic-bezier(0.6, -0.3, 0.5, 1.41); 24 | } 25 | 26 | &:local(.unchecked) { 27 | &::after { 28 | top: 1px; 29 | left: 4px; 30 | width: 4px; 31 | height: 7px; 32 | border: 2px solid #FFF; 33 | border-top: none; 34 | border-left: none; 35 | transform: rotate(15deg) scale(0); 36 | } 37 | } 38 | 39 | &:local(.checked) { 40 | background-color: @primary-color; 41 | border: solid 1px @primary-color; 42 | 43 | &::after { 44 | top: 1px; 45 | left: 4px; 46 | width: 4px; 47 | height: 7px; 48 | border: 2px solid #FFF; 49 | border-top: none; 50 | border-left: none; 51 | transform: rotate(45deg) scale(1); 52 | } 53 | } 54 | 55 | &:local(.halfchecked) { 56 | background-color: @primary-color; 57 | border: solid 1px @primary-color; 58 | 59 | &::after { 60 | top: 6px; 61 | left: 3px; 62 | width: 8px; 63 | height: 0; 64 | border: 1px solid #FFF; 65 | } 66 | } 67 | 68 | & + span { 69 | display: inline-block; 70 | font-size: 13px; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "checkbox.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/col/col.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/col/col.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/col/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "col.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/collapse-pane/collapse-pane.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | @import "../../helper.less"; 3 | 4 | ui-collapse-pane { 5 | display: block; 6 | } 7 | 8 | ui-collapse > ui-collapse-pane:not(:last-child) { 9 | border-bottom: solid 1px @primary-color; 10 | } 11 | 12 | :local(.title) { 13 | background-color: fade(@primary-color, 15%); 14 | color: #FFF; 15 | cursor: pointer; 16 | font-size: 14px; 17 | } 18 | 19 | :local(.title-inner) { 20 | display: inline-block; 21 | padding: 10px; 22 | background-color: @primary-color; 23 | } 24 | 25 | :local(.content) { 26 | box-sizing: border-box; 27 | background-color: #FFF; 28 | transition: height .2s cubic-bezier(.215,.61,.355,1); 29 | } 30 | :local(.content-box) { 31 | padding: 10px; 32 | } 33 | :local(.content-inactive) { 34 | height: 0; 35 | } 36 | :local(.content-active) { 37 | height: auto; 38 | } 39 | -------------------------------------------------------------------------------- /src/components/collapse-pane/collapse-pane.tag: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 | { opts.title } 6 |
7 |
8 |
9 |
10 | 11 |
12 |
13 | 14 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/collapse-pane/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "collapse-pane.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/collapse/collapse.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | 4 | ui-collapse { 5 | display: block; 6 | border: solid 1px @primary-color; 7 | border-radius: 3px; 8 | overflow: hidden; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/collapse/collapse.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/collapse/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "collapse.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/color-picker/color-picker.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/color-picker/color-picker.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/color-picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "color-picker.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/context-menu/context-menu.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/context-menu/context-menu.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/context-menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "context-menu.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/date-picker/date-picker.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/date-picker/date-picker.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/date-picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "date-picker.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/dropdown/dropdown.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/dropdown/dropdown.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/dropdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dropdown.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/grid/grid.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/grid/grid.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "grid.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/icon/icon.less: -------------------------------------------------------------------------------- 1 | ui-icon { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/icon/icon.tag: -------------------------------------------------------------------------------- 1 | 2 | { icon } 3 | 4 | 37 | 38 | -------------------------------------------------------------------------------- /src/components/icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "icon.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/input-nao/input-nao.less: -------------------------------------------------------------------------------- 1 | ui-input-nao { 2 | display: inline-block; 3 | } 4 | 5 | .input { 6 | position: relative; 7 | display: inline-block; 8 | min-width: 170px; 9 | width: calc(100% - 2em); 10 | } 11 | 12 | .input__field { 13 | position: relative; 14 | display: block; 15 | float: right; 16 | width: 60%; 17 | border: none; 18 | border-radius: 0; 19 | background: #f0f0f0; 20 | color: #666; 21 | font-weight: 400; 22 | -webkit-appearance: none; /* for box shadows to show on iOS */ 23 | text-overflow: ellipsis; 24 | } 25 | 26 | .input__field:focus { 27 | outline: none; 28 | } 29 | 30 | .input__label { 31 | display: inline-block; 32 | float: right; 33 | padding: 0 1em; 34 | width: 40%; 35 | color: #696969; 36 | font-weight: bold; 37 | font-size: 70.25%; 38 | -webkit-font-smoothing: antialiased; 39 | -moz-osx-font-smoothing: grayscale; 40 | -webkit-touch-callout: none; 41 | user-select: none; 42 | } 43 | 44 | .input__label-content { 45 | position: relative; 46 | display: block; 47 | width: 100%; 48 | } 49 | 50 | .graphic { 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | fill: none; 55 | } 56 | 57 | .icon { 58 | color: #ddd; 59 | font-size: 150%; 60 | } 61 | 62 | 63 | 64 | 65 | .input--nao { 66 | overflow: hidden; 67 | padding-top: 1em; 68 | } 69 | 70 | .input__field--nao { 71 | width: 100%; 72 | background: transparent; 73 | color: #666; 74 | font-size: 1.25em; 75 | padding: .2em 0; 76 | } 77 | 78 | .input__label--nao { 79 | position: absolute; 80 | top: 1.5em; 81 | font-size: 0.85em; 82 | left: 0; 83 | display: block; 84 | width: 100%; 85 | text-align: left; 86 | padding: 0em; 87 | pointer-events: none; 88 | transform-origin: 0 0; 89 | transition: transform 0.2s 0.15s, color 1s; 90 | transition-timing-function: ease-out; 91 | } 92 | 93 | .graphic--nao { 94 | stroke: #92989e; 95 | pointer-events: none; 96 | transition: transform 0.7s, stroke 0.7s; 97 | transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 98 | } 99 | 100 | .input__field--nao:focus + .input__label--nao, 101 | .input--filled .input__label--nao { 102 | color: #333; 103 | transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1); 104 | } 105 | 106 | .input__field--nao:focus ~ .graphic--nao, 107 | .input--filled .graphic--nao { 108 | stroke: #333; 109 | transform: translate3d(-66.6%, 0, 0); 110 | } 111 | -------------------------------------------------------------------------------- /src/components/input-nao/input-nao.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/input-nao/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "input-nao.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/input/input.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-input { 4 | display: inline-block; 5 | } 6 | 7 | :local(.base) { 8 | width: 100%; 9 | outline: none; 10 | border-radius: 4px; 11 | border: solid 1px #DDD; 12 | color: #666; 13 | transition: all .3s ease; 14 | padding: 6px 8px; 15 | box-sizing: border-box; 16 | height: 32px; 17 | padding: 6px 10px; 18 | font-size: 13px; 19 | 20 | &:hover { 21 | border: solid 1px #C0C0C0; 22 | } 23 | 24 | &:focus { 25 | border: solid 1px @primary-color; 26 | box-shadow: 0 0 0 3px tint(@primary-color, 90%); 27 | } 28 | } 29 | 30 | /* Size */ 31 | 32 | :local(.sm) { 33 | height: 30px; 34 | padding: 5px 7px; 35 | font-size: 12px; 36 | } 37 | 38 | :local(.lg) { 39 | height: 37px; 40 | padding: 8px 10px; 41 | font-size: 14px; 42 | } 43 | 44 | :local(.disabled) { 45 | cursor: @disabled-cursor; 46 | background-color: @input-disabled-background-color; 47 | 48 | &:hover { 49 | border: solid 1px #DDD; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/input/input.tag: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "input.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/json-tree/json-tree.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | @json-tree-number-color: #3F51B5; 4 | @json-tree-string-color: #CF4643; 5 | @json-tree-boolean-color: #3F51B5; 6 | @json-tree-key-color: #9C27B0; 7 | 8 | :local(.base) { 9 | 10 | } 11 | 12 | .title, .caret { 13 | cursor: pointer; 14 | display: flex; 15 | align-items: center; 16 | } 17 | 18 | .caret { 19 | justify-content: center; 20 | width: 25px; 21 | color: #58666e; 22 | text-align: center; 23 | } 24 | 25 | .key { 26 | color: @json-tree-key-color; 27 | } 28 | 29 | .string { 30 | color: @json-tree-string-color; 31 | } 32 | 33 | .number { 34 | color: @json-tree-number-color; 35 | } 36 | 37 | .boolean { 38 | color: @json-tree-boolean-color; 39 | } 40 | 41 | .object { 42 | color: #333; 43 | } 44 | 45 | .children { 46 | padding-left: 10px; 47 | display: none; 48 | } 49 | 50 | .node.open > .children { 51 | display: block; 52 | } 53 | 54 | .caret-right { 55 | display: block; 56 | } 57 | .caret-down { 58 | display: none; 59 | } 60 | .node.open > .title > .caret-right { 61 | display: none; 62 | } 63 | .node.open > .title > .caret-down { 64 | display: block; 65 | } 66 | -------------------------------------------------------------------------------- /src/components/json-tree/json-tree.tag: -------------------------------------------------------------------------------- 1 | 2 | 121 | 122 | -------------------------------------------------------------------------------- /src/components/json-tree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "json-tree.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/link/link.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | .link-style( @color ) { 4 | color: @color; 5 | 6 | &::after { 7 | background-color: @color; 8 | } 9 | 10 | &:active { 11 | color: shade(@color, 15%); 12 | } 13 | 14 | &:active::after { 15 | background-color: shade(@color, 15%); 16 | } 17 | } 18 | 19 | ui-link { 20 | display: inline-block; 21 | } 22 | 23 | :local(.base) { 24 | position: relative; 25 | display: inline-block; 26 | text-decoration: none; 27 | 28 | &::after { 29 | content: ""; 30 | position: absolute; 31 | left: 0; 32 | bottom: 2px; 33 | width: 100%; 34 | height: 1px; 35 | background-color: @primary-color; 36 | transition: all ease 0.2s; 37 | transform: scaleX(0); 38 | } 39 | 40 | &:hover::after { 41 | transform: scaleX(1); 42 | } 43 | 44 | &:active { 45 | color: shade(@primary-color, 15%); 46 | } 47 | 48 | &:active::after { 49 | background-color: shade(@primary-color, 15%); 50 | } 51 | } 52 | 53 | :local(.primary) { 54 | .link-style( @primary-color ); 55 | } 56 | 57 | :local(.success) { 58 | .link-style( @success-color ); 59 | } 60 | 61 | :local(.warning) { 62 | .link-style( @warning-color ); 63 | } 64 | 65 | :local(.danger) { 66 | .link-style( @danger-color ); 67 | } 68 | -------------------------------------------------------------------------------- /src/components/link/link.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/link/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "link.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/menu-item/menu-item.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-menu-item { 4 | display: block; 5 | white-space: nowrap; 6 | border-bottom: solid 1px transparent; 7 | transition: all ease .3s; 8 | color: #666; 9 | user-select: none; 10 | } 11 | 12 | ui-menu[horizontal] { 13 | & > ui-menu-item { 14 | float: left; 15 | position: relative; 16 | top: 1px; 17 | } 18 | 19 | & > ui-menu-item:hover { 20 | color: @primary-color; 21 | border-bottom: solid 1px @primary-color; 22 | } 23 | 24 | & > ui-submenu ui-menu-item { 25 | line-height: 40px; 26 | } 27 | 28 | & > ui-submenu ui-menu-item:hover { 29 | background-color: tint(@primary-color, 90%); 30 | } 31 | } 32 | 33 | :local(.base) { 34 | padding: 0 20px; 35 | } 36 | -------------------------------------------------------------------------------- /src/components/menu-item/menu-item.tag: -------------------------------------------------------------------------------- 1 | 2 |
3 | { opts.text } 4 |
5 | 6 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/menu-item/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "menu-item.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/menu/menu.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-menu { 4 | display: block; 5 | cursor: pointer; 6 | background-color: #FFF; 7 | font-size: 14px; 8 | } 9 | 10 | ui-menu[horizontal] { 11 | border-bottom: solid 1px #DDD; 12 | line-height: 45px; 13 | 14 | &::after { 15 | display: block; 16 | content: ""; 17 | height: 0; 18 | clear: both; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/menu/menu.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "menu.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/message/message.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-message { 4 | position: fixed; 5 | left: 50%; 6 | transform: translate3d(-50%,0,0); 7 | top: 40px; 8 | border-radius: 5px; 9 | box-shadow: 0 0 3px rgba(0,0,0,.3); 10 | padding: 10px; 11 | font-size: 12px; 12 | display: flex; 13 | align-items: center; 14 | background-color: #FFF; 15 | z-index: 1; 16 | } 17 | 18 | :local(.icon) { 19 | color: @primary-color; 20 | font-size: 15px; 21 | display: block; 22 | margin-right: 5px; 23 | } 24 | -------------------------------------------------------------------------------- /src/components/message/message.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 |
{ opts.content }
4 | 5 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/message/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "message.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/modal/modal.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/modal/modal.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/modal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "modal.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/number-input/number-input.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/number-input/number-input.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/number-input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "number-input.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/pagination/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "pagination.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/pagination/pagination.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-pagination, [data-is="ui-pagination"] { 4 | display: inline-block; 5 | user-select: none; 6 | 7 | ui-button:not([primary]) { 8 | button { 9 | transition: none!important; 10 | } 11 | } 12 | } 13 | 14 | :local(.more) { 15 | color: #999; 16 | margin: 0 5px; 17 | } 18 | -------------------------------------------------------------------------------- /src/components/pagination/pagination.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | { parent.opts.prevText || 'prev' } 4 | 5 | 6 | 7 | { parent.min } 8 | 9 | ... 10 | 11 | { parent.current - 2 } 12 | 13 | 14 | { parent.current - 1 } 15 | 16 | 17 | 18 | 19 | { v } 20 | 21 | 22 | 23 | { parent.current || parent.min } 24 | 25 | 26 | 27 | { v } 28 | 29 | 30 | 31 | 32 | { parent.current + 1 } 33 | 34 | 35 | { parent.current + 2 } 36 | 37 | ... 38 | 39 | { parent.max } 40 | 41 | 42 | 43 | { parent.opts.nextText || 'next' } 44 | 45 | 46 | 97 | 98 | -------------------------------------------------------------------------------- /src/components/popover/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "popover.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/popover/popover.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-popover { 4 | position: relative; 5 | } 6 | 7 | :local(.popover) { 8 | position: absolute; 9 | padding: 5px; 10 | left: 50%; 11 | transform: translate3d(-50%,0,0); 12 | min-width: 100px; 13 | text-align: center; 14 | 15 | &::after { 16 | content: ""; 17 | display: block; 18 | 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/popover/popover.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | hover 6 |
7 | 8 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/progress-bar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "progress-bar.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/progress-bar/progress-bar.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-progress-bar { 4 | :local(.progressbar) { 5 | display: flex; 6 | align-items: center; 7 | } 8 | } 9 | 10 | ui-progress-bar { 11 | :local(.progressbar) { 12 | height: 8px; 13 | } 14 | } 15 | 16 | ui-progress-bar[lg] { 17 | :local(.progressbar) { 18 | height: 12px; 19 | } 20 | } 21 | 22 | ui-progress-bar[sm] { 23 | :local(.progressbar) { 24 | height: 5px; 25 | } 26 | } 27 | 28 | :local(.outter) { 29 | height: 100%; 30 | border-radius: 10px; 31 | background-color: #DDD; 32 | overflow: hidden; 33 | flex: 1; 34 | } 35 | 36 | :local(.inner) { 37 | height: 100%; 38 | transition: width ease 1s; 39 | border-radius: 10px; 40 | overflow: hidden; 41 | 42 | &::after { 43 | content: ""; 44 | display: block; 45 | height: 100%; 46 | width: 100%; 47 | background-color: #FFF; 48 | animation: progress-bar-active 2s ease infinite; 49 | } 50 | } 51 | 52 | :local(.label) { 53 | margin-left: 10px; 54 | font-size: 12px; 55 | color: #999; 56 | } 57 | 58 | :local(.primary) { 59 | background-color: @primary-color; 60 | } 61 | 62 | :local(.success) { 63 | background-color: @success-color; 64 | } 65 | 66 | :local(.warning) { 67 | background-color: @warning-color; 68 | } 69 | 70 | :local(.danger) { 71 | background-color: @danger-color; 72 | } 73 | 74 | @keyframes progress-bar-active { 75 | 0% { 76 | opacity: .3; 77 | width: 0; 78 | } 79 | 80 | 100% { 81 | opacity: 0; 82 | width: 100%; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/components/progress-bar/progress-bar.tag: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |
7 | { this.opts.value }% 8 |
9 |
10 | 11 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/radio-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "radio-button.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/radio-button/radio-button.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-radio-button { 4 | display: inline-block; 5 | } 6 | 7 | :local(.base) { 8 | display: block; 9 | box-sizing: border-box; 10 | padding: 0 12px; 11 | height: 32px; 12 | line-height: 30px; 13 | border: solid 1px #D9D9D9; 14 | cursor: pointer; 15 | font-size: 14px; 16 | color: #666; 17 | 18 | &:hover { 19 | color: @primary-color; 20 | } 21 | } 22 | 23 | ui-radio-group ui-radio-button { 24 | display: block; 25 | float: left; 26 | 27 | :local(.base) { 28 | border-left: none; 29 | } 30 | } 31 | 32 | ui-radio-button:first-child :local(.base) { 33 | border-top-left-radius: 5px; 34 | border-bottom-left-radius: 5px; 35 | border-left: solid 1px #D9D9D9; 36 | } 37 | 38 | ui-radio-button:last-child :local(.base) { 39 | border-top-right-radius: 5px; 40 | border-bottom-right-radius: 5px; 41 | } 42 | 43 | :local(.checked) { 44 | background: #fff; 45 | border-color: @primary-color; 46 | color: @primary-color; 47 | box-shadow: -1px 0 0 0 @primary-color; 48 | } 49 | 50 | ui-radio-button:first-child :local(.checked) { 51 | border-color: @primary-color; 52 | box-shadow: none!important; 53 | } 54 | 55 | :local(.checked):hover { 56 | border-color: tint(@primary-color, 10%); 57 | box-shadow: -1px 0 0 0 tint(@primary-color, 10%); 58 | color: tint(@primary-color, 10%); 59 | } 60 | 61 | :local(.checked):active { 62 | border-color: shade(@primary-color, 10%); 63 | box-shadow: -1px 0 0 0 shade(@primary-color, 10%); 64 | color: shade(@primary-color, 10%); 65 | } 66 | -------------------------------------------------------------------------------- /src/components/radio-button/radio-button.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/radio-group/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "radio-group.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/radio-group/radio-group.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | @import "../../helper.less"; 3 | 4 | ui-radio-group { 5 | display: inline-block; 6 | .clearfix(); 7 | 8 | ui-radio { 9 | margin-right: 8px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/radio-group/radio-group.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 60 | 61 | -------------------------------------------------------------------------------- /src/components/radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "radio.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/radio/radio.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-radio { 4 | cursor: pointer; 5 | color: #666; 6 | user-select: none; 7 | } 8 | 9 | :local(.base) { 10 | box-sizing: border-box; 11 | position: relative; 12 | display: inline-block; 13 | width: 16px; 14 | height: 16px; 15 | border-radius: 50%; 16 | vertical-align: middle; 17 | border: solid 1px #DDD; 18 | } 19 | 20 | :local(.base::after) { 21 | content: ""; 22 | position: absolute; 23 | width: 8px; 24 | height: 8px; 25 | left: 50%; 26 | top: 50%; 27 | border-radius: 50%; 28 | transform: translate3d(-50%,-50%,0) scale(1.9); 29 | transition: transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); 30 | } 31 | 32 | :local(.base.checked) { 33 | background-color: @primary-color; 34 | border: solid 1px @primary-color; 35 | } 36 | 37 | :local(.base.checked::after) { 38 | background-color: #FFF; 39 | transform: translate3d(-50%,-50%,0) scale(1); 40 | } 41 | 42 | :local(.base) + span { 43 | font-size: 14px; 44 | } 45 | -------------------------------------------------------------------------------- /src/components/radio/radio.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/rate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "rate.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/rate/rate.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-rate { 4 | font-size: 0; 5 | } 6 | 7 | @rate-active-color: @warning-color; 8 | @rate-inactive-color: #DDD; 9 | 10 | :local(.wrapper) { 11 | display: inline-block; 12 | } 13 | 14 | :local(.base) { 15 | position: relative; 16 | display: inline-block; 17 | font-size: 18px; 18 | margin-right: 4px; 19 | transition: transform .4s ease; 20 | cursor: pointer; 21 | 22 | &:hover { 23 | transform: scale(1.1); 24 | } 25 | 26 | &:local(.disabled) { 27 | transform: initial; 28 | } 29 | 30 | &::before { 31 | display: block; 32 | content: '\e60c'; 33 | } 34 | 35 | :local(.star) { 36 | display: inline-block; 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | width: 50%; 41 | overflow: hidden; 42 | pointer-events: none; 43 | 44 | &::before { 45 | display: block; 46 | content: '\e60c'; 47 | color: transparent; 48 | } 49 | } 50 | 51 | &:local(.full) { 52 | &::before { 53 | color: @rate-active-color; 54 | } 55 | 56 | :local(.star) { 57 | 58 | } 59 | } 60 | 61 | &:local(.half) { 62 | &::before { 63 | color: @rate-inactive-color; 64 | } 65 | 66 | :local(.star) { 67 | &::before { 68 | color: @rate-active-color; 69 | } 70 | } 71 | } 72 | 73 | &:local(.zero) { 74 | &::before { 75 | color: @rate-inactive-color; 76 | } 77 | 78 | :local(.star) { 79 | 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/components/rate/rate.tag: -------------------------------------------------------------------------------- 1 | 2 |
3 | 8 | 9 | 10 |
11 | 12 | 85 | 86 | -------------------------------------------------------------------------------- /src/components/renderer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "renderer.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/renderer/renderer.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/renderer/renderer.tag: -------------------------------------------------------------------------------- 1 | 2 | 26 | 27 | -------------------------------------------------------------------------------- /src/components/row/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "row.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/row/row.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/row/row.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/slider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "slider.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/slider/slider.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | @handle-size: 10px; 4 | @handle-hover-size: 14px; 5 | @handle-transition-duration: .3s; 6 | 7 | :local(.base) { 8 | position: relative; 9 | 10 | ui-tooltip { 11 | position: absolute; 12 | } 13 | } 14 | 15 | :local(.handle) { 16 | position: absolute; 17 | width: @handle-size; 18 | height: @handle-size; 19 | top: 50%; 20 | border: solid 1px @primary-color; 21 | background-color: #FFF; 22 | margin-left: -( @handle-size / 2 ); 23 | transform: translate3d(0, -50%, 0); 24 | border-radius: 50%; 25 | transition: width ease @handle-transition-duration, height ease @handle-transition-duration, transform ease @handle-transition-duration; 26 | transform-origin: 50% 50%; 27 | 28 | &:hover { 29 | width: @handle-hover-size; 30 | height: @handle-hover-size; 31 | transform: translate3d(-( @handle-hover-size - @handle-size ) / 2, -50%, 0); 32 | } 33 | } 34 | 35 | :local(.tracker) { 36 | background-color: #e6e6e6; 37 | height: 4px; 38 | border-radius: 10px; 39 | margin: 10px 0; 40 | overflow: hidden; 41 | 42 | :local(.tracker-inner) { 43 | height: 100%; 44 | background-color: tint(@primary-color, 45%); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/slider/slider.tag: -------------------------------------------------------------------------------- 1 | 2 |
3 |
11 | 12 |
13 |
14 |
15 | 16 | 24 |
25 | 26 | 125 | 126 | -------------------------------------------------------------------------------- /src/components/spinner/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "spinner.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/spinner/spinner.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-spinner { 4 | display: inline-block; 5 | vertical-align: middle; 6 | text-align: center; 7 | font-size: 0; 8 | } 9 | 10 | ui-spinner[block] { 11 | display: block; 12 | } 13 | 14 | :local(.rect) { 15 | composes: spin from '../../animations.less'; 16 | display: inline-block; 17 | background-color: #DDD; 18 | vertical-align: middle; 19 | } 20 | 21 | :local(.rect2) { 22 | animation-delay: -1.1s; 23 | } 24 | 25 | :local(.rect3) { 26 | animation-delay: -1s; 27 | } 28 | 29 | ui-spinner[sm] :local(.rect) { 30 | width: 2px; 31 | height: 10px; 32 | 33 | &:not(:last-child) { 34 | margin-right: 2px; 35 | } 36 | } 37 | 38 | ui-spinner :local(.rect) { 39 | width: 3px; 40 | height: 21px; 41 | 42 | &:not(:last-child) { 43 | margin-right: 3px; 44 | } 45 | } 46 | 47 | ui-spinner[lg] :local(.rect) { 48 | width: 4px; 49 | height: 26px; 50 | 51 | &:not(:last-child) { 52 | margin-right: 4px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/spinner/spinner.tag: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/step/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "step.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/step/step.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/step/step.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/steps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ui-steps.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/steps/steps.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/steps/steps.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/submenu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "submenu.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/submenu/submenu.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-submenu { 4 | display: block; 5 | position: relative; 6 | top: 1px; 7 | padding: 0 20px; 8 | color: #666; 9 | } 10 | 11 | ui-menu[horizontal] { 12 | & > ui-submenu { 13 | float: left; 14 | } 15 | 16 | & > ui-submenu:hover { 17 | color: @primary-color; 18 | border-bottom: solid 1px @primary-color; 19 | } 20 | 21 | & > ui-submenu:hover :local(.items) { 22 | display: block; 23 | } 24 | } 25 | 26 | :local(.items) { 27 | display: none; 28 | position: absolute; 29 | left: 0; 30 | margin-top: 5px; 31 | border: solid 1px #DDD; 32 | border-radius: 3px; 33 | overflow: hidden; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/submenu/submenu.tag: -------------------------------------------------------------------------------- 1 | 2 | { opts.text } 3 | 4 |
5 | 6 |
7 | 8 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/switch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "switch.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/switch/switch.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | .switch-size(@width; @height; @distance; @border-radius) { 4 | width: @width; 5 | height: @height; 6 | border-radius: @border-radius; 7 | 8 | &::after { 9 | top: @distance; 10 | left: @distance; 11 | width: @height - @distance * 2; 12 | height: @height - @distance * 2; 13 | } 14 | 15 | &:local(.off)::after { 16 | top: @distance; 17 | left: @distance; 18 | } 19 | 20 | &:local(.on)::after { 21 | top: @distance; 22 | left: @width - @height + @distance; 23 | } 24 | } 25 | 26 | ui-switch { 27 | display: inline-block; 28 | color: #FFF; 29 | vertical-align: middle; 30 | } 31 | 32 | :local(.base) { 33 | position: relative; 34 | background-color: #DDD; 35 | background-color: @primary-color; 36 | padding: 0 5px; 37 | box-sizing: border-box; 38 | user-select: none; 39 | cursor: pointer; 40 | transition: background-color .3s cubic-bezier(.78,.14,.15,.86); 41 | .switch-size(49px; 27px; 2px; 15px); 42 | 43 | &::after { 44 | position: absolute; 45 | content: ''; 46 | display: block; 47 | border-radius: 50%; 48 | background-color: #FFF; 49 | transition: left .3s cubic-bezier(.78,.14,.15,.86), background-color .3s cubic-bezier(.78,.14,.15,.86); 50 | } 51 | } 52 | 53 | :local(.off) { 54 | text-align: right; 55 | background-color: #DDD; 56 | } 57 | 58 | :local(.on) { 59 | text-align: left; 60 | background-color: @primary-color; 61 | } 62 | 63 | :local(.sm) { 64 | .switch-size(40px; 22px; 2px; 15px); 65 | } 66 | 67 | :local(.lg) { 68 | .switch-size(54px; 29px; 3px; 16px); 69 | } 70 | 71 | :local(.disabled) { 72 | cursor: not-allowed; 73 | background-color: #EDEDED; 74 | 75 | &::after { 76 | background-color: #DDD; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/components/switch/switch.tag: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 59 | 60 | -------------------------------------------------------------------------------- /src/components/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "table.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/table/table.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/table/table.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/tabs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "tabs.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/tabs/tabs.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/tabs/tabs.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/tag/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "tag.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/tag/tag.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | @tag-basic-background-color: #DCDCDC; 4 | @tag-basic-color: #666; 5 | 6 | .tag-color(@color; @background){ 7 | color: @color; 8 | background-color: @background; 9 | } 10 | .tag-style(@color; @background) { 11 | .tag-color(@color; @background); 12 | 13 | &:hover { 14 | color: @color; 15 | background-color: shade(@background, 10%); 16 | } 17 | } 18 | 19 | ui-tag, [data-is="ui-tag"] { 20 | display: inline-block; 21 | padding: 0 9px; 22 | font-size: 11px; 23 | border-radius: 3px; 24 | cursor: pointer; 25 | user-select: none; 26 | height: 22px; 27 | line-height: 22px; 28 | 29 | .tag-style(@tag-basic-color, @tag-basic-background-color); 30 | 31 | &[primary] { 32 | .tag-style(#FFF, @primary-color); 33 | } 34 | 35 | &[success] { 36 | .tag-style(#FFF, @success-color); 37 | } 38 | 39 | &[warning] { 40 | .tag-style(#666, @warning-color); 41 | } 42 | 43 | &[danger] { 44 | .tag-style(#FFF, @danger-color); 45 | } 46 | 47 | /* round */ 48 | 49 | &[round], &[rounded] { 50 | border-radius: 11px; 51 | } 52 | 53 | /* invert */ 54 | /* no-hover-effect */ 55 | 56 | &[invert] { 57 | .tag-color(@tag-basic-color, #FFF); 58 | } 59 | 60 | &[primary][invert] { 61 | .tag-color(@primary-color, #FFF); 62 | } 63 | 64 | &[success][invert] { 65 | .tag-color(@success-color, #FFF); 66 | } 67 | 68 | &[warning][invert] { 69 | .tag-color(@warning-color, #FFF); 70 | } 71 | 72 | &[danger][invert] { 73 | .tag-color(@danger-color, #FFF); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/components/tag/tag.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/time-picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "time-picker.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/time-picker/time-picker.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/time-picker/time-picker.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/tooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "tooltip.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/tooltip/tooltip.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.target) { 4 | display: inline-block; 5 | } 6 | 7 | :local(.base) { 8 | position: absolute; 9 | font-size: @tooltip-font-size; 10 | } 11 | 12 | :local(.arrow) { 13 | position: absolute; 14 | width: 0; 15 | height: 0; 16 | border-color: transparent; 17 | border-style: solid; 18 | } 19 | 20 | :local(.content) { 21 | padding: 3px 8px; 22 | max-width: 250px; 23 | color: #FFF; 24 | border-radius: 4px; 25 | background-color: @tooltip-background-color; 26 | text-align: center; 27 | line-height: 1.5; 28 | } 29 | 30 | 31 | /* Placement */ 32 | 33 | :local(.bottom) { 34 | padding: 5px 0; 35 | 36 | :local(.arrow) { 37 | top: 1px; 38 | left: 50%; 39 | margin-left: -5px; 40 | border-bottom-color: @tooltip-background-color; 41 | border-width: 0 5px 5px; 42 | } 43 | } 44 | 45 | :local(.top) { 46 | padding: 5px 0; 47 | 48 | :local(.arrow) { 49 | bottom: 1px; 50 | left: 50%; 51 | margin-left: -5px; 52 | border-top-color: @tooltip-background-color; 53 | border-width: 5px 5px 0; 54 | } 55 | } 56 | 57 | :local(.left) { 58 | padding: 0 5px; 59 | 60 | :local(.arrow) { 61 | right: 1px; 62 | top: 50%; 63 | margin-top: -5px; 64 | border-left-color: @tooltip-background-color; 65 | border-width: 5px 0 5px 5px; 66 | } 67 | } 68 | 69 | :local(.right) { 70 | padding: 0 5px; 71 | 72 | :local(.arrow) { 73 | left: 1px; 74 | top: 50%; 75 | margin-top: -5px; 76 | border-right-color: @tooltip-background-color; 77 | border-width: 5px 5px 5px 0; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/tooltip/tooltip.tag: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 |
7 |
8 |
9 | { opts.title } 10 |
11 |
12 | 13 | 124 | 125 | -------------------------------------------------------------------------------- /src/components/tree-node/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "tree-node.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/tree-node/tree-node.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | ui-tree-node { 4 | display: block; 5 | cursor: pointer; 6 | } 7 | 8 | :local(.title) { 9 | display: inline-block; 10 | font-size: 13px; 11 | color: #666; 12 | } 13 | 14 | :local(.children) { 15 | padding-left: 20px; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/tree-node/tree-node.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | { opts.title } 4 |
5 | 6 |
7 | 8 | 82 | 83 | -------------------------------------------------------------------------------- /src/components/tree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "tree.tag" 3 | } 4 | -------------------------------------------------------------------------------- /src/components/tree/tree.less: -------------------------------------------------------------------------------- 1 | @import "../../theme.less"; 2 | 3 | :local(.base) { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/components/tree/tree.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 112 | 113 | -------------------------------------------------------------------------------- /src/font/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main {padding: 30px 100px;} 60 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 61 | 62 | .helps{margin-top:40px;} 63 | .helps pre{ 64 | padding:20px; 65 | margin:10px 0; 66 | border:solid 1px #e7e1cd; 67 | background-color: #fffdef; 68 | overflow: auto; 69 | } 70 | 71 | .icon_lists li{ 72 | float:left; 73 | width: 100px; 74 | height:180px; 75 | text-align: center; 76 | } 77 | .icon_lists .icon{ 78 | font-size: 42px; 79 | line-height: 100px; 80 | margin: 10px 0; 81 | color:#333; 82 | -webkit-transition: font-size 0.25s ease-out 0s; 83 | -moz-transition: font-size 0.25s ease-out 0s; 84 | transition: font-size 0.25s ease-out 0s; 85 | 86 | } 87 | .icon_lists .icon:hover{ 88 | font-size: 100px; 89 | } 90 | -------------------------------------------------------------------------------- /src/font/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 |
    14 | 15 |
  • 16 | 17 |
    heart
    18 |
    &#xe60e;
    19 |
    .heart
    20 |
    • 21 | 22 |
  • 23 | 24 |
    Search
    25 |
    &#xe609;
    26 |
    .search
    27 |
    • 28 | 29 |
  • 30 | 31 |
    caret-right
    32 |
    &#xe603;
    33 |
    .caret-right
    34 |
    • 35 | 36 |
  • 37 | 38 |
    success
    39 |
    &#xe607;
    40 |
    .success
    41 |
    • 42 | 43 |
  • 44 | 45 |
    caret-down
    46 |
    &#xe604;
    47 |
    .caretdown
    48 |
    • 49 | 50 |
  • 51 | 52 |
    loading
    53 |
    &#xe602;
    54 |
    .loading
    55 |
    • 56 | 57 |
  • 58 | 59 |
    code
    60 |
    &#xe60d;
    61 |
    .code
    62 |
    • 63 | 64 |
  • 65 | 66 |
    error
    67 |
    &#xe605;
    68 |
    .error
    69 |
    • 70 | 71 |
  • 72 | 73 |
    info
    74 |
    &#xe608;
    75 |
    .guanyuwomen
    76 |
    • 77 | 78 |
  • 79 | 80 |
    star
    81 |
    &#xe60c;
    82 |
    .star
    83 |
    • 84 | 85 |
  • 86 | 87 |
    home
    88 |
    &#xe60a;
    89 |
    .home
    90 |
    • 91 | 92 |
  • 93 | 94 |
    iconfont-unie61e
    95 |
    &#xe600;
    96 |
    .iconfontunie61e
    97 |
    • 98 | 99 |
  • 100 | 101 |
    iconfont-unie61f
    102 |
    &#xe601;
    103 |
    .iconfontunie61f
    104 |
    • 105 | 106 |
  • 107 | 108 |
    app-icon
    109 |
    &#xe60b;
    110 |
    .yingyong
    111 |
    • 112 | 113 |
  • 114 | 115 |
    warn
    116 |
    &#xe606;
    117 |
    .yduigantanhaoshixin
    118 |
    • 119 | 120 |
121 | 122 | 123 |
124 | 第一步：使用font-face声明字体 125 | 
126 | @font-face {font-family: 'iconfont';
127 |     src: url('iconfont.eot'); /* IE9*/
128 |     src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
129 |     url('iconfont.woff') format('woff'), /* chrome、firefox */
130 |     url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
131 |     url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
132 | }
133 |
134 | 第二步：定义使用iconfont的样式 135 | 
136 | .iconfont{
137 |     font-family:"iconfont" !important;
138 |     font-size:16px;font-style:normal;
139 |     -webkit-font-smoothing: antialiased;
140 |     -webkit-text-stroke-width: 0.2px;
141 |     -moz-osx-font-smoothing: grayscale;}
142 |
143 | 第三步：挑选相应图标并获取字体编码，应用于页面 144 | 
145 | <i class="iconfont">&#x33;</i>
146 |
147 |
148 | 149 |
150 | 151 | 152 | -------------------------------------------------------------------------------- /src/font/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot'); /* IE9*/ 4 | src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-style:normal; 13 | -webkit-font-smoothing: antialiased; 14 | -webkit-text-stroke-width: 0.2px; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | .icon-heart:before { content: "\e60e"; } 18 | .icon-search:before { content: "\e609"; } 19 | .icon-caret-right:before { content: "\e603"; } 20 | .icon-success:before { content: "\e607"; } 21 | .icon-caretdown:before { content: "\e604"; } 22 | .icon-loading:before { content: "\e602"; } 23 | .icon-code:before { content: "\e60d"; } 24 | .icon-error:before { content: "\e605"; } 25 | .icon-guanyuwomen:before { content: "\e608"; } 26 | .icon-star:before { content: "\e60c"; } 27 | .icon-home:before { content: "\e60a"; } 28 | .icon-iconfontunie61e:before { content: "\e600"; } 29 | .icon-iconfontunie61f:before { content: "\e601"; } 30 | .icon-yingyong:before { content: "\e60b"; } 31 | .icon-yduigantanhaoshixin:before { content: "\e606"; } 32 | -------------------------------------------------------------------------------- /src/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengzilong/Nest/60b193de305771b985837efa7a3cf0931d750c92/src/font/iconfont.eot -------------------------------------------------------------------------------- /src/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Wed Aug 17 23:48:04 2016 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 36 | 38 | 40 | 42 | 44 | 46 | 49 | 52 | 55 | 58 | 61 | 66 | 72 | 75 | 78 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengzilong/Nest/60b193de305771b985837efa7a3cf0931d750c92/src/font/iconfont.ttf -------------------------------------------------------------------------------- /src/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fengzilong/Nest/60b193de305771b985837efa7a3cf0931d750c92/src/font/iconfont.woff -------------------------------------------------------------------------------- /src/helper.less: -------------------------------------------------------------------------------- 1 | .clearfix() { 2 | &::after { 3 | content: ""; 4 | display: table; 5 | clear: both; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './components/button'; 2 | import './components/icon'; 3 | import './components/badge'; 4 | import './components/link'; 5 | import './components/input-nao'; 6 | import './components/input'; 7 | import './components/radio'; 8 | import './components/radio-button'; 9 | import './components/radio-group'; 10 | import './components/checkbox'; 11 | import './components/checkbox-group'; 12 | import './components/breadcrumb'; 13 | import './components/breadcrumb-item'; 14 | import './components/tag'; 15 | import './components/json-tree'; 16 | import './components/tree'; 17 | import './components/tree-node'; 18 | import './components/pagination'; 19 | import './components/menu'; 20 | import './components/submenu'; 21 | import './components/menu-item'; 22 | import './components/switch'; 23 | import './components/progress-bar'; 24 | import './components/popover'; 25 | import './components/message'; 26 | import './components/collapse'; 27 | import './components/collapse-pane'; 28 | import './components/tooltip'; 29 | import './components/slider'; 30 | import './components/spinner'; 31 | import './components/renderer'; 32 | import './components/rate'; 33 | -------------------------------------------------------------------------------- /src/theme.less: -------------------------------------------------------------------------------- 1 | @primary-color: #5fbfff; 2 | @success-color: #2ecc71; 3 | @warning-color: #f4d03f; 4 | @danger-color: #ec7063; 5 | @disabled-text-color: #d9d9d9; 6 | @disabled-cursor: not-allowed; 7 | 8 | /* Badge */ 9 | @badge-background-color: #ec7063; 10 | 11 | /* Tooltip */ 12 | @tooltip-font-size: 12px; 13 | @tooltip-background-color: #545454; 14 | 15 | /* Input */ 16 | @input-disabled-background-color: #EDEDED; 17 | 18 | /* Button */ 19 | @button-border-color: #d9d9d9; 20 | 21 | /* Tag */ 22 | @tag-font-size: 11px; 23 | -------------------------------------------------------------------------------- /src/util/debug.js: -------------------------------------------------------------------------------- 1 | import riot from 'riot'; 2 | 3 | riot.mixin({ 4 | _log() { 5 | 6 | } 7 | }); 8 | 9 | // debug( 'ui-button', document.body ); 10 | -------------------------------------------------------------------------------- /src/util/extend.js: -------------------------------------------------------------------------------- 1 | export default ( object, ...args ) => { 2 | for( let i = 0, source; source = args[ i ]; i++ ) { 3 | if( !source ) { 4 | continue; 5 | } 6 | 7 | for( let property in source ) { 8 | object[ property ] = source[ property ]; 9 | } 10 | } 11 | 12 | return object; 13 | }; 14 | -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | - use css modules in `json-tree` 2 | - review existed components 3 | - refactor `json-tree` 4 | - implement `popover` 5 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); 4 | var autoprefixer = require('autoprefixer'); 5 | var es6Promise = require('es6-promise'); 6 | var cwd = process.cwd(); 7 | 8 | es6Promise.polyfill(); 9 | 10 | var webpackConfig = { 11 | context: cwd, 12 | entry: { 13 | 'nest': path.resolve( cwd, 'src/index.js' ) 14 | }, 15 | output: { 16 | path: path.resolve( cwd, 'dist' ), 17 | filename: '[name].js', 18 | library: 'nest', 19 | libraryTarget: 'umd', 20 | }, 21 | module: { 22 | preLoaders: [ 23 | { 24 | test: /\.tag$/, 25 | exclude: /node_modules/, 26 | loader: 'nest-loader', 27 | query: { 28 | type: 'none' 29 | } 30 | } 31 | ], 32 | loaders: [ 33 | { 34 | test: /\.(ttf|woff|eot|svg)\??\d*$/, 35 | include: /src/, 36 | loader: 'url-loader?name=[path][name].[ext]?[hash:8]' 37 | }, 38 | { 39 | test: /\.less$/, 40 | exclude: /node_modules/, 41 | loader: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader?localIdentName=[name]__[local]--[hash:5]!postcss-loader!less-loader') 42 | }, 43 | { 44 | test: /\.css$/, 45 | exclude: /node_modules/, 46 | loader: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader?localIdentName=[name]__[local]--[hash:5]') 47 | }, 48 | { 49 | test: /\.(js|tag)$/, 50 | exclude: /node_modules/, 51 | loader: 'babel-loader', 52 | } 53 | ] 54 | }, 55 | babel: { 56 | "presets": [ "es2015" ] 57 | }, 58 | postcss: [ 59 | autoprefixer({ browsers: [ 'last 2 versions' ] }) 60 | ], 61 | resolve: { 62 | extensions: [ '', '.js', '.tag', '.less', '.css' ] 63 | }, 64 | externals: { 65 | riot: { 66 | root: 'riot', 67 | commonjs: 'riot', 68 | commonjs2: 'riot', 69 | amd: 'riot' 70 | } 71 | }, 72 | plugins: [ 73 | new ExtractTextWebpackPlugin( 'nest.css' ) 74 | ] 75 | }; 76 | 77 | if( process.env.NODE_ENV === 'production' ) { 78 | webpackConfig.plugins.push( 79 | new webpack.optimize.UglifyJsPlugin({ 80 | compress: { 81 | warnings: false 82 | } 83 | }) 84 | ); 85 | } else { 86 | webpackConfig.devtool = 'source-map'; 87 | } 88 | 89 | module.exports = webpackConfig; 90 | --------------------------------------------------------------------------------