mirror of
https://github.com/DataTables/DataTables.git
synced 2025-02-19 17:54:14 +01:00
New: CSS - Add .selected option to CSS for selected rows
- It is quite common to have a row selection styling in DataTables, so it makes sense to built this ability directly into the core CSS. It doesn't add too much extra weight, but it would be a huge pain for developers to do themselves and also it means I can reuse it in TableTools / Editor.
This commit is contained in:
parent
4c317c910a
commit
dd805f6623
@ -1 +1 @@
|
||||
8d58eb8d41b41bdc0a7cf0fdca4178d0933158d2
|
||||
f5cbd047f7f47a79c5ab8a25953483ad0b190677
|
||||
|
@ -94,9 +94,15 @@ table.dataTable.cell-border tbody tr:last-child td {
|
||||
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
|
||||
background-color: #abb9d3;
|
||||
}
|
||||
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even {
|
||||
background-color: white;
|
||||
}
|
||||
table.dataTable.stripe tbody tr.even.selected, table.dataTable.display tbody tr.even.selected {
|
||||
background-color: #b0bed9;
|
||||
}
|
||||
table.dataTable.hover tbody tr:hover,
|
||||
table.dataTable.hover tbody tr.odd:hover,
|
||||
table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover,
|
||||
@ -104,6 +110,13 @@ table.dataTable.display tbody tr.odd:hover,
|
||||
table.dataTable.display tbody tr.even:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
table.dataTable.hover tbody tr:hover.selected,
|
||||
table.dataTable.hover tbody tr.odd:hover.selected,
|
||||
table.dataTable.hover tbody tr.even:hover.selected, table.dataTable.display tbody tr:hover.selected,
|
||||
table.dataTable.display tbody tr.odd:hover.selected,
|
||||
table.dataTable.display tbody tr.even:hover.selected {
|
||||
background-color: #a9b7d1;
|
||||
}
|
||||
table.dataTable.sort-column tbody tr > .sorting_1,
|
||||
table.dataTable.sort-column tbody tr > .sorting_2,
|
||||
table.dataTable.sort-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
|
||||
@ -111,6 +124,13 @@ table.dataTable.display tbody tr > .sorting_2,
|
||||
table.dataTable.display tbody tr > .sorting_3 {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
table.dataTable.sort-column tbody tr.selected > .sorting_1,
|
||||
table.dataTable.sort-column tbody tr.selected > .sorting_2,
|
||||
table.dataTable.sort-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
|
||||
table.dataTable.display tbody tr.selected > .sorting_2,
|
||||
table.dataTable.display tbody tr.selected > .sorting_3 {
|
||||
background-color: #acbad4;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.sort-column.stripe tbody tr.odd > .sorting_1 {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
@ -120,6 +140,15 @@ table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.sort-column.s
|
||||
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.sort-column.stripe tbody tr.odd > .sorting_3 {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_1 {
|
||||
background-color: #a6b3cd;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_2 {
|
||||
background-color: #a7b5ce;
|
||||
}
|
||||
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_3 {
|
||||
background-color: #a9b6d0;
|
||||
}
|
||||
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.sort-column.stripe tbody tr.even > .sorting_1 {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
@ -129,6 +158,15 @@ table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.sort-column.
|
||||
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.sort-column.stripe tbody tr.even > .sorting_3 {
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_1 {
|
||||
background-color: #acbad4;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_2 {
|
||||
background-color: #adbbd6;
|
||||
}
|
||||
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_3 {
|
||||
background-color: #afbdd8;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover > .sorting_1,
|
||||
table.dataTable.display tbody tr.odd:hover > .sorting_1,
|
||||
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.sort-column.hover tbody tr:hover > .sorting_1,
|
||||
@ -150,6 +188,27 @@ table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_3,
|
||||
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_3 {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_1,
|
||||
table.dataTable.display tbody tr.odd:hover.selected > .sorting_1,
|
||||
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_1,
|
||||
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_1,
|
||||
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_1 {
|
||||
background-color: #a1aec7;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_2,
|
||||
table.dataTable.display tbody tr.odd:hover.selected > .sorting_2,
|
||||
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_2,
|
||||
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_2,
|
||||
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_2 {
|
||||
background-color: #a2afc8;
|
||||
}
|
||||
table.dataTable.display tbody tr:hover.selected > .sorting_3,
|
||||
table.dataTable.display tbody tr.odd:hover.selected > .sorting_3,
|
||||
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_3,
|
||||
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_3,
|
||||
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_3 {
|
||||
background-color: #a4b2cb;
|
||||
}
|
||||
|
||||
/*
|
||||
* Control feature layout
|
||||
|
Loading…
x
Reference in New Issue
Block a user