├── dist ├── css │ ├── medium-editor-tables.min.css │ ├── medium-editor-handsontable.min.css │ └── medium-editor-handsontable.css └── js │ ├── medium-editor-handsontable.min.js │ └── medium-editor-handsontable.js ├── grunt ├── jscs.js ├── uglify.js ├── aliases.yaml ├── bump.js ├── cssmin.js └── autoprefixer.js ├── .gitignore ├── CHANGES.md ├── Gruntfile.js ├── CONTRIBUTING.md ├── demo ├── css │ └── demo.css ├── index.html └── handsontable │ └── handsontable.full.css ├── bower.json ├── package.json ├── LICENSE └── README.md /dist/css/medium-editor-tables.min.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /grunt/jscs.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | src: jsSourceFiles.concat(['Gruntfile.js', 'grunt/*.js', 'spec/*.js']), 3 | options: { 4 | config: '.jscsrc' 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /grunt/uglify.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dist: { 3 | files: { 4 | 'dist/js/<%= package.name %>.min.js': ['dist/js/<%= package.name %>.js'] 5 | } 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | *.swp 3 | .DS_Store 4 | *.swo 5 | node_modules/ 6 | npm-debug.log 7 | .grunt/ 8 | _SpecRunner.html 9 | reports/ 10 | coverage/ 11 | ._* 12 | bower_components/ -------------------------------------------------------------------------------- /grunt/aliases.yaml: -------------------------------------------------------------------------------- 1 | lint: 2 | - jscs 3 | - jshint 4 | 5 | js: 6 | - uglify 7 | 8 | css: 9 | - autoprefixer 10 | - cssmin 11 | 12 | default: 13 | - css 14 | - js 15 | -------------------------------------------------------------------------------- /grunt/bump.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | files: ['bower.json', 'package.json'], 4 | updateConfigs: [], 5 | commit: false, 6 | createTag: false, 7 | push: false 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /grunt/cssmin.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | shorthandCompacting: false, 4 | roundingPrecision: -1 5 | }, 6 | target: { 7 | files: { 8 | 'dist/css/<%= package.name %>.min.css': ['dist/css/<%= package.name %>.css'] 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /CHANGES.md: -------------------------------------------------------------------------------- 1 | 0.1.0 / 08-07-2015 2 | ================== 3 | 4 | * Initial release 5 | 6 | 0.1.3 / 13-02-2018 7 | ================== 8 | 9 | * Fixed Firefox specific bugs 10 | * Fixed issue: multiple handsontable is not supported in a single page due to getElementsByClassName #2 11 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | global.jsSourceFiles = [ 2 | 'dist/js/medium-editor-handsontable.js' 3 | ]; 4 | 5 | module.exports = function (grunt) { 6 | require('load-grunt-config')(grunt, { 7 | loadGruntTasks: { 8 | pattern: [ 9 | 'grunt-*' 10 | ] 11 | } 12 | }); 13 | require('time-grunt')(grunt); 14 | }; 15 | -------------------------------------------------------------------------------- /grunt/autoprefixer.js: -------------------------------------------------------------------------------- 1 | var autoprefixerBrowsers = ['last 3 versions', 'ie >= 9']; 2 | 3 | module.exports = { 4 | main: { 5 | expand: true, 6 | cwd: 'dist/css/', 7 | src: ['*.css', '!*.min.css'], 8 | dest: 'dist/css/', 9 | browsers: autoprefixerBrowsers 10 | }, 11 | themes: { 12 | expand: true, 13 | cwd: 'demo/css/', 14 | src: ['*.css', '!*.min.css'], 15 | dest: 'demo/css/', 16 | browsers: autoprefixerBrowsers 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | 1. Fork it 4 | 2. Create your feature branch (`git checkout -b my-new-feature`) 5 | 3. Test your changes to the best of your ability 6 | 4. Update the documentation to reflect your changes if they add or changes current functionality 7 | 5. Commit your changes (`git commit -am 'Added some feature'`) 8 | 6. Push to the branch (`git push origin my-new-feature`) 9 | 7. Create new Pull Request 10 | 11 | or 12 | 13 | 1. Just pull request all the things the way you want! 14 | 15 | ## Development 16 | 17 | Clone the repository and: 18 | 19 | ``` 20 | npm install 21 | grunt 22 | ``` 23 | -------------------------------------------------------------------------------- /dist/css/medium-editor-handsontable.min.css: -------------------------------------------------------------------------------- 1 | .medium-editor-table-builder{display:none;position:absolute;left:0;top:101%}.medium-editor-table-builder *{box-sizing:border-box}.medium-editor-table-builder-grid{border:1px solid #000;border-radius:3px;height:162px;overflow:hidden;width:162px}.medium-editor-table-builder-cell{background-color:#333;border:1px solid #000;display:block;float:left;height:16px;margin:0;width:16px}.medium-editor-table-builder-cell.active,.medium-editor-table-builder-cell:hover{background-color:#ccc}.medium-editor-table{border-collapse:collapse;resize:both;table-layout:fixed}.medium-editor-table,.medium-editor-table td{border:1px dashed #e3e3e3} -------------------------------------------------------------------------------- /demo/css/demo.css: -------------------------------------------------------------------------------- 1 | ::-moz-selection { 2 | background: #a0ced9; 3 | color: #fff; } 4 | 5 | ::selection { 6 | background: #a0ced9; 7 | color: #fff; } 8 | 9 | body { 10 | background-color: #fafafa; 11 | color: #333; 12 | font-family: 'Roboto', sans-serif; 13 | font-size: 16px; 14 | line-height: 1.6; } 15 | 16 | p:first-child { 17 | margin-top: 0; } 18 | 19 | p:last-child { 20 | margin-bottom: 0; } 21 | 22 | h1 { 23 | margin-bottom: 60px; 24 | text-align: center; } 25 | 26 | .container { 27 | margin: 60px auto; 28 | width: 600px; } 29 | 30 | .editable { 31 | background-color: #fff; 32 | border: 1px solid #abf4b4; 33 | padding: 30px; } 34 | .editable:focus { 35 | outline: none; } 36 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "medium-editor-handsontable", 3 | "homepage": "https://github.com/asselinpaul/medium-editor-handsontable", 4 | "authors": [ 5 | "Paul Asselin " 6 | ], 7 | "description": "MediumEditor extension to allow handsontable spreadsheets.", 8 | "main": [ 9 | "dist/js/medium-editor-handsontable.js", 10 | "dist/css/medium-editor-handsontable.css" 11 | ], 12 | "keywords": [ 13 | "wysiwyg", 14 | "medium", 15 | "rich-text", 16 | "editor", 17 | "spreadsheet", 18 | "spreadsheets", 19 | "handsontable", 20 | "excel" 21 | ], 22 | "license": "MIT", 23 | "ignore": [ 24 | "**/.*", 25 | "node_modules", 26 | "bower_components", 27 | "Gruntfile.js", 28 | "demo", 29 | "package.json", 30 | "README.md", 31 | "CHANGES.md" 32 | ], 33 | "dependencies": { 34 | "medium-editor": "5.0.0", 35 | "normalize.css": "3.0.3" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /dist/css/medium-editor-handsontable.css: -------------------------------------------------------------------------------- 1 | .medium-editor-table-builder { 2 | display: none; 3 | position: absolute; 4 | left: 0; 5 | top: 101%; } 6 | .medium-editor-table-builder * { 7 | box-sizing: border-box; } 8 | 9 | .medium-editor-table-builder-grid { 10 | border: 1px solid #000; 11 | border-radius: 3px; 12 | height: 162px; 13 | overflow: hidden; 14 | width: 162px; } 15 | 16 | .medium-editor-table-builder-cell { 17 | background-color: #333; 18 | border: 1px solid #000; 19 | display: block; 20 | float: left; 21 | height: 16px; 22 | margin: 0; 23 | width: 16px; } 24 | .medium-editor-table-builder-cell.active { 25 | background-color: #ccc; } 26 | 27 | .medium-editor-table-builder-cell:hover { 28 | background-color: #ccc; } 29 | 30 | .medium-editor-table { 31 | border-collapse: collapse; 32 | resize: both; 33 | table-layout: fixed; } 34 | 35 | .medium-editor-table, 36 | .medium-editor-table td { 37 | border: 1px dashed #e3e3e3; } 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "medium-editor-handsontable", 3 | "version": "0.1.3", 4 | "author": "Paul Asselin ", 5 | "description": "MediumEditor extension to allow handsontable spreadsheets.", 6 | "main": "dist/js/medium-editor-handsontable.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/asselinpaul/medium-editor-handsontable" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/asselinpaul/medium-editor-handsontable/issues" 13 | }, 14 | "homepage": "https://github.com/asselinpaul/medium-editor-handsontable", 15 | "keywords": [ 16 | "editor", 17 | "medium", 18 | "wysiwyg", 19 | "rich-text", 20 | "spreadsheet", 21 | "spreadsheets", 22 | "handsontable", 23 | "excel" 24 | ], 25 | "publishConfig": { 26 | "registry": "http://registry.npmjs.org/" 27 | }, 28 | "license": "MIT", 29 | "devDependencies": { 30 | "grunt": "0.4.5", 31 | "grunt-autoprefixer": "3.0.1", 32 | "grunt-bump": "0.3.1", 33 | "grunt-contrib-cssmin": "0.12.3", 34 | "grunt-contrib-uglify": "0.9.1", 35 | "grunt-jscs": "1.8.0", 36 | "load-grunt-config": "0.17.2", 37 | "time-grunt": "1.2.1" 38 | }, 39 | "scripts": { 40 | "start": "open ./demo/index.html" 41 | }, 42 | "peerDependencies": { 43 | "medium-editor": "^5.0.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Original work Copyright Davi Ferreira, http://www.daviferreira.com/ 2 | Modified work Copyright 2015 Paul Asselin 3 | 4 | This software consists of voluntary contributions made by many 5 | individuals. For exact contribution history, see the revision history 6 | available at https://github.com/yabwe/medium-editor-tables 7 | 8 | The following license applies to all parts of this software except as 9 | documented below: 10 | 11 | ==== 12 | 13 | Permission is hereby granted, free of charge, to any person obtaining 14 | a copy of this software and associated documentation files (the 15 | "Software"), to deal in the Software without restriction, including 16 | without limitation the rights to use, copy, modify, merge, publish, 17 | distribute, sublicense, and/or sell copies of the Software, and to 18 | permit persons to whom the Software is furnished to do so, subject to 19 | the following conditions: 20 | 21 | The above copyright notice and this permission notice shall be 22 | included in all copies or substantial portions of the Software. 23 | 24 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 25 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 26 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 27 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 28 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 29 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 30 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 31 | 32 | ==== 33 | 34 | All files located in the node_modules directory are 35 | externally maintained libraries used by this software which have their 36 | own licenses; we recommend you read them, as their terms may differ from 37 | the terms above. 38 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Medium Editor Handsontable 8 | 9 | 10 | 11 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | Fork me on GitHub 32 |
33 |

MediumEditor HandsOnTable

34 |
35 |

36 | He always thought of the sea as 'la mar' which is what people call 37 | her in Spanish when they love her. Sometimes those who love her say 38 | bad things of her but they are always said as though she were a woman. 39 | Some of the younger fishermen, those who used buoys as floats for their 40 | lines and had motorboats, bought when the shark livers had brought much 41 | money, spoke of her as 'el mar' which is masculine.They spoke of her as 42 | a contestant or a place or even an enemy. But the old man always thought 43 | of her as feminine and as something that gave or withheld great favours, 44 | and if she did wild or wicked things it was because she could not help 45 | them. The moon affects her as it does a woman, he thought. 46 |

47 |
48 |
49 | 50 | 52 | 53 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MediumEditor Handsontable 2 | 3 | MediumEditor Handsontable is an extension to add [handsontable](http://handsontable.com/) spreadsheets to [MediumEditor](https://github.com/yabwe/medium-editor). 4 | 5 | **Demo:** [https://asselinpaul.github.io/medium-editor-handsontable/](https://asselinpaul.github.io/medium-editor-handsontable/) 6 | 7 | -- 8 | 9 | ![meditor-handsontable gif](https://cloud.githubusercontent.com/assets/868249/8600928/ae31ae04-2660-11e5-8e39-9fb0399d9f94.gif) 10 | 11 | -- 12 | 13 | ## Usage 14 | 15 | You can install manually or either by using npm or bower: 16 | 17 | ``` 18 | npm install medium-editor-handsontable 19 | ``` 20 | 21 | or 22 | 23 | ``` 24 | bower install medium-editor-handsontable 25 | ``` 26 | 27 | On your app, link the style and the script and initialize MediumEditor with the table extension: 28 | 29 | ```html 30 | 31 | 32 | 33 | ... 34 | 35 | 36 | 37 | ... 38 | 39 | 40 |
41 | 42 | 43 | 44 | 45 | 63 | 64 | 65 | ``` 66 | 67 | ## Initialization options 68 | 69 | * __rows__: maximum number of rows. Default: 10. 70 | * __columns__: maximum number of columns. Default: 10. 71 | * __readOnly__: makes the cell un-editable. Default: false. 72 | * __contextMenu__: shows the context menu on right click (enables the addition/removal of rows and columns). Default: true. 73 | 74 | ### Examples 75 | 76 | ```javascript 77 | ... 78 | extensions: { 79 | 'table': new MediumEditorTable({ 80 | rows: 40, 81 | columns: 40 82 | }) 83 | } 84 | ... 85 | ``` 86 | 87 | ```javascript 88 | ... 89 | extensions: { 90 | spreadsheet: new MediumEditorSpreadsheet({ 91 | readOnly: true, 92 | contextMenu: false 93 | }) 94 | } 95 | ... 96 | ``` 97 | 98 | ## Saving states 99 | Saving states is easy and compatible with the medium-editor ```.serialize``` method. In order to make this work, the extension keeps the dimensions and data of the spreadsheets in the respective element's data attributes (updated as the spreadsheet is edited). 100 | 101 | Serializing the editor therefore saves the state in plain html: ``` data-height="2" data-width="2" data-data="[["1","2"],["3","4"]]" ``` 102 | 103 | When the serialised data is loaded and medium-editor-handsontable is initialised, the spreadsheet elements are re-created by the ```parse()``` method. 104 | 105 | ## Demo 106 | 107 | Clone the repository and: 108 | 109 | ``` 110 | bower install 111 | open demo/index.html 112 | ``` 113 | 114 | ## Development 115 | Clone the repository and: 116 | 117 | ``` 118 | npm install 119 | grunt 120 | ``` 121 | 122 | ## License 123 | The extension is based on the following project: [https://github.com/yabwe/medium-editor-tables](https://github.com/yabwe/medium-editor-tables) 124 | 125 | MIT: [https://github.com/asselinpaul/medium-editor-handsontable/blob/master/LICENSE](https://github.com/asselinpaul/medium-editor-handsontable/blob/master/LICENSE) 126 | -------------------------------------------------------------------------------- /dist/js/medium-editor-handsontable.min.js: -------------------------------------------------------------------------------- 1 | var spreadsheet_count=0,readOnly,contextMenu;!function(a,b){"use strict";"object"==typeof module?module.exports=b:"function"==typeof define&&define.amd?define(b):a.MediumEditorSpreadsheet=b}(this,function(){"use strict";function a(a,b){var c;a=a||{};for(c in b)b.hasOwnProperty(c)&&!a.hasOwnProperty(c)&&(a[c]=b[c]);return a}function b(a){return a.getSelection?a.getSelection().toString():a.selection&&"Control"!==a.selection.type?a.selection.createRange().text:""}function c(){for(var a=document.getElementsByClassName("medium-text-handsontable"),b=0;b')}}];var f=new Handsontable(a,{data:b,className:"medium-text-handsontable",rowHeaders:!0,colHeaders:!0,contextMenu:e,autoWrapCol:!0,autoWrapRow:!0,renderer:"html",placeholder:" ",autoColumnSize:!0,readOnly:d,afterChange:function(b,c){"loadData"!==c&&g(f,a)}});a.contentEditable=!1,g(f,a),a==a.parentNode.lastElementChild&&a.parentNode.insertBefore(document.createElement("br"),a.nextSibling)}function i(b){this.options=a(b,{columns:10,rows:10,readOnly:!1,contextMenu:!0}),this.parent=!0,this.hasForm=!0,this.isFormVisible=!1,this.createButton(),c()}d.prototype={init:function(a,b,c,d){return this._root=a,this._callback=b,this.rows=c,this.columns=d,this._render()},setCurrentCell:function(a){this._currentCell=a},markCells:function(){[].forEach.call(this._cellsElements,function(a){var b={column:parseInt(a.dataset.column,10),row:parseInt(a.dataset.row,10)};!0===(this._currentCell&&b.row<=this._currentCell.row&&b.column<=this._currentCell.column)?a.classList.add("active"):a.classList.remove("active")}.bind(this))},_generateCells:function(){this._cells=[];for(var a=0;a"},_cellsHTML:function(){var a="";return this._generateCells(),this._cells.map(function(b){a+='',a+=""}),a},_render:function(){this._root.innerHTML=this._html(),this._cellsElements=this._root.querySelectorAll("a"),this._bindEvents()},_bindEvents:function(){[].forEach.call(this._cellsElements,function(a){this._onMouseEnter(a),this._onClick(a)}.bind(this))},_onMouseEnter:function(a){var b,c=this;a.addEventListener("mouseenter",function(){clearTimeout(b);var a=this.dataset;b=setTimeout(function(){c._currentCell={column:parseInt(a.column,10),row:parseInt(a.row,10)},c.markCells()},50)})},_onClick:function(a){var b=this;a.addEventListener("click",function(a){a.preventDefault(),b._callback(this.dataset.row,this.dataset.column)})}},e.prototype={init:function(a){this.options=a,this._doc=a.ownerDocument||document,this._root=this._doc.createElement("div"),this._root.className="medium-editor-table-builder",this.grid=new d(this._root,this.options.onClick,this.options.rows,this.options.columns)},getElement:function(){return this._root},hide:function(){this._root.style.display="",this.grid.setCurrentCell({column:-1,row:-1}),this.grid.markCells()},show:function(a){this._root.style.display="block",this._root.style.left=a+"px"}};f.prototype={init:function(a){this._editor=a,this._doc=this._editor.options.ownerDocument},insert:function(a,b,c,d,e){spreadsheet_count++;var f=this._html(a,b,c);this._editor.pasteHTML(f,{cleanAttrs:[],cleanTags:[]}),setTimeout(function(){for(var f=document.getElementById("spreadsheet"+c),g=new Array(parseInt(a)+1),i=0;i '}};return function(a,b,c,d,e,f,g){Handsontable.renderers.TextRenderer.apply(this,arguments),""&&(b.html=''),b.style.backgroundColor="yellow"},i.prototype={createButton:function(){this._createButtonElement(),this._bindButtonClick()},isDisplayed:function(){return this.isFormVisible},getForm:function(){return this.builder||(this.builder=new e({onClick:function(a,b){readOnly=this.options.readOnly,contextMenu=this.options.contextMenu,this.table.insert(a,b,spreadsheet_count,readOnly,contextMenu),this.hideForm()}.bind(this),ownerDocument:this.document,rows:this.options.rows,columns:this.options.columns}),this.table=new f(this.base)),this.builder.getElement()},getButton:function(){return"fontawesome"===this.base.options.buttonLabels&&(this.button.innerHTML=''),this.button},onHide:function(){this.hideForm()},hideForm:function(){this.isFormVisible=!1,this.builder.hide(),this.button.classList.remove("medium-editor-button-active")},show:function(){this.isFormVisible=!0,this.builder.show(this.button.offsetLeft),this.button.classList.add("medium-editor-button-active");for(var a=document.getElementsByClassName("medium-editor-table-builder-grid"),b=0;b'; 194 | html += ''; 195 | }); 196 | return html; 197 | }, 198 | 199 | _render: function() { 200 | this._root.innerHTML = this._html(); 201 | this._cellsElements = this._root.querySelectorAll('a'); 202 | this._bindEvents(); 203 | }, 204 | 205 | _bindEvents: function() { 206 | [].forEach.call(this._cellsElements, function(el) { 207 | this._onMouseEnter(el); 208 | this._onClick(el); 209 | }.bind(this)); 210 | }, 211 | 212 | _onMouseEnter: function(el) { 213 | var self = this; 214 | var timer; 215 | 216 | el.addEventListener('mouseenter', function() { 217 | clearTimeout(timer); 218 | 219 | var dataset = this.dataset; 220 | 221 | timer = setTimeout(function() { 222 | self._currentCell = { 223 | column: parseInt(dataset.column, 10), 224 | row: parseInt(dataset.row, 10) 225 | }; 226 | self.markCells(); 227 | }, 50); 228 | }); 229 | }, 230 | 231 | _onClick: function(el) { 232 | var self = this; 233 | el.addEventListener('click', function(e) { 234 | e.preventDefault(); 235 | self._callback(this.dataset.row, this.dataset.column); 236 | }); 237 | } 238 | }; 239 | 240 | function Builder(options) { 241 | return this.init(options); 242 | } 243 | 244 | Builder.prototype = { 245 | init: function(options) { 246 | this.options = options; 247 | this._doc = options.ownerDocument || document; 248 | this._root = this._doc.createElement('div'); 249 | this._root.className = 'medium-editor-table-builder'; 250 | this.grid = new Grid( 251 | this._root, 252 | this.options.onClick, 253 | this.options.rows, 254 | this.options.columns 255 | ); 256 | }, 257 | 258 | getElement: function() { 259 | return this._root; 260 | }, 261 | 262 | hide: function() { 263 | this._root.style.display = ''; 264 | this.grid.setCurrentCell({ 265 | column: -1, 266 | row: -1 267 | }); 268 | this.grid.markCells(); 269 | }, 270 | 271 | show: function(left) { 272 | this._root.style.display = 'block'; 273 | this._root.style.left = left + 'px'; 274 | } 275 | }; 276 | 277 | function Spreadsheet(editor) { 278 | return this.init(editor); 279 | } 280 | 281 | var BACKSPACE_KEY_CODE = 8; 282 | 283 | Spreadsheet.prototype = { 284 | init: function(editor) { 285 | this._editor = editor; 286 | this._doc = this._editor.options.ownerDocument; 287 | }, 288 | 289 | insert: function(rows, cols, id, readOnlyBool, contextMenuBool) { 290 | spreadsheet_count++; 291 | var html = this._html(rows, cols, id); 292 | this._editor.pasteHTML( 293 | html, { 294 | cleanAttrs: [], 295 | cleanTags: [] 296 | } 297 | ); 298 | setTimeout(function() { 299 | var container = document.getElementById('spreadsheet' + id); 300 | 301 | //initialise a blank two dimensional array 302 | var data = new Array(parseInt(rows) + 1); 303 | for (var i = 0; i < data.length; i++) { 304 | data[i] = Array(parseInt(cols) + 1).fill(""); 305 | } 306 | 307 | draw(container, data, contextMenuBool, readOnlyBool); 308 | }); 309 | }, 310 | 311 | _html: function(rows, cols, id) { 312 | var html = ''; 313 | var text = getSelectionText(this._doc); 314 | 315 | html += text; 316 | html += '
'; 317 | return html; 318 | } 319 | }; 320 | 321 | function updateAttribute(html, container) { 322 | var data = html.getData(); 323 | container.dataset.height = data.length; 324 | container.dataset.width = data[0].length; 325 | container.dataset.data = JSON.stringify(data); 326 | } 327 | 328 | var checkboxRenderer; 329 | 330 | checkboxRenderer = function(instance, td, row, col, prop, value, cellProperties) { 331 | Handsontable.renderers.TextRenderer.apply(this, arguments); 332 | if (value = '') { 333 | td.html = '' 334 | } 335 | td.style.backgroundColor = 'yellow'; 336 | 337 | }; 338 | 339 | function draw(container, data, contextMenuBool, readOnlyBool) { 340 | var contextMenuOptions; 341 | if (contextMenuBool) { 342 | contextMenuOptions = ['row_above', 'row_below', '---------', 'col_left', 343 | 'col_right', '---------', 'remove_row', 'remove_col', 344 | '---------', 'undo', 'redo', 'make_read_only', 345 | '---------', 'alignment', { 346 | key: 'add_checkmark', 347 | name: 'Insert checkmark', 348 | callback: function(key, selection) { 349 | for (var i = selection.start.col; i <= selection.end.col; i++) { 350 | for (var j = selection.start.row; j <= selection.end.row; j++) { 351 | this.setDataAtCell(j, i, ''); 352 | 353 | } 354 | } 355 | } 356 | } 357 | 358 | ]; 359 | } else { 360 | contextMenuOptions = false; 361 | } 362 | var html = new Handsontable(container, { 363 | data: data, 364 | className: "medium-text-handsontable", 365 | rowHeaders: true, 366 | colHeaders: true, 367 | contextMenu: contextMenuOptions, 368 | autoWrapCol: true, 369 | autoWrapRow: true, 370 | renderer: 'html', 371 | placeholder: ' ', 372 | autoColumnSize: true, 373 | readOnly: readOnlyBool, 374 | afterChange: function(change, source) { 375 | if (source === 'loadData') { 376 | return; //don't save this change 377 | } 378 | updateAttribute(html, container); 379 | } 380 | }); 381 | 382 | container.contentEditable = false; //fixes formatting bugs, makes it easier to delete with backspace 383 | updateAttribute(html, container); //initialises dataset attributes 384 | 385 | //if sheet is lastNode, add
so that the caret can be positioned below the sheet (otherwise can't delete) 386 | if (container == container.parentNode.lastElementChild) { 387 | container.parentNode.insertBefore(document.createElement("br"), container.nextSibling); 388 | } 389 | } 390 | 391 | function MediumEditorSpreadsheet(options) { 392 | this.options = extend(options, { 393 | columns: 10, 394 | rows: 10, 395 | readOnly: false, 396 | contextMenu: true 397 | }); 398 | this.parent = true; 399 | this.hasForm = true; 400 | this.isFormVisible = false; 401 | this.createButton(); 402 | parse(); 403 | } 404 | 405 | MediumEditorSpreadsheet.prototype = { 406 | createButton: function() { 407 | this._createButtonElement(); 408 | this._bindButtonClick(); 409 | }, 410 | 411 | isDisplayed: function() { 412 | return this.isFormVisible; 413 | }, 414 | 415 | getForm: function() { 416 | if (!this.builder) { 417 | this.builder = new Builder({ 418 | onClick: function(rows, columns) { 419 | readOnly = this.options.readOnly; 420 | contextMenu = this.options.contextMenu; 421 | this.table.insert(rows, columns, spreadsheet_count, readOnly, contextMenu); 422 | this.hideForm(); 423 | }.bind(this), 424 | ownerDocument: this.document, 425 | rows: this.options.rows, 426 | columns: this.options.columns 427 | }); 428 | this.table = new Spreadsheet(this.base); 429 | } 430 | 431 | return this.builder.getElement(); 432 | }, 433 | 434 | getButton: function() { 435 | if (this.base.options.buttonLabels === 'fontawesome') { 436 | this.button.innerHTML = ''; 437 | } 438 | return this.button; 439 | }, 440 | 441 | onHide: function() { 442 | this.hideForm(); 443 | }, 444 | 445 | hideForm: function() { 446 | this.isFormVisible = false; 447 | this.builder.hide(); 448 | this.button.classList.remove('medium-editor-button-active'); 449 | }, 450 | 451 | show: function() { 452 | this.isFormVisible = true; 453 | this.builder.show(this.button.offsetLeft); 454 | this.button.classList.add('medium-editor-button-active'); 455 | var elements = document.getElementsByClassName('medium-editor-table-builder-grid'); 456 | for (var i = 0; i < elements.length; i++) { 457 | // TODO: what is 16 and what is 2? 458 | elements[i].style.height = (16 * this.options.rows + 2) + 'px'; 459 | elements[i].style.width = (16 * this.options.columns + 2) + 'px'; 460 | } 461 | }, 462 | 463 | _createButtonElement: function() { 464 | this.button = document.createElement('button'); 465 | this.button.className = 'medium-editor-action'; 466 | this.button.innerHTML = 'tbl'; 467 | }, 468 | 469 | _bindButtonClick: function() { 470 | this.button.addEventListener('click', function(e) { 471 | e.preventDefault(); 472 | this[this.isFormVisible === true ? 'hideForm' : 'show'](); 473 | }.bind(this)); 474 | } 475 | }; 476 | 477 | return MediumEditorSpreadsheet; 478 | }())); 479 | -------------------------------------------------------------------------------- /demo/handsontable/handsontable.full.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Handsontable 0.15.1 3 | * Handsontable is a JavaScript library for editable tables with basic copy-paste compatibility with Excel and Google Docs 4 | * 5 | * Copyright 2015 Handsoncode sp. z o.o. 6 | * Licensed under the MIT license. 7 | * http://handsontable.com/ 8 | * 9 | * Date: Thu Jun 25 2015 14:04:28 GMT+0200 (CEST) 10 | */ 11 | 12 | .handsontable { 13 | position: relative; 14 | } 15 | 16 | .handsontable .hide{ 17 | display: none; 18 | } 19 | .handsontable .relative { 20 | position: relative; 21 | } 22 | 23 | .handsontable.htAutoColumnSize { 24 | visibility: hidden; 25 | left: 0; 26 | position: absolute; 27 | top: 0; 28 | } 29 | 30 | .handsontable .wtHider { 31 | width: 0; 32 | } 33 | 34 | .handsontable .wtSpreader { 35 | position: relative; 36 | width: 0; /*must be 0, otherwise blank space appears in scroll demo after scrolling max to the right */ 37 | height: auto; 38 | } 39 | 40 | .handsontable table, 41 | .handsontable tbody, 42 | .handsontable thead, 43 | .handsontable td, 44 | .handsontable th, 45 | .handsontable input, 46 | .handsontable textarea, 47 | .handsontable div { 48 | box-sizing: content-box; 49 | -webkit-box-sizing: content-box; 50 | -moz-box-sizing: content-box; 51 | } 52 | 53 | .handsontable input, 54 | .handsontable textarea { 55 | min-height: initial; 56 | } 57 | 58 | .handsontable table.htCore { 59 | border-collapse: separate; 60 | /*it must be separate, otherwise there are offset miscalculations in WebKit: http://stackoverflow.com/questions/2655987/border-collapse-differences-in-ff-and-webkit*/ 61 | /*this actually only changes appearance of user selection - does not make text unselectable 62 | -webkit-user-select: none; 63 | -khtml-user-select: none; 64 | -moz-user-select: none; 65 | -o-user-select: none; 66 | -ms-user-select: none; 67 | /*user-select: none; /*no browser supports unprefixed version*/ 68 | border-spacing: 0; 69 | margin: 0; 70 | border-width: 0; 71 | table-layout: fixed; 72 | width: 0; 73 | outline-width: 0; 74 | /* reset bootstrap table style. for more info see: https://github.com/handsontable/handsontable/issues/224 */ 75 | max-width: none; 76 | max-height: none; 77 | } 78 | 79 | .handsontable col { 80 | width: 50px; 81 | } 82 | 83 | .handsontable col.rowHeader { 84 | width: 50px; 85 | } 86 | 87 | .handsontable th, 88 | .handsontable td { 89 | border-right: 1px solid #CCC; 90 | border-bottom: 1px solid #CCC; 91 | height: 22px; 92 | empty-cells: show; 93 | line-height: 21px; 94 | padding: 0 4px 0 4px; 95 | /* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */ 96 | background-color: #FFF; 97 | vertical-align: top; 98 | overflow: hidden; 99 | outline-width: 0; 100 | white-space: pre-line; 101 | /* preserve new line character in cell */ 102 | } 103 | 104 | .handsontable td.htInvalid { 105 | background-color: #ff4c42 !important; /*gives priority over td.area selection background*/ 106 | } 107 | 108 | .handsontable td.htNoWrap { 109 | white-space: nowrap; 110 | } 111 | 112 | .handsontable th:last-child { 113 | /*Foundation framework fix*/ 114 | border-right: 1px solid #CCC; 115 | border-bottom: 1px solid #CCC; 116 | } 117 | 118 | .handsontable tr:first-child th.htNoFrame, 119 | .handsontable th:first-child.htNoFrame, 120 | .handsontable th.htNoFrame { 121 | border-left-width: 0; 122 | background-color: white; 123 | border-color: #FFF; 124 | } 125 | 126 | .handsontable th:first-child, 127 | .handsontable td:first-of-type, 128 | .handsontable thead tr th:nth-child(2), 129 | .handsontable .htNoFrame + th, 130 | .handsontable .htNoFrame + td { 131 | border-left: 1px solid #CCC; 132 | } 133 | 134 | .handsontable tr:first-child th, 135 | .handsontable tr:first-child td { 136 | border-top: 1px solid #CCC; 137 | } 138 | 139 | .ht_master:not(.innerBorderLeft) ~ .handsontable tbody tr th, 140 | .ht_master:not(.innerBorderLeft) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child 141 | { 142 | border-right-width: 0; 143 | } 144 | 145 | .ht_master:not(.innerBorderTop) thead tr:last-child th, 146 | .ht_master:not(.innerBorderTop) ~ .handsontable thead tr:last-child th, 147 | .ht_master:not(.innerBorderTop) thead tr.lastChild th, 148 | .ht_master:not(.innerBorderTop) ~ .handsontable thead tr.lastChild th { 149 | border-bottom-width: 0; 150 | } 151 | 152 | .handsontable th { 153 | background-color: #EEE; 154 | color: #222; 155 | text-align: center; 156 | font-weight: normal; 157 | white-space: nowrap; 158 | } 159 | 160 | .handsontable thead th { 161 | padding: 0; 162 | } 163 | 164 | .handsontable th.active { 165 | background-color: #CCC; 166 | } 167 | 168 | .handsontable thead th .relative { 169 | padding: 2px 4px; 170 | } 171 | 172 | /* plugins */ 173 | 174 | .handsontable .manualColumnMover { 175 | position: fixed; 176 | left: 0; 177 | top: 0; 178 | background-color: transparent; 179 | width: 5px; 180 | height: 25px; 181 | z-index: 999; 182 | cursor: move; 183 | } 184 | 185 | .handsontable .manualRowMover { 186 | position: fixed; 187 | left: -4px; 188 | top: 0; 189 | background-color: transparent; 190 | height: 5px; 191 | width: 50px; 192 | z-index: 999; 193 | cursor: move; 194 | } 195 | 196 | .handsontable .manualColumnMoverGuide, 197 | .handsontable .manualRowMoverGuide { 198 | position: fixed; 199 | left: 0; 200 | top: 0; 201 | background-color: #CCC; 202 | width: 25px; 203 | height: 25px; 204 | opacity: 0.7; 205 | display: none; 206 | } 207 | 208 | .handsontable .manualColumnMoverGuide.active, 209 | .handsontable .manualRowMoverGuide.active { 210 | display: block; 211 | } 212 | 213 | .handsontable .manualColumnMover:hover, 214 | .handsontable .manualColumnMover.active, 215 | .handsontable .manualRowMover:hover, 216 | .handsontable .manualRowMover.active{ 217 | background-color: #88F; 218 | } 219 | 220 | /* row + column resizer*/ 221 | 222 | .handsontable .manualColumnResizer { 223 | position: fixed; 224 | top: 0; 225 | cursor: col-resize; 226 | z-index: 110; 227 | width: 5px; 228 | height: 25px; 229 | } 230 | 231 | .handsontable .manualRowResizer { 232 | position: fixed; 233 | left: 0; 234 | cursor: row-resize; 235 | z-index: 110; 236 | height: 5px; 237 | width: 50px; 238 | } 239 | 240 | .handsontable .manualColumnResizer:hover, 241 | .handsontable .manualColumnResizer.active, 242 | .handsontable .manualRowResizer:hover, 243 | .handsontable .manualRowResizer.active { 244 | background-color: #AAB; 245 | } 246 | 247 | .handsontable .manualColumnResizerGuide { 248 | position: fixed; 249 | right: 0; 250 | top: 0; 251 | background-color: #AAB; 252 | display: none; 253 | width: 0; 254 | border-right: 1px dashed #777; 255 | margin-left: 5px; 256 | } 257 | 258 | .handsontable .manualRowResizerGuide { 259 | position: fixed; 260 | left: 0; 261 | bottom: 0; 262 | background-color: #AAB; 263 | display: none; 264 | height: 0; 265 | border-bottom: 1px dashed #777; 266 | margin-top: 5px; 267 | } 268 | 269 | .handsontable .manualColumnResizerGuide.active, 270 | .handsontable .manualRowResizerGuide.active { 271 | display: block; 272 | } 273 | 274 | .handsontable .columnSorting { 275 | position: relative; 276 | } 277 | 278 | .handsontable .columnSorting:hover { 279 | text-decoration: underline; 280 | cursor: pointer; 281 | } 282 | 283 | .handsontable .columnSorting.ascending::after { 284 | content: '\25B2'; 285 | color: #5f5f5f; 286 | position: absolute; 287 | right: -15px; 288 | } 289 | 290 | .handsontable .columnSorting.descending::after { 291 | content: '\25BC'; 292 | color: #5f5f5f; 293 | position: absolute; 294 | right: -15px; 295 | } 296 | 297 | /* border line */ 298 | 299 | .handsontable .wtBorder { 300 | position: absolute; 301 | font-size: 0; 302 | } 303 | .handsontable .wtBorder.hidden{ 304 | display:none !important; 305 | } 306 | 307 | .handsontable td.area { 308 | background: -moz-linear-gradient(top, rgba(181,209,255,0.34) 0%, rgba(181,209,255,0.34) 100%); /* FF3.6+ */ 309 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,209,255,0.34)), color-stop(100%,rgba(181,209,255,0.34))); /* Chrome,Safari4+ */ 310 | background: -webkit-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* Chrome10+,Safari5.1+ */ 311 | background: -o-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* Opera 11.10+ */ 312 | background: -ms-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* IE10+ */ 313 | background: linear-gradient(to bottom, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* W3C */ 314 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b5d1ff', endColorstr='#57b5d1ff',GradientType=0 ); /* IE6-9 */ 315 | background-color: #fff; 316 | } 317 | 318 | /* fill handle */ 319 | 320 | .handsontable .wtBorder.corner { 321 | font-size: 0; 322 | cursor: crosshair; 323 | } 324 | 325 | .handsontable .htBorder.htFillBorder { 326 | background: red; 327 | width: 1px; 328 | height: 1px; 329 | } 330 | 331 | .handsontableInput { 332 | border:none; 333 | outline-width: 0; 334 | margin: 0 ; 335 | padding: 1px 5px 0 5px; 336 | font-family: inherit; 337 | line-height: 21px; 338 | font-size: inherit; 339 | box-shadow: 0 0 0 2px #5292F7 inset; 340 | resize: none; 341 | /*below are needed to overwrite stuff added by jQuery UI Bootstrap theme*/ 342 | display: inline-block; 343 | color: #000; 344 | border-radius: 0; 345 | background-color: #FFF; 346 | /*overwrite styles potentionally made by a framework*/ 347 | } 348 | 349 | .handsontableInputHolder { 350 | position: absolute; 351 | top: 0; 352 | left: 0; 353 | z-index: 100; 354 | } 355 | 356 | .htSelectEditor { 357 | -webkit-appearance: menulist-button !important; 358 | position: absolute; 359 | width: auto; 360 | } 361 | 362 | /* 363 | TextRenderer readOnly cell 364 | */ 365 | 366 | .handsontable .htDimmed { 367 | color: #777; 368 | } 369 | 370 | .handsontable .htSubmenu { 371 | position: relative; 372 | } 373 | 374 | .handsontable .htSubmenu :after{ 375 | content: '▶'; 376 | color: #777; 377 | position: absolute; 378 | right: 5px; 379 | } 380 | 381 | 382 | /* 383 | TextRenderer horizontal alignment 384 | */ 385 | .handsontable .htLeft{ 386 | text-align: left; 387 | } 388 | .handsontable .htCenter{ 389 | text-align: center; 390 | } 391 | .handsontable .htRight{ 392 | text-align: right; 393 | } 394 | .handsontable .htJustify{ 395 | text-align: justify; 396 | } 397 | /* 398 | TextRenderer vertical alignment 399 | */ 400 | .handsontable .htTop{ 401 | vertical-align: top; 402 | } 403 | .handsontable .htMiddle{ 404 | vertical-align: middle; 405 | } 406 | .handsontable .htBottom{ 407 | vertical-align: bottom; 408 | } 409 | 410 | /* 411 | TextRenderer placeholder value 412 | */ 413 | 414 | .handsontable .htPlaceholder { 415 | color: #999; 416 | } 417 | 418 | /* 419 | AutocompleteRenderer down arrow 420 | */ 421 | 422 | .handsontable .htAutocompleteArrow { 423 | float: right; 424 | font-size: 10px; 425 | color: #EEE; 426 | cursor: default; 427 | width: 16px; 428 | text-align: center; 429 | } 430 | 431 | .handsontable td .htAutocompleteArrow:hover { 432 | color: #777; 433 | } 434 | 435 | .handsontable td.area .htAutocompleteArrow { 436 | color: #d3d3d3; 437 | } 438 | 439 | /* 440 | CheckboxRenderer 441 | */ 442 | 443 | .handsontable .htCheckboxRendererInput.noValue { 444 | opacity: 0.5; 445 | } 446 | 447 | /* 448 | NumericRenderer 449 | */ 450 | 451 | .handsontable .htNumeric { 452 | text-align: right; 453 | } 454 | 455 | /* 456 | Comment For Cell 457 | */ 458 | .htCommentCell{ 459 | position: relative; 460 | } 461 | .htCommentCell:after{ 462 | content: ''; 463 | position: absolute; 464 | top: 0; 465 | right: 0; 466 | border-left: 6px solid transparent; 467 | border-top: 6px solid red; 468 | } 469 | 470 | @-webkit-keyframes opacity-hide { 471 | from { 472 | opacity: 1; 473 | } 474 | to { 475 | opacity: 0; 476 | /*display: none;*/ 477 | } 478 | } 479 | @keyframes opacity-hide { 480 | from { 481 | /*display: block;*/ 482 | opacity: 1; 483 | } 484 | to { 485 | opacity: 0; 486 | /*display: none;*/ 487 | } 488 | } 489 | 490 | @-webkit-keyframes opacity-show { 491 | from { 492 | opacity: 0; 493 | /*display: none;*/ 494 | } 495 | to { 496 | opacity: 1; 497 | /*display: block;*/ 498 | } 499 | } 500 | @keyframes opacity-show { 501 | from { 502 | opacity: 0; 503 | /*display: none;*/ 504 | } 505 | to { 506 | opacity: 1; 507 | /*display: block;*/ 508 | } 509 | } 510 | 511 | /** 512 | * Handsontable in Handsontable 513 | */ 514 | 515 | .handsontable .handsontable.ht_clone_top .wtHider { 516 | padding: 0 0 5px 0; 517 | } 518 | 519 | /* removing shadows, TODO: remove the commented code and this comment */ 520 | /*.handsontable .handsontable:not(.ht_master) table {*/ 521 | /*-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);*/ 522 | /*box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);*/ 523 | /*}*/ 524 | 525 | /** 526 | * Autocomplete Editor 527 | */ 528 | .handsontable .autocompleteEditor.handsontable { 529 | padding-right: 17px; 530 | } 531 | .handsontable .autocompleteEditor.handsontable.htMacScroll { 532 | padding-right: 15px; 533 | } 534 | 535 | 536 | /** 537 | * Handsontable listbox theme 538 | */ 539 | 540 | .handsontable.listbox { 541 | margin: 0; 542 | } 543 | 544 | .handsontable.listbox .ht_master table { 545 | border: 1px solid #ccc; 546 | border-collapse: separate; 547 | background: white; 548 | } 549 | 550 | .handsontable.listbox th, 551 | .handsontable.listbox tr:first-child th, 552 | .handsontable.listbox tr:last-child th, 553 | .handsontable.listbox tr:first-child td, 554 | .handsontable.listbox td { 555 | border-width: 0; 556 | } 557 | 558 | .handsontable.listbox th, 559 | .handsontable.listbox td { 560 | white-space: nowrap; 561 | text-overflow: ellipsis; 562 | } 563 | 564 | .handsontable.listbox td.htDimmed { 565 | cursor: default; 566 | color: inherit; 567 | font-style: inherit; 568 | } 569 | 570 | .handsontable.listbox .wtBorder { 571 | visibility: hidden; 572 | } 573 | 574 | .handsontable.listbox tr td.current, 575 | .handsontable.listbox tr:hover td { 576 | background: #eee; 577 | } 578 | 579 | .htContextMenu { 580 | display: none; 581 | position: absolute; 582 | z-index: 1060; /*needs to be higher than 1050 - z-index for Twitter Bootstrap modal (#1569)*/ 583 | overflow: hidden; 584 | } 585 | 586 | .htContextMenu .ht_clone_top, 587 | .htContextMenu .ht_clone_left, 588 | .htContextMenu .ht_clone_corner, 589 | .htContextMenu .ht_clone_debug { 590 | display: none; 591 | } 592 | 593 | .ht_clone_top { 594 | z-index: 101; 595 | } 596 | 597 | .ht_clone_left { 598 | z-index: 102; 599 | } 600 | 601 | .ht_clone_corner { 602 | z-index: 103; 603 | } 604 | 605 | .ht_clone_debug { 606 | z-index: 103; 607 | } 608 | 609 | .htContextMenu table.htCore { 610 | border: 1px solid #bbb; 611 | } 612 | 613 | .htContextMenu .wtBorder { 614 | visibility: hidden; 615 | } 616 | 617 | .htContextMenu table tbody tr td { 618 | background: white; 619 | border-width: 0; 620 | padding: 4px 6px 0px 6px; 621 | cursor: pointer; 622 | overflow: hidden; 623 | white-space: nowrap; 624 | text-overflow: ellipsis; 625 | } 626 | 627 | .htContextMenu table tbody tr td:first-child { 628 | border: 0; 629 | } 630 | 631 | .htContextMenu table tbody tr td.htDimmed{ 632 | font-style: normal; 633 | color: #323232; 634 | } 635 | 636 | .htContextMenu table tbody tr td.current, 637 | .htContextMenu table tbody tr td.zeroclipboard-is-hover { 638 | background: rgb(233, 233, 233); 639 | } 640 | 641 | .htContextMenu table tbody tr td.htSeparator { 642 | border-top: 1px solid #bbb; 643 | height: 0; 644 | padding: 0; 645 | } 646 | 647 | .htContextMenu table tbody tr td.htDisabled { 648 | color: #999; 649 | } 650 | 651 | .htContextMenu table tbody tr td.htDisabled:hover { 652 | background: white; 653 | color: #999; 654 | cursor: default; 655 | } 656 | .htContextMenu table tbody tr td div{ 657 | padding-left: 10px; 658 | } 659 | .htContextMenu table tbody tr td div span.selected{ 660 | margin-top: -2px; 661 | position: absolute; 662 | left: 4px; 663 | } 664 | 665 | .htContextMenu .ht_master .wtHolder { 666 | overflow: hidden; 667 | } 668 | 669 | .handsontable td.htSearchResult { 670 | background: #fcedd9; 671 | color: #583707; 672 | } 673 | 674 | /* 675 | Cell borders 676 | */ 677 | .htBordered{ 678 | /*box-sizing: border-box !important;*/ 679 | border-width: 1px; 680 | } 681 | .htBordered.htTopBorderSolid{ 682 | border-top-style: solid; 683 | border-top-color: #000; 684 | } 685 | .htBordered.htRightBorderSolid{ 686 | border-right-style: solid; 687 | border-right-color: #000; 688 | } 689 | .htBordered.htBottomBorderSolid{ 690 | border-bottom-style: solid; 691 | border-bottom-color: #000; 692 | } 693 | .htBordered.htLeftBorderSolid{ 694 | border-left-style: solid; 695 | border-left-color: #000; 696 | } 697 | 698 | .htCommentTextArea{ 699 | -moz-box-shadow: 1px 1px 2px #bbb; 700 | -webkit-box-shadow: 1px 1px 2px #bbb; 701 | background-color: #FFFACD; 702 | border: 1px solid #999; 703 | box-shadow: 1px 1px 2px #bbb; 704 | font-family: 'Arial'; 705 | } 706 | 707 | 708 | /* Grouping indicators */ 709 | .handsontable colgroup col.rowHeader.htGroupCol { 710 | width: 25px !important; 711 | } 712 | .handsontable colgroup col.rowHeader.htGroupColClosest { 713 | width: 30px !important; 714 | } 715 | 716 | .handsontable .htGroupIndicatorContainer { 717 | background: #fff; 718 | border: 0px; 719 | padding-bottom: 0px; 720 | vertical-align: bottom; 721 | position: relative; 722 | } 723 | 724 | .handsontable thead .htGroupIndicatorContainer { 725 | vertical-align: top; 726 | border-bottom: 0px; 727 | } 728 | 729 | .handsontable tbody tr th:nth-last-child(2) { 730 | border-right: 1px solid #CCC; 731 | } 732 | 733 | .handsontable thead tr:nth-last-child(2) th { 734 | border-bottom: 1px solid #CCC; 735 | padding-bottom: 5px; 736 | } 737 | 738 | 739 | .ht_clone_corner thead tr th:nth-last-child(2) { 740 | border-right: 1px solid #CCC; 741 | } 742 | 743 | .htVerticalGroup { 744 | height: 100%; 745 | } 746 | 747 | .htHorizontalGroup { 748 | width: 100%; 749 | height: 100%; 750 | } 751 | 752 | .htVerticalGroup:not(.htCollapseButton):after { 753 | content: ""; 754 | height: 100%; 755 | width: 1px; 756 | display: block; 757 | background: #ccc; 758 | margin-left: 5px; 759 | } 760 | 761 | .htHorizontalGroup:not(.htCollapseButton):after { 762 | content: ""; 763 | width: 100%; 764 | height: 1px; 765 | display: block; 766 | background: #ccc; 767 | margin-top: 20%; 768 | } 769 | 770 | .htCollapseButton { 771 | width: 10px; 772 | height: 10px; 773 | line-height: 10px; 774 | text-align: center; 775 | border-radius: 5px; 776 | border: 1px solid #f3f3f3; 777 | -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 778 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 779 | cursor: pointer; 780 | margin-bottom: 3px; 781 | position: relative; 782 | } 783 | 784 | .htCollapseButton:after { 785 | content: ""; 786 | height: 300%; 787 | width: 1px; 788 | display: block; 789 | background: #ccc; 790 | margin-left: 4px; 791 | position: absolute; 792 | /*top: -300%;*/ 793 | bottom: 10px; 794 | } 795 | 796 | 797 | thead .htCollapseButton { 798 | right: 5px; 799 | position: absolute; 800 | top: 5px; 801 | background: #fff; 802 | } 803 | 804 | thead .htCollapseButton:after { 805 | height: 1px; 806 | width: 700%; 807 | right: 10px; 808 | top: 4px; 809 | } 810 | 811 | .handsontable tr th .htGroupStart:after { 812 | background: transparent; 813 | border-left: 1px solid #ccc; 814 | border-top: 1px solid #ccc; 815 | width: 5px; 816 | position: relative; 817 | top: 50%; 818 | } 819 | 820 | .handsontable thead tr th .htGroupStart:after { 821 | background: transparent; 822 | border-left: 1px solid #ccc; 823 | border-top: 1px solid #ccc; 824 | height: 5px; 825 | width: 50%; 826 | position: relative; 827 | top: 0px; 828 | left: 50%; 829 | } 830 | 831 | .handsontable .htGroupLevelTrigger { 832 | -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 833 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 834 | width: 15px; 835 | height: 15px; 836 | margin: 4px auto; 837 | padding: 0px; 838 | line-height: 15px; 839 | cursor: pointer; 840 | } 841 | 842 | .handsontable tr th .htExpandButton { 843 | position: absolute; 844 | width: 10px; 845 | height: 10px; 846 | line-height: 10px; 847 | text-align: center; 848 | border-radius: 5px; 849 | border: 1px solid #f3f3f3; 850 | -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 851 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 852 | cursor: pointer; 853 | top: 0px; 854 | display: none; 855 | } 856 | 857 | .handsontable thead tr th .htExpandButton { 858 | /*left: 5px;*/ 859 | top: 5px; 860 | } 861 | 862 | .handsontable tr th .htExpandButton.clickable { 863 | display: block; 864 | } 865 | 866 | .handsontable col.hidden { 867 | width: 0px !important; 868 | } 869 | 870 | .handsontable tr.hidden, 871 | .handsontable tr.hidden td, 872 | .handsontable tr.hidden th { 873 | display: none; 874 | } 875 | 876 | .ht_master, 877 | .ht_clone_left, 878 | .ht_clone_top { 879 | overflow: hidden; 880 | } 881 | 882 | .ht_master .wtHolder { 883 | overflow: auto; 884 | } 885 | 886 | .ht_clone_left .wtHolder { 887 | overflow-x: hidden; 888 | overflow-y: auto; 889 | } 890 | 891 | .ht_clone_top .wtHolder { 892 | overflow-x: auto; 893 | overflow-y: hidden; 894 | } 895 | 896 | 897 | /*WalkontableDebugOverlay*/ 898 | 899 | .wtDebugHidden { 900 | display: none; 901 | } 902 | 903 | .wtDebugVisible { 904 | display: block; 905 | -webkit-animation-duration: 0.5s; 906 | -webkit-animation-name: wtFadeInFromNone; 907 | animation-duration: 0.5s; 908 | animation-name: wtFadeInFromNone; 909 | } 910 | 911 | @keyframes wtFadeInFromNone { 912 | 0% { 913 | display: none; 914 | opacity: 0; 915 | } 916 | 917 | 1% { 918 | display: block; 919 | opacity: 0; 920 | } 921 | 922 | 100% { 923 | display: block; 924 | opacity: 1; 925 | } 926 | } 927 | 928 | @-webkit-keyframes wtFadeInFromNone { 929 | 0% { 930 | display: none; 931 | opacity: 0; 932 | } 933 | 934 | 1% { 935 | display: block; 936 | opacity: 0; 937 | } 938 | 939 | 100% { 940 | display: block; 941 | opacity: 1; 942 | } 943 | } 944 | /* 945 | 946 | Handsontable Mobile Text Editor stylesheet 947 | 948 | */ 949 | 950 | .handsontable.mobile, 951 | .handsontable.mobile .wtHolder { 952 | -webkit-touch-callout:none; 953 | -webkit-user-select:none; 954 | -khtml-user-select:none; 955 | -moz-user-select:none; 956 | -ms-user-select:none; 957 | user-select:none; 958 | -webkit-tap-highlight-color:rgba(0,0,0,0); 959 | -webkit-overflow-scrolling: touch; 960 | } 961 | 962 | .htMobileEditorContainer { 963 | display: none; 964 | position: absolute; 965 | top: 0; 966 | width: 70%; 967 | height: 54pt; 968 | background: #f8f8f8; 969 | border-radius: 20px; 970 | border: 1px solid #ebebeb; 971 | z-index: 999; 972 | box-sizing: border-box; 973 | -webkit-box-sizing: border-box; 974 | -webkit-text-size-adjust: none; 975 | } 976 | 977 | .topLeftSelectionHandle:not(.ht_master .topLeftSelectionHandle), 978 | .topLeftSelectionHandle-HitArea:not(.ht_master .topLeftSelectionHandle-HitArea) { 979 | z-index: 9999; 980 | } 981 | 982 | /* Initial left/top coordinates - overwritten when actual position is set */ 983 | .topLeftSelectionHandle, 984 | .topLeftSelectionHandle-HitArea, 985 | .bottomRightSelectionHandle, 986 | .bottomRightSelectionHandle-HitArea { 987 | left: -10000px; 988 | top: -10000px; 989 | } 990 | 991 | .htMobileEditorContainer.active { 992 | display: block; 993 | } 994 | 995 | .htMobileEditorContainer .inputs { 996 | position: absolute; 997 | right: 210pt; 998 | bottom: 10pt; 999 | top: 10pt; 1000 | left: 14px; 1001 | height: 34pt; 1002 | } 1003 | 1004 | .htMobileEditorContainer .inputs textarea { 1005 | font-size: 13pt; 1006 | border: 1px solid #a1a1a1; 1007 | -webkit-appearance: none; 1008 | -webkit-box-shadow: none; 1009 | -moz-box-shadow: none; 1010 | box-shadow: none; 1011 | position: absolute; 1012 | left: 14px; 1013 | right: 14px; 1014 | top: 0; 1015 | bottom: 0; 1016 | padding: 7pt; 1017 | } 1018 | 1019 | .htMobileEditorContainer .cellPointer { 1020 | position: absolute; 1021 | top: -13pt; 1022 | height: 0; 1023 | width: 0; 1024 | left: 30px; 1025 | 1026 | border-left: 13pt solid transparent; 1027 | border-right: 13pt solid transparent; 1028 | border-bottom: 13pt solid #ebebeb; 1029 | } 1030 | 1031 | .htMobileEditorContainer .cellPointer.hidden { 1032 | display: none; 1033 | } 1034 | 1035 | .htMobileEditorContainer .cellPointer:before { 1036 | content: ''; 1037 | display: block; 1038 | position: absolute; 1039 | top: 2px; 1040 | height: 0; 1041 | width: 0; 1042 | left: -13pt; 1043 | 1044 | border-left: 13pt solid transparent; 1045 | border-right: 13pt solid transparent; 1046 | border-bottom: 13pt solid #f8f8f8; 1047 | } 1048 | 1049 | .htMobileEditorContainer .moveHandle { 1050 | position: absolute; 1051 | top: 10pt; 1052 | left: 5px; 1053 | width: 30px; 1054 | bottom: 0px; 1055 | cursor: move; 1056 | z-index: 9999; 1057 | } 1058 | 1059 | .htMobileEditorContainer .moveHandle:after { 1060 | content: "..\a..\a..\a.."; 1061 | white-space: pre; 1062 | line-height: 10px; 1063 | font-size: 20pt; 1064 | display: inline-block; 1065 | margin-top: -8px; 1066 | color: #ebebeb; 1067 | } 1068 | 1069 | .htMobileEditorContainer .positionControls { 1070 | width: 205pt; 1071 | position: absolute; 1072 | right: 5pt; 1073 | top: 0; 1074 | bottom: 0; 1075 | } 1076 | 1077 | .htMobileEditorContainer .positionControls > div { 1078 | width: 50pt; 1079 | height: 100%; 1080 | float: left; 1081 | } 1082 | 1083 | .htMobileEditorContainer .positionControls > div:after { 1084 | content: " "; 1085 | display: block; 1086 | width: 15pt; 1087 | height: 15pt; 1088 | text-align: center; 1089 | line-height: 50pt; 1090 | } 1091 | 1092 | .htMobileEditorContainer .leftButton:after, 1093 | .htMobileEditorContainer .rightButton:after, 1094 | .htMobileEditorContainer .upButton:after, 1095 | .htMobileEditorContainer .downButton:after { 1096 | transform-origin: 5pt 5pt; 1097 | -webkit-transform-origin: 5pt 5pt; 1098 | margin: 21pt 0 0 21pt; 1099 | } 1100 | 1101 | .htMobileEditorContainer .leftButton:after { 1102 | border-top: 2px solid #288ffe; 1103 | border-left: 2px solid #288ffe; 1104 | -webkit-transform: rotate(-45deg); 1105 | /*margin-top: 17pt;*/ 1106 | /*margin-left: 20pt;*/ 1107 | } 1108 | .htMobileEditorContainer .leftButton:active:after { 1109 | border-color: #cfcfcf; 1110 | } 1111 | 1112 | .htMobileEditorContainer .rightButton:after { 1113 | border-top: 2px solid #288ffe; 1114 | border-left: 2px solid #288ffe; 1115 | -webkit-transform: rotate(135deg); 1116 | /*margin-top: 17pt;*/ 1117 | /*margin-left: 10pt;*/ 1118 | } 1119 | .htMobileEditorContainer .rightButton:active:after { 1120 | border-color: #cfcfcf; 1121 | } 1122 | 1123 | .htMobileEditorContainer .upButton:after { 1124 | /*border-top: 2px solid #cfcfcf;*/ 1125 | border-top: 2px solid #288ffe; 1126 | border-left: 2px solid #288ffe; 1127 | -webkit-transform: rotate(45deg); 1128 | /*margin-top: 22pt;*/ 1129 | /*margin-left: 15pt;*/ 1130 | } 1131 | .htMobileEditorContainer .upButton:active:after { 1132 | border-color: #cfcfcf; 1133 | } 1134 | 1135 | .htMobileEditorContainer .downButton:after { 1136 | border-top: 2px solid #288ffe; 1137 | border-left: 2px solid #288ffe; 1138 | -webkit-transform: rotate(225deg); 1139 | /*margin-top: 15pt;*/ 1140 | /*margin-left: 15pt;*/ 1141 | } 1142 | .htMobileEditorContainer .downButton:active:after { 1143 | border-color: #cfcfcf; 1144 | } 1145 | 1146 | .handsontable.hide-tween { 1147 | -webkit-animation: opacity-hide 0.3s; 1148 | animation: opacity-hide 0.3s; 1149 | animation-fill-mode: forwards; 1150 | -webkit-animation-fill-mode: forwards; 1151 | } 1152 | 1153 | .handsontable.show-tween { 1154 | -webkit-animation: opacity-show 0.3s; 1155 | animation: opacity-show 0.3s; 1156 | animation-fill-mode: forwards; 1157 | -webkit-animation-fill-mode: forwards; 1158 | } 1159 | /*! 1160 | * Handsontable ContextMenu 1161 | */ 1162 | 1163 | .htContextMenu { 1164 | display: none; 1165 | position: absolute; 1166 | z-index: 1060; /*needs to be higher than 1050 - z-index for Twitter Bootstrap modal (#1569)*/ 1167 | } 1168 | 1169 | .htContextMenu .ht_clone_top, 1170 | .htContextMenu .ht_clone_left, 1171 | .htContextMenu .ht_clone_corner, 1172 | .htContextMenu .ht_clone_debug { 1173 | display: none; 1174 | } 1175 | 1176 | .htContextMenu table.htCore { 1177 | outline: 1px solid #bbb; 1178 | } 1179 | 1180 | .htContextMenu .wtBorder { 1181 | visibility: hidden; 1182 | } 1183 | 1184 | .htContextMenu table tbody tr td { 1185 | background: white; 1186 | border-width: 0; 1187 | padding: 4px 6px 0px 6px; 1188 | cursor: pointer; 1189 | overflow: hidden; 1190 | white-space: nowrap; 1191 | text-overflow: ellipsis; 1192 | } 1193 | 1194 | .htContextMenu table tbody tr td:first-child { 1195 | border: 0; 1196 | } 1197 | 1198 | .htContextMenu table tbody tr td.htDimmed{ 1199 | font-style: normal; 1200 | color: #323232; 1201 | } 1202 | 1203 | .htContextMenu table tbody tr td.current, 1204 | .htContextMenu table tbody tr td.zeroclipboard-is-hover { 1205 | background: rgb(233, 233, 233); 1206 | } 1207 | 1208 | .htContextMenu table tbody tr td.htSeparator { 1209 | border-top: 1px solid #bbb; 1210 | height: 0; 1211 | padding: 0; 1212 | } 1213 | 1214 | .htContextMenu table tbody tr td.htDisabled { 1215 | color: #999; 1216 | } 1217 | 1218 | .htContextMenu table tbody tr td.htDisabled:hover { 1219 | background: white; 1220 | color: #999; 1221 | cursor: default; 1222 | } 1223 | .htContextMenu table tbody tr td div{ 1224 | padding-left: 10px; 1225 | } 1226 | .htContextMenu table tbody tr td div span.selected{ 1227 | margin-top: -2px; 1228 | position: absolute; 1229 | left: 4px; 1230 | } 1231 | @charset "UTF-8"; 1232 | 1233 | /*! 1234 | * Pikaday 1235 | * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/ 1236 | */ 1237 | 1238 | .pika-single { 1239 | z-index: 9999; 1240 | display: block; 1241 | position: relative; 1242 | color: #333; 1243 | background: #fff; 1244 | border: 1px solid #ccc; 1245 | border-bottom-color: #bbb; 1246 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 1247 | } 1248 | 1249 | /* 1250 | clear child float (pika-lendar), using the famous micro clearfix hack 1251 | http://nicolasgallagher.com/micro-clearfix-hack/ 1252 | */ 1253 | .pika-single:before, 1254 | .pika-single:after { 1255 | content: " "; 1256 | display: table; 1257 | } 1258 | .pika-single:after { clear: both } 1259 | .pika-single { *zoom: 1 } 1260 | 1261 | .pika-single.is-hidden { 1262 | display: none; 1263 | } 1264 | 1265 | .pika-single.is-bound { 1266 | position: absolute; 1267 | box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); 1268 | } 1269 | 1270 | .pika-lendar { 1271 | float: left; 1272 | width: 240px; 1273 | margin: 8px; 1274 | } 1275 | 1276 | .pika-title { 1277 | position: relative; 1278 | text-align: center; 1279 | } 1280 | 1281 | .pika-label { 1282 | display: inline-block; 1283 | *display: inline; 1284 | position: relative; 1285 | z-index: 9999; 1286 | overflow: hidden; 1287 | margin: 0; 1288 | padding: 5px 3px; 1289 | font-size: 14px; 1290 | line-height: 20px; 1291 | font-weight: bold; 1292 | background-color: #fff; 1293 | } 1294 | .pika-title select { 1295 | cursor: pointer; 1296 | position: absolute; 1297 | z-index: 9998; 1298 | margin: 0; 1299 | left: 0; 1300 | top: 5px; 1301 | filter: alpha(opacity=0); 1302 | opacity: 0; 1303 | } 1304 | 1305 | .pika-prev, 1306 | .pika-next { 1307 | display: block; 1308 | cursor: pointer; 1309 | position: relative; 1310 | outline: none; 1311 | border: 0; 1312 | padding: 0; 1313 | width: 20px; 1314 | height: 30px; 1315 | /* hide text using text-indent trick, using width value (it's enough) */ 1316 | text-indent: 20px; 1317 | white-space: nowrap; 1318 | overflow: hidden; 1319 | background-color: transparent; 1320 | background-position: center center; 1321 | background-repeat: no-repeat; 1322 | background-size: 75% 75%; 1323 | opacity: .5; 1324 | *position: absolute; 1325 | *top: 0; 1326 | } 1327 | 1328 | .pika-prev:hover, 1329 | .pika-next:hover { 1330 | opacity: 1; 1331 | } 1332 | 1333 | .pika-prev, 1334 | .is-rtl .pika-next { 1335 | float: left; 1336 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=='); 1337 | *left: 0; 1338 | } 1339 | 1340 | .pika-next, 1341 | .is-rtl .pika-prev { 1342 | float: right; 1343 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII='); 1344 | *right: 0; 1345 | } 1346 | 1347 | .pika-prev.is-disabled, 1348 | .pika-next.is-disabled { 1349 | cursor: default; 1350 | opacity: .2; 1351 | } 1352 | 1353 | .pika-select { 1354 | display: inline-block; 1355 | *display: inline; 1356 | } 1357 | 1358 | .pika-table { 1359 | width: 100%; 1360 | border-collapse: collapse; 1361 | border-spacing: 0; 1362 | border: 0; 1363 | } 1364 | 1365 | .pika-table th, 1366 | .pika-table td { 1367 | width: 14.285714285714286%; 1368 | padding: 0; 1369 | } 1370 | 1371 | .pika-table th { 1372 | color: #999; 1373 | font-size: 12px; 1374 | line-height: 25px; 1375 | font-weight: bold; 1376 | text-align: center; 1377 | } 1378 | 1379 | .pika-button { 1380 | cursor: pointer; 1381 | display: block; 1382 | box-sizing: border-box; 1383 | -moz-box-sizing: border-box; 1384 | outline: none; 1385 | border: 0; 1386 | margin: 0; 1387 | width: 100%; 1388 | padding: 5px; 1389 | color: #666; 1390 | font-size: 12px; 1391 | line-height: 15px; 1392 | text-align: right; 1393 | background: #f5f5f5; 1394 | } 1395 | 1396 | .pika-week { 1397 | font-size: 11px; 1398 | color: #999; 1399 | } 1400 | 1401 | .is-today .pika-button { 1402 | color: #33aaff; 1403 | font-weight: bold; 1404 | } 1405 | 1406 | .is-selected .pika-button { 1407 | color: #fff; 1408 | font-weight: bold; 1409 | background: #33aaff; 1410 | box-shadow: inset 0 1px 3px #178fe5; 1411 | border-radius: 3px; 1412 | } 1413 | 1414 | .is-disabled .pika-button { 1415 | pointer-events: none; 1416 | cursor: default; 1417 | color: #999; 1418 | opacity: .3; 1419 | } 1420 | 1421 | .pika-button:hover { 1422 | color: #fff !important; 1423 | background: #ff8000 !important; 1424 | box-shadow: none !important; 1425 | border-radius: 3px !important; 1426 | } 1427 | 1428 | /* styling for abbr */ 1429 | .pika-table abbr { 1430 | border-bottom: none; 1431 | cursor: help; 1432 | } 1433 | 1434 | --------------------------------------------------------------------------------