diff --git a/.gitmodules b/.gitmodules index 7a3faea..142de01 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,3 @@ [submodule "fineui"] path = fineui -url=https://git.coding.net/fanruan/fineui.git \ No newline at end of file +url=https://github.com/fanruan/fineui.git \ No newline at end of file diff --git a/README.md b/README.md index 839fe9e..78002c7 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,11 @@ # FineUI-Start ## 安装运行 -`git clone --recursive http://git.fanruan.com/fanruan/FineUI-Start` +`git clone --recursive https://git.fanruan.com/dailer/FineUI-Start.git` `npm install` -`npm run grunt` \ No newline at end of file +`npm run grunt` + +## 示例效果 +![](./screenshorts/todolist.gif) \ No newline at end of file diff --git a/dist/bundle.css b/dist/bundle.css index 24518b3..456246a 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -1,3 +1,6 @@ +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求 + */ .my-todolist-header { background-color: #3d4d66; } @@ -11,6 +14,9 @@ -moz-border-radius: 5px; border-radius: 5px; } +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求 + */ .my-todolist-list .my-todolist-list-text { font-size: 16px; font-weight: bold; @@ -22,1854 +28,9 @@ background-color: #3d4d66; color: #ffffff; } -@font-face { - font-family: 'bi'; - src: url('font/iconfont.eot'); - src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg'); - /* iOS 4.1- */ -} -.b-font { - font-family: "bi"; - font-style: normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.2px; - -moz-osx-font-smoothing: grayscale; -} -.close-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.close-font .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-font.disabled .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.close-h-font .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-h-font:hover .b-font:before, -.close-h-font.hover .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-h-font.disabled .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.close-ha-font .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-ha-font:hover .b-font:before, -.close-ha-font.hover .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-ha-font:active .b-font:before, -.close-ha-font.active .b-font:before { - content: "\e6d0"; - color: #3f8ce8; -} -.close-ha-font.disabled .b-font:before { - content: "\e6d0"; - color: inherit; -} -.circle-close-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.circle-close-font .b-font:before { - content: "\e6d5"; - color: inherit; -} -.circle-close-font.disabled .b-font:before { - content: "\e6d5"; - color: inherit; -} -.search-close-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.search-close-h-font .b-font:before { - content: "\e6d0"; - color: inherit; -} -.search-close-h-font:hover .b-font:before, -.search-close-h-font.hover .b-font:before { - content: "\e6d0"; - color: #ff4949; -} -.search-close-h-font.disabled .b-font:before { - content: "\e6d0"; - color: inherit; -} -.pre-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pre-page-h-font .b-font:before { - content: "\e70d"; - color: inherit; -} -.pre-page-h-font:hover .b-font:before, -.pre-page-h-font.hover .b-font:before { - content: "\e70d"; - color: inherit; -} -.pre-page-h-font.disabled .b-font:before { - content: "\e70d"; - color: inherit; -} -.next-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.next-page-h-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.next-page-h-font:hover .b-font:before, -.next-page-h-font.hover .b-font:before { - content: "\e70c"; - color: inherit; -} -.next-page-h-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.search-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.search-font .b-font:before { - content: "\e6dc"; - color: inherit; -} -.search-font.disabled .b-font:before { - content: "\e6dc"; - color: inherit; -} -.date-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.date-font .b-font:before { - content: "\e733"; - color: inherit; -} -.date-font.disabled .b-font:before { - content: "\e733"; - color: inherit; -} -.date-change-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.date-change-h-font .b-font:before { - content: "\e72f"; - color: inherit; -} -.date-change-h-font:hover .b-font:before, -.date-change-h-font.hover .b-font:before { - content: "\e72f"; - color: inherit; -} -.date-change-h-font.disabled .b-font:before { - content: "\e72f"; - color: inherit; -} -.dot-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.dot-font .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-font.disabled .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.dot-h-font .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-h-font:hover .b-font:before, -.dot-h-font.hover .b-font:before { - content: "\e762"; - color: inherit; -} -.dot-h-font.disabled .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.dot-ha-font .b-font:before { - content: "\e762"; - color: #ffffff; -} -.dot-ha-font:hover .b-font:before, -.dot-ha-font.hover .b-font:before { - content: "\e762"; - color: #999999; -} -.dot-ha-font:active .b-font:before, -.dot-ha-font.active .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-ha-font.disabled .b-font:before { - content: "\e762"; - color: #ffffff; -} -.dot-e-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.dot-e-font .b-font:before { - content: "\e762"; - color: transparent; -} -.dot-e-font:hover .b-font:before, -.dot-e-font.hover .b-font:before { - content: "\e762"; - color: rgba(54, 133, 242, 0.06); -} -.dot-e-font:active .b-font:before { - content: "\e762"; - color: #3685f2; -} -.dot-e-font.active .b-font:before { - content: "\e762"; - color: #3685f2; -} -.dot-e-font.disabled .b-font:before { - content: "\e762"; - color: transparent; -} -.pull-right-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-right-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-right-h-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-h-font:hover .b-font:before, -.pull-right-h-font.hover .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-h-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-right-ha-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-ha-font:hover .b-font:before, -.pull-right-ha-font.hover .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-ha-font:active .b-font:before, -.pull-right-ha-font.active .b-font:before { - content: "\e70c"; - color: #3f8ce8; -} -.pull-right-ha-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-e-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-right-e-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-e-font:hover .b-font:before, -.pull-right-e-font.hover .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-e-font:active .b-font:before { - content: "\e70c"; - color: #3f8ce8; -} -.pull-right-e-font.active .b-font:before { - content: "\e70c"; - color: #3f8ce8; -} -.pull-right-e-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.copy-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.copy-font .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-font.disabled .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.copy-h-font .b-font:before { - content: "\e6bd"; - color: #232e40; -} -.copy-h-font:hover .b-font:before, -.copy-h-font.hover .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-h-font.disabled .b-font:before { - content: "\e6bd"; - color: #232e40; -} -.copy-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.copy-ha-font .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-ha-font:hover .b-font:before, -.copy-ha-font.hover .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-ha-font:active .b-font:before, -.copy-ha-font.active .b-font:before { - content: "\e6bd"; - color: #3f8ce8; -} -.copy-ha-font.disabled .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-e-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.copy-e-font .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-e-font:hover .b-font:before, -.copy-e-font.hover .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-e-font:active .b-font:before { - content: "\e6bd"; - color: #3f8ce8; -} -.copy-e-font.active .b-font:before { - content: "\e6bd"; - color: #3f8ce8; -} -.copy-e-font.disabled .b-font:before { - content: "\e6bd"; - color: inherit; -} -.check-mark-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-mark-font .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-font.disabled .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-mark-h-font .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-h-font:hover .b-font:before, -.check-mark-h-font.hover .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-h-font.disabled .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-mark-ha-font .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-ha-font:hover .b-font:before, -.check-mark-ha-font.hover .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-ha-font:active .b-font:before, -.check-mark-ha-font.active .b-font:before { - content: "\e6cf"; - color: #3f8ce8; -} -.check-mark-ha-font.disabled .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-e-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-mark-e-font .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-e-font:hover .b-font:before, -.check-mark-e-font.hover .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-e-font:active .b-font:before { - content: "\e6cf"; - color: #3f8ce8; -} -.check-mark-e-font.active .b-font:before { - content: "\e6cf"; - color: #3f8ce8; -} -.check-mark-e-font.disabled .b-font:before { - content: "\e6cf"; - color: inherit; -} -/** dashboard组件/控件 下拉列表图标字体 ~end~**/ -.row-pre-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.row-pre-page-h-font .b-font:before { - content: "\e6d9"; - color: inherit; -} -.row-pre-page-h-font:hover .b-font:before, -.row-pre-page-h-font.hover .b-font:before { - content: "\e6d9"; - color: inherit; -} -.row-pre-page-h-font.disabled .b-font:before { - content: "\e6d9"; - color: inherit; -} -.row-next-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.row-next-page-h-font .b-font:before { - content: "\e6d8"; - color: inherit; -} -.row-next-page-h-font:hover .b-font:before, -.row-next-page-h-font.hover .b-font:before { - content: "\e6d8"; - color: inherit; -} -.row-next-page-h-font.disabled .b-font:before { - content: "\e6d8"; - color: inherit; -} -.column-pre-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.column-pre-page-h-font .b-font:before { - content: "\e6d6"; - color: inherit; -} -.column-pre-page-h-font:hover .b-font:before, -.column-pre-page-h-font.hover .b-font:before { - content: "\e6d6"; - color: inherit; -} -.column-pre-page-h-font.disabled .b-font:before { - content: "\e6d6"; - color: inherit; -} -.column-next-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.column-next-page-h-font .b-font:before { - content: "\e6d7"; - color: inherit; -} -.column-next-page-h-font:hover .b-font:before, -.column-next-page-h-font.hover .b-font:before { - content: "\e6d7"; - color: inherit; -} -.column-next-page-h-font.disabled .b-font:before { - content: "\e6d7"; - color: inherit; -} -.expander-right-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.expander-right-font .b-font:before { - content: "\e6d8"; - color: inherit; -} -.expander-right-font.disabled .b-font:before { - content: "\e6d8"; - color: inherit; -} -.expander-down-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.expander-down-font .b-font:before { - content: "\e6d7"; - color: inherit; -} -.expander-down-font.disabled .b-font:before { - content: "\e6d7"; - color: inherit; -} -.solid-triangle-top-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.solid-triangle-top-font .b-font:before { - content: "\e6d6"; - color: inherit; -} -.solid-triangle-top-font:hover .b-font:before, -.solid-triangle-top-font.hover .b-font:before { - content: "\e6d6"; - color: inherit; -} -.solid-triangle-top-font.disabled .b-font:before { - content: "\e6d6"; - color: inherit; -} -.solid-triangle-bottom-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.solid-triangle-bottom-font .b-font:before { - content: "\e6d7"; - color: inherit; -} -.solid-triangle-bottom-font:hover .b-font:before, -.solid-triangle-bottom-font.hover .b-font:before { - content: "\e6d7"; - color: inherit; -} -.solid-triangle-bottom-font.disabled .b-font:before { - content: "\e6d7"; - color: inherit; -} -.trigger-triangle-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.trigger-triangle-font .b-font:before { - content: "\e64e"; - color: inherit; -} -.trigger-triangle-font.disabled .b-font:before { - content: "\e64e"; - color: inherit; -} -.pull-up-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-up-font .b-font:before { - content: "\e70a"; - color: inherit; -} -.pull-up-font.disabled .b-font:before { - content: "\e70a"; - color: inherit; -} -.pull-down-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-down-font .b-font:before { - content: "\e70b"; - color: inherit; -} -.pull-down-font.disabled .b-font:before { - content: "\e70b"; - color: inherit; -} -.pull-down-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-down-h-font .b-font:before { - content: "\e70b"; - color: #647185; -} -.pull-down-h-font:hover .b-font:before, -.pull-down-h-font.hover .b-font:before { - content: "\e70b"; - color: inherit; -} -.pull-down-h-font.disabled .b-font:before { - content: "\e70b"; - color: #647185; -} -.pull-down-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-down-ha-font .b-font:before { - content: "\e70b"; - color: #647185; -} -.pull-down-ha-font:hover .b-font:before, -.pull-down-ha-font.hover .b-font:before { - content: "\e70b"; - color: inherit; -} -.pull-down-ha-font:active .b-font:before, -.pull-down-ha-font.active .b-font:before { - content: "\e70b"; - color: #3f8ce8; -} -.pull-down-ha-font.disabled .b-font:before { - content: "\e70b"; - color: #647185; -} -.check-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-font .b-font:before { - content: "\e6cf"; - color: #3685f2; -} -.check-font.disabled .b-font:before { - content: "\e6cf"; - color: #3685f2; -} -.item-check-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.item-check-font .b-font:before { - content: "\e6cf"; - color: #ffffff; -} -.item-check-font:hover .b-font:before, -.item-check-font.hover .b-font:before { - content: "\e6cf"; - color: #999999; -} -.item-check-font:active .b-font:before, -.item-check-font.active .b-font:before { - content: "\e6cf"; - color: #3f8ce8; -} -.item-check-font.disabled .b-font:before { - content: "\e6cf"; - color: #ffffff; -} -.primary-key-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.primary-key-font .b-font:before { - content: "\e740"; - color: inherit; -} -.primary-key-font:hover .b-font:before, -.primary-key-font.hover .b-font:before { - content: "\e740"; - color: inherit; -} -.primary-key-font.disabled .b-font:before { - content: "\e740"; - color: inherit; -} -.drag-tag-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.drag-tag-font .b-font:before { - content: "\e6d0"; - color: #faaa39; -} -.drag-tag-font.disabled .b-font:before { - content: "\e6d0"; - color: #faaa39; -} -.less-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.less-font .b-font:before { - content: "\e75e"; - color: inherit; -} -.less-font.disabled .b-font:before { - content: "\e75e"; - color: inherit; -} -.less-equal-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.less-equal-font .b-font:before { - content: "\e761"; - color: inherit; -} -.less-equal-font.disabled .b-font:before { - content: "\e761"; - color: inherit; -} -.text-bold-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-bold-font .b-font:before { - content: "\e697"; - color: inherit; -} -.text-bold-font.disabled .b-font:before { - content: "\e697"; - color: inherit; -} -.text-italic-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-italic-font .b-font:before { - content: "\e69d"; - color: inherit; -} -.text-italic-font.disabled .b-font:before { - content: "\e69d"; - color: inherit; -} -.text-underline-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-underline-font .b-font:before { - content: "\e69c"; - color: inherit; -} -.text-underline-font.disabled .b-font:before { - content: "\e69c"; - color: inherit; -} -.text-color-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-color-font .b-font:before { - content: "\e698"; - color: inherit; -} -.text-color-font.disabled .b-font:before { - content: "\e698"; - color: inherit; -} -.text-background-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-background-font .b-font:before { - content: "\e699"; - color: inherit; -} -.text-background-font.disabled .b-font:before { - content: "\e699"; - color: inherit; -} -.text-color-underline-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-color-underline-font .b-font:before { - content: "\e69a"; - color: inherit; -} -.text-color-underline-font.disabled .b-font:before { - content: "\e69a"; - color: inherit; -} -.text-align-left-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-align-left-font .b-font:before { - content: "\e6ca"; - color: inherit; -} -.text-align-left-font.disabled .b-font:before { - content: "\e6ca"; - color: inherit; -} -.text-align-center-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-align-center-font .b-font:before { - content: "\e6bf"; - color: inherit; -} -.text-align-center-font.disabled .b-font:before { - content: "\e6bf"; - color: inherit; -} -.text-align-right-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-align-right-font .b-font:before { - content: "\e6c8"; - color: inherit; -} -.text-align-right-font.disabled .b-font:before { - content: "\e6c8"; - color: inherit; -} -.toast-error-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.toast-error-font .b-font:before { - content: "\e757"; - color: inherit; -} -.toast-error-font.disabled .b-font:before { - content: "\e757"; - color: inherit; -} -.toast-success-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.toast-success-font .b-font:before { - content: "\e756"; - color: inherit; -} -.toast-success-font.disabled .b-font:before { - content: "\e756"; - color: inherit; -} -.toast-warning-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.toast-warning-font .b-font:before { - content: "\e755"; - color: inherit; -} -.toast-warning-font.disabled .b-font:before { - content: "\e755"; - color: inherit; -} -.toast-message-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.toast-message-font .b-font:before { - content: "\e74b"; - color: inherit; -} -.toast-message-font.disabled .b-font:before { - content: "\e74b"; - color: inherit; -} -.text-add-tip-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-add-tip-font .b-font:before { - content: "\e6dd"; - color: #13cd66; -} -.text-add-tip-font.disabled .b-font:before { - content: "\e6dd"; - color: #13cd66; -} -.add-up-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.add-up-font .b-font:before { - content: "\e70a"; - color: inherit; -} -.add-up-font.disabled .b-font:before { - content: "\e70a"; - color: inherit; -} -.minus-down-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.minus-down-font .b-font:before { - content: "\e70b"; - color: inherit; -} -.minus-down-font.disabled .b-font:before { - content: "\e70b"; - color: inherit; -} -.tree-collapse-icon-type1 .x-icon { - display: block; - background: url('images/2x/icon/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_1.png'); - background-size: contain; - _background: none; -} -.tree-collapse-icon-type1 .x-icon.hack { - background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png'); - _background: none; -} -.tree-collapse-icon-type2 .x-icon { - display: block; - background: url('images/2x/icon/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_2.png'); - background-size: contain; - _background: none; -} -.tree-collapse-icon-type2 .x-icon.hack { - background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png'); - _background: none; -} -.tree-collapse-icon-type3 .x-icon { - display: block; - background: url('images/2x/icon/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_3.png'); - background-size: contain; - _background: none; -} -.tree-collapse-icon-type3 .x-icon.hack { - background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png'); - _background: none; -} -.tree-collapse-icon-type4 .x-icon { - display: block; - background: url('images/2x/icon/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_4.png'); - background-size: contain; - _background: none; -} -.tree-collapse-icon-type4 .x-icon.hack { - background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png'); - _background: none; -} -.tree-expand-icon-type1 .x-icon { - display: block; - background: url('images/2x/icon/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_1.png'); - background-size: contain; - _background: none; -} -.tree-expand-icon-type1 .x-icon.hack { - background: url('images/1x/icon/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png'); - _background: none; -} -.tree-expand-icon-type2 .x-icon { - display: block; - background: url('images/2x/icon/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_2.png'); - background-size: contain; - _background: none; -} -.tree-expand-icon-type2 .x-icon.hack { - background: url('images/1x/icon/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png'); - _background: none; -} -.tree-expand-icon-type3 .x-icon { - display: block; - background: url('images/2x/icon/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_3.png'); - background-size: contain; - _background: none; -} -.tree-expand-icon-type3 .x-icon.hack { - background: url('images/1x/icon/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png'); - _background: none; -} -.tree-expand-icon-type4 .x-icon { - display: block; - background: url('images/2x/icon/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_4.png'); - background-size: contain; - _background: none; -} -.tree-expand-icon-type4 .x-icon.hack { - background: url('images/1x/icon/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png'); - _background: none; -} -.tree-vertical-line-type2 .x-icon { - display: block; - background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_2.png'); - background-size: contain; - _background: none; -} -.tree-vertical-line-type2 .x-icon.hack { - background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png'); - _background: none; -} -.tree-vertical-line-type3 .x-icon { - display: block; - background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_3.png'); - background-size: contain; - _background: none; -} -.tree-vertical-line-type3 .x-icon.hack { - background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png'); - _background: none; -} -.tree-vertical-line-type4 .x-icon { - display: block; - background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_4.png'); - background-size: contain; - _background: none; -} -.tree-vertical-line-type4 .x-icon.hack { - background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png'); - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type1 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_1.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type1 .x-icon.hack { - background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png'); - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type2 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_2.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type2 .x-icon.hack { - background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png'); - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type3 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_3.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type3 .x-icon.hack { - background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png'); - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type4 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_4.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type4 .x-icon.hack { - background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png'); - _background: none; -} -.bi-theme-dark .tree-expand-icon-type1 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_1.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-expand-icon-type1 .x-icon.hack { - background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png'); - _background: none; -} -.bi-theme-dark .tree-expand-icon-type2 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_2.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-expand-icon-type2 .x-icon.hack { - background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png'); - _background: none; -} -.bi-theme-dark .tree-expand-icon-type3 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_3.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-expand-icon-type3 .x-icon.hack { - background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png'); - _background: none; -} -.bi-theme-dark .tree-expand-icon-type4 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_4.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-expand-icon-type4 .x-icon.hack { - background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png'); - _background: none; -} -.bi-theme-dark .tree-vertical-line-type2 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_2.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-vertical-line-type2 .x-icon.hack { - background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png'); - _background: none; -} -.bi-theme-dark .tree-vertical-line-type3 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_3.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-vertical-line-type3 .x-icon.hack { - background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png'); - _background: none; -} -.bi-theme-dark .tree-vertical-line-type4 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_4.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-vertical-line-type4 .x-icon.hack { - background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png'); - _background: none; -} -.check-box-icon .x-icon { - display: block; - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.check-box-icon .x-icon.hack { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.check-box-icon:hover .x-icon, -.check-box-icon.hover .x-icon { - display: block; - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.check-box-icon:hover .x-icon.hack, -.check-box-icon.hover .x-icon.hack { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.check-box-icon:active .x-icon { - display: block; - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.check-box-icon:active .x-icon.hack { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.check-box-icon.active .x-icon { - display: block; - background: url('images/2x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png'); - background-size: contain; - _background: none; -} -.check-box-icon.active .x-icon.hack { - background: url('images/1x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png'); - _background: none; -} -.check-box-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/check_box_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable.png'); - background-size: contain; - _background: none; -} -.check-box-icon.disabled .x-icon.hack { - background: url('images/1x/icon/check_box_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable.png'); - _background: none; -} -.check-box-icon.disabled.active .x-icon { - display: block; - background: url('images/2x/icon/check_box_disable2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable2.png'); - background-size: contain; - _background: none; -} -.check-box-icon.disabled.active .x-icon.hack { - background: url('images/1x/icon/check_box_disable2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable2.png'); - _background: none; -} -.radio-icon .x-icon { - display: block; - background: url('images/2x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png'); - background-size: contain; - _background: none; -} -.radio-icon .x-icon.hack { - background: url('images/1x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png'); - _background: none; -} -.radio-icon:hover .x-icon, -.radio-icon.hover .x-icon { - display: block; - background: url('images/2x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png'); - background-size: contain; - _background: none; -} -.radio-icon:hover .x-icon.hack, -.radio-icon.hover .x-icon.hack { - background: url('images/1x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png'); - _background: none; -} -.radio-icon:active .x-icon { - display: block; - background: url('images/2x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png'); - background-size: contain; - _background: none; -} -.radio-icon:active .x-icon.hack { - background: url('images/1x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png'); - _background: none; -} -.radio-icon.active .x-icon { - display: block; - background: url('images/2x/icon/radio_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_active.png'); - background-size: contain; - _background: none; -} -.radio-icon.active .x-icon.hack { - background: url('images/1x/icon/radio_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_active.png'); - _background: none; -} -.radio-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/radio_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable.png'); - background-size: contain; - _background: none; -} -.radio-icon.disabled .x-icon.hack { - background: url('images/1x/icon/radio_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable.png'); - _background: none; -} -.radio-icon.disabled.active .x-icon { - display: block; - background: url('images/2x/icon/radio_disable2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable2.png'); - background-size: contain; - _background: none; -} -.radio-icon.disabled.active .x-icon.hack { - background: url('images/1x/icon/radio_disable2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable2.png'); - _background: none; -} -.check-half-select-icon .x-icon { - display: block; - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.check-half-select-icon .x-icon.hack { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.slider-icon .x-icon { - display: block; - background: url('images/2x/icon/slider_normal_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_normal_small.png'); - background-size: contain; - _background: none; -} -.slider-icon .x-icon.hack { - background: url('images/1x/icon/slider_normal_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_normal_small.png'); - _background: none; -} -.slider-icon:hover .x-icon, -.slider-icon.hover .x-icon { - display: block; - background: url('images/2x/icon/slider_active_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_active_small.png'); - background-size: contain; - _background: none; -} -.slider-icon:hover .x-icon.hack, -.slider-icon.hover .x-icon.hack { - background: url('images/1x/icon/slider_active_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_active_small.png'); - _background: none; -} -.slider-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/slider_normal_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_normal_small.png'); - background-size: contain; - _background: none; -} -.slider-icon.disabled .x-icon.hack { - background: url('images/1x/icon/slider_normal_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_normal_small.png'); - _background: none; -} -.auto-color-icon .x-icon { - display: block; - background: url('images/2x/icon/auto_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_normal.png'); - background-size: contain; - _background: none; -} -.auto-color-icon .x-icon.hack { - background: url('images/1x/icon/auto_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_normal.png'); - _background: none; -} -.auto-color-icon.active .x-icon { - display: block; - background: url('images/2x/icon/auto_select.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_select.png'); - background-size: contain; - _background: none; -} -.auto-color-icon.active .x-icon.hack { - background: url('images/1x/icon/auto_select.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_select.png'); - _background: none; -} -.auto-color-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/auto_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_disable.png'); - background-size: contain; - _background: none; -} -.auto-color-icon.disabled .x-icon.hack { - background: url('images/1x/icon/auto_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_disable.png'); - _background: none; -} -.trans-color-icon .x-icon { - display: block; - background: url('images/2x/icon/trans_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_normal.png'); - background-size: contain; - _background: none; -} -.trans-color-icon .x-icon.hack { - background: url('images/1x/icon/trans_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_normal.png'); - _background: none; -} -.trans-color-icon.active .x-icon { - display: block; - background: url('images/2x/icon/trans_select.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_select.png'); - background-size: contain; - _background: none; -} -.trans-color-icon.active .x-icon.hack { - background: url('images/1x/icon/trans_select.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_select.png'); - _background: none; -} -.trans-color-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/trans_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_disable.png'); - background-size: contain; - _background: none; -} -.trans-color-icon.disabled .x-icon.hack { - background: url('images/1x/icon/trans_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_disable.png'); - _background: none; -} -.farbtastic .wheel { - background: url('images/1x/background/wheel.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/wheel.png'); - _background: none; -} -.farbtastic .overlay { - background: url('images/1x/background/mask.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/mask.png'); - _background: none; -} -.farbtastic .marker { - background: url('images/1x/background/marker.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/marker.png'); - _background: none; -} -.bi-display-tree .ztree li span.button.switch.center_open { - background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png'); - _background: none; -} -.bi-display-tree .ztree li span.button.switch.roots_open { - background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png'); - _background: none; -} -.bi-display-tree .ztree li span.button.switch.bottom_open { - background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png'); - _background: none; -} -.ztree li ul.line { - background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png'); - _background: none; -} -.bi-theme-dark .ztree li ul.line { - background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png'); - _background: none; -} -.ztree li span.button.chk.checkbox_false_full { - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_false_full_focus { - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_false_part { - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_false_part_focus { - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_true_full { - background: url('images/2x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_true_full_focus { - background: url('images/2x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_true_part { - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_true_part_focus { - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.ztree.hack li span.button.chk.checkbox_false_full { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_false_full_focus { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_false_part { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_false_part_focus { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_true_full { - background: url('images/1x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_true_full_focus { - background: url('images/1x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_true_part { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_true_part_focus { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.ztree li span.button.root_open { - background: url('images/1x/icon/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.root_open { - background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png'); - _background: none; -} -.ztree li span.button.root_close { - background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.root_close { - background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png'); - _background: none; -} -.ztree li span.button.roots_open { - background: url('images/1x/icon/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.roots_open { - background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png'); - _background: none; -} -.ztree li span.button.roots_close { - background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.roots_close { - background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png'); - _background: none; -} -.ztree li span.button.center_open { - background: url('images/1x/icon/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.center_open { - background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png'); - _background: none; -} -.ztree li span.button.center_close { - background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.center_close { - background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png'); - _background: none; -} -.ztree li span.button.bottom_open { - background: url('images/1x/icon/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.bottom_open { - background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png'); - _background: none; -} -.ztree li span.button.bottom_close { - background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.bottom_close { - background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png'); - _background: none; -} -.ztree li span.button.roots_docu { - background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.roots_docu { - background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png'); - _background: none; -} -.ztree li span.button.center_docu { - background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.center_docu { - background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png'); - _background: none; -} -.ztree li span.button.bottom_docu { - background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.bottom_docu { - background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png'); - _background: none; -} -.ztree li span.button.ico_loading { - background: url('images/1x/icon/loading.gif') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/loading.gif'); - _background: none; -} -.base-line-conn-background { - background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 0 0; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png'); - _background: none; -} -.bi-theme-dark .base-line-conn-background { - background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 0 0; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png'); - _background: none; -} -.first-line-conn-background { - background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png'); - _background: none; -} -.bi-theme-dark .first-line-conn-background { - background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png'); - _background: none; -} -.mid-line-conn-background { - background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png'); - _background: none; -} -.bi-theme-dark .mid-line-conn-background { - background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png'); - _background: none; -} -.last-line-conn-background { - background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png'); - _background: none; -} -.bi-theme-dark .last-line-conn-background { - background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png'); - _background: none; -} -.loading-background { - background: url('images/2x/icon/loading.gif') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif'); - background-size: contain; - _background: none; -} -.auto-color-background { - background: url('images/2x/background/auto_color.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color.png'); - background-size: contain; - _background: none; -} -.auto-color-normal-background { - background: url('images/2x/background/auto_color_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal.png'); - background-size: contain; - _background: none; -} -.auto-color-normal-disabled-background { - background: url('images/2x/background/auto_color_normal_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal_disable.png'); - background-size: contain; - _background: none; -} -.trans-color-background { - background: url('images/2x/background/trans_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_normal.png'); - background-size: contain; - _background: none; -} -.trans-color-disabled-background { - background: url('images/2x/background/trans_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_disable.png'); - background-size: contain; - _background: none; -} -.auto-color-background.hack { - background: url('images/1x/background/auto_color.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color.png'); - _background: none; -} -.auto-color-normal-background.hack { - background: url('images/1x/background/auto_color_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal.png'); - _background: none; -} -.auto-color-normal-disabled-background.hack { - background: url('images/1x/background/auto_color_normal_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal_disable.png'); - _background: none; -} -.trans-color-background.hack { - background: url('images/1x/background/trans_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_normal.png'); - _background: none; -} -.trans-color-disabled-background.hack { - background: url('images/1x/background/trans_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_disable.png'); - _background: none; -} -html { - height: 100%; - overflow: hidden; -} -body { - position: absolute; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - top: 0; - left: 0; - background-repeat: repeat; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - color: #3d4d66; - font: normal 12px "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Heiti; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none; - -kthml-user-focus: normal; - -moz-user-focus: normal; - -moz-outline: 0 none; - outline: 0 none; -} -div::-webkit-scrollbar, -textarea::-webkit-scrollbar { - -webkit-appearance: none; - background-color: rgba(135, 141, 159, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d878d9f,endColorstr=#0d878d9f); - width: 6px; - height: 6px; -} -div::-webkit-scrollbar-thumb, -textarea::-webkit-scrollbar-thumb { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - background-color: rgba(135, 141, 159, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d878d9f,endColorstr=#4d878d9f); -} -div::-webkit-scrollbar-thumb:hover, -textarea::-webkit-scrollbar-thumb:hover { - background-color: rgba(135, 141, 159, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3878d9f,endColorstr=#b3878d9f); -} -.bi-theme-dark div::-webkit-scrollbar, -.bi-theme-dark textarea::-webkit-scrollbar { - -webkit-appearance: none; - background-color: rgba(208, 212, 218, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dd0d4da,endColorstr=#0dd0d4da); - width: 6px; - height: 6px; -} -.bi-theme-dark div::-webkit-scrollbar-thumb, -.bi-theme-dark textarea::-webkit-scrollbar-thumb { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - background-color: rgba(208, 212, 218, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dd0d4da,endColorstr=#4dd0d4da); -} -.bi-theme-dark div::-webkit-scrollbar-thumb:hover, -.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover { - background-color: rgba(208, 212, 218, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3d0d4da,endColorstr=#b3d0d4da); -} -#wrapper { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; - overflow-x: hidden; - overflow-y: hidden; +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求 + */ +.my-todolist-background { + background-color: #f7f8fa; } diff --git a/dist/bundle.js b/dist/bundle.js index c7fe7da..c7db7c3 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -1,18 +1,23 @@ -!(function () { +!(function() { + /** + * 顶部组件,提供输入框添加todo项目 + * 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中 + */ var ToDoListHeader = BI.inherit(BI.Widget, { props: { + // 指定组件的className baseCls: "my-todolist-header" }, - render: function () { + render: function() { var self = this, o = this.options; return { - type: "bi.horizontal_auto", + type: "bi.horizontal_auto", // 水平居中布局 items: [ { el: { - type: "bi.left_right_vertical_adapt", + type: "bi.left_right_vertical_adapt", // 左右垂直居中布局 width: 600, height: o.height, items: { @@ -30,17 +35,21 @@ { el: { type: "bi.editor", + ref: function(_ref) { + self.editor = _ref; + }, allowBlank: true, cls: "my-todolist-header-editor", watermark: "添加ToDo", width: 300, height: 24, listeners: [ - { + { // 监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空 eventName: "EVENT_ENTER", - action: function () { + action: function() { + // 注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值. self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue()); - this.setValue(""); + self.editor.setValue(""); } } ] @@ -58,15 +67,20 @@ ToDoListHeader.EVENT_ADD = "EVENT_ADD"; BI.shortcut("my.todolist.header", ToDoListHeader); -})();!(function () { +})();!(function() { + /** + * todo项列表 + * + */ var List = BI.inherit(BI.Widget, { props: { + // 指定组件的className baseCls: "my-todolist-list", text: "正在进行" }, - render: function () { + render: function() { var self = this, o = this.options; return { type: "bi.vertical", @@ -91,7 +105,7 @@ { el: { type: "bi.label", - ref: function (_ref) { + ref: function(_ref) { self.count = _ref; }, text: "0" @@ -101,78 +115,76 @@ } ] } - }, { - type: "bi.button_group", - ref: function (_ref) { + }, { // 用bi.vertical布局作为列表项的容器. + type: "bi.vertical", + vgap: 10, + ref: function(_ref) { self.list = _ref; }, - layouts: [ - { - type: "bi.vertical", - vgap: 10 - } - ], - items: o.items, - listeners: [ - { - eventName: "EVENT_CHANGE", - action: function (v) { - self.fireEvent("EVENT_CHANGE", v); - } - } - ] + items: this._createItems(o.items) } ] }; }, - _createItems: function (items) { - return BI.createItems(items, this.options.el); + _createItems: function(items) { + var self = this; + return BI.map(items, function(index, item) { + return BI.extend(item, { + type: "bi.multi_select_item", // 节点采用复选节点展示 + selected: item.done, // 已完成的todo项置为选中状态 + disabled: item.done, // 已完成的todo项置为灰化状态 + listeners: [ + { // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件 + eventName: "EVENT_CHANGE", + action: function(v) { + self.fireEvent("EVENT_CHANGE", v); + } + } + ] + }); + }); }, - _setCount: function (count) { + _setCount: function(count) { this.count.setText(count); }, - populate: function (items) { + populate: function(items) { this.list.populate(this._createItems(items)); this._setCount(items.length); } }); BI.shortcut("my.todolist.list", List); -})();!(function () { +})();!(function() { + /** + * todolist 组件 + */ var ToDoList = BI.inherit(BI.Widget, { props: { baseCls: "fine-to-do-list" }, - _store: function () { - return BI.Models.getModel("my.model.todolist"); - }, - - watch: { - todoList: function (items) { - this.todolist.populate(items); - }, - doneList: function (items) { - this.donelist.populate(items); - } + // 生命周期函数,在组件创建前 + beforeCreate: function() { + // 初始化存储数据 + this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : []; }, - render: function () { + render: function() { var self = this, o = this.options; return { - type: "bi.vtape", + type: "bi.vtape", // vtape布局,顶部高度固定,下部分列表占满高度 items: [ { el: { - type: "my.todolist.header", + type: "my.todolist.header", // 顶部组件 listeners: [ - { + { // 监听组件的EVENT_ADD事件,新建todo项 eventName: "EVENT_ADD", - action: function (v) { - self.store.addToDo(v); + action: function(v) { + self.addToDo(v); } } ], @@ -180,21 +192,22 @@ }, height: 40 }, { - type: "bi.horizontal_auto", - cls: "bi-background", + type: "bi.horizontal_auto", // 水平居中布局 + cls: "my-todolist-background", // 添加className items: [ { el: { - type: "my.todolist.list", - ref: function (_ref) { + type: "my.todolist.list", // need todo项列表 + ref: function(_ref) { self.todolist = _ref; }, + items: this._getNeedTodoList(), text: "正在进行", listeners: [ - { + { // 监听EVENT_CHANGE事件,完成某一项todo eventName: "EVENT_CHANGE", - action: function (v) { - self.store.finish(v); + action: function(v) { + self.finishTodo(v); } } ], @@ -202,9 +215,10 @@ } }, { el: { - type: "my.todolist.list", + type: "my.todolist.list", // 已经完成的todo项列表 text: "已经完成", - ref: function (_ref) { + items: this._getAlreadyDoneList(), + ref: function(_ref) { self.donelist = _ref; }, width: 600 @@ -214,67 +228,57 @@ } ] }; - } - }); - BI.shortcut("my.todolist", ToDoList); -})(); -!(function () { + }, - var ToDoListModel = BI.inherit(Fix.Model, { + _updateLocalStorage: function() { + localStorage.setItem("fine-todolist", JSON.stringify(this.list)); + }, - state: function () { - return { - list: [] - }; + _getNeedTodoList: function() { + return BI.filter(this.list, function(index, item) { + return !item.done; + }); }, - watch: {}, - computed: { - todoList: function () { - var items = BI.filter(this.model.list, function (index, item) { - return !item.done; - }); - return BI.map(items, function (index, item) { - return BI.extend({ - type: "bi.multi_select_item" - }, item); - }); - }, - doneList: function () { - var items = BI.filter(this.model.list, function (index, item) { - return item.done; - }); - return BI.map(items, function (index, item) { - return BI.extend({ - type: "bi.multi_select_item", - selected: true, - disabled: true - }, item); - }); - } + _getAlreadyDoneList: function() { + return BI.filter(this.list, function(index, item) { + return item.done; + }); }, - actions: { - addToDo: function (v) { - this.model.list.push({ - value: BI.UUID(), - text: v, - done: false - }); - }, + /** + * 添加todo项 + * @param text todo项的内容 + */ + addToDo: function(text) { + this.list.push({ + value: BI.UUID(), + text: text, + done: false + }); + this.todolist.populate(this._getNeedTodoList()); + this._updateLocalStorage(); + }, - finish: function (v) { - BI.some(this.model.list, function (index, item) { - if (item.value === v) { - item.done = true; - } - }); - } + /** + * 完成某一项todo + * @param v todo项的value + */ + finishTodo: function(v) { + BI.some(this.list, function(index, item) { + if (item.value === v) { + item.done = true; + } + }); + this.todolist.populate(this._getNeedTodoList()); + this.donelist.populate(this._getAlreadyDoneList()); + this._updateLocalStorage(); } }); - BI.model("my.model.todolist", ToDoListModel); + BI.shortcut("my.todolist", ToDoList); })(); !(function () { + // 将todolist组件挂载到#wrapper上. BI.createWidget({ type: "my.todolist", element: "#wrapper" diff --git a/index.html b/index.html index 294d241..09b8476 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - FineUI Admin + FineUI-Start @@ -11,7 +11,7 @@ - + diff --git a/screenshorts/todolist.gif b/screenshorts/todolist.gif new file mode 100644 index 0000000..15a465e Binary files /dev/null and b/screenshorts/todolist.gif differ diff --git a/src/css/header/header.css b/src/css/header/header.css index 78e5350..051de4b 100644 --- a/src/css/header/header.css +++ b/src/css/header/header.css @@ -1,3 +1,6 @@ +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求 + */ .my-todolist-header { background-color: #3d4d66; } diff --git a/src/css/list/list.css b/src/css/list/list.css index 88d1708..7635093 100644 --- a/src/css/list/list.css +++ b/src/css/list/list.css @@ -1,3 +1,6 @@ +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求 + */ .my-todolist-list .my-todolist-list-text { font-size: 16px; font-weight: bold; diff --git a/src/css/main.css b/src/css/main.css index 6b396bc..214161e 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,1851 +1,6 @@ -@font-face { - font-family: 'bi'; - src: url('font/iconfont.eot'); - src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg'); - /* iOS 4.1- */ -} -.b-font { - font-family: "bi"; - font-style: normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.2px; - -moz-osx-font-smoothing: grayscale; -} -.close-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.close-font .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-font.disabled .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.close-h-font .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-h-font:hover .b-font:before, -.close-h-font.hover .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-h-font.disabled .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.close-ha-font .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-ha-font:hover .b-font:before, -.close-ha-font.hover .b-font:before { - content: "\e6d0"; - color: inherit; -} -.close-ha-font:active .b-font:before, -.close-ha-font.active .b-font:before { - content: "\e6d0"; - color: #3f8ce8; -} -.close-ha-font.disabled .b-font:before { - content: "\e6d0"; - color: inherit; -} -.circle-close-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.circle-close-font .b-font:before { - content: "\e6d5"; - color: inherit; -} -.circle-close-font.disabled .b-font:before { - content: "\e6d5"; - color: inherit; -} -.search-close-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.search-close-h-font .b-font:before { - content: "\e6d0"; - color: inherit; -} -.search-close-h-font:hover .b-font:before, -.search-close-h-font.hover .b-font:before { - content: "\e6d0"; - color: #ff4949; -} -.search-close-h-font.disabled .b-font:before { - content: "\e6d0"; - color: inherit; -} -.pre-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pre-page-h-font .b-font:before { - content: "\e70d"; - color: inherit; -} -.pre-page-h-font:hover .b-font:before, -.pre-page-h-font.hover .b-font:before { - content: "\e70d"; - color: inherit; -} -.pre-page-h-font.disabled .b-font:before { - content: "\e70d"; - color: inherit; -} -.next-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.next-page-h-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.next-page-h-font:hover .b-font:before, -.next-page-h-font.hover .b-font:before { - content: "\e70c"; - color: inherit; -} -.next-page-h-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.search-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.search-font .b-font:before { - content: "\e6dc"; - color: inherit; -} -.search-font.disabled .b-font:before { - content: "\e6dc"; - color: inherit; -} -.date-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.date-font .b-font:before { - content: "\e733"; - color: inherit; -} -.date-font.disabled .b-font:before { - content: "\e733"; - color: inherit; -} -.date-change-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.date-change-h-font .b-font:before { - content: "\e72f"; - color: inherit; -} -.date-change-h-font:hover .b-font:before, -.date-change-h-font.hover .b-font:before { - content: "\e72f"; - color: inherit; -} -.date-change-h-font.disabled .b-font:before { - content: "\e72f"; - color: inherit; -} -.dot-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.dot-font .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-font.disabled .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.dot-h-font .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-h-font:hover .b-font:before, -.dot-h-font.hover .b-font:before { - content: "\e762"; - color: inherit; -} -.dot-h-font.disabled .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.dot-ha-font .b-font:before { - content: "\e762"; - color: #ffffff; -} -.dot-ha-font:hover .b-font:before, -.dot-ha-font.hover .b-font:before { - content: "\e762"; - color: #999999; -} -.dot-ha-font:active .b-font:before, -.dot-ha-font.active .b-font:before { - content: "\e762"; - color: #232e40; -} -.dot-ha-font.disabled .b-font:before { - content: "\e762"; - color: #ffffff; -} -.dot-e-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.dot-e-font .b-font:before { - content: "\e762"; - color: transparent; -} -.dot-e-font:hover .b-font:before, -.dot-e-font.hover .b-font:before { - content: "\e762"; - color: rgba(54, 133, 242, 0.06); -} -.dot-e-font:active .b-font:before { - content: "\e762"; - color: #3685f2; -} -.dot-e-font.active .b-font:before { - content: "\e762"; - color: #3685f2; -} -.dot-e-font.disabled .b-font:before { - content: "\e762"; - color: transparent; -} -.pull-right-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-right-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-right-h-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-h-font:hover .b-font:before, -.pull-right-h-font.hover .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-h-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-right-ha-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-ha-font:hover .b-font:before, -.pull-right-ha-font.hover .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-ha-font:active .b-font:before, -.pull-right-ha-font.active .b-font:before { - content: "\e70c"; - color: #3f8ce8; -} -.pull-right-ha-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-e-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-right-e-font .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-e-font:hover .b-font:before, -.pull-right-e-font.hover .b-font:before { - content: "\e70c"; - color: inherit; -} -.pull-right-e-font:active .b-font:before { - content: "\e70c"; - color: #3f8ce8; -} -.pull-right-e-font.active .b-font:before { - content: "\e70c"; - color: #3f8ce8; -} -.pull-right-e-font.disabled .b-font:before { - content: "\e70c"; - color: inherit; -} -.copy-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.copy-font .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-font.disabled .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.copy-h-font .b-font:before { - content: "\e6bd"; - color: #232e40; -} -.copy-h-font:hover .b-font:before, -.copy-h-font.hover .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-h-font.disabled .b-font:before { - content: "\e6bd"; - color: #232e40; -} -.copy-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.copy-ha-font .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-ha-font:hover .b-font:before, -.copy-ha-font.hover .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-ha-font:active .b-font:before, -.copy-ha-font.active .b-font:before { - content: "\e6bd"; - color: #3f8ce8; -} -.copy-ha-font.disabled .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-e-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.copy-e-font .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-e-font:hover .b-font:before, -.copy-e-font.hover .b-font:before { - content: "\e6bd"; - color: inherit; -} -.copy-e-font:active .b-font:before { - content: "\e6bd"; - color: #3f8ce8; -} -.copy-e-font.active .b-font:before { - content: "\e6bd"; - color: #3f8ce8; -} -.copy-e-font.disabled .b-font:before { - content: "\e6bd"; - color: inherit; -} -.check-mark-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-mark-font .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-font.disabled .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-mark-h-font .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-h-font:hover .b-font:before, -.check-mark-h-font.hover .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-h-font.disabled .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-mark-ha-font .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-ha-font:hover .b-font:before, -.check-mark-ha-font.hover .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-ha-font:active .b-font:before, -.check-mark-ha-font.active .b-font:before { - content: "\e6cf"; - color: #3f8ce8; -} -.check-mark-ha-font.disabled .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-e-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-mark-e-font .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-e-font:hover .b-font:before, -.check-mark-e-font.hover .b-font:before { - content: "\e6cf"; - color: inherit; -} -.check-mark-e-font:active .b-font:before { - content: "\e6cf"; - color: #3f8ce8; -} -.check-mark-e-font.active .b-font:before { - content: "\e6cf"; - color: #3f8ce8; -} -.check-mark-e-font.disabled .b-font:before { - content: "\e6cf"; - color: inherit; -} -/** dashboard组件/控件 下拉列表图标字体 ~end~**/ -.row-pre-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.row-pre-page-h-font .b-font:before { - content: "\e6d9"; - color: inherit; -} -.row-pre-page-h-font:hover .b-font:before, -.row-pre-page-h-font.hover .b-font:before { - content: "\e6d9"; - color: inherit; -} -.row-pre-page-h-font.disabled .b-font:before { - content: "\e6d9"; - color: inherit; -} -.row-next-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.row-next-page-h-font .b-font:before { - content: "\e6d8"; - color: inherit; -} -.row-next-page-h-font:hover .b-font:before, -.row-next-page-h-font.hover .b-font:before { - content: "\e6d8"; - color: inherit; -} -.row-next-page-h-font.disabled .b-font:before { - content: "\e6d8"; - color: inherit; -} -.column-pre-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.column-pre-page-h-font .b-font:before { - content: "\e6d6"; - color: inherit; -} -.column-pre-page-h-font:hover .b-font:before, -.column-pre-page-h-font.hover .b-font:before { - content: "\e6d6"; - color: inherit; -} -.column-pre-page-h-font.disabled .b-font:before { - content: "\e6d6"; - color: inherit; -} -.column-next-page-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.column-next-page-h-font .b-font:before { - content: "\e6d7"; - color: inherit; -} -.column-next-page-h-font:hover .b-font:before, -.column-next-page-h-font.hover .b-font:before { - content: "\e6d7"; - color: inherit; -} -.column-next-page-h-font.disabled .b-font:before { - content: "\e6d7"; - color: inherit; -} -.expander-right-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.expander-right-font .b-font:before { - content: "\e6d8"; - color: inherit; -} -.expander-right-font.disabled .b-font:before { - content: "\e6d8"; - color: inherit; -} -.expander-down-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.expander-down-font .b-font:before { - content: "\e6d7"; - color: inherit; -} -.expander-down-font.disabled .b-font:before { - content: "\e6d7"; - color: inherit; -} -.solid-triangle-top-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.solid-triangle-top-font .b-font:before { - content: "\e6d6"; - color: inherit; -} -.solid-triangle-top-font:hover .b-font:before, -.solid-triangle-top-font.hover .b-font:before { - content: "\e6d6"; - color: inherit; -} -.solid-triangle-top-font.disabled .b-font:before { - content: "\e6d6"; - color: inherit; -} -.solid-triangle-bottom-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.solid-triangle-bottom-font .b-font:before { - content: "\e6d7"; - color: inherit; -} -.solid-triangle-bottom-font:hover .b-font:before, -.solid-triangle-bottom-font.hover .b-font:before { - content: "\e6d7"; - color: inherit; -} -.solid-triangle-bottom-font.disabled .b-font:before { - content: "\e6d7"; - color: inherit; -} -.trigger-triangle-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.trigger-triangle-font .b-font:before { - content: "\e64e"; - color: inherit; -} -.trigger-triangle-font.disabled .b-font:before { - content: "\e64e"; - color: inherit; -} -.pull-up-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-up-font .b-font:before { - content: "\e70a"; - color: inherit; -} -.pull-up-font.disabled .b-font:before { - content: "\e70a"; - color: inherit; -} -.pull-down-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-down-font .b-font:before { - content: "\e70b"; - color: inherit; -} -.pull-down-font.disabled .b-font:before { - content: "\e70b"; - color: inherit; -} -.pull-down-h-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-down-h-font .b-font:before { - content: "\e70b"; - color: #647185; -} -.pull-down-h-font:hover .b-font:before, -.pull-down-h-font.hover .b-font:before { - content: "\e70b"; - color: inherit; -} -.pull-down-h-font.disabled .b-font:before { - content: "\e70b"; - color: #647185; -} -.pull-down-ha-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.pull-down-ha-font .b-font:before { - content: "\e70b"; - color: #647185; -} -.pull-down-ha-font:hover .b-font:before, -.pull-down-ha-font.hover .b-font:before { - content: "\e70b"; - color: inherit; -} -.pull-down-ha-font:active .b-font:before, -.pull-down-ha-font.active .b-font:before { - content: "\e70b"; - color: #3f8ce8; -} -.pull-down-ha-font.disabled .b-font:before { - content: "\e70b"; - color: #647185; -} -.check-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.check-font .b-font:before { - content: "\e6cf"; - color: #3685f2; -} -.check-font.disabled .b-font:before { - content: "\e6cf"; - color: #3685f2; -} -.item-check-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.item-check-font .b-font:before { - content: "\e6cf"; - color: #ffffff; -} -.item-check-font:hover .b-font:before, -.item-check-font.hover .b-font:before { - content: "\e6cf"; - color: #999999; -} -.item-check-font:active .b-font:before, -.item-check-font.active .b-font:before { - content: "\e6cf"; - color: #3f8ce8; -} -.item-check-font.disabled .b-font:before { - content: "\e6cf"; - color: #ffffff; -} -.primary-key-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.primary-key-font .b-font:before { - content: "\e740"; - color: inherit; -} -.primary-key-font:hover .b-font:before, -.primary-key-font.hover .b-font:before { - content: "\e740"; - color: inherit; -} -.primary-key-font.disabled .b-font:before { - content: "\e740"; - color: inherit; -} -.drag-tag-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.drag-tag-font .b-font:before { - content: "\e6d0"; - color: #faaa39; -} -.drag-tag-font.disabled .b-font:before { - content: "\e6d0"; - color: #faaa39; -} -.less-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.less-font .b-font:before { - content: "\e75e"; - color: inherit; -} -.less-font.disabled .b-font:before { - content: "\e75e"; - color: inherit; -} -.less-equal-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.less-equal-font .b-font:before { - content: "\e761"; - color: inherit; -} -.less-equal-font.disabled .b-font:before { - content: "\e761"; - color: inherit; -} -.text-bold-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-bold-font .b-font:before { - content: "\e697"; - color: inherit; -} -.text-bold-font.disabled .b-font:before { - content: "\e697"; - color: inherit; -} -.text-italic-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-italic-font .b-font:before { - content: "\e69d"; - color: inherit; -} -.text-italic-font.disabled .b-font:before { - content: "\e69d"; - color: inherit; -} -.text-underline-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-underline-font .b-font:before { - content: "\e69c"; - color: inherit; -} -.text-underline-font.disabled .b-font:before { - content: "\e69c"; - color: inherit; -} -.text-color-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-color-font .b-font:before { - content: "\e698"; - color: inherit; -} -.text-color-font.disabled .b-font:before { - content: "\e698"; - color: inherit; -} -.text-background-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-background-font .b-font:before { - content: "\e699"; - color: inherit; -} -.text-background-font.disabled .b-font:before { - content: "\e699"; - color: inherit; -} -.text-color-underline-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-color-underline-font .b-font:before { - content: "\e69a"; - color: inherit; -} -.text-color-underline-font.disabled .b-font:before { - content: "\e69a"; - color: inherit; -} -.text-align-left-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-align-left-font .b-font:before { - content: "\e6ca"; - color: inherit; -} -.text-align-left-font.disabled .b-font:before { - content: "\e6ca"; - color: inherit; -} -.text-align-center-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-align-center-font .b-font:before { - content: "\e6bf"; - color: inherit; -} -.text-align-center-font.disabled .b-font:before { - content: "\e6bf"; - color: inherit; -} -.text-align-right-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-align-right-font .b-font:before { - content: "\e6c8"; - color: inherit; -} -.text-align-right-font.disabled .b-font:before { - content: "\e6c8"; - color: inherit; -} -.toast-error-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.toast-error-font .b-font:before { - content: "\e757"; - color: inherit; -} -.toast-error-font.disabled .b-font:before { - content: "\e757"; - color: inherit; -} -.toast-success-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.toast-success-font .b-font:before { - content: "\e756"; - color: inherit; -} -.toast-success-font.disabled .b-font:before { - content: "\e756"; - color: inherit; -} -.toast-warning-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.toast-warning-font .b-font:before { - content: "\e755"; - color: inherit; -} -.toast-warning-font.disabled .b-font:before { - content: "\e755"; - color: inherit; -} -.toast-message-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.toast-message-font .b-font:before { - content: "\e74b"; - color: inherit; -} -.toast-message-font.disabled .b-font:before { - content: "\e74b"; - color: inherit; -} -.text-add-tip-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.text-add-tip-font .b-font:before { - content: "\e6dd"; - color: #13cd66; -} -.text-add-tip-font.disabled .b-font:before { - content: "\e6dd"; - color: #13cd66; -} -.add-up-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.add-up-font .b-font:before { - content: "\e70a"; - color: inherit; -} -.add-up-font.disabled .b-font:before { - content: "\e70a"; - color: inherit; -} -.minus-down-font .b-font { - *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); -} -.minus-down-font .b-font:before { - content: "\e70b"; - color: inherit; -} -.minus-down-font.disabled .b-font:before { - content: "\e70b"; - color: inherit; -} -.tree-collapse-icon-type1 .x-icon { - display: block; - background: url('images/2x/icon/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_1.png'); - background-size: contain; - _background: none; -} -.tree-collapse-icon-type1 .x-icon.hack { - background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png'); - _background: none; -} -.tree-collapse-icon-type2 .x-icon { - display: block; - background: url('images/2x/icon/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_2.png'); - background-size: contain; - _background: none; -} -.tree-collapse-icon-type2 .x-icon.hack { - background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png'); - _background: none; -} -.tree-collapse-icon-type3 .x-icon { - display: block; - background: url('images/2x/icon/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_3.png'); - background-size: contain; - _background: none; -} -.tree-collapse-icon-type3 .x-icon.hack { - background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png'); - _background: none; -} -.tree-collapse-icon-type4 .x-icon { - display: block; - background: url('images/2x/icon/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_4.png'); - background-size: contain; - _background: none; -} -.tree-collapse-icon-type4 .x-icon.hack { - background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png'); - _background: none; -} -.tree-expand-icon-type1 .x-icon { - display: block; - background: url('images/2x/icon/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_1.png'); - background-size: contain; - _background: none; -} -.tree-expand-icon-type1 .x-icon.hack { - background: url('images/1x/icon/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png'); - _background: none; -} -.tree-expand-icon-type2 .x-icon { - display: block; - background: url('images/2x/icon/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_2.png'); - background-size: contain; - _background: none; -} -.tree-expand-icon-type2 .x-icon.hack { - background: url('images/1x/icon/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png'); - _background: none; -} -.tree-expand-icon-type3 .x-icon { - display: block; - background: url('images/2x/icon/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_3.png'); - background-size: contain; - _background: none; -} -.tree-expand-icon-type3 .x-icon.hack { - background: url('images/1x/icon/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png'); - _background: none; -} -.tree-expand-icon-type4 .x-icon { - display: block; - background: url('images/2x/icon/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_4.png'); - background-size: contain; - _background: none; -} -.tree-expand-icon-type4 .x-icon.hack { - background: url('images/1x/icon/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png'); - _background: none; -} -.tree-vertical-line-type2 .x-icon { - display: block; - background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_2.png'); - background-size: contain; - _background: none; -} -.tree-vertical-line-type2 .x-icon.hack { - background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png'); - _background: none; -} -.tree-vertical-line-type3 .x-icon { - display: block; - background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_3.png'); - background-size: contain; - _background: none; -} -.tree-vertical-line-type3 .x-icon.hack { - background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png'); - _background: none; -} -.tree-vertical-line-type4 .x-icon { - display: block; - background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_4.png'); - background-size: contain; - _background: none; -} -.tree-vertical-line-type4 .x-icon.hack { - background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png'); - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type1 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_1.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type1 .x-icon.hack { - background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png'); - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type2 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_2.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type2 .x-icon.hack { - background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png'); - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type3 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_3.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type3 .x-icon.hack { - background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png'); - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type4 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_4.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-collapse-icon-type4 .x-icon.hack { - background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png'); - _background: none; -} -.bi-theme-dark .tree-expand-icon-type1 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_1.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-expand-icon-type1 .x-icon.hack { - background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png'); - _background: none; -} -.bi-theme-dark .tree-expand-icon-type2 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_2.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-expand-icon-type2 .x-icon.hack { - background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png'); - _background: none; -} -.bi-theme-dark .tree-expand-icon-type3 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_3.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-expand-icon-type3 .x-icon.hack { - background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png'); - _background: none; -} -.bi-theme-dark .tree-expand-icon-type4 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_4.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-expand-icon-type4 .x-icon.hack { - background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png'); - _background: none; -} -.bi-theme-dark .tree-vertical-line-type2 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_2.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-vertical-line-type2 .x-icon.hack { - background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png'); - _background: none; -} -.bi-theme-dark .tree-vertical-line-type3 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_3.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-vertical-line-type3 .x-icon.hack { - background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png'); - _background: none; -} -.bi-theme-dark .tree-vertical-line-type4 .x-icon { - display: block; - background: url('images/2x/icon/dark/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_4.png'); - background-size: contain; - _background: none; -} -.bi-theme-dark .tree-vertical-line-type4 .x-icon.hack { - background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png'); - _background: none; -} -.check-box-icon .x-icon { - display: block; - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.check-box-icon .x-icon.hack { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.check-box-icon:hover .x-icon, -.check-box-icon.hover .x-icon { - display: block; - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.check-box-icon:hover .x-icon.hack, -.check-box-icon.hover .x-icon.hack { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.check-box-icon:active .x-icon { - display: block; - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.check-box-icon:active .x-icon.hack { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.check-box-icon.active .x-icon { - display: block; - background: url('images/2x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png'); - background-size: contain; - _background: none; -} -.check-box-icon.active .x-icon.hack { - background: url('images/1x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png'); - _background: none; -} -.check-box-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/check_box_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable.png'); - background-size: contain; - _background: none; -} -.check-box-icon.disabled .x-icon.hack { - background: url('images/1x/icon/check_box_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable.png'); - _background: none; -} -.check-box-icon.disabled.active .x-icon { - display: block; - background: url('images/2x/icon/check_box_disable2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable2.png'); - background-size: contain; - _background: none; -} -.check-box-icon.disabled.active .x-icon.hack { - background: url('images/1x/icon/check_box_disable2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable2.png'); - _background: none; -} -.radio-icon .x-icon { - display: block; - background: url('images/2x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png'); - background-size: contain; - _background: none; -} -.radio-icon .x-icon.hack { - background: url('images/1x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png'); - _background: none; -} -.radio-icon:hover .x-icon, -.radio-icon.hover .x-icon { - display: block; - background: url('images/2x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png'); - background-size: contain; - _background: none; -} -.radio-icon:hover .x-icon.hack, -.radio-icon.hover .x-icon.hack { - background: url('images/1x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png'); - _background: none; -} -.radio-icon:active .x-icon { - display: block; - background: url('images/2x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png'); - background-size: contain; - _background: none; -} -.radio-icon:active .x-icon.hack { - background: url('images/1x/icon/radio_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png'); - _background: none; -} -.radio-icon.active .x-icon { - display: block; - background: url('images/2x/icon/radio_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_active.png'); - background-size: contain; - _background: none; -} -.radio-icon.active .x-icon.hack { - background: url('images/1x/icon/radio_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_active.png'); - _background: none; -} -.radio-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/radio_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable.png'); - background-size: contain; - _background: none; -} -.radio-icon.disabled .x-icon.hack { - background: url('images/1x/icon/radio_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable.png'); - _background: none; -} -.radio-icon.disabled.active .x-icon { - display: block; - background: url('images/2x/icon/radio_disable2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable2.png'); - background-size: contain; - _background: none; -} -.radio-icon.disabled.active .x-icon.hack { - background: url('images/1x/icon/radio_disable2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable2.png'); - _background: none; -} -.check-half-select-icon .x-icon { - display: block; - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.check-half-select-icon .x-icon.hack { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.slider-icon .x-icon { - display: block; - background: url('images/2x/icon/slider_normal_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_normal_small.png'); - background-size: contain; - _background: none; -} -.slider-icon .x-icon.hack { - background: url('images/1x/icon/slider_normal_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_normal_small.png'); - _background: none; -} -.slider-icon:hover .x-icon, -.slider-icon.hover .x-icon { - display: block; - background: url('images/2x/icon/slider_active_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_active_small.png'); - background-size: contain; - _background: none; -} -.slider-icon:hover .x-icon.hack, -.slider-icon.hover .x-icon.hack { - background: url('images/1x/icon/slider_active_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_active_small.png'); - _background: none; -} -.slider-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/slider_normal_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/slider_normal_small.png'); - background-size: contain; - _background: none; -} -.slider-icon.disabled .x-icon.hack { - background: url('images/1x/icon/slider_normal_small.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/slider_normal_small.png'); - _background: none; -} -.auto-color-icon .x-icon { - display: block; - background: url('images/2x/icon/auto_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_normal.png'); - background-size: contain; - _background: none; -} -.auto-color-icon .x-icon.hack { - background: url('images/1x/icon/auto_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_normal.png'); - _background: none; -} -.auto-color-icon.active .x-icon { - display: block; - background: url('images/2x/icon/auto_select.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_select.png'); - background-size: contain; - _background: none; -} -.auto-color-icon.active .x-icon.hack { - background: url('images/1x/icon/auto_select.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_select.png'); - _background: none; -} -.auto-color-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/auto_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/auto_disable.png'); - background-size: contain; - _background: none; -} -.auto-color-icon.disabled .x-icon.hack { - background: url('images/1x/icon/auto_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/auto_disable.png'); - _background: none; -} -.trans-color-icon .x-icon { - display: block; - background: url('images/2x/icon/trans_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_normal.png'); - background-size: contain; - _background: none; -} -.trans-color-icon .x-icon.hack { - background: url('images/1x/icon/trans_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_normal.png'); - _background: none; -} -.trans-color-icon.active .x-icon { - display: block; - background: url('images/2x/icon/trans_select.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_select.png'); - background-size: contain; - _background: none; -} -.trans-color-icon.active .x-icon.hack { - background: url('images/1x/icon/trans_select.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_select.png'); - _background: none; -} -.trans-color-icon.disabled .x-icon { - display: block; - background: url('images/2x/icon/trans_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/trans_disable.png'); - background-size: contain; - _background: none; -} -.trans-color-icon.disabled .x-icon.hack { - background: url('images/1x/icon/trans_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/trans_disable.png'); - _background: none; -} -.farbtastic .wheel { - background: url('images/1x/background/wheel.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/wheel.png'); - _background: none; -} -.farbtastic .overlay { - background: url('images/1x/background/mask.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/mask.png'); - _background: none; -} -.farbtastic .marker { - background: url('images/1x/background/marker.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/marker.png'); - _background: none; -} -.bi-display-tree .ztree li span.button.switch.center_open { - background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png'); - _background: none; -} -.bi-display-tree .ztree li span.button.switch.roots_open { - background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png'); - _background: none; -} -.bi-display-tree .ztree li span.button.switch.bottom_open { - background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png'); - _background: none; -} -.ztree li ul.line { - background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png'); - _background: none; -} -.bi-theme-dark .ztree li ul.line { - background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png'); - _background: none; -} -.ztree li span.button.chk.checkbox_false_full { - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_false_full_focus { - background: url('images/2x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_false_part { - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_false_part_focus { - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_true_full { - background: url('images/2x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_true_full_focus { - background: url('images/2x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_true_part { - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.ztree li span.button.chk.checkbox_true_part_focus { - background: url('images/2x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png'); - background-size: contain; - _background: none; -} -.ztree.hack li span.button.chk.checkbox_false_full { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_false_full_focus { - background: url('images/1x/icon/check_box_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_false_part { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_false_part_focus { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_true_full { - background: url('images/1x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_true_full_focus { - background: url('images/1x/icon/check_box_active.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_true_part { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.ztree.hack li span.button.chk.checkbox_true_part_focus { - background: url('images/1x/icon/half_selected.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png'); - _background: none; -} -.ztree li span.button.root_open { - background: url('images/1x/icon/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.root_open { - background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png'); - _background: none; -} -.ztree li span.button.root_close { - background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.root_close { - background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png'); - _background: none; -} -.ztree li span.button.roots_open { - background: url('images/1x/icon/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.roots_open { - background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png'); - _background: none; -} -.ztree li span.button.roots_close { - background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.roots_close { - background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png'); - _background: none; -} -.ztree li span.button.center_open { - background: url('images/1x/icon/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.center_open { - background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png'); - _background: none; -} -.ztree li span.button.center_close { - background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.center_close { - background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png'); - _background: none; -} -.ztree li span.button.bottom_open { - background: url('images/1x/icon/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.bottom_open { - background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png'); - _background: none; -} -.ztree li span.button.bottom_close { - background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.bottom_close { - background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png'); - _background: none; -} -.ztree li span.button.roots_docu { - background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.roots_docu { - background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png'); - _background: none; -} -.ztree li span.button.center_docu { - background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.center_docu { - background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png'); - _background: none; -} -.ztree li span.button.bottom_docu { - background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png'); - _background: none; -} -.bi-theme-dark .ztree li span.button.bottom_docu { - background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png'); - _background: none; -} -.ztree li span.button.ico_loading { - background: url('images/1x/icon/loading.gif') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/loading.gif'); - _background: none; -} -.base-line-conn-background { - background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 0 0; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png'); - _background: none; -} -.bi-theme-dark .base-line-conn-background { - background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 0 0; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png'); - _background: none; -} -.first-line-conn-background { - background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png'); - _background: none; -} -.bi-theme-dark .first-line-conn-background { - background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png'); - _background: none; -} -.mid-line-conn-background { - background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png'); - _background: none; -} -.bi-theme-dark .mid-line-conn-background { - background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png'); - _background: none; -} -.last-line-conn-background { - background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png'); - _background: none; -} -.bi-theme-dark .last-line-conn-background { - background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png'); - _background: none; -} -.loading-background { - background: url('images/2x/icon/loading.gif') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif'); - background-size: contain; - _background: none; -} -.auto-color-background { - background: url('images/2x/background/auto_color.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color.png'); - background-size: contain; - _background: none; -} -.auto-color-normal-background { - background: url('images/2x/background/auto_color_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal.png'); - background-size: contain; - _background: none; -} -.auto-color-normal-disabled-background { - background: url('images/2x/background/auto_color_normal_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal_disable.png'); - background-size: contain; - _background: none; -} -.trans-color-background { - background: url('images/2x/background/trans_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_normal.png'); - background-size: contain; - _background: none; -} -.trans-color-disabled-background { - background: url('images/2x/background/trans_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_disable.png'); - background-size: contain; - _background: none; -} -.auto-color-background.hack { - background: url('images/1x/background/auto_color.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color.png'); - _background: none; -} -.auto-color-normal-background.hack { - background: url('images/1x/background/auto_color_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal.png'); - _background: none; -} -.auto-color-normal-disabled-background.hack { - background: url('images/1x/background/auto_color_normal_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal_disable.png'); - _background: none; -} -.trans-color-background.hack { - background: url('images/1x/background/trans_normal.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_normal.png'); - _background: none; -} -.trans-color-disabled-background.hack { - background: url('images/1x/background/trans_disable.png') no-repeat center center; - _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_disable.png'); - _background: none; -} -html { - height: 100%; - overflow: hidden; -} -body { - position: absolute; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - top: 0; - left: 0; - background-repeat: repeat; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - color: #3d4d66; - font: normal 12px "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Heiti; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none; - -kthml-user-focus: normal; - -moz-user-focus: normal; - -moz-outline: 0 none; - outline: 0 none; -} -div::-webkit-scrollbar, -textarea::-webkit-scrollbar { - -webkit-appearance: none; - background-color: rgba(135, 141, 159, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d878d9f,endColorstr=#0d878d9f); - width: 6px; - height: 6px; -} -div::-webkit-scrollbar-thumb, -textarea::-webkit-scrollbar-thumb { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - background-color: rgba(135, 141, 159, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d878d9f,endColorstr=#4d878d9f); -} -div::-webkit-scrollbar-thumb:hover, -textarea::-webkit-scrollbar-thumb:hover { - background-color: rgba(135, 141, 159, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3878d9f,endColorstr=#b3878d9f); -} -.bi-theme-dark div::-webkit-scrollbar, -.bi-theme-dark textarea::-webkit-scrollbar { - -webkit-appearance: none; - background-color: rgba(208, 212, 218, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dd0d4da,endColorstr=#0dd0d4da); - width: 6px; - height: 6px; -} -.bi-theme-dark div::-webkit-scrollbar-thumb, -.bi-theme-dark textarea::-webkit-scrollbar-thumb { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - background-color: rgba(208, 212, 218, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dd0d4da,endColorstr=#4dd0d4da); -} -.bi-theme-dark div::-webkit-scrollbar-thumb:hover, -.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover { - background-color: rgba(208, 212, 218, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3d0d4da,endColorstr=#b3d0d4da); -} -#wrapper { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; - overflow-x: hidden; - overflow-y: hidden; +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求 + */ +.my-todolist-background { + background-color: #f7f8fa; } diff --git a/src/index.js b/src/index.js index efd2279..d906090 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ !(function () { + // 将todolist组件挂载到#wrapper上. BI.createWidget({ type: "my.todolist", element: "#wrapper" diff --git a/src/modules/header/header.js b/src/modules/header/header.js index 98b2973..c7ce6e1 100644 --- a/src/modules/header/header.js +++ b/src/modules/header/header.js @@ -1,18 +1,23 @@ -!(function () { +!(function() { + /** + * 顶部组件,提供输入框添加todo项目 + * 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中 + */ var ToDoListHeader = BI.inherit(BI.Widget, { props: { + // 指定组件的className baseCls: "my-todolist-header" }, - render: function () { + render: function() { var self = this, o = this.options; return { - type: "bi.horizontal_auto", + type: "bi.horizontal_auto", // 水平居中布局 items: [ { el: { - type: "bi.left_right_vertical_adapt", + type: "bi.left_right_vertical_adapt", // 左右垂直居中布局 width: 600, height: o.height, items: { @@ -30,17 +35,21 @@ { el: { type: "bi.editor", + ref: function(_ref) { + self.editor = _ref; + }, allowBlank: true, cls: "my-todolist-header-editor", watermark: "添加ToDo", width: 300, height: 24, listeners: [ - { + { // 监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空 eventName: "EVENT_ENTER", - action: function () { + action: function() { + // 注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值. self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue()); - this.setValue(""); + self.editor.setValue(""); } } ] diff --git a/src/modules/header/header.less b/src/modules/header/header.less index 2b1694e..32fcaac 100644 --- a/src/modules/header/header.less +++ b/src/modules/header/header.less @@ -1,5 +1,7 @@ @import "../../index.less"; - +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求 + */ .my-todolist-header { background-color: #3d4d66; diff --git a/src/modules/list/list.js b/src/modules/list/list.js index 42db177..d4e0d3a 100644 --- a/src/modules/list/list.js +++ b/src/modules/list/list.js @@ -1,12 +1,17 @@ -!(function () { +!(function() { + /** + * todo项列表 + * + */ var List = BI.inherit(BI.Widget, { props: { + // 指定组件的className baseCls: "my-todolist-list", text: "正在进行" }, - render: function () { + render: function() { var self = this, o = this.options; return { type: "bi.vertical", @@ -31,7 +36,7 @@ { el: { type: "bi.label", - ref: function (_ref) { + ref: function(_ref) { self.count = _ref; }, text: "0" @@ -41,40 +46,42 @@ } ] } - }, { - type: "bi.button_group", - ref: function (_ref) { + }, { // 用bi.vertical布局作为列表项的容器. + type: "bi.vertical", + vgap: 10, + ref: function(_ref) { self.list = _ref; }, - layouts: [ - { - type: "bi.vertical", - vgap: 10 - } - ], - items: o.items, - listeners: [ - { - eventName: "EVENT_CHANGE", - action: function (v) { - self.fireEvent("EVENT_CHANGE", v); - } - } - ] + items: this._createItems(o.items) } ] }; }, - _createItems: function (items) { - return BI.createItems(items, this.options.el); + _createItems: function(items) { + var self = this; + return BI.map(items, function(index, item) { + return BI.extend(item, { + type: "bi.multi_select_item", // 节点采用复选节点展示 + selected: item.done, // 已完成的todo项置为选中状态 + disabled: item.done, // 已完成的todo项置为灰化状态 + listeners: [ + { // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件 + eventName: "EVENT_CHANGE", + action: function(v) { + self.fireEvent("EVENT_CHANGE", v); + } + } + ] + }); + }); }, - _setCount: function (count) { + _setCount: function(count) { this.count.setText(count); }, - populate: function (items) { + populate: function(items) { this.list.populate(this._createItems(items)); this._setCount(items.length); } diff --git a/src/modules/list/list.less b/src/modules/list/list.less index b2819f8..7b1d751 100644 --- a/src/modules/list/list.less +++ b/src/modules/list/list.less @@ -1,5 +1,7 @@ @import "../../index.less"; - +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求 + */ .my-todolist-list { .my-todolist-list-text { font-size: @font-size-16; diff --git a/src/modules/main.js b/src/modules/main.js index 1058218..9152cee 100644 --- a/src/modules/main.js +++ b/src/modules/main.js @@ -1,36 +1,32 @@ -!(function () { +!(function() { + /** + * todolist 组件 + */ var ToDoList = BI.inherit(BI.Widget, { props: { baseCls: "fine-to-do-list" }, - _store: function () { - return BI.Models.getModel("my.model.todolist"); + // 生命周期函数,在组件创建前 + beforeCreate: function() { + // 初始化存储数据 + this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : []; }, - watch: { - todoList: function (items) { - this.todolist.populate(items); - }, - doneList: function (items) { - this.donelist.populate(items); - } - }, - - render: function () { + render: function() { var self = this, o = this.options; return { - type: "bi.vtape", + type: "bi.vtape", // vtape布局,顶部高度固定,下部分列表占满高度 items: [ { el: { - type: "my.todolist.header", + type: "my.todolist.header", // 顶部组件 listeners: [ - { + { // 监听组件的EVENT_ADD事件,新建todo项 eventName: "EVENT_ADD", - action: function (v) { - self.store.addToDo(v); + action: function(v) { + self.addToDo(v); } } ], @@ -38,21 +34,22 @@ }, height: 40 }, { - type: "bi.horizontal_auto", - cls: "bi-background", + type: "bi.horizontal_auto", // 水平居中布局 + cls: "my-todolist-background", // 添加className items: [ { el: { - type: "my.todolist.list", - ref: function (_ref) { + type: "my.todolist.list", // need todo项列表 + ref: function(_ref) { self.todolist = _ref; }, + items: this._getNeedTodoList(), text: "正在进行", listeners: [ - { + { // 监听EVENT_CHANGE事件,完成某一项todo eventName: "EVENT_CHANGE", - action: function (v) { - self.store.finish(v); + action: function(v) { + self.finishTodo(v); } } ], @@ -60,9 +57,10 @@ } }, { el: { - type: "my.todolist.list", + type: "my.todolist.list", // 已经完成的todo项列表 text: "已经完成", - ref: function (_ref) { + items: this._getAlreadyDoneList(), + ref: function(_ref) { self.donelist = _ref; }, width: 600 @@ -72,6 +70,51 @@ } ] }; + }, + + _updateLocalStorage: function() { + localStorage.setItem("fine-todolist", JSON.stringify(this.list)); + }, + + _getNeedTodoList: function() { + return BI.filter(this.list, function(index, item) { + return !item.done; + }); + }, + + _getAlreadyDoneList: function() { + return BI.filter(this.list, function(index, item) { + return item.done; + }); + }, + + /** + * 添加todo项 + * @param text todo项的内容 + */ + addToDo: function(text) { + this.list.push({ + value: BI.UUID(), + text: text, + done: false + }); + this.todolist.populate(this._getNeedTodoList()); + this._updateLocalStorage(); + }, + + /** + * 完成某一项todo + * @param v todo项的value + */ + finishTodo: function(v) { + BI.some(this.list, function(index, item) { + if (item.value === v) { + item.done = true; + } + }); + this.todolist.populate(this._getNeedTodoList()); + this.donelist.populate(this._getAlreadyDoneList()); + this._updateLocalStorage(); } }); BI.shortcut("my.todolist", ToDoList); diff --git a/src/modules/main.less b/src/modules/main.less new file mode 100644 index 0000000..14cef72 --- /dev/null +++ b/src/modules/main.less @@ -0,0 +1,6 @@ +/** + 列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求 + */ +.my-todolist-background { + background-color: #f7f8fa; +} \ No newline at end of file diff --git a/src/modules/main.model.js b/src/modules/main.model.js deleted file mode 100644 index 2d43a3d..0000000 --- a/src/modules/main.model.js +++ /dev/null @@ -1,56 +0,0 @@ -!(function () { - - var ToDoListModel = BI.inherit(Fix.Model, { - - state: function () { - return { - list: [] - }; - }, - watch: {}, - - computed: { - todoList: function () { - var items = BI.filter(this.model.list, function (index, item) { - return !item.done; - }); - return BI.map(items, function (index, item) { - return BI.extend({ - type: "bi.multi_select_item" - }, item); - }); - }, - doneList: function () { - var items = BI.filter(this.model.list, function (index, item) { - return item.done; - }); - return BI.map(items, function (index, item) { - return BI.extend({ - type: "bi.multi_select_item", - selected: true, - disabled: true - }, item); - }); - } - }, - - actions: { - addToDo: function (v) { - this.model.list.push({ - value: BI.UUID(), - text: v, - done: false - }); - }, - - finish: function (v) { - BI.some(this.model.list, function (index, item) { - if (item.value === v) { - item.done = true; - } - }); - } - } - }); - BI.model("my.model.todolist", ToDoListModel); -})();