_datatables-select.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. /*
  2. * MDBootstrap integration with Datatables
  3. * Learn more: https://mdbootstrap.com/docs/jquery/tables/datatables/
  4. * About MDBootstrap: https://mdbootstrap.com/
  5. *
  6. * This combined file was created taking that code from this webstie:
  7. * https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css
  8. *
  9. *
  10. * To rebuild or modify this file with the latest versions of the included
  11. * software please visit:
  12. * https://datatables.net/download/#bs4/dt-1.10.18
  13. *
  14. * Included libraries:
  15. * DataTables 1.10.18
  16. */
  17. table.dataTable {
  18. tbody > tr {
  19. &.selected,
  20. > .selected {
  21. background-color: #B0BED9;
  22. }
  23. }
  24. &.stripe, &.display {
  25. tbody > tr.odd{
  26. &.selected,
  27. > .selected {
  28. background-color: #acbad4;
  29. }
  30. }
  31. }
  32. &.hover, &.display {
  33. tbody > tr {
  34. &.selected:hover,
  35. > .selected:hover {
  36. background-color: #aab7d1;
  37. }
  38. }
  39. }
  40. &.order-column, &.display {
  41. tbody > tr {
  42. &.selected > {
  43. .sorting_1, .sorting_2, .sorting_3 {
  44. background-color: #acbad5;
  45. }
  46. }
  47. > .selected {
  48. background-color: #acbad5;
  49. }
  50. }
  51. }
  52. &.display, &.order-column.stripe {
  53. tbody > tr {
  54. &.odd.selected > .sorting_1 {
  55. background-color: #a6b4cd;
  56. }
  57. }
  58. }
  59. &.display tbody > tr.odd.selected > .sorting_2, &.order-column.stripe tbody > tr.odd.selected > .sorting_2 {
  60. background-color: #a8b5cf;
  61. }
  62. &.display tbody > tr.odd.selected > .sorting_3, &.order-column.stripe tbody > tr.odd.selected > .sorting_3 {
  63. background-color: #a9b7d1;
  64. }
  65. &.display tbody > tr.even.selected > .sorting_1, &.order-column.stripe tbody > tr.even.selected > .sorting_1 {
  66. background-color: #acbad5;
  67. }
  68. &.display tbody > tr.even.selected > .sorting_2, &.order-column.stripe tbody > tr.even.selected > .sorting_2 {
  69. background-color: #aebcd6;
  70. }
  71. &.display tbody > tr.even.selected > .sorting_3, &.order-column.stripe tbody > tr.even.selected > .sorting_3 {
  72. background-color: #afbdd8;
  73. }
  74. &.display tbody > tr.odd > .selected, &.order-column.stripe tbody > tr.odd > .selected {
  75. background-color: #a6b4cd;
  76. }
  77. &.display tbody > tr.even > .selected, &.order-column.stripe tbody > tr.even > .selected {
  78. background-color: #acbad5;
  79. }
  80. &.display tbody > tr.selected:hover > .sorting_1, &.order-column.hover tbody > tr.selected:hover > .sorting_1 {
  81. background-color: #a2aec7;
  82. }
  83. &.display tbody > tr.selected:hover > .sorting_2, &.order-column.hover tbody > tr.selected:hover > .sorting_2 {
  84. background-color: #a3b0c9;
  85. }
  86. &.display tbody > tr.selected:hover > .sorting_3, &.order-column.hover tbody > tr.selected:hover > .sorting_3 {
  87. background-color: #a5b2cb;
  88. }
  89. &.display, &.order-column.hover {
  90. tbody > tr {
  91. &:hover > .selected, > .selected:hover {
  92. background-color: #a2aec7;
  93. }
  94. }
  95. }
  96. tbody {
  97. td.select-checkbox, th.select-checkbox {
  98. position: relative;
  99. }
  100. td, th {
  101. &.select-checkbox {
  102. &:before,
  103. &:after {
  104. display: block;
  105. position: absolute;
  106. top: 1.2em;
  107. left: 50%;
  108. width: 12px;
  109. height: 12px;
  110. box-sizing: border-box;
  111. }
  112. }
  113. }
  114. td.select-checkbox:before,
  115. th.select-checkbox:before {
  116. content: ' ';
  117. margin-top: 4px;
  118. margin-left: -6px;
  119. border: 1px solid black;
  120. border-radius: 3px;
  121. }
  122. }
  123. tr.selected {
  124. td.select-checkbox:after,
  125. th.select-checkbox:after {
  126. content: '\2714';
  127. margin-top: 0px;
  128. margin-left: -4px;
  129. text-align: center;
  130. text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
  131. }
  132. }
  133. }
  134. div.dataTables_wrapper span {
  135. &.select-info, &.select-item {
  136. margin-left: 0.5em;
  137. }
  138. }
  139. @media screen and (max-width: 640px) {
  140. div.dataTables_wrapper span {
  141. &.select-info, &.select-item {
  142. margin-left: 0;
  143. display: block;
  144. }
  145. }
  146. }