index.scss 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. .ngx-datatable {
  2. display: block;
  3. overflow: hidden;
  4. justify-content: center;
  5. position: relative;
  6. -webkit-transform: translate3d(0, 0, 0);
  7. [hidden] {
  8. display: none !important;
  9. }
  10. *,
  11. *:before,
  12. *:after {
  13. -moz-box-sizing: border-box;
  14. -webkit-box-sizing: border-box;
  15. box-sizing: border-box;
  16. }
  17. /**
  18. * Vertical Scrolling Adjustments
  19. */
  20. &.scroll-vertical {
  21. .datatable-body {
  22. overflow-y: auto;
  23. }
  24. &.virtualized {
  25. .datatable-body {
  26. .datatable-row-wrapper {
  27. position: absolute;
  28. }
  29. }
  30. }
  31. }
  32. /**
  33. * Horizontal Scrolling Adjustments
  34. */
  35. &.scroll-horz {
  36. .datatable-body {
  37. overflow-x: auto;
  38. -webkit-overflow-scrolling: touch;
  39. }
  40. }
  41. /**
  42. * Fixed Header Height Adjustments
  43. */
  44. &.fixed-header {
  45. .datatable-header {
  46. .datatable-header-inner {
  47. white-space: nowrap;
  48. .datatable-header-cell {
  49. white-space: nowrap;
  50. overflow: hidden;
  51. text-overflow: ellipsis;
  52. }
  53. }
  54. }
  55. }
  56. /**
  57. * Fixed row height adjustments
  58. */
  59. &.fixed-row {
  60. .datatable-scroll {
  61. white-space: nowrap;
  62. .datatable-body-row {
  63. white-space: nowrap;
  64. .datatable-body-cell {
  65. overflow: hidden;
  66. white-space: nowrap;
  67. text-overflow: ellipsis;
  68. }
  69. .datatable-body-group-cell {
  70. overflow: hidden;
  71. white-space: nowrap;
  72. text-overflow: ellipsis;
  73. }
  74. }
  75. }
  76. }
  77. /**
  78. * Shared Styles
  79. */
  80. .datatable-body-row,
  81. .datatable-row-center,
  82. .datatable-header-inner {
  83. display: -webkit-box;
  84. display: -moz-box;
  85. display: -ms-flexbox;
  86. display: -webkit-flex;
  87. display: flex;
  88. flex-direction: row;
  89. -webkit-flex-flow: row;
  90. -moz-flex-flow: row;
  91. -ms-flex-flow: row;
  92. -o-flex-flow: row;
  93. flex-flow: row;
  94. }
  95. .datatable-body-cell,
  96. .datatable-header-cell {
  97. overflow-x: hidden;
  98. vertical-align: top;
  99. display: inline-block;
  100. line-height: 1.625;
  101. &:focus {
  102. outline: none;
  103. }
  104. }
  105. .datatable-row-left,
  106. .datatable-row-right {
  107. z-index: 9;
  108. }
  109. .datatable-row-left,
  110. .datatable-row-center,
  111. .datatable-row-group,
  112. .datatable-row-right {
  113. position: relative;
  114. }
  115. /**
  116. * Header Styles
  117. */
  118. .datatable-header {
  119. display: block;
  120. overflow: hidden;
  121. .datatable-header-inner {
  122. align-items: stretch;
  123. -webkit-align-items: stretch;
  124. }
  125. .datatable-header-cell {
  126. position: relative;
  127. display: inline-block;
  128. &.sortable {
  129. .datatable-header-cell-wrapper {
  130. cursor: pointer;
  131. }
  132. }
  133. &.longpress .datatable-header-cell-wrapper {
  134. cursor: move;
  135. }
  136. .sort-btn {
  137. line-height: 100%;
  138. vertical-align: middle;
  139. display: inline-block;
  140. cursor: pointer;
  141. }
  142. .resize-handle,
  143. .resize-handle--not-resizable {
  144. display: inline-block;
  145. position: absolute;
  146. right: 0;
  147. top: 0;
  148. bottom: 0;
  149. width: 5px;
  150. padding: 0 4px;
  151. visibility: hidden;
  152. }
  153. .resize-handle {
  154. cursor: ew-resize;
  155. }
  156. &.resizeable:hover {
  157. .resize-handle {
  158. visibility: visible;
  159. }
  160. }
  161. &:hover {
  162. .resize-handle--not-resizable {
  163. visibility: visible;
  164. }
  165. }
  166. .targetMarker {
  167. position: absolute;
  168. top: 0;
  169. bottom: 0;
  170. &.dragFromLeft {
  171. right: 0;
  172. }
  173. &.dragFromRight {
  174. left: 0;
  175. }
  176. }
  177. .datatable-header-cell-template-wrap {
  178. height: inherit;
  179. }
  180. }
  181. }
  182. /**
  183. * Body Styles
  184. */
  185. .datatable-body {
  186. position: relative;
  187. z-index: 10;
  188. display: block;
  189. .datatable-scroll {
  190. display: inline-block;
  191. }
  192. .datatable-row-detail {
  193. overflow-y: hidden;
  194. }
  195. .datatable-row-wrapper {
  196. display: -webkit-box;
  197. display: -moz-box;
  198. display: -ms-flexbox;
  199. display: -webkit-flex;
  200. display: flex;
  201. -webkit-box-orient: vertical;
  202. -webkit-box-direction: normal;
  203. -webkit-flex-direction: column;
  204. -moz-box-orient: vertical;
  205. -moz-box-direction: normal;
  206. -ms-flex-direction: column;
  207. flex-direction: column;
  208. }
  209. .datatable-body-row {
  210. outline: none;
  211. > div {
  212. display: -webkit-box;
  213. display: -moz-box;
  214. display: -ms-flexbox;
  215. display: -webkit-flex;
  216. display: flex;
  217. }
  218. }
  219. }
  220. /**
  221. * Footer Styles
  222. */
  223. .datatable-footer {
  224. display: block;
  225. width: 100%;
  226. overflow: auto;
  227. .datatable-footer-inner {
  228. display: flex;
  229. align-items: center;
  230. width: 100%;
  231. }
  232. .selected-count {
  233. .page-count {
  234. flex: 1 1 40%;
  235. }
  236. .datatable-pager {
  237. flex: 1 1 60%;
  238. }
  239. }
  240. .page-count {
  241. flex: 1 1 20%;
  242. }
  243. .datatable-pager {
  244. flex: 1 1 80%;
  245. text-align: right;
  246. .pager,
  247. .pager li {
  248. padding: 0;
  249. margin: 0;
  250. display: inline-block;
  251. list-style: none;
  252. }
  253. .pager {
  254. li,
  255. li a {
  256. outline: none;
  257. }
  258. li {
  259. a {
  260. cursor: pointer;
  261. display: inline-block;
  262. }
  263. &.disabled a {
  264. cursor: not-allowed;
  265. }
  266. }
  267. }
  268. }
  269. }
  270. }