27dc6ba85b331cf0b36421e546f4af9eec630fb5233ffe29a30f6f0f70429f7784444cc184e0b59902044cd463bf5f1c61edf19b176026c4a40d66229901d6 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744
  1. .handsontable {
  2. position: relative;
  3. }
  4. .handsontable .hide{
  5. display: none;
  6. }
  7. .handsontable .relative {
  8. position: relative;
  9. }
  10. .handsontable.htAutoSize {
  11. visibility: hidden;
  12. left: -99000px;
  13. position: absolute;
  14. top: -99000px;
  15. }
  16. .handsontable .wtHider {
  17. width: 0;
  18. }
  19. .handsontable .wtSpreader {
  20. position: relative;
  21. width: 0; /*must be 0, otherwise blank space appears in scroll demo after scrolling max to the right */
  22. height: auto;
  23. }
  24. .handsontable table,
  25. .handsontable tbody,
  26. .handsontable thead,
  27. .handsontable td,
  28. .handsontable th,
  29. .handsontable input,
  30. .handsontable textarea,
  31. .handsontable div {
  32. box-sizing: content-box;
  33. -webkit-box-sizing: content-box;
  34. -moz-box-sizing: content-box;
  35. }
  36. .handsontable input,
  37. .handsontable textarea {
  38. min-height: initial;
  39. }
  40. .handsontable table.htCore {
  41. border-collapse: separate;
  42. /*it must be separate, otherwise there are offset miscalculations in WebKit: http://stackoverflow.com/questions/2655987/border-collapse-differences-in-ff-and-webkit*/
  43. /*this actually only changes appearance of user selection - does not make text unselectable
  44. -webkit-user-select: none;
  45. -khtml-user-select: none;
  46. -moz-user-select: none;
  47. -o-user-select: none;
  48. -ms-user-select: none;
  49. /*user-select: none; /*no browser supports unprefixed version*/
  50. border-spacing: 0;
  51. margin: 0;
  52. border-width: 0;
  53. table-layout: fixed;
  54. width: 0;
  55. outline-width: 0;
  56. /* reset bootstrap table style. for more info see: https://github.com/handsontable/handsontable/issues/224 */
  57. max-width: none;
  58. max-height: none;
  59. }
  60. .handsontable col {
  61. width: 50px;
  62. }
  63. .handsontable col.rowHeader {
  64. width: 50px;
  65. }
  66. .handsontable th,
  67. .handsontable td {
  68. border-top-width: 0;
  69. border-left-width: 0;
  70. border-right: 1px solid #CCC;
  71. border-bottom: 1px solid #CCC;
  72. height: 22px;
  73. empty-cells: show;
  74. line-height: 21px;
  75. padding: 0 4px 0 4px;
  76. /* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
  77. background-color: #FFF;
  78. vertical-align: top;
  79. overflow: hidden;
  80. outline-width: 0;
  81. white-space: pre-line;
  82. /* preserve new line character in cell */
  83. background-clip: padding-box;
  84. }
  85. .handsontable td.htInvalid {
  86. background-color: #ff4c42 !important; /*gives priority over td.area selection background*/
  87. }
  88. .handsontable td.htNoWrap {
  89. white-space: nowrap;
  90. }
  91. .handsontable th:last-child {
  92. /*Foundation framework fix*/
  93. border-right: 1px solid #CCC;
  94. border-bottom: 1px solid #CCC;
  95. }
  96. .handsontable tr:first-child th.htNoFrame,
  97. .handsontable th:first-child.htNoFrame,
  98. .handsontable th.htNoFrame {
  99. border-left-width: 0;
  100. background-color: white;
  101. border-color: #FFF;
  102. }
  103. .handsontable th:first-child,
  104. .handsontable th:nth-child(2),
  105. .handsontable td:first-of-type,
  106. .handsontable .htNoFrame + th,
  107. .handsontable .htNoFrame + td {
  108. border-left: 1px solid #CCC;
  109. }
  110. .handsontable.htRowHeaders thead tr th:nth-child(2) {
  111. border-left: 1px solid #CCC;
  112. }
  113. .handsontable tr:first-child th,
  114. .handsontable tr:first-child td {
  115. border-top: 1px solid #CCC;
  116. }
  117. .ht_master:not(.innerBorderLeft):not(.emptyColumns) ~ .handsontable tbody tr th,
  118. .ht_master:not(.innerBorderLeft):not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
  119. border-right-width: 0;
  120. }
  121. .ht_master:not(.innerBorderTop) thead tr:last-child th,
  122. .ht_master:not(.innerBorderTop) ~ .handsontable thead tr:last-child th,
  123. .ht_master:not(.innerBorderTop) thead tr.lastChild th,
  124. .ht_master:not(.innerBorderTop) ~ .handsontable thead tr.lastChild th {
  125. border-bottom-width: 0;
  126. }
  127. .handsontable th {
  128. background-color: #f3f3f3;
  129. color: #222;
  130. text-align: center;
  131. font-weight: normal;
  132. white-space: nowrap;
  133. }
  134. .handsontable thead th {
  135. padding: 0;
  136. }
  137. .handsontable th.active {
  138. background-color: #CCC;
  139. }
  140. .handsontable thead th .relative {
  141. padding: 2px 4px;
  142. }
  143. /* selection */
  144. .handsontable tbody th.ht__highlight,
  145. .handsontable thead th.ht__highlight {
  146. background-color: #dcdcdc;
  147. }
  148. .handsontable.ht__selection--columns thead th.ht__highlight,
  149. .handsontable.ht__selection--rows tbody th.ht__highlight {
  150. background-color: #8eb0e7;
  151. color: #000;
  152. }
  153. /* plugins */
  154. /* row + column resizer*/
  155. .handsontable .manualColumnResizer {
  156. position: fixed;
  157. top: 0;
  158. cursor: col-resize;
  159. z-index: 110;
  160. width: 5px;
  161. height: 25px;
  162. }
  163. .handsontable .manualRowResizer {
  164. position: fixed;
  165. left: 0;
  166. cursor: row-resize;
  167. z-index: 110;
  168. height: 5px;
  169. width: 50px;
  170. }
  171. .handsontable .manualColumnResizer:hover,
  172. .handsontable .manualColumnResizer.active,
  173. .handsontable .manualRowResizer:hover,
  174. .handsontable .manualRowResizer.active {
  175. background-color: #AAB;
  176. }
  177. .handsontable .manualColumnResizerGuide {
  178. position: fixed;
  179. right: 0;
  180. top: 0;
  181. background-color: #AAB;
  182. display: none;
  183. width: 0;
  184. border-right: 1px dashed #777;
  185. margin-left: 5px;
  186. }
  187. .handsontable .manualRowResizerGuide {
  188. position: fixed;
  189. left: 0;
  190. bottom: 0;
  191. background-color: #AAB;
  192. display: none;
  193. height: 0;
  194. border-bottom: 1px dashed #777;
  195. margin-top: 5px;
  196. }
  197. .handsontable .manualColumnResizerGuide.active,
  198. .handsontable .manualRowResizerGuide.active {
  199. display: block;
  200. z-index: 199;
  201. }
  202. .handsontable .columnSorting {
  203. position: relative;
  204. }
  205. .handsontable .columnSorting:hover {
  206. text-decoration: underline;
  207. cursor: pointer;
  208. }
  209. .handsontable .columnSorting.ascending::after {
  210. content: '\25B2';
  211. color: #5f5f5f;
  212. position: absolute;
  213. right: -15px;
  214. }
  215. .handsontable .columnSorting.descending::after {
  216. content: '\25BC';
  217. color: #5f5f5f;
  218. position: absolute;
  219. right: -15px;
  220. }
  221. /* border line */
  222. .handsontable .wtBorder {
  223. position: absolute;
  224. font-size: 0;
  225. }
  226. .handsontable .wtBorder.hidden{
  227. display:none !important;
  228. }
  229. .handsontable td.area {
  230. background: -moz-linear-gradient(top, rgba(181,209,255,0.34) 0%, rgba(181,209,255,0.34) 100%); /* FF3.6+ */
  231. 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+ */
  232. background: -webkit-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* Chrome10+,Safari5.1+ */
  233. background: -o-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* Opera 11.10+ */
  234. background: -ms-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* IE10+ */
  235. background: linear-gradient(to bottom, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* W3C */
  236. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b5d1ff', endColorstr='#57b5d1ff',GradientType=0 ); /* IE6-9 */
  237. background-color: #fff;
  238. }
  239. /* fill handle */
  240. .handsontable .wtBorder.corner {
  241. font-size: 0;
  242. cursor: crosshair;
  243. }
  244. .handsontable .htBorder.htFillBorder {
  245. background: red;
  246. width: 1px;
  247. height: 1px;
  248. }
  249. .handsontableInput {
  250. border:none;
  251. outline-width: 0;
  252. margin: 0 ;
  253. padding: 1px 5px 0 5px;
  254. font-family: inherit;
  255. line-height: 21px;
  256. font-size: inherit;
  257. box-shadow: 0 0 0 2px #5292F7 inset;
  258. resize: none;
  259. /*below are needed to overwrite stuff added by jQuery UI Bootstrap theme*/
  260. display: inline-block;
  261. color: #000;
  262. border-radius: 0;
  263. background-color: #FFF;
  264. /*overwrite styles potentionally made by a framework*/
  265. }
  266. .handsontableInputHolder {
  267. position: absolute;
  268. top: 0;
  269. left: 0;
  270. z-index: 100;
  271. }
  272. .htSelectEditor {
  273. -webkit-appearance: menulist-button !important;
  274. position: absolute;
  275. width: auto;
  276. }
  277. /*
  278. TextRenderer readOnly cell
  279. */
  280. .handsontable .htDimmed {
  281. color: #777;
  282. }
  283. .handsontable .htSubmenu {
  284. position: relative;
  285. }
  286. .handsontable .htSubmenu :after{
  287. content: '▶';
  288. color: #777;
  289. position: absolute;
  290. right: 5px;
  291. }
  292. /*
  293. TextRenderer horizontal alignment
  294. */
  295. .handsontable .htLeft{
  296. text-align: left;
  297. }
  298. .handsontable .htCenter{
  299. text-align: center;
  300. }
  301. .handsontable .htRight{
  302. text-align: right;
  303. }
  304. .handsontable .htJustify{
  305. text-align: justify;
  306. }
  307. /*
  308. TextRenderer vertical alignment
  309. */
  310. .handsontable .htTop{
  311. vertical-align: top;
  312. }
  313. .handsontable .htMiddle{
  314. vertical-align: middle;
  315. }
  316. .handsontable .htBottom{
  317. vertical-align: bottom;
  318. }
  319. /*
  320. TextRenderer placeholder value
  321. */
  322. .handsontable .htPlaceholder {
  323. color: #999;
  324. }
  325. /*
  326. AutocompleteRenderer down arrow
  327. */
  328. .handsontable .htAutocompleteArrow {
  329. float: right;
  330. font-size: 10px;
  331. color: #EEE;
  332. cursor: default;
  333. width: 16px;
  334. text-align: center;
  335. }
  336. .handsontable td .htAutocompleteArrow:hover {
  337. color: #777;
  338. }
  339. .handsontable td.area .htAutocompleteArrow {
  340. color: #d3d3d3;
  341. }
  342. /*
  343. CheckboxRenderer
  344. */
  345. .handsontable .htCheckboxRendererInput {
  346. display: inline-block;
  347. vertical-align: middle;
  348. }
  349. .handsontable .htCheckboxRendererInput.noValue {
  350. opacity: 0.5;
  351. }
  352. .handsontable .htCheckboxRendererLabel {
  353. cursor: pointer;
  354. display: inline-block;
  355. width: 100%;
  356. }
  357. @-webkit-keyframes opacity-hide {
  358. from {
  359. opacity: 1;
  360. }
  361. to {
  362. opacity: 0;
  363. /*display: none;*/
  364. }
  365. }
  366. @keyframes opacity-hide {
  367. from {
  368. /*display: block;*/
  369. opacity: 1;
  370. }
  371. to {
  372. opacity: 0;
  373. /*display: none;*/
  374. }
  375. }
  376. @-webkit-keyframes opacity-show {
  377. from {
  378. opacity: 0;
  379. /*display: none;*/
  380. }
  381. to {
  382. opacity: 1;
  383. /*display: block;*/
  384. }
  385. }
  386. @keyframes opacity-show {
  387. from {
  388. opacity: 0;
  389. /*display: none;*/
  390. }
  391. to {
  392. opacity: 1;
  393. /*display: block;*/
  394. }
  395. }
  396. /**
  397. * Handsontable in Handsontable
  398. */
  399. .handsontable .handsontable.ht_clone_top .wtHider {
  400. padding: 0 0 5px 0;
  401. }
  402. /**
  403. * Autocomplete Editor
  404. */
  405. .handsontable .autocompleteEditor.handsontable {
  406. padding-right: 17px;
  407. }
  408. .handsontable .autocompleteEditor.handsontable.htMacScroll {
  409. padding-right: 15px;
  410. }
  411. /**
  412. * Handsontable listbox theme
  413. */
  414. .handsontable.listbox {
  415. margin: 0;
  416. }
  417. .handsontable.listbox .ht_master table {
  418. border: 1px solid #ccc;
  419. border-collapse: separate;
  420. background: white;
  421. }
  422. .handsontable.listbox th,
  423. .handsontable.listbox tr:first-child th,
  424. .handsontable.listbox tr:last-child th,
  425. .handsontable.listbox tr:first-child td,
  426. .handsontable.listbox td {
  427. border-color: transparent;
  428. }
  429. .handsontable.listbox th,
  430. .handsontable.listbox td {
  431. white-space: nowrap;
  432. text-overflow: ellipsis;
  433. }
  434. .handsontable.listbox td.htDimmed {
  435. cursor: default;
  436. color: inherit;
  437. font-style: inherit;
  438. }
  439. .handsontable.listbox .wtBorder {
  440. visibility: hidden;
  441. }
  442. .handsontable.listbox tr td.current,
  443. .handsontable.listbox tr:hover td {
  444. background: #eee;
  445. }
  446. .ht_clone_top {
  447. z-index: 101;
  448. }
  449. .ht_clone_left {
  450. z-index: 102;
  451. }
  452. .ht_clone_top_left_corner,
  453. .ht_clone_bottom_left_corner {
  454. z-index: 103;
  455. }
  456. .ht_clone_debug {
  457. z-index: 103;
  458. }
  459. .handsontable td.htSearchResult {
  460. background: #fcedd9;
  461. color: #583707;
  462. }
  463. /*
  464. Cell borders
  465. */
  466. .htBordered{
  467. /*box-sizing: border-box !important;*/
  468. border-width: 1px;
  469. }
  470. .htBordered.htTopBorderSolid {
  471. border-top-style: solid;
  472. border-top-color: #000;
  473. }
  474. .htBordered.htRightBorderSolid {
  475. border-right-style: solid;
  476. border-right-color: #000;
  477. }
  478. .htBordered.htBottomBorderSolid {
  479. border-bottom-style: solid;
  480. border-bottom-color: #000;
  481. }
  482. .htBordered.htLeftBorderSolid {
  483. border-left-style: solid;
  484. border-left-color: #000;
  485. }
  486. .handsontable tbody tr th:nth-last-child(2) {
  487. border-right: 1px solid #CCC;
  488. }
  489. .handsontable thead tr:nth-last-child(2) th.htGroupIndicatorContainer {
  490. border-bottom: 1px solid #CCC;
  491. padding-bottom: 5px;
  492. }
  493. .ht_clone_top_left_corner thead tr th:nth-last-child(2) {
  494. border-right: 1px solid #CCC;
  495. }
  496. .htCollapseButton {
  497. width: 10px;
  498. height: 10px;
  499. line-height: 10px;
  500. text-align: center;
  501. border-radius: 5px;
  502. border: 1px solid #f3f3f3;
  503. -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  504. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  505. cursor: pointer;
  506. margin-bottom: 3px;
  507. position: relative;
  508. }
  509. .htCollapseButton:after {
  510. content: "";
  511. height: 300%;
  512. width: 1px;
  513. display: block;
  514. background: #ccc;
  515. margin-left: 4px;
  516. position: absolute;
  517. /*top: -300%;*/
  518. bottom: 10px;
  519. }
  520. thead .htCollapseButton {
  521. right: 5px;
  522. position: absolute;
  523. top: 5px;
  524. background: #fff;
  525. }
  526. thead .htCollapseButton:after {
  527. height: 1px;
  528. width: 700%;
  529. right: 10px;
  530. top: 4px;
  531. }
  532. .handsontable tr th .htExpandButton {
  533. position: absolute;
  534. width: 10px;
  535. height: 10px;
  536. line-height: 10px;
  537. text-align: center;
  538. border-radius: 5px;
  539. border: 1px solid #f3f3f3;
  540. -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  541. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  542. cursor: pointer;
  543. top: 0;
  544. display: none;
  545. }
  546. .handsontable thead tr th .htExpandButton {
  547. /*left: 5px;*/
  548. top: 5px;
  549. }
  550. .handsontable tr th .htExpandButton.clickable {
  551. display: block;
  552. }
  553. .collapsibleIndicator {
  554. position: absolute;
  555. top: 50%;
  556. transform: translate(0% ,-50%);
  557. right: 5px;
  558. border: 1px solid #A6A6A6;
  559. line-height: 10px;
  560. color: #222;
  561. border-radius: 10px;
  562. font-size: 10px;
  563. width: 10px;
  564. height: 10px;
  565. cursor: pointer;
  566. -webkit-box-shadow: 0 0 0 6px rgba(238,238,238,1);
  567. -moz-box-shadow: 0 0 0 6px rgba(238,238,238,1);
  568. box-shadow: 0 0 0 6px rgba(238,238,238,1);
  569. background: #eee;
  570. }
  571. .handsontable col.hidden {
  572. width: 0 !important;
  573. }
  574. .handsontable table tr th.lightRightBorder {
  575. border-right: 1px solid #E6E6E6;
  576. }
  577. .handsontable tr.hidden,
  578. .handsontable tr.hidden td,
  579. .handsontable tr.hidden th {
  580. display: none;
  581. }
  582. .ht_master,
  583. .ht_clone_left,
  584. .ht_clone_top,
  585. .ht_clone_bottom {
  586. overflow: hidden;
  587. }
  588. .ht_master .wtHolder {
  589. overflow: auto;
  590. }
  591. .ht_clone_left .wtHolder {
  592. overflow-x: hidden;
  593. overflow-y: auto;
  594. }
  595. .ht_clone_top .wtHolder,
  596. .ht_clone_bottom .wtHolder {
  597. overflow-x: auto;
  598. overflow-y: hidden;
  599. }
  600. /*WalkontableDebugOverlay*/
  601. .wtDebugHidden {
  602. display: none;
  603. }
  604. .wtDebugVisible {
  605. display: block;
  606. -webkit-animation-duration: 0.5s;
  607. -webkit-animation-name: wtFadeInFromNone;
  608. animation-duration: 0.5s;
  609. animation-name: wtFadeInFromNone;
  610. }
  611. @keyframes wtFadeInFromNone {
  612. 0% {
  613. display: none;
  614. opacity: 0;
  615. }
  616. 1% {
  617. display: block;
  618. opacity: 0;
  619. }
  620. 100% {
  621. display: block;
  622. opacity: 1;
  623. }
  624. }
  625. @-webkit-keyframes wtFadeInFromNone {
  626. 0% {
  627. display: none;
  628. opacity: 0;
  629. }
  630. 1% {
  631. display: block;
  632. opacity: 0;
  633. }
  634. 100% {
  635. display: block;
  636. opacity: 1;
  637. }
  638. }