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 } |
