jsgrid.css 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. @charset "UTF-8";
  2. .jsgrid {
  3. position: relative;
  4. overflow: hidden;
  5. font-size: 1em; }
  6. .jsgrid, .jsgrid *, .jsgrid *:before, .jsgrid *:after {
  7. box-sizing: border-box; }
  8. .jsgrid input, .jsgrid textarea, .jsgrid select {
  9. font-size: 1em; }
  10. .jsgrid-grid-header {
  11. overflow-x: hidden;
  12. overflow-y: scroll;
  13. -webkit-user-select: none;
  14. -moz-user-select: none;
  15. -ms-user-select: none;
  16. -o-user-select: none;
  17. user-select: none; }
  18. .jsgrid-grid-body {
  19. overflow-x: auto;
  20. overflow-y: scroll;
  21. -webkit-overflow-scrolling: touch; }
  22. .jsgrid .jsgrid-table {
  23. margin-bottom: 0; }
  24. .jsgrid-table {
  25. width: 100%;
  26. table-layout: fixed;
  27. border-spacing: 0;
  28. border-collapse: collapse; }
  29. .jsgrid-table td {
  30. padding: .5em; }
  31. .jsgrid-table > tbody > tr > td {
  32. vertical-align: middle; }
  33. .jsgrid-table td, .jsgrid-table th {
  34. box-sizing: border-box; }
  35. .jsgrid-table th {
  36. font-weight: 500; }
  37. .jsgrid-align-left {
  38. text-align: left; }
  39. .jsgrid-align-center {
  40. text-align: center; }
  41. .jsgrid-align-right {
  42. text-align: right; }
  43. .jsgrid-header-row > th {
  44. padding: .5em; }
  45. .jsgrid-filter-row input, .jsgrid-filter-row textarea, .jsgrid-filter-row select, .jsgrid-edit-row input, .jsgrid-edit-row textarea, .jsgrid-edit-row select, .jsgrid-insert-row input, .jsgrid-insert-row textarea, .jsgrid-insert-row select {
  46. width: 100%;
  47. padding: .3em .5em;
  48. height: auto; }
  49. .jsgrid-filter-row input[type='checkbox'], .jsgrid-edit-row input[type='checkbox'], .jsgrid-insert-row input[type='checkbox'] {
  50. width: auto; }
  51. .jsgrid-header-row > th, .jsgrid-filter-row > td, .jsgrid-insert-row > td, .jsgrid-edit-row > td {
  52. text-align: center; }
  53. .jsgrid-selected-row td {
  54. cursor: pointer; }
  55. .jsgrid-nodata-row td {
  56. padding: .5em 0;
  57. text-align: center; }
  58. .jsgrid-header-sort {
  59. cursor: pointer; }
  60. .jsgrid-pager {
  61. padding: 1.42em 0 .4em; }
  62. .jsgrid-pager-nav-button {
  63. padding: .2em .5em; }
  64. .jsgrid-pager-nav-inactive-button {
  65. display: none;
  66. pointer-events: none; }
  67. .jsgrid-pager-page {
  68. padding: .2em .6em; }
  69. .jsgrid-control-field {
  70. white-space: nowrap; }
  71. .jsgrid-grid-header,
  72. .jsgrid-grid-body,
  73. .jsgrid-header-row > th,
  74. .jsgrid-filter-row > td,
  75. .jsgrid-insert-row > td,
  76. .jsgrid-edit-row > td {
  77. border: 1px solid #e4eaec; }
  78. .jsgrid-header-row > th {
  79. border-top: 0; }
  80. .jsgrid-header-row > th, .jsgrid-filter-row > td, .jsgrid-insert-row > td {
  81. border-bottom: 0; }
  82. .jsgrid-header-row > th:first-child, .jsgrid-filter-row > td:first-child, .jsgrid-insert-row > td:first-child {
  83. border-left: none; }
  84. .jsgrid-header-row > th:last-child, .jsgrid-filter-row > td:last-child, .jsgrid-insert-row > td:last-child {
  85. border-right: none; }
  86. .jsgrid-grid-header {
  87. background: #e4eaec; }
  88. .jsgrid-header-scrollbar {
  89. scrollbar-arrow-color: #f3f7f9;
  90. scrollbar-base-color: #f3f7f9;
  91. scrollbar-3dlight-color: #f3f7f9;
  92. scrollbar-highlight-color: #f3f7f9;
  93. scrollbar-track-color: #f3f7f9;
  94. scrollbar-shadow-color: #f3f7f9;
  95. scrollbar-dark-shadow-color: #f3f7f9; }
  96. .jsgrid-header-scrollbar::-webkit-scrollbar {
  97. visibility: hidden; }
  98. .jsgrid-header-scrollbar::-webkit-scrollbar-track {
  99. background: #f3f7f9; }
  100. .jsgrid-header-sortable:hover {
  101. cursor: pointer;
  102. background: #fcfcfc; }
  103. .jsgrid-header-row .jsgrid-header-sort {
  104. background: #d9e9ff; }
  105. .jsgrid-header-sort:before {
  106. float: left;
  107. position: relative;
  108. display: inline-block;
  109. font-style: normal;
  110. font-weight: normal;
  111. -webkit-transform: translate(0, 0);
  112. transform: translate(0, 0);
  113. -webkit-font-smoothing: antialiased;
  114. -moz-osx-font-smoothing: grayscale;
  115. speak: none;
  116. text-rendering: auto;
  117. font-family: "Web Icons"; }
  118. .jsgrid-header-sort-asc:before {
  119. content: ""; }
  120. .jsgrid-header-sort-desc:before {
  121. content: ""; }
  122. .jsgrid-grid-body {
  123. border-top: none; }
  124. .jsgrid-grid-body td {
  125. border: #f3f3f3 1px solid; }
  126. .jsgrid-grid-body tr:first-child td {
  127. border-top: none; }
  128. .jsgrid-grid-body tr td:first-child {
  129. border-left: none; }
  130. .jsgrid-grid-body tr td:last-child {
  131. border-right: none; }
  132. .jsgrid-row > td {
  133. background: #fff; }
  134. .jsgrid-alt-row > td {
  135. background: #fcfcfc; }
  136. .jsgrid-header-row > th {
  137. background: #f9f9f9; }
  138. .jsgrid-filter-row > td {
  139. background: #fcfcfc; }
  140. .jsgrid-insert-row > td {
  141. background: #c2fadc; }
  142. .jsgrid-edit-row > td {
  143. background: #fff6b5; }
  144. .jsgrid-selected-row > td {
  145. background: #f3f7f9;
  146. border-color: #f3f7f9; }
  147. .jsgrid-nodata-row td {
  148. background: #fff; }
  149. .jsgrid-pager-current-page {
  150. font-weight: bold; }
  151. .jsgrid-pager-nav-inactive-button a {
  152. color: #d3d3d3; }
  153. .jsgrid-button + .jsgrid-button {
  154. margin-left: 5px; }
  155. .jsgrid-button:hover {
  156. opacity: .5;
  157. transition: opacity 200ms linear; }
  158. .jsgrid .jsgrid-button {
  159. width: 16px;
  160. height: 22px;
  161. border: none;
  162. cursor: pointer;
  163. font-size: 16px;
  164. padding: 0;
  165. position: relative;
  166. display: inline-block;
  167. font-style: normal;
  168. font-weight: normal;
  169. -webkit-transform: translate(0, 0);
  170. transform: translate(0, 0);
  171. -webkit-font-smoothing: antialiased;
  172. -moz-osx-font-smoothing: grayscale;
  173. speak: none;
  174. text-rendering: auto;
  175. font-family: "Web Icons";
  176. background: transparent; }
  177. .jsgrid-mode-on-button {
  178. opacity: .5; }
  179. .jsgrid-cancel-button:before {
  180. content: ""; }
  181. .jsgrid-clear-filter-button:before {
  182. content: ""; }
  183. .jsgrid-delete-button:before {
  184. content: ""; }
  185. .jsgrid-edit-button:before {
  186. content: ""; }
  187. .jsgrid-cancel-edit-button:before {
  188. content: ""; }
  189. .jsgrid-insert-mode-button:before {
  190. content: ""; }
  191. .jsgrid-insert-button:before {
  192. content: ""; }
  193. .jsgrid-search-mode-button:before {
  194. content: ""; }
  195. .jsgrid-search-button:before {
  196. content: ""; }
  197. .jsgrid-update-button:before {
  198. content: ""; }
  199. .jsgrid-load-shader {
  200. background: #ddd;
  201. opacity: .5;
  202. filter: alpha(opacity=50); }
  203. .jsgrid-load-panel {
  204. width: 15em;
  205. height: 5em;
  206. background: #fff;
  207. border: 1px solid #e4eaec;
  208. padding-top: 3em;
  209. text-align: center; }
  210. .jsgrid-load-panel:before {
  211. content: ' ';
  212. position: absolute;
  213. top: .5em;
  214. left: 50%;
  215. margin-left: -1em;
  216. width: 2em;
  217. height: 2em;
  218. border: 2px solid #009a67;
  219. border-right-color: transparent;
  220. border-radius: 50%;
  221. -webkit-animation: indicator 1s linear infinite;
  222. animation: indicator 1s linear infinite; }
  223. @-webkit-keyframes indicator {
  224. from {
  225. -webkit-transform: rotate(0deg); }
  226. 50% {
  227. -webkit-transform: rotate(180deg); }
  228. to {
  229. -webkit-transform: rotate(360deg); } }
  230. @keyframes indicator {
  231. from {
  232. -webkit-transform: rotate(0deg);
  233. transform: rotate(0deg); }
  234. 50% {
  235. -webkit-transform: rotate(180deg);
  236. transform: rotate(180deg); }
  237. to {
  238. -webkit-transform: rotate(360deg);
  239. transform: rotate(360deg); } }
  240. /* old IE */
  241. .jsgrid-load-panel {
  242. padding-top: 1.5em\9; }
  243. .jsgrid-load-panel:before {
  244. display: none\9; }