Nessuna descrizione
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

datatable.scss 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. // Row highlighting on edit styles
  2. //
  3. // To change the colour of the highlight, simply modify the variable below and
  4. // recompile the SCSS stylesheet (if you don't have SASS installed, you can use
  5. // the online service at http://sassmeister.com/ .
  6. //
  7. // The DataTables styles below match the default DataTables stylesheet:
  8. // http://next.datatables.net/manual/styling/classes so you can retain the full
  9. // benefits of the DataTables styling options.
  10. $table-row-highlight: #FFFBCC;
  11. table.dataTable {
  12. tbody {
  13. tr.highlight {
  14. background-color: $table-row-highlight !important;
  15. }
  16. tr.highlight,
  17. tr.noHighlight,
  18. tr.highlight td,
  19. tr.noHighlight td {
  20. @include background-transision();
  21. }
  22. }
  23. &.stripe tbody,
  24. &.display tbody {
  25. tr.odd {
  26. &.highlight {
  27. background-color: shade($table-row-highlight, 2.35%);
  28. }
  29. }
  30. }
  31. // Hover classes - add "hover" class to the table to activate
  32. &.hover tbody,
  33. &.display tbody {
  34. tr:hover,
  35. tr.odd:hover,
  36. tr.even:hover {
  37. &.highlight {
  38. background-color: shade($table-row-highlight, 3.6%);
  39. }
  40. }
  41. }
  42. // Sort column highlighting - add "hover" class to the table to activate
  43. &.order-column,
  44. &.display {
  45. tbody {
  46. tr.highlight>.sorting_1,
  47. tr.highlight>.sorting_2,
  48. tr.highlight>.sorting_3 {
  49. background-color: shade($table-row-highlight, 2%);
  50. }
  51. }
  52. }
  53. &.display tbody,
  54. &.order-column.stripe tbody {
  55. tr.odd {
  56. &.highlight {
  57. >.sorting_1 { background-color: shade($table-row-highlight, 5.4%);}
  58. >.sorting_2 { background-color: shade($table-row-highlight, 4.7%);}
  59. >.sorting_3 { background-color: shade($table-row-highlight, 3.9%);}
  60. }
  61. }
  62. tr.even {
  63. &.highlight {
  64. >.sorting_1 { background-color: shade($table-row-highlight, 2%); }
  65. >.sorting_2 { background-color: shade($table-row-highlight, 1.2%); }
  66. >.sorting_3 { background-color: shade($table-row-highlight, 0.4%); }
  67. }
  68. }
  69. }
  70. &.display tbody,
  71. &.order-column.hover tbody {
  72. tr:hover,
  73. tr.odd:hover,
  74. tr.even:hover {
  75. &.highlight {
  76. >.sorting_1 { background-color: shade($table-row-highlight, 8.2%); }
  77. >.sorting_2 { background-color: shade($table-row-highlight, 7.5%); }
  78. >.sorting_3 { background-color: shade($table-row-highlight, 6.3%); }
  79. }
  80. }
  81. }
  82. }