_datatables-select.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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 {
  18. &.dataTable {
  19. tbody > tr {
  20. &.selected,
  21. > .selected {
  22. background-color: #b0bed9;
  23. }
  24. }
  25. &.stripe, &.display {
  26. tbody > tr.odd {
  27. &.selected,
  28. > .selected {
  29. background-color: #acbad4;
  30. }
  31. }
  32. }
  33. &.hover, &.display {
  34. tbody > tr {
  35. &.selected:hover,
  36. > .selected:hover {
  37. background-color: #aab7d1;
  38. }
  39. }
  40. }
  41. &.order-column, &.display {
  42. tbody > tr {
  43. &.selected > {
  44. .sorting_1, .sorting_2, .sorting_3 {
  45. background-color: #acbad5;
  46. }
  47. }
  48. > .selected {
  49. background-color: #acbad5;
  50. }
  51. }
  52. }
  53. &.display, &.order-column.stripe {
  54. tbody > tr {
  55. &.odd.selected > .sorting_1 {
  56. background-color: #a6b4cd;
  57. }
  58. }
  59. }
  60. &.display tbody > tr.odd.selected > .sorting_2, &.order-column.stripe tbody > tr.odd.selected > .sorting_2 {
  61. background-color: #a8b5cf;
  62. }
  63. &.display tbody > tr.odd.selected > .sorting_3, &.order-column.stripe tbody > tr.odd.selected > .sorting_3 {
  64. background-color: #a9b7d1;
  65. }
  66. &.display tbody > tr.even.selected > .sorting_1, &.order-column.stripe tbody > tr.even.selected > .sorting_1 {
  67. background-color: #acbad5;
  68. }
  69. &.display tbody > tr.even.selected > .sorting_2, &.order-column.stripe tbody > tr.even.selected > .sorting_2 {
  70. background-color: #aebcd6;
  71. }
  72. &.display tbody > tr.even.selected > .sorting_3, &.order-column.stripe tbody > tr.even.selected > .sorting_3 {
  73. background-color: #afbdd8;
  74. }
  75. &.display tbody > tr.odd > .selected, &.order-column.stripe tbody > tr.odd > .selected {
  76. background-color: #a6b4cd;
  77. }
  78. &.display tbody > tr.even > .selected, &.order-column.stripe tbody > tr.even > .selected {
  79. background-color: #acbad5;
  80. }
  81. &.display tbody > tr.selected:hover > .sorting_1, &.order-column.hover tbody > tr.selected:hover > .sorting_1 {
  82. background-color: #a2aec7;
  83. }
  84. &.display tbody > tr.selected:hover > .sorting_2, &.order-column.hover tbody > tr.selected:hover > .sorting_2 {
  85. background-color: #a3b0c9;
  86. }
  87. &.display tbody > tr.selected:hover > .sorting_3, &.order-column.hover tbody > tr.selected:hover > .sorting_3 {
  88. background-color: #a5b2cb;
  89. }
  90. &.display, &.order-column.hover {
  91. tbody > tr {
  92. &:hover > .selected, > .selected:hover {
  93. background-color: #a2aec7;
  94. }
  95. }
  96. }
  97. tbody {
  98. td, th {
  99. &.select-checkbox {
  100. position: relative;
  101. &:before,
  102. &:after {
  103. position: absolute;
  104. top: 1.2em;
  105. left: 50%;
  106. box-sizing: border-box;
  107. display: block;
  108. width: 12px;
  109. height: 12px;
  110. }
  111. }
  112. }
  113. td.select-checkbox:before,
  114. th.select-checkbox:before {
  115. margin-top: 4px;
  116. margin-left: -6px;
  117. content: " ";
  118. border: 1px solid #000;
  119. border-radius: 3px;
  120. }
  121. }
  122. tr.selected {
  123. td.select-checkbox:after,
  124. th.select-checkbox:after {
  125. margin-top: 0;
  126. margin-left: -4px;
  127. text-align: center;
  128. text-shadow: 1px 1px #b0bed9, -1px -1px #b0bed9, 1px -1px #b0bed9, -1px 1px #b0bed9;
  129. content: "\2714";
  130. }
  131. }
  132. }
  133. }
  134. div.dataTables_wrapper span {
  135. &.select-info, &.select-item {
  136. margin-left: .5em;
  137. }
  138. }
  139. @media screen and (max-width: 640px) {
  140. div.dataTables_wrapper span {
  141. &.select-info, &.select-item {
  142. display: block;
  143. margin-left: 0;
  144. }
  145. }
  146. }