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