示例

├── .eslintignore ├── src ├── App.vue ├── styles │ ├── theme.scss │ └── handsontable.full.scss ├── router │ └── index.js ├── index.js └── views │ └── Report │ ├── components │ ├── ChartsEdit.vue │ ├── PrintReport.vue │ ├── ReportData.vue │ ├── ChartToImage.vue │ └── Chart.vue │ └── ReportEdit.vue ├── .editorconfig ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── README.md ├── index.html ├── .eslintrc.js ├── webpack.config.js ├── webpack.config.prod.js └── package.json /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/styles/theme.scss: -------------------------------------------------------------------------------- 1 | /* 改变 icon 字体路径变量，必需 */ 2 | $--font-path: '../../node_modules/element-ui/lib/theme-chalk/fonts'; 3 | 4 | @import "../../node_modules/element-ui/packages/theme-chalk/src/index"; 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 数据处理 2 | 3 | 之前写了一篇 [js-xlsx + handsontable + echarts实现excel上传编辑然后显示成图表](https://github.com/noahlam/articles/blob/master/js-xlsx%20%2B%20handsontable%20%2B%20echarts.md)本来至少作为一个个人的项目总结，感觉这代码就算一些库的使用而已。没有开源的价值，不过这篇内容发在掘金上后，很多同学回复说像看源码，所以就开源。 4 | 5 | 源码我说直接从业务代码里面抽离出来的。所以可能会有抽离不干净或者代码本身写的不好的地方。请大家海涵哈。 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 示例 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | // 报表列表-报表填写 4 | import ReportEdit from '@/views/Report/ReportEdit' 5 | 6 | Vue.use(Router) 7 | 8 | export const route = [ 9 | { 10 | path: '/', 11 | name: '报表填写', 12 | component: ReportEdit, 13 | hidden: true, 14 | } 15 | ] 16 | 17 | export default new Router({ 18 | routes: route 19 | }) 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import Element from 'element-ui' 5 | import App from './App' 6 | import router from './router' 7 | import './styles/theme.scss' 8 | 9 | Vue.use(Element) 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | components: {App}, 15 | template: '' 16 | }) 17 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | 'eqeqeq': 0, 25 | 'arrow-parens': 0, 26 | // allow async-await 27 | 'generator-star-spacing': 'off', 28 | // allow debugger during development 29 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { VueLoaderPlugin } = require('vue-loader') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | const webpackConfig = { 6 | mode: "development", 7 | entry: { 8 | index: './src/index.js', 9 | }, 10 | output: { 11 | publicPath: "./", 12 | filename: '[name].js', 13 | }, 14 | resolve: { 15 | extensions: ['.js', '.vue'], 16 | alias: { 17 | 'vue': 'vue/dist/vue', 18 | '@': path.resolve(__dirname, './src'), 19 | } 20 | }, 21 | devServer: { 22 | host: '0.0.0.0', 23 | inline: true, 24 | port:8118, 25 | publicPath: '/', 26 | proxy: { 27 | '/': { 28 | target: 'http://scadmin.torvoz.cn', 29 | changeOrigin:true, 30 | } 31 | }, 32 | }, 33 | 34 | plugins: [ 35 | new VueLoaderPlugin(), 36 | new HtmlWebpackPlugin({ 37 | filename: 'index.html', 38 | template: 'index.html', 39 | title: '特沃兹电商', 40 | inject: true 41 | }), 42 | ], 43 | module: { 44 | rules: [ 45 | {test: /\.js$/, exclude: /node_modules/, use: {loader: 'babel-loader',}}, 46 | {test: /\.json$/, use: 'json-loader'}, 47 | {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, 48 | {test: /\.vue$/, use: 'vue-loader'}, 49 | {test: /\.css$/, loader: 'style-loader!css-loader'}, 50 | {test: /\.scss$/, loader:'style-loader!css-loader!sass-loader'}, 51 | {test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader?name=font/[name]-[hash].[ext]'}, 52 | 53 | ] 54 | } 55 | }; 56 | 57 | module.exports = webpackConfig 58 | -------------------------------------------------------------------------------- /src/views/Report/components/ChartsEdit.vue: -------------------------------------------------------------------------------- 1 | 19 | 62 | 63 | 68 | -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const {VueLoaderPlugin} = require('vue-loader') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 5 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin') //开启多线程进行加快速度 6 | 7 | module.exports = { 8 | mode: "production", 9 | entry: { 10 | index: './src/index.js', 11 | }, 12 | output: { 13 | publicPath: "/", 14 | filename: '[name].js', 15 | }, 16 | resolve: { 17 | extensions: ['.js', '.vue'], 18 | alias: { 19 | '@': path.resolve(__dirname, './src'), 20 | 'vue': 'vue/dist/vue.common', 21 | } 22 | }, 23 | plugins: [ 24 | new CleanWebpackPlugin(['dist']), 25 | new VueLoaderPlugin, 26 | new HtmlWebpackPlugin({ 27 | template: './index.html', 28 | filename: './index.html', 29 | inject: true, 30 | title: '特沃兹电商', 31 | chunks: ['index'], 32 | }), 33 | new UglifyJSPlugin({ 34 | cache: true, 35 | parallel: true, 36 | sourceMap: true 37 | }), //开启多线程进行打包 38 | ], 39 | // optimization:{ 40 | // splitChunks: { // 加这个打包会变慢很多 41 | // chunks: "all", 42 | // minSize: 30000, 43 | // minChunks: 1, 44 | // maxAsyncRequests: 5, 45 | // maxInitialRequests: 3, 46 | // name: true, 47 | // cacheGroups: { 48 | // default: { 49 | // minChunks: 2, 50 | // priority: -20, 51 | // reuseExistingChunk: true, 52 | // }, 53 | // vendors: { 54 | // test: /[\\/]node_modules[\\/]/, 55 | // priority: -10 56 | // } 57 | // } 58 | // } 59 | // }, 60 | module: { 61 | rules: [ 62 | {test: /\.vue$/, loader: 'vue-loader'}, 63 | {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}, 64 | {test: /\.css$/, loader: 'style-loader!css-loader'}, 65 | {test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'}, 66 | {test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/, loader: 'url-loader?limit=8192'}, 67 | {test: /\.json$/, loader: 'json-loader'}, 68 | {test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader?name=font/[name]-[hash].[ext]'}, 69 | // {test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader?publicPath=/'}, 70 | ] 71 | } 72 | }; 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ZZSW-admin", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "ruth2013 <317315074@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server", 9 | "build": "webpack --config ./webpack.config.prod.js", 10 | "lint": "eslint --ext .js,.vue src" 11 | }, 12 | "dependencies": { 13 | "@handsontable/vue": "^2.0.0", 14 | "echarts": "^4.1.0", 15 | "element-ui": "^2.4.5", 16 | "handsontable": "^5.0.0", 17 | "vue": "^2.5.16", 18 | "vue-router": "^3.0.1", 19 | "vuex": "^3.0.1", 20 | "xlsx": "^0.13.3" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^7.1.2", 24 | "babel-core": "^6.22.1", 25 | "babel-eslint": "^8.2.1", 26 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 27 | "babel-loader": "^7.1.1", 28 | "babel-plugin-syntax-jsx": "^6.18.0", 29 | "babel-plugin-transform-runtime": "^6.22.0", 30 | "babel-plugin-transform-vue-jsx": "^3.5.0", 31 | "babel-polyfill": "^6.26.0", 32 | "babel-preset-env": "^1.3.2", 33 | "babel-preset-stage-2": "^6.22.0", 34 | "chalk": "^2.0.1", 35 | "copy-webpack-plugin": "^4.0.1", 36 | "eslint": "^4.19.1", 37 | "eslint-config-standard": "^10.2.1", 38 | "eslint-friendly-formatter": "^3.0.0", 39 | "eslint-loader": "^1.7.1", 40 | "eslint-plugin-import": "^2.7.0", 41 | "eslint-plugin-node": "^5.2.0", 42 | "eslint-plugin-promise": "^3.4.0", 43 | "eslint-plugin-standard": "^3.0.1", 44 | "eslint-plugin-vue": "^4.0.0", 45 | "extract-text-webpack-plugin": "^3.0.0", 46 | "friendly-errors-webpack-plugin": "^1.6.1", 47 | "node-notifier": "^5.1.2", 48 | "node-sass": "^4.7.2", 49 | "optimize-css-assets-webpack-plugin": "^3.2.0", 50 | "ora": "^1.2.0", 51 | "portfinder": "^1.0.13", 52 | "postcss-import": "^11.0.0", 53 | "postcss-loader": "^2.0.8", 54 | "postcss-url": "^7.2.1", 55 | "rimraf": "^2.6.0", 56 | "sass-loader": "^6.0.6", 57 | "semver": "^5.3.0", 58 | "shelljs": "^0.7.6", 59 | "uglifyjs-webpack-plugin": "^1.1.1", 60 | "vue-style-loader": "^3.0.1", 61 | "webpack-bundle-analyzer": "^2.9.0", 62 | "webpack-merge": "^4.1.0", 63 | "css-loader": "^0.28.0", 64 | "file-loader": "^1.1.11", 65 | "json-loader": "^0.5.4", 66 | "style-loader": "*", 67 | "url-loader": "^0.5.7", 68 | "vue-loader": "^15.2.0", 69 | "vue-template-compiler": "^2.5.16", 70 | "webpack": "^4.8.3", 71 | "webpack-cli": "^2.1.4", 72 | "clean-webpack-plugin": "^0.1.19", 73 | "html-webpack-plugin": "^3.2.0", 74 | "webpack-dev-server": "^3.1.4" 75 | }, 76 | "engines": { 77 | "node": ">= 6.0.0", 78 | "npm": ">= 3.0.0" 79 | }, 80 | "browserslist": [ 81 | "> 1%", 82 | "last 2 versions", 83 | "not ie <= 8" 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /src/views/Report/components/PrintReport.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 122 | 123 | 128 | -------------------------------------------------------------------------------- /src/views/Report/components/ReportData.vue: -------------------------------------------------------------------------------- 1 | 25 | 121 | 126 | 127 | 159 | -------------------------------------------------------------------------------- /src/views/Report/ReportEdit.vue: -------------------------------------------------------------------------------- 1 | 24 | 161 | 162 | 165 | 166 | 233 | -------------------------------------------------------------------------------- /src/views/Report/components/ChartToImage.vue: -------------------------------------------------------------------------------- 1 | 7 | 238 | 239 | 255 | -------------------------------------------------------------------------------- /src/views/Report/components/Chart.vue: -------------------------------------------------------------------------------- 1 | 42 | 260 | 261 | 283 | -------------------------------------------------------------------------------- /src/styles/handsontable.full.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * (The MIT License) 3 | * 4 | * Copyright (c) 2012-2014 Marcin Warpechowski 5 | * Copyright (c) 2015 Handsoncode sp. z o.o. 6 | * 7 | * Permission is hereby granted, free of charge, to any person obtaining 8 | * a copy of this software and associated documentation files (the 9 | * 'Software'), to deal in the Software without restriction, including 10 | * without limitation the rights to use, copy, modify, merge, publish, 11 | * distribute, sublicense, and/or sell copies of the Software, and to 12 | * permit persons to whom the Software is furnished to do so, subject to 13 | * the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be 16 | * included in all copies or substantial portions of the Software. 17 | * 18 | * THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 19 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 20 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 21 | * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 22 | * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 23 | * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 24 | * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 25 | * 26 | * Version: 5.0.0 27 | * Release date: 11/07/2018 (built at 05/07/2018 08:24:58) 28 | */ 29 | /** 30 | * Fix for bootstrap styles 31 | */ 32 | .handsontable .table th, .handsontable .table td { 33 | border-top: none; 34 | } 35 | 36 | .handsontable tr { 37 | background: #fff; 38 | } 39 | 40 | .handsontable td { 41 | background-color: inherit; 42 | } 43 | 44 | .handsontable .table caption + thead tr:first-child th, 45 | .handsontable .table caption + thead tr:first-child td, 46 | .handsontable .table colgroup + thead tr:first-child th, 47 | .handsontable .table colgroup + thead tr:first-child td, 48 | .handsontable .table thead:first-child tr:first-child th, 49 | .handsontable .table thead:first-child tr:first-child td { 50 | border-top: 1px solid #CCCCCC; 51 | } 52 | 53 | /* table-bordered */ 54 | .handsontable .table-bordered { 55 | border: 0; 56 | border-collapse: separate; 57 | } 58 | 59 | .handsontable .table-bordered th, 60 | .handsontable .table-bordered td { 61 | border-left: none; 62 | } 63 | 64 | .handsontable .table-bordered th:first-child, 65 | .handsontable .table-bordered td:first-child { 66 | border-left: 1px solid #CCCCCC; 67 | } 68 | 69 | .handsontable .table > tbody > tr > td, 70 | .handsontable .table > tbody > tr > th, 71 | .handsontable .table > tfoot > tr > td, 72 | .handsontable .table > tfoot > tr > th, 73 | .handsontable .table > thead > tr > td, 74 | .handsontable .table > thead > tr > th { 75 | line-height: 21px; 76 | padding: 0 4px; 77 | } 78 | 79 | .col-lg-1.handsontable, .col-lg-10.handsontable, .col-lg-11.handsontable, .col-lg-12.handsontable, 80 | .col-lg-2.handsontable, .col-lg-3.handsontable, .col-lg-4.handsontable, .col-lg-5.handsontable, .col-lg-6.handsontable, .col-lg-7.handsontable, .col-lg-8.handsontable, .col-lg-9.handsontable, 81 | .col-md-1.handsontable, .col-md-10.handsontable, .col-md-11.handsontable, .col-md-12.handsontable, 82 | .col-md-2.handsontable, .col-md-3.handsontable, .col-md-4.handsontable, .col-md-5.handsontable, .col-md-6.handsontable, .col-md-7.handsontable, .col-md-8.handsontable, .col-md-9.handsontable 83 | .col-sm-1.handsontable, .col-sm-10.handsontable, .col-sm-11.handsontable, .col-sm-12.handsontable, 84 | .col-sm-2.handsontable, .col-sm-3.handsontable, .col-sm-4.handsontable, .col-sm-5.handsontable, .col-sm-6.handsontable, .col-sm-7.handsontable, .col-sm-8.handsontable, .col-sm-9.handsontable 85 | .col-xs-1.handsontable, .col-xs-10.handsontable, .col-xs-11.handsontable, .col-xs-12.handsontable, 86 | .col-xs-2.handsontable, .col-xs-3.handsontable, .col-xs-4.handsontable, .col-xs-5.handsontable, .col-xs-6.handsontable, .col-xs-7.handsontable, .col-xs-8.handsontable, .col-xs-9.handsontable { 87 | padding-left: 0; 88 | padding-right: 0; 89 | } 90 | 91 | .handsontable .table-striped > tbody > tr:nth-of-type(even) { 92 | background-color: #FFF; 93 | } 94 | .handsontable { 95 | position: relative; 96 | } 97 | 98 | .handsontable .hide{ 99 | display: none; 100 | } 101 | 102 | .handsontable .relative { 103 | position: relative; 104 | } 105 | 106 | .handsontable.htAutoSize { 107 | visibility: hidden; 108 | left: -99000px; 109 | position: absolute; 110 | top: -99000px; 111 | } 112 | 113 | .handsontable .wtHider { 114 | width: 0; 115 | } 116 | 117 | .handsontable .wtSpreader { 118 | position: relative; 119 | width: 0; /*must be 0, otherwise blank space appears in scroll demo after scrolling max to the right */ 120 | height: auto; 121 | } 122 | 123 | .handsontable table, 124 | .handsontable tbody, 125 | .handsontable thead, 126 | .handsontable td, 127 | .handsontable th, 128 | .handsontable input, 129 | .handsontable textarea, 130 | .handsontable div { 131 | box-sizing: content-box; 132 | -webkit-box-sizing: content-box; 133 | -moz-box-sizing: content-box; 134 | } 135 | 136 | .handsontable input, 137 | .handsontable textarea { 138 | min-height: initial; 139 | } 140 | 141 | .handsontable table.htCore { 142 | border-collapse: separate; 143 | /* it must be separate, otherwise there are offset miscalculations in WebKit: http://stackoverflow.com/questions/2655987/border-collapse-differences-in-ff-and-webkit */ 144 | /* this actually only changes appearance of user selection - does not make text unselectable */ 145 | /* -webkit-user-select: none; 146 | -khtml-user-select: none; 147 | -moz-user-select: none; 148 | -o-user-select: none; 149 | -ms-user-select: none; 150 | user-select: none; */ /* no browser supports unprefixed version */ 151 | border-spacing: 0; 152 | margin: 0; 153 | border-width: 0; 154 | table-layout: fixed; 155 | width: 0; 156 | outline-width: 0; 157 | cursor: default; 158 | /* reset bootstrap table style. for more info see: https://github.com/handsontable/handsontable/issues/224 */ 159 | max-width: none; 160 | max-height: none; 161 | } 162 | 163 | .handsontable col { 164 | width: 50px; 165 | } 166 | 167 | .handsontable col.rowHeader { 168 | width: 50px; 169 | } 170 | 171 | .handsontable th, 172 | .handsontable td { 173 | border-top-width: 0; 174 | border-left-width: 0; 175 | border-right: 1px solid #CCC; 176 | border-bottom: 1px solid #CCC; 177 | height: 22px; 178 | empty-cells: show; 179 | line-height: 21px; 180 | padding: 0 4px 0 4px; 181 | /* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */ 182 | background-color: #FFF; 183 | vertical-align: top; 184 | overflow: hidden; 185 | outline-width: 0; 186 | white-space: pre-line; 187 | /* preserve new line character in cell */ 188 | background-clip: padding-box; 189 | } 190 | 191 | .handsontable td.htInvalid { 192 | background-color: #ff4c42 !important; /*gives priority over td.area selection background*/ 193 | } 194 | 195 | .handsontable td.htNoWrap { 196 | white-space: nowrap; 197 | } 198 | 199 | .handsontable th:last-child { 200 | /*Foundation framework fix*/ 201 | border-right: 1px solid #CCC; 202 | border-bottom: 1px solid #CCC; 203 | } 204 | 205 | .handsontable tr:first-child th.htNoFrame, 206 | .handsontable th:first-child.htNoFrame, 207 | .handsontable th.htNoFrame { 208 | border-left-width: 0; 209 | background-color: white; 210 | border-color: #FFF; 211 | } 212 | 213 | .handsontable th:first-child, 214 | .handsontable th:nth-child(2), 215 | .handsontable td:first-of-type, 216 | .handsontable .htNoFrame + th, 217 | .handsontable .htNoFrame + td { 218 | border-left: 1px solid #CCC; 219 | } 220 | 221 | .handsontable.htRowHeaders thead tr th:nth-child(2) { 222 | border-left: 1px solid #CCC; 223 | } 224 | 225 | .handsontable tr:first-child th, 226 | .handsontable tr:first-child td { 227 | border-top: 1px solid #CCC; 228 | } 229 | 230 | .ht_master:not(.innerBorderLeft):not(.emptyColumns) ~ .handsontable tbody tr th, 231 | .ht_master:not(.innerBorderLeft):not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child { 232 | border-right-width: 0; 233 | } 234 | 235 | .ht_master:not(.innerBorderTop) thead tr:last-child th, 236 | .ht_master:not(.innerBorderTop) ~ .handsontable thead tr:last-child th, 237 | .ht_master:not(.innerBorderTop) thead tr.lastChild th, 238 | .ht_master:not(.innerBorderTop) ~ .handsontable thead tr.lastChild th { 239 | border-bottom-width: 0; 240 | } 241 | 242 | .handsontable th { 243 | background-color: #f0f0f0; 244 | color: #222; 245 | text-align: center; 246 | font-weight: normal; 247 | white-space: nowrap; 248 | } 249 | 250 | .handsontable thead th { 251 | padding: 0; 252 | } 253 | 254 | .handsontable th.active { 255 | background-color: #CCC; 256 | } 257 | .handsontable thead th .relative { 258 | padding: 2px 4px; 259 | } 260 | 261 | #hot-display-license-info { 262 | font-size: 10px; 263 | color: #323232 ; 264 | padding: 5px 0 3px 0; 265 | font-family: Helvetica, Arial, sans-serif; 266 | text-align: left; 267 | } 268 | 269 | /* plugins */ 270 | 271 | /* row + column resizer*/ 272 | .handsontable .manualColumnResizer { 273 | position: fixed; 274 | top: 0; 275 | cursor: col-resize; 276 | z-index: 110; 277 | width: 5px; 278 | height: 25px; 279 | } 280 | 281 | .handsontable .manualRowResizer { 282 | position: fixed; 283 | left: 0; 284 | cursor: row-resize; 285 | z-index: 110; 286 | height: 5px; 287 | width: 50px; 288 | } 289 | 290 | .handsontable .manualColumnResizer:hover, 291 | .handsontable .manualColumnResizer.active, 292 | .handsontable .manualRowResizer:hover, 293 | .handsontable .manualRowResizer.active { 294 | background-color: #34a9db; 295 | } 296 | 297 | .handsontable .manualColumnResizerGuide { 298 | position: fixed; 299 | right: 0; 300 | top: 0; 301 | background-color: #34a9db; 302 | display: none; 303 | width: 0; 304 | border-right: 1px dashed #777; 305 | margin-left: 5px; 306 | } 307 | 308 | .handsontable .manualRowResizerGuide { 309 | position: fixed; 310 | left: 0; 311 | bottom: 0; 312 | background-color: #34a9db; 313 | display: none; 314 | height: 0; 315 | border-bottom: 1px dashed #777; 316 | margin-top: 5px; 317 | } 318 | 319 | .handsontable .manualColumnResizerGuide.active, 320 | .handsontable .manualRowResizerGuide.active { 321 | display: block; 322 | z-index: 199; 323 | } 324 | 325 | .handsontable .columnSorting { 326 | position: relative; 327 | } 328 | 329 | .handsontable .columnSorting:hover { 330 | text-decoration: underline; 331 | cursor: pointer; 332 | } 333 | 334 | .handsontable .columnSorting.ascending::after { 335 | content: '\25B2'; 336 | color: #5f5f5f; 337 | position: absolute; 338 | right: -15px; 339 | } 340 | 341 | .handsontable .columnSorting.descending::after { 342 | content: '\25BC'; 343 | color: #5f5f5f; 344 | position: absolute; 345 | right: -15px; 346 | } 347 | 348 | /* Selection */ 349 | .handsontable .wtBorder { 350 | position: absolute; 351 | font-size: 0; 352 | } 353 | .handsontable .wtBorder.hidden{ 354 | display:none !important; 355 | } 356 | 357 | .handsontable td.area, 358 | .handsontable td.area-1, 359 | .handsontable td.area-2, 360 | .handsontable td.area-3, 361 | .handsontable td.area-4, 362 | .handsontable td.area-5, 363 | .handsontable td.area-6, 364 | .handsontable td.area-7 { 365 | position: relative; 366 | } 367 | 368 | .handsontable td.area:before, 369 | .handsontable td.area-1:before, 370 | .handsontable td.area-2:before, 371 | .handsontable td.area-3:before, 372 | .handsontable td.area-4:before, 373 | .handsontable td.area-5:before, 374 | .handsontable td.area-6:before, 375 | .handsontable td.area-7:before { 376 | content: ''; 377 | position: absolute; 378 | top: 0; 379 | left: 0; 380 | right: 0; 381 | bottom: 0; 382 | bottom: -100%\9; /* Fix for IE9 to spread the ":before" pseudo element to 100% height of the parent element */ 383 | background: #005eff; 384 | } 385 | 386 | /* Fix for IE10 and IE11 to spread the ":before" pseudo element to 100% height of the parent element */ 387 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 388 | .handsontable td.area:before, 389 | .handsontable td.area-1:before, 390 | .handsontable td.area-2:before, 391 | .handsontable td.area-3:before, 392 | .handsontable td.area-4:before, 393 | .handsontable td.area-5:before, 394 | .handsontable td.area-6:before, 395 | .handsontable td.area-7:before { 396 | bottom: -100%; 397 | } 398 | } 399 | 400 | .handsontable td.area:before { 401 | opacity: 0.1; 402 | } 403 | .handsontable td.area-1:before { 404 | opacity: 0.2; 405 | } 406 | .handsontable td.area-2:before { 407 | opacity: 0.27; 408 | } 409 | .handsontable td.area-3:before { 410 | opacity: 0.35; 411 | } 412 | .handsontable td.area-4:before { 413 | opacity: 0.41; 414 | } 415 | .handsontable td.area-5:before { 416 | opacity: 0.47; 417 | } 418 | .handsontable td.area-6:before { 419 | opacity: 0.54; 420 | } 421 | .handsontable td.area-7:before { 422 | opacity: 0.58; 423 | } 424 | 425 | .handsontable tbody th.ht__highlight, 426 | .handsontable thead th.ht__highlight { 427 | background-color: #dcdcdc; 428 | } 429 | 430 | .handsontable tbody th.ht__active_highlight, 431 | .handsontable thead th.ht__active_highlight { 432 | background-color: #8eb0e7; 433 | color: #000; 434 | } 435 | 436 | /* fill handle */ 437 | 438 | .handsontable .wtBorder.corner { 439 | font-size: 0; 440 | cursor: crosshair; 441 | } 442 | 443 | .handsontable .htBorder.htFillBorder { 444 | background: red; 445 | width: 1px; 446 | height: 1px; 447 | } 448 | 449 | .handsontableInput { 450 | border: none; 451 | outline-width: 0; 452 | margin: 0; 453 | padding: 1px 5px 0 5px; 454 | font-family: inherit; 455 | line-height: 21px; 456 | font-size: inherit; 457 | box-shadow: 0 0 0 2px #5292F7 inset; 458 | resize: none; 459 | /*below are needed to overwrite stuff added by jQuery UI Bootstrap theme*/ 460 | display: block; 461 | color: #000; 462 | border-radius: 0; 463 | background-color: #FFF; 464 | /*overwrite styles potentionally made by a framework*/ 465 | } 466 | 467 | .handsontableInputHolder { 468 | position: absolute; 469 | top: 0; 470 | left: 0; 471 | z-index: 104; 472 | } 473 | 474 | .htSelectEditor { 475 | -webkit-appearance: menulist-button !important; 476 | position: absolute; 477 | width: auto; 478 | } 479 | 480 | /* 481 | TextRenderer readOnly cell 482 | */ 483 | 484 | .handsontable .htDimmed { 485 | color: #777; 486 | } 487 | 488 | .handsontable .htSubmenu { 489 | position: relative; 490 | } 491 | 492 | .handsontable .htSubmenu :after{ 493 | content: '\25B6'; 494 | color: #777; 495 | position: absolute; 496 | right: 5px; 497 | font-size: 9px; 498 | } 499 | 500 | 501 | /* 502 | TextRenderer horizontal alignment 503 | */ 504 | .handsontable .htLeft{ 505 | text-align: left; 506 | } 507 | .handsontable .htCenter{ 508 | text-align: center; 509 | } 510 | .handsontable .htRight{ 511 | text-align: right; 512 | } 513 | .handsontable .htJustify{ 514 | text-align: justify; 515 | } 516 | /* 517 | TextRenderer vertical alignment 518 | */ 519 | .handsontable .htTop{ 520 | vertical-align: top; 521 | } 522 | .handsontable .htMiddle{ 523 | vertical-align: middle; 524 | } 525 | .handsontable .htBottom{ 526 | vertical-align: bottom; 527 | } 528 | 529 | /* 530 | TextRenderer placeholder value 531 | */ 532 | 533 | .handsontable .htPlaceholder { 534 | color: #999; 535 | } 536 | 537 | /* 538 | AutocompleteRenderer down arrow 539 | */ 540 | 541 | .handsontable .htAutocompleteArrow { 542 | float: right; 543 | font-size: 10px; 544 | color: #EEE; 545 | cursor: default; 546 | width: 16px; 547 | text-align: center; 548 | } 549 | 550 | .handsontable td .htAutocompleteArrow:hover { 551 | color: #777; 552 | } 553 | 554 | .handsontable td.area .htAutocompleteArrow { 555 | color: #d3d3d3; 556 | } 557 | 558 | /* 559 | CheckboxRenderer 560 | */ 561 | .handsontable .htCheckboxRendererInput { 562 | display: inline-block; 563 | vertical-align: middle; 564 | } 565 | .handsontable .htCheckboxRendererInput.noValue { 566 | opacity: 0.5; 567 | } 568 | .handsontable .htCheckboxRendererLabel { 569 | cursor: pointer; 570 | display: inline-block; 571 | width: 100%; 572 | } 573 | 574 | /** 575 | * Handsontable in Handsontable 576 | */ 577 | 578 | .handsontable .handsontable.ht_clone_top .wtHider { 579 | padding: 0 0 5px 0; 580 | } 581 | 582 | /** 583 | * Autocomplete Editor 584 | */ 585 | .handsontable .autocompleteEditor.handsontable { 586 | padding-right: 17px; 587 | } 588 | .handsontable .autocompleteEditor.handsontable.htMacScroll { 589 | padding-right: 15px; 590 | } 591 | 592 | 593 | /** 594 | * Handsontable listbox theme 595 | */ 596 | 597 | .handsontable.listbox { 598 | margin: 0; 599 | } 600 | 601 | .handsontable.listbox .ht_master table { 602 | border: 1px solid #ccc; 603 | border-collapse: separate; 604 | background: white; 605 | } 606 | 607 | .handsontable.listbox th, 608 | .handsontable.listbox tr:first-child th, 609 | .handsontable.listbox tr:last-child th, 610 | .handsontable.listbox tr:first-child td, 611 | .handsontable.listbox td { 612 | border-color: transparent; 613 | } 614 | 615 | .handsontable.listbox th, 616 | .handsontable.listbox td { 617 | white-space: nowrap; 618 | text-overflow: ellipsis; 619 | } 620 | 621 | .handsontable.listbox td.htDimmed { 622 | cursor: default; 623 | color: inherit; 624 | font-style: inherit; 625 | } 626 | 627 | .handsontable.listbox .wtBorder { 628 | visibility: hidden; 629 | } 630 | 631 | .handsontable.listbox tr td.current, 632 | .handsontable.listbox tr:hover td { 633 | background: #eee; 634 | } 635 | 636 | .ht_clone_top { 637 | z-index: 101; 638 | } 639 | 640 | .ht_clone_left { 641 | z-index: 102; 642 | } 643 | 644 | .ht_clone_top_left_corner, 645 | .ht_clone_bottom_left_corner { 646 | z-index: 103; 647 | } 648 | 649 | .ht_clone_debug { 650 | z-index: 103; 651 | } 652 | 653 | .handsontable td.htSearchResult { 654 | background: #fcedd9; 655 | color: #583707; 656 | } 657 | 658 | /* 659 | Cell borders 660 | */ 661 | .htBordered{ 662 | /*box-sizing: border-box !important;*/ 663 | border-width: 1px; 664 | } 665 | .htBordered.htTopBorderSolid { 666 | border-top-style: solid; 667 | border-top-color: #000; 668 | } 669 | .htBordered.htRightBorderSolid { 670 | border-right-style: solid; 671 | border-right-color: #000; 672 | } 673 | .htBordered.htBottomBorderSolid { 674 | border-bottom-style: solid; 675 | border-bottom-color: #000; 676 | } 677 | .htBordered.htLeftBorderSolid { 678 | border-left-style: solid; 679 | border-left-color: #000; 680 | } 681 | 682 | .handsontable tbody tr th:nth-last-child(2) { 683 | border-right: 1px solid #CCC; 684 | } 685 | 686 | .handsontable thead tr:nth-last-child(2) th.htGroupIndicatorContainer { 687 | border-bottom: 1px solid #CCC; 688 | padding-bottom: 5px; 689 | } 690 | 691 | 692 | .ht_clone_top_left_corner thead tr th:nth-last-child(2) { 693 | border-right: 1px solid #CCC; 694 | } 695 | 696 | .htCollapseButton { 697 | width: 10px; 698 | height: 10px; 699 | line-height: 10px; 700 | text-align: center; 701 | border-radius: 5px; 702 | border: 1px solid #f3f3f3; 703 | -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 704 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 705 | cursor: pointer; 706 | margin-bottom: 3px; 707 | position: relative; 708 | } 709 | 710 | .htCollapseButton:after { 711 | content: ""; 712 | height: 300%; 713 | width: 1px; 714 | display: block; 715 | background: #ccc; 716 | margin-left: 4px; 717 | position: absolute; 718 | /*top: -300%;*/ 719 | bottom: 10px; 720 | } 721 | 722 | 723 | thead .htCollapseButton { 724 | right: 5px; 725 | position: absolute; 726 | top: 5px; 727 | background: #fff; 728 | } 729 | 730 | thead .htCollapseButton:after { 731 | height: 1px; 732 | width: 700%; 733 | right: 10px; 734 | top: 4px; 735 | } 736 | 737 | .handsontable tr th .htExpandButton { 738 | position: absolute; 739 | width: 10px; 740 | height: 10px; 741 | line-height: 10px; 742 | text-align: center; 743 | border-radius: 5px; 744 | border: 1px solid #f3f3f3; 745 | -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 746 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 747 | cursor: pointer; 748 | top: 0; 749 | display: none; 750 | } 751 | 752 | .handsontable thead tr th .htExpandButton { 753 | /*left: 5px;*/ 754 | top: 5px; 755 | } 756 | 757 | .handsontable tr th .htExpandButton.clickable { 758 | display: block; 759 | } 760 | 761 | .collapsibleIndicator { 762 | position: absolute; 763 | top: 50%; 764 | transform: translate(0% ,-50%); 765 | right: 5px; 766 | border: 1px solid #A6A6A6; 767 | line-height: 10px; 768 | color: #222; 769 | border-radius: 10px; 770 | font-size: 10px; 771 | width: 10px; 772 | height: 10px; 773 | cursor: pointer; 774 | -webkit-box-shadow: 0 0 0 6px rgba(238,238,238,1); 775 | -moz-box-shadow: 0 0 0 6px rgba(238,238,238,1); 776 | box-shadow: 0 0 0 6px rgba(238,238,238,1); 777 | background: #eee; 778 | } 779 | 780 | .handsontable col.hidden { 781 | width: 0 !important; 782 | } 783 | 784 | .handsontable table tr th.lightRightBorder { 785 | border-right: 1px solid #E6E6E6; 786 | } 787 | 788 | .handsontable tr.hidden, 789 | .handsontable tr.hidden td, 790 | .handsontable tr.hidden th { 791 | display: none; 792 | } 793 | 794 | .ht_master, 795 | .ht_clone_left, 796 | .ht_clone_top, 797 | .ht_clone_bottom { 798 | overflow: hidden; 799 | } 800 | 801 | .ht_master .wtHolder { 802 | overflow: auto; 803 | } 804 | 805 | .handsontable .ht_master thead, 806 | .handsontable .ht_master tr th, 807 | .handsontable .ht_clone_left thead { 808 | visibility: hidden; 809 | } 810 | 811 | .ht_clone_top .wtHolder, 812 | .ht_clone_left .wtHolder, 813 | .ht_clone_bottom .wtHolder { 814 | overflow: hidden; 815 | } 816 | /* 817 | 818 | Handsontable Mobile Text Editor stylesheet 819 | 820 | */ 821 | 822 | .handsontable.mobile, 823 | .handsontable.mobile .wtHolder { 824 | -webkit-touch-callout:none; 825 | -webkit-user-select:none; 826 | -khtml-user-select:none; 827 | -moz-user-select:none; 828 | -ms-user-select:none; 829 | user-select:none; 830 | -webkit-tap-highlight-color:rgba(0,0,0,0); 831 | -webkit-overflow-scrolling: touch; 832 | } 833 | 834 | .htMobileEditorContainer { 835 | display: none; 836 | position: absolute; 837 | top: 0; 838 | width: 70%; 839 | height: 54pt; 840 | background: #f8f8f8; 841 | border-radius: 20px; 842 | border: 1px solid #ebebeb; 843 | z-index: 999; 844 | box-sizing: border-box; 845 | -webkit-box-sizing: border-box; 846 | -webkit-text-size-adjust: none; 847 | } 848 | 849 | .topLeftSelectionHandle:not(.ht_master .topLeftSelectionHandle), 850 | .topLeftSelectionHandle-HitArea:not(.ht_master .topLeftSelectionHandle-HitArea) { 851 | z-index: 9999; 852 | } 853 | 854 | /* Initial left/top coordinates - overwritten when actual position is set */ 855 | .topLeftSelectionHandle, 856 | .topLeftSelectionHandle-HitArea, 857 | .bottomRightSelectionHandle, 858 | .bottomRightSelectionHandle-HitArea { 859 | left: -10000px; 860 | top: -10000px; 861 | } 862 | 863 | .htMobileEditorContainer.active { 864 | display: block; 865 | } 866 | 867 | .htMobileEditorContainer .inputs { 868 | position: absolute; 869 | right: 210pt; 870 | bottom: 10pt; 871 | top: 10pt; 872 | left: 14px; 873 | height: 34pt; 874 | } 875 | 876 | .htMobileEditorContainer .inputs textarea { 877 | font-size: 13pt; 878 | border: 1px solid #a1a1a1; 879 | -webkit-appearance: none; 880 | -webkit-box-shadow: none; 881 | -moz-box-shadow: none; 882 | box-shadow: none; 883 | position: absolute; 884 | left: 14px; 885 | right: 14px; 886 | top: 0; 887 | bottom: 0; 888 | padding: 7pt; 889 | } 890 | 891 | .htMobileEditorContainer .cellPointer { 892 | position: absolute; 893 | top: -13pt; 894 | height: 0; 895 | width: 0; 896 | left: 30px; 897 | 898 | border-left: 13pt solid transparent; 899 | border-right: 13pt solid transparent; 900 | border-bottom: 13pt solid #ebebeb; 901 | } 902 | 903 | .htMobileEditorContainer .cellPointer.hidden { 904 | display: none; 905 | } 906 | 907 | .htMobileEditorContainer .cellPointer:before { 908 | content: ''; 909 | display: block; 910 | position: absolute; 911 | top: 2px; 912 | height: 0; 913 | width: 0; 914 | left: -13pt; 915 | 916 | border-left: 13pt solid transparent; 917 | border-right: 13pt solid transparent; 918 | border-bottom: 13pt solid #f8f8f8; 919 | } 920 | 921 | .htMobileEditorContainer .moveHandle { 922 | position: absolute; 923 | top: 10pt; 924 | left: 5px; 925 | width: 30px; 926 | bottom: 0px; 927 | cursor: move; 928 | z-index: 9999; 929 | } 930 | 931 | .htMobileEditorContainer .moveHandle:after { 932 | content: "..\A..\A..\A.."; 933 | white-space: pre; 934 | line-height: 10px; 935 | font-size: 20pt; 936 | display: inline-block; 937 | margin-top: -8px; 938 | color: #ebebeb; 939 | } 940 | 941 | .htMobileEditorContainer .positionControls { 942 | width: 205pt; 943 | position: absolute; 944 | right: 5pt; 945 | top: 0; 946 | bottom: 0; 947 | } 948 | 949 | .htMobileEditorContainer .positionControls > div { 950 | width: 50pt; 951 | height: 100%; 952 | float: left; 953 | } 954 | 955 | .htMobileEditorContainer .positionControls > div:after { 956 | content: " "; 957 | display: block; 958 | width: 15pt; 959 | height: 15pt; 960 | text-align: center; 961 | line-height: 50pt; 962 | } 963 | 964 | .htMobileEditorContainer .leftButton:after, 965 | .htMobileEditorContainer .rightButton:after, 966 | .htMobileEditorContainer .upButton:after, 967 | .htMobileEditorContainer .downButton:after { 968 | transform-origin: 5pt 5pt; 969 | -webkit-transform-origin: 5pt 5pt; 970 | margin: 21pt 0 0 21pt; 971 | } 972 | 973 | .htMobileEditorContainer .leftButton:after { 974 | border-top: 2px solid #288ffe; 975 | border-left: 2px solid #288ffe; 976 | -webkit-transform: rotate(-45deg); 977 | /*margin-top: 17pt;*/ 978 | /*margin-left: 20pt;*/ 979 | } 980 | .htMobileEditorContainer .leftButton:active:after { 981 | border-color: #cfcfcf; 982 | } 983 | 984 | .htMobileEditorContainer .rightButton:after { 985 | border-top: 2px solid #288ffe; 986 | border-left: 2px solid #288ffe; 987 | -webkit-transform: rotate(135deg); 988 | /*margin-top: 17pt;*/ 989 | /*margin-left: 10pt;*/ 990 | } 991 | .htMobileEditorContainer .rightButton:active:after { 992 | border-color: #cfcfcf; 993 | } 994 | 995 | .htMobileEditorContainer .upButton:after { 996 | /*border-top: 2px solid #cfcfcf;*/ 997 | border-top: 2px solid #288ffe; 998 | border-left: 2px solid #288ffe; 999 | -webkit-transform: rotate(45deg); 1000 | /*margin-top: 22pt;*/ 1001 | /*margin-left: 15pt;*/ 1002 | } 1003 | .htMobileEditorContainer .upButton:active:after { 1004 | border-color: #cfcfcf; 1005 | } 1006 | 1007 | .htMobileEditorContainer .downButton:after { 1008 | border-top: 2px solid #288ffe; 1009 | border-left: 2px solid #288ffe; 1010 | -webkit-transform: rotate(225deg); 1011 | /*margin-top: 15pt;*/ 1012 | /*margin-left: 15pt;*/ 1013 | } 1014 | .htMobileEditorContainer .downButton:active:after { 1015 | border-color: #cfcfcf; 1016 | } 1017 | 1018 | .handsontable.hide-tween { 1019 | -webkit-animation: opacity-hide 0.3s; 1020 | animation: opacity-hide 0.3s; 1021 | animation-fill-mode: forwards; 1022 | -webkit-animation-fill-mode: forwards; 1023 | } 1024 | 1025 | .handsontable.show-tween { 1026 | -webkit-animation: opacity-show 0.3s; 1027 | animation: opacity-show 0.3s; 1028 | animation-fill-mode: forwards; 1029 | -webkit-animation-fill-mode: forwards; 1030 | } 1031 | @charset "UTF-8"; 1032 | 1033 | /*! 1034 | * Pikaday 1035 | * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/ 1036 | */ 1037 | 1038 | .pika-single { 1039 | z-index: 9999; 1040 | display: block; 1041 | position: relative; 1042 | color: #333; 1043 | background: #fff; 1044 | border: 1px solid #ccc; 1045 | border-bottom-color: #bbb; 1046 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 1047 | } 1048 | 1049 | /* 1050 | clear child float (pika-lendar), using the famous micro clearfix hack 1051 | http://nicolasgallagher.com/micro-clearfix-hack/ 1052 | */ 1053 | .pika-single:before, 1054 | .pika-single:after { 1055 | content: " "; 1056 | display: table; 1057 | } 1058 | .pika-single:after { clear: both } 1059 | .pika-single { *zoom: 1 } 1060 | 1061 | .pika-single.is-hidden { 1062 | display: none; 1063 | } 1064 | 1065 | .pika-single.is-bound { 1066 | position: absolute; 1067 | box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); 1068 | } 1069 | 1070 | .pika-lendar { 1071 | float: left; 1072 | width: 240px; 1073 | margin: 8px; 1074 | } 1075 | 1076 | .pika-title { 1077 | position: relative; 1078 | text-align: center; 1079 | } 1080 | 1081 | .pika-label { 1082 | display: inline-block; 1083 | *display: inline; 1084 | position: relative; 1085 | z-index: 9999; 1086 | overflow: hidden; 1087 | margin: 0; 1088 | padding: 5px 3px; 1089 | font-size: 14px; 1090 | line-height: 20px; 1091 | font-weight: bold; 1092 | background-color: #fff; 1093 | } 1094 | .pika-title select { 1095 | cursor: pointer; 1096 | position: absolute; 1097 | z-index: 9998; 1098 | margin: 0; 1099 | left: 0; 1100 | top: 5px; 1101 | filter: alpha(opacity=0); 1102 | opacity: 0; 1103 | } 1104 | 1105 | .pika-prev, 1106 | .pika-next { 1107 | display: block; 1108 | cursor: pointer; 1109 | position: relative; 1110 | outline: none; 1111 | border: 0; 1112 | padding: 0; 1113 | width: 20px; 1114 | height: 30px; 1115 | /* hide text using text-indent trick, using width value (it's enough) */ 1116 | text-indent: 20px; 1117 | white-space: nowrap; 1118 | overflow: hidden; 1119 | background-color: transparent; 1120 | background-position: center center; 1121 | background-repeat: no-repeat; 1122 | background-size: 75% 75%; 1123 | opacity: .5; 1124 | *position: absolute; 1125 | *top: 0; 1126 | } 1127 | 1128 | .pika-prev:hover, 1129 | .pika-next:hover { 1130 | opacity: 1; 1131 | } 1132 | 1133 | .pika-prev, 1134 | .is-rtl .pika-next { 1135 | float: left; 1136 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=='); 1137 | *left: 0; 1138 | } 1139 | 1140 | .pika-next, 1141 | .is-rtl .pika-prev { 1142 | float: right; 1143 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII='); 1144 | *right: 0; 1145 | } 1146 | 1147 | .pika-prev.is-disabled, 1148 | .pika-next.is-disabled { 1149 | cursor: default; 1150 | opacity: .2; 1151 | } 1152 | 1153 | .pika-select { 1154 | display: inline-block; 1155 | *display: inline; 1156 | } 1157 | 1158 | .pika-table { 1159 | width: 100%; 1160 | border-collapse: collapse; 1161 | border-spacing: 0; 1162 | border: 0; 1163 | } 1164 | 1165 | .pika-table th, 1166 | .pika-table td { 1167 | width: 14.285714285714286%; 1168 | padding: 0; 1169 | } 1170 | 1171 | .pika-table th { 1172 | color: #999; 1173 | font-size: 12px; 1174 | line-height: 25px; 1175 | font-weight: bold; 1176 | text-align: center; 1177 | } 1178 | 1179 | .pika-button { 1180 | cursor: pointer; 1181 | display: block; 1182 | box-sizing: border-box; 1183 | -moz-box-sizing: border-box; 1184 | outline: none; 1185 | border: 0; 1186 | margin: 0; 1187 | width: 100%; 1188 | padding: 5px; 1189 | color: #666; 1190 | font-size: 12px; 1191 | line-height: 15px; 1192 | text-align: right; 1193 | background: #f5f5f5; 1194 | } 1195 | 1196 | .pika-week { 1197 | font-size: 11px; 1198 | color: #999; 1199 | } 1200 | 1201 | .is-today .pika-button { 1202 | color: #33aaff; 1203 | font-weight: bold; 1204 | } 1205 | 1206 | .is-selected .pika-button { 1207 | color: #fff; 1208 | font-weight: bold; 1209 | background: #33aaff; 1210 | box-shadow: inset 0 1px 3px #178fe5; 1211 | border-radius: 3px; 1212 | } 1213 | 1214 | .is-inrange .pika-button { 1215 | background: #D5E9F7; 1216 | } 1217 | 1218 | .is-startrange .pika-button { 1219 | color: #fff; 1220 | background: #6CB31D; 1221 | box-shadow: none; 1222 | border-radius: 3px; 1223 | } 1224 | 1225 | .is-endrange .pika-button { 1226 | color: #fff; 1227 | background: #33aaff; 1228 | box-shadow: none; 1229 | border-radius: 3px; 1230 | } 1231 | 1232 | .is-disabled .pika-button, 1233 | .is-outside-current-month .pika-button { 1234 | pointer-events: none; 1235 | cursor: default; 1236 | color: #999; 1237 | opacity: .3; 1238 | } 1239 | 1240 | .pika-button:hover { 1241 | color: #fff; 1242 | background: #ff8000; 1243 | box-shadow: none; 1244 | border-radius: 3px; 1245 | } 1246 | 1247 | /* styling for abbr */ 1248 | .pika-table abbr { 1249 | border-bottom: none; 1250 | cursor: help; 1251 | } 1252 | 1253 | .htCommentCell { 1254 | position: relative; 1255 | } 1256 | 1257 | .htCommentCell:after { 1258 | content: ''; 1259 | position: absolute; 1260 | top: 0; 1261 | right: 0; 1262 | border-left: 6px solid transparent; 1263 | border-top: 6px solid black; 1264 | } 1265 | 1266 | .htComments { 1267 | display: none; 1268 | z-index: 1059; 1269 | position: absolute; 1270 | } 1271 | 1272 | .htCommentTextArea { 1273 | box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px, rgba(0, 0, 0, 0.239216) 0 1px 2px; 1274 | -webkit-box-sizing: border-box; 1275 | -moz-box-sizing: border-box; 1276 | box-sizing: border-box; 1277 | border: none; 1278 | border-left: 3px solid #ccc; 1279 | background-color: #fff; 1280 | width: 215px; 1281 | height: 90px; 1282 | font-size: 12px; 1283 | padding: 5px; 1284 | outline: 0px !important; 1285 | -webkit-appearance: none; 1286 | } 1287 | 1288 | .htCommentTextArea:focus { 1289 | box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px, rgba(0, 0, 0, 0.239216) 0 1px 2px, inset 0 0 0 1px #5292f7; 1290 | border-left: 3px solid #5292f7; 1291 | } 1292 | /*! 1293 | * Handsontable ContextMenu 1294 | */ 1295 | 1296 | .htContextMenu:not(.htGhostTable) { 1297 | display: none; 1298 | position: absolute; 1299 | z-index: 1060; /* needs to be higher than 1050 - z-index for Twitter Bootstrap modal (#1569) */ 1300 | } 1301 | 1302 | .htContextMenu .ht_clone_top, 1303 | .htContextMenu .ht_clone_left, 1304 | .htContextMenu .ht_clone_corner, 1305 | .htContextMenu .ht_clone_debug { 1306 | display: none; 1307 | } 1308 | 1309 | .htContextMenu table.htCore { 1310 | border: 1px solid #ccc; 1311 | border-bottom-width: 2px; 1312 | border-right-width: 2px; 1313 | } 1314 | 1315 | .htContextMenu .wtBorder { 1316 | visibility: hidden; 1317 | } 1318 | 1319 | .htContextMenu table tbody tr td { 1320 | background: white; 1321 | border-width: 0; 1322 | padding: 4px 6px 0 6px; 1323 | cursor: pointer; 1324 | overflow: hidden; 1325 | white-space: nowrap; 1326 | text-overflow: ellipsis; 1327 | } 1328 | 1329 | .htContextMenu table tbody tr td:first-child { 1330 | border: 0; 1331 | } 1332 | 1333 | .htContextMenu table tbody tr td.htDimmed { 1334 | font-style: normal; 1335 | color: #323232; 1336 | } 1337 | 1338 | .htContextMenu table tbody tr td.current, 1339 | .htContextMenu table tbody tr td.zeroclipboard-is-hover { 1340 | background: #f3f3f3; 1341 | } 1342 | 1343 | .htContextMenu table tbody tr td.htSeparator { 1344 | border-top: 1px solid #e6e6e6; 1345 | height: 0; 1346 | padding: 0; 1347 | cursor: default; 1348 | } 1349 | 1350 | .htContextMenu table tbody tr td.htDisabled { 1351 | color: #999; 1352 | cursor: default; 1353 | } 1354 | 1355 | .htContextMenu table tbody tr td.htDisabled:hover { 1356 | background: #fff; 1357 | color: #999; 1358 | cursor: default; 1359 | } 1360 | 1361 | .htContextMenu table tbody tr.htHidden { 1362 | display: none; 1363 | } 1364 | 1365 | .htContextMenu table tbody tr td .htItemWrapper { 1366 | margin-left: 10px; 1367 | margin-right: 6px; 1368 | } 1369 | 1370 | .htContextMenu table tbody tr td div span.selected { 1371 | margin-top: -2px; 1372 | position: absolute; 1373 | left: 4px; 1374 | } 1375 | 1376 | .htContextMenu .ht_master .wtHolder { 1377 | overflow: hidden; 1378 | } 1379 | textarea#HandsontableCopyPaste { 1380 | position: fixed !important; 1381 | top: 0 !important; 1382 | right: 100% !important; 1383 | overflow: hidden; 1384 | opacity: 0; 1385 | outline: 0 none !important; 1386 | } 1387 | .htRowHeaders .ht_master.innerBorderLeft ~ .ht_clone_top_left_corner th:nth-child(2), 1388 | .htRowHeaders .ht_master.innerBorderLeft ~ .ht_clone_left td:first-of-type { 1389 | border-left: 0 none; 1390 | } 1391 | .handsontable .wtHider { 1392 | position: relative; 1393 | } 1394 | .handsontable.ht__manualColumnMove.after-selection--columns thead th.ht__highlight { 1395 | cursor: move; 1396 | cursor: -moz-grab; 1397 | cursor: -webkit-grab; 1398 | cursor: grab; 1399 | } 1400 | .handsontable.ht__manualColumnMove.on-moving--columns, 1401 | .handsontable.ht__manualColumnMove.on-moving--columns thead th.ht__highlight { 1402 | cursor: move; 1403 | cursor: -moz-grabbing; 1404 | cursor: -webkit-grabbing; 1405 | cursor: grabbing; 1406 | } 1407 | .handsontable.ht__manualColumnMove.on-moving--columns .manualColumnResizer { 1408 | display: none; 1409 | } 1410 | .handsontable .ht__manualColumnMove--guideline, 1411 | .handsontable .ht__manualColumnMove--backlight { 1412 | position: absolute; 1413 | height: 100%; 1414 | display: none; 1415 | } 1416 | .handsontable .ht__manualColumnMove--guideline { 1417 | background: #757575; 1418 | width: 2px; 1419 | top: 0; 1420 | margin-left: -1px; 1421 | z-index: 105; 1422 | } 1423 | .handsontable .ht__manualColumnMove--backlight { 1424 | background: #343434; 1425 | background: rgba(52, 52, 52, 0.25); 1426 | display: none; 1427 | z-index: 105; 1428 | pointer-events: none; 1429 | } 1430 | .handsontable.on-moving--columns.show-ui .ht__manualColumnMove--guideline, 1431 | .handsontable.on-moving--columns .ht__manualColumnMove--backlight { 1432 | display: block; 1433 | } 1434 | .handsontable .wtHider { 1435 | position: relative; 1436 | } 1437 | .handsontable.ht__manualRowMove.after-selection--rows tbody th.ht__highlight { 1438 | cursor: move; 1439 | cursor: -moz-grab; 1440 | cursor: -webkit-grab; 1441 | cursor: grab; 1442 | } 1443 | .handsontable.ht__manualRowMove.on-moving--rows, 1444 | .handsontable.ht__manualRowMove.on-moving--rows tbody th.ht__highlight { 1445 | cursor: move; 1446 | cursor: -moz-grabbing; 1447 | cursor: -webkit-grabbing; 1448 | cursor: grabbing; 1449 | } 1450 | .handsontable.ht__manualRowMove.on-moving--rows .manualRowResizer { 1451 | display: none; 1452 | } 1453 | .handsontable .ht__manualRowMove--guideline, 1454 | .handsontable .ht__manualRowMove--backlight { 1455 | position: absolute; 1456 | width: 100%; 1457 | display: none; 1458 | } 1459 | .handsontable .ht__manualRowMove--guideline { 1460 | background: #757575; 1461 | height: 2px; 1462 | left: 0; 1463 | margin-top: -1px; 1464 | z-index: 105; 1465 | } 1466 | .handsontable .ht__manualRowMove--backlight { 1467 | background: #343434; 1468 | background: rgba(52, 52, 52, 0.25); 1469 | display: none; 1470 | z-index: 105; 1471 | pointer-events: none; 1472 | } 1473 | .handsontable.on-moving--rows.show-ui .ht__manualRowMove--guideline, 1474 | .handsontable.on-moving--rows .ht__manualRowMove--backlight { 1475 | display: block; 1476 | } 1477 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"]:not([class*="fullySelectedMergedCell"]):before { 1478 | opacity: 0; 1479 | } 1480 | 1481 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-multiple"]:before { 1482 | opacity: 0.1; 1483 | } 1484 | 1485 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-0"]:before { 1486 | opacity: 0.1; 1487 | } 1488 | 1489 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-1"]:before { 1490 | opacity: 0.2; 1491 | } 1492 | 1493 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-2"]:before { 1494 | opacity: 0.27; 1495 | } 1496 | 1497 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-3"]:before { 1498 | opacity: 0.35; 1499 | } 1500 | 1501 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-4"]:before { 1502 | opacity: 0.41; 1503 | } 1504 | 1505 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-5"]:before { 1506 | opacity: 0.47; 1507 | } 1508 | 1509 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-6"]:before { 1510 | opacity: 0.54; 1511 | } 1512 | 1513 | .handsontable tbody td[rowspan][class*="area"][class*="highlight"][class*="fullySelectedMergedCell-7"]:before { 1514 | opacity: 0.58; 1515 | } 1516 | --------------------------------------------------------------------------------

报表详情