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