144 lines
3.4 KiB
SCSS
144 lines
3.4 KiB
SCSS
/*select datatable css*/
|
|
// Row colour, when selected
|
|
$table-selected: #B0BED9 !default;
|
|
|
|
// Colour to use when shading
|
|
$table-shade: black !default;
|
|
|
|
@function shade( $color, $percent ) {
|
|
@return mix($table-shade, $color, $percent);
|
|
}
|
|
|
|
|
|
table.dataTable {
|
|
// Body styles
|
|
tbody > tr.selected,
|
|
tbody > tr > .selected {
|
|
background-color: $table-selected;
|
|
}
|
|
|
|
|
|
// Stripe classes - add "stripe" class to the table to activate
|
|
&.stripe tbody,
|
|
&.display tbody {
|
|
> tr.odd.selected,
|
|
> tr.odd > .selected {
|
|
background-color: shade($table-selected, 2.35%);
|
|
}
|
|
}
|
|
|
|
|
|
// Hover classes - add "hover" class to the table to activate
|
|
&.hover tbody,
|
|
&.display tbody {
|
|
> tr.selected:hover,
|
|
> tr > .selected:hover {
|
|
background-color: shade($table-selected, 3.6%);
|
|
}
|
|
}
|
|
|
|
|
|
// Sort column highlighting - add "order-column" class to the table to activate
|
|
&.order-column tbody,
|
|
&.display tbody {
|
|
> tr.selected > .sorting_1,
|
|
> tr.selected > .sorting_2,
|
|
> tr.selected > .sorting_3,
|
|
> tr > .selected {
|
|
background-color: shade($table-selected, 2%);
|
|
}
|
|
}
|
|
|
|
&.display tbody,
|
|
&.order-column.stripe tbody {
|
|
> tr.odd.selected {
|
|
>.sorting_1 { background-color: shade($table-selected, 5.4%); }
|
|
>.sorting_2 { background-color: shade($table-selected, 4.7%); }
|
|
>.sorting_3 { background-color: shade($table-selected, 3.9%); }
|
|
}
|
|
|
|
> tr.even.selected {
|
|
>.sorting_1 { background-color: shade($table-selected, 2%); }
|
|
>.sorting_2 { background-color: shade($table-selected, 1.2%); }
|
|
>.sorting_3 { background-color: shade($table-selected, 0.4%); }
|
|
}
|
|
|
|
> tr.odd > .selected { background-color: shade($table-selected, 5.4%); }
|
|
> tr.even > .selected { background-color: shade($table-selected, 2%); }
|
|
}
|
|
|
|
&.display tbody,
|
|
&.order-column.hover tbody {
|
|
> tr.selected:hover {
|
|
>.sorting_1 { background-color: shade($table-selected, 8.2%); }
|
|
>.sorting_2 { background-color: shade($table-selected, 7.5%); }
|
|
>.sorting_3 { background-color: shade($table-selected, 6.3%); }
|
|
}
|
|
|
|
> tr:hover > .selected,
|
|
> tr > .selected:hover {
|
|
background-color: shade($table-selected, 8.2%);
|
|
}
|
|
}
|
|
|
|
tbody td.select-checkbox,
|
|
tbody th.select-checkbox {
|
|
position: relative;
|
|
|
|
&:before,
|
|
&:after {
|
|
display: block;
|
|
position: absolute;
|
|
top: 1.2em; // Should be 50% but IE doesn't like it
|
|
left: 50%;
|
|
width: 12px;
|
|
height: 12px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&:before {
|
|
content: ' ';
|
|
margin-top: -6px;
|
|
margin-left: -6px;
|
|
border: 1px solid black;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
tr.selected {
|
|
td.select-checkbox,
|
|
th.select-checkbox {
|
|
&:after {
|
|
content: '\2714';
|
|
|
|
margin-top: -11px;
|
|
margin-left: -4px;
|
|
|
|
text-align: center;
|
|
text-shadow:
|
|
1px 1px #B0BED9,
|
|
-1px -1px #B0BED9,
|
|
1px -1px #B0BED9,
|
|
-1px 1px #B0BED9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.dataTables_wrapper {
|
|
span.select-info,
|
|
span.select-item {
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
div.dataTables_wrapper {
|
|
span.select-info,
|
|
span.select-item {
|
|
margin-left: 0;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
/*select datatable css*/ |