mirror of
https://github.com/DataTables/DataTables.git
synced 2024-11-29 11:24:10 +01:00
New: Styling features can be added by CSS class.
New: SCSS base stylesheet with variables for colours
New: Pagination styling
- DataTables now has the ability to selectively enable different style
types by applying different class names to the host table. The options
supported are:
- hover - show a hover effect over rows
- stripe - show odd/even row stripes
- row-border - show a vertical border between rows
- cell-border - show a border around all four sides of a row (only
one of row-border or cell-border should be used)
- sort-column - highlighting of the sorting column.
I will be adding another class along the lines of `display` which will
enable 'hover, stripe, row-border and sort-column' (although this is
not yet implemented).
The reason for doing this is to encorage developers to style their
DataTables more their own way, but making it easier to enable the
features they want.
- To that end, the DataTables stylesheet will be generated from a SCSS
template in future. The SCSS template is included in this comment
(although the generated stylesheet is not yet committed). This allows
colours to be changed which a trivial amount of effort, while still
being able to get row highlighting etc, thanks to SCSS's colour
functions.
- Pagination styles have been updated to fit in with the new styling of
the DataTable.
This commit is contained in:
Allan Jardine
parent
0fb58706d1
commit
3cabe9a6db
@ -64,7 +64,6 @@
|
||||
}
|
||||
|
||||
.dataTables_info {
|
||||
width: 60%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -318,7 +317,6 @@ td.details {
|
||||
}
|
||||
|
||||
.paging_full_numbers {
|
||||
width: 400px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
@ -6,22 +6,35 @@ table.dataTable {
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
table.dataTable thead th {
|
||||
padding: 3px 18px 3px 10px;
|
||||
border-bottom: 1px solid black;
|
||||
font-weight: bold;
|
||||
table.dataTable thead th,
|
||||
table.dataTable thead td {
|
||||
padding: 10px 18px;
|
||||
border-bottom: 1px solid #111;
|
||||
}
|
||||
|
||||
table.dataTable tfoot th,
|
||||
table.dataTable tfoot td {
|
||||
padding: 10px 18px;
|
||||
border-top: 1px solid #111;
|
||||
}
|
||||
|
||||
table.dataTable thead th,
|
||||
table.dataTable tfoot th {
|
||||
padding: 3px 18px 3px 10px;
|
||||
border-top: 1px solid black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataTable td {
|
||||
padding: 3px 10px;
|
||||
/* Body styles */
|
||||
table.dataTable tbody th,
|
||||
table.dataTable tbody td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
table.dataTable tbody tr:first-child th,
|
||||
table.dataTable tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
table.dataTable td.center,
|
||||
@ -29,15 +42,69 @@ table.dataTable td.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table.dataTable tr.odd { background-color: #E2E4FF; }
|
||||
table.dataTable tr.even { background-color: white; }
|
||||
/* Border classes - add "row-border" or "cell-border" class to the table to activate */
|
||||
table.dataTable.row-border tbody th,
|
||||
table.dataTable.row-border tbody td {
|
||||
padding: 8px 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
|
||||
table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
|
||||
table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
|
||||
table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
|
||||
table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
|
||||
table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
|
||||
table.dataTable.cell-border tbody th,
|
||||
table.dataTable.cell-border tbody td {
|
||||
padding: 8px 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table.dataTable tbody>:last-child th,
|
||||
table.dataTable tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
table.dataTable.cell-border tbody tr th:first-child,
|
||||
table.dataTable.cell-border tbody tr td:first-child {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
/* Stripe classes - add "stripe" class to the table to activate */
|
||||
table.dataTable.stripe tbody tr.odd { background-color: #f9f9f9; }
|
||||
table.dataTable.stripe tbody tr.even { background-color: white; }
|
||||
|
||||
|
||||
/* Hover classes - add "hover" class to the table to activate */
|
||||
table.dataTable.hover tbody tr:hover,
|
||||
table.dataTable.hover tbody tr.odd:hover,
|
||||
table.dataTable.hover tbody tr.even:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Sort column highlighting */
|
||||
table.dataTable.stripe.sort-column tbody tr.odd td.sorting_1 { background-color: #f1f1f1; }
|
||||
table.dataTable.stripe.sort-column tbody tr.odd td.sorting_2 { background-color: #f3f3f3; }
|
||||
table.dataTable.stripe.sort-column tbody tr.odd td.sorting_3 { background-color: #f5f5f5; }
|
||||
|
||||
table.dataTable.stripe.sort-column tbody tr.even td.sorting_1 { background-color: #fafafa; }
|
||||
table.dataTable.stripe.sort-column tbody tr.even td.sorting_2 { background-color: #fcfcfc; }
|
||||
table.dataTable.stripe.sort-column tbody tr.even td.sorting_3 { background-color: #fefefe; }
|
||||
|
||||
table.dataTable.hover.sort-column tbody tr:hover td.sorting_1,
|
||||
table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_1,
|
||||
table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_1 {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
table.dataTable.hover.sort-column tbody tr:hover td.sorting_2,
|
||||
table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_2,
|
||||
table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_2 {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
table.dataTable.hover.sort-column tbody tr:hover td.sorting_3,
|
||||
table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_3,
|
||||
table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_3 {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@ -55,6 +122,7 @@ table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
|
||||
*/
|
||||
.dataTables_length {
|
||||
float: left;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
@ -64,6 +132,7 @@ table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
|
||||
.dataTables_filter {
|
||||
float: right;
|
||||
text-align: right;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
@ -73,6 +142,8 @@ table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
|
||||
.dataTables_info {
|
||||
clear: both;
|
||||
float: left;
|
||||
color: #333;
|
||||
padding-top: 0.55em;
|
||||
}
|
||||
|
||||
|
||||
@ -84,109 +155,68 @@ table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Two button pagination - previous / next */
|
||||
.paginate_disabled_previous,
|
||||
.paginate_enabled_previous,
|
||||
.paginate_disabled_next,
|
||||
.paginate_enabled_next {
|
||||
height: 19px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
color: #111 !important;
|
||||
}
|
||||
.paginate_disabled_previous:hover,
|
||||
.paginate_enabled_previous:hover,
|
||||
.paginate_disabled_next:hover,
|
||||
.paginate_enabled_next:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.paginate_disabled_previous:active,
|
||||
.paginate_enabled_previous:active,
|
||||
.paginate_disabled_next:active,
|
||||
.paginate_enabled_next:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.paginate_disabled_previous,
|
||||
.paginate_disabled_next {
|
||||
color: #666 !important;
|
||||
}
|
||||
.paginate_disabled_previous,
|
||||
.paginate_enabled_previous {
|
||||
padding-left: 23px;
|
||||
}
|
||||
.paginate_disabled_next,
|
||||
.paginate_enabled_next {
|
||||
padding-right: 23px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.paginate_enabled_previous { background: url('../images/back_enabled.png') no-repeat top left; }
|
||||
.paginate_enabled_previous:hover { background: url('../images/back_enabled_hover.png') no-repeat top left; }
|
||||
.paginate_disabled_previous { background: url('../images/back_disabled.png') no-repeat top left; }
|
||||
|
||||
.paginate_enabled_next { background: url('../images/forward_enabled.png') no-repeat top right; }
|
||||
.paginate_enabled_next:hover { background: url('../images/forward_enabled_hover.png') no-repeat top right; }
|
||||
.paginate_disabled_next { background: url('../images/forward_disabled.png') no-repeat top right; }
|
||||
|
||||
/* Full number pagination */
|
||||
.paging_full_numbers {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.paging_full_numbers a:active {
|
||||
outline: none
|
||||
}
|
||||
.paging_full_numbers a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.paging_full_numbers a.paginate_button,
|
||||
.paging_full_numbers a.paginate_active {
|
||||
border: 1px solid #aaa;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 2px 5px;
|
||||
margin: 0 3px;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
.paginate_button {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
min-width: 1.5em;
|
||||
padding: 0.5em 1em;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.paging_full_numbers a.paginate_button {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.paging_full_numbers a.paginate_button:hover {
|
||||
background-color: #ccc;
|
||||
margin-left: 2px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.paging_full_numbers a.paginate_active {
|
||||
background-color: #99B3FF;
|
||||
.paginate_button.current {
|
||||
color: white !important;
|
||||
background-color: black;
|
||||
border: 1px solid black !important;
|
||||
background: -webkit-linear-gradient(top, rgba(72,72,72,1) 0%, rgba(0,0,0,1) 100%) !important;
|
||||
}
|
||||
|
||||
.paginate_button:hover {
|
||||
border: 1px solid #dcdcdc;
|
||||
background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(226,226,226,1) 100%);
|
||||
}
|
||||
|
||||
.paginate_button.disabled {
|
||||
color: #666 !important;
|
||||
border: 1px solid transparent !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.paginate_button:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Processing indicator
|
||||
*/
|
||||
.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 250px;
|
||||
height: 30px;
|
||||
margin-left: -125px;
|
||||
margin-top: -15px;
|
||||
padding: 14px 0 2px 0;
|
||||
border: 1px solid #ddd;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: -50%;
|
||||
margin-top: -25px;
|
||||
padding-top: 20px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
|
||||
background-color: white;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0.9)), color-stop(75%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* W3C */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
337
media/css/jquery.dataTables.scss
Normal file
337
media/css/jquery.dataTables.scss
Normal file
@ -0,0 +1,337 @@
|
||||
|
||||
@function tint( $color, $percent ) {
|
||||
@return mix(white, $color, $percent);
|
||||
}
|
||||
|
||||
@function shade( $color, $percent ) {
|
||||
@return mix(black, $color, $percent);
|
||||
}
|
||||
|
||||
@mixin gradient( $from, $to ) {
|
||||
background-color: $from;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, $from 0%, $to 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, $from 0%, $to 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, $from 0%, $to 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, $from 0%, $to 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(to bottom, $from 0%, $to 100%); /* W3C */
|
||||
}
|
||||
|
||||
|
||||
$table-header-border: 1px solid #111;
|
||||
$table-body-border: 1px solid #ddd;
|
||||
$table-row-background: #ffffff;
|
||||
$table-control-color: #333;
|
||||
|
||||
|
||||
table.dataTable {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
border-collapse: separate;
|
||||
|
||||
// Header and footer styles
|
||||
thead,
|
||||
tfoot {
|
||||
th,
|
||||
td {
|
||||
padding: 10px 18px;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
thead th,
|
||||
thead td {
|
||||
border-bottom: $table-header-border;
|
||||
}
|
||||
|
||||
tfoot th,
|
||||
tfoot td {
|
||||
border-top: $table-header-border;
|
||||
}
|
||||
|
||||
// Body styles
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
th.center,
|
||||
td.center,
|
||||
td.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th.right,
|
||||
td.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
// Stripe classes - add "row-border" class to the table to activate
|
||||
&.row-border tbody {
|
||||
th, td {
|
||||
border-top: $table-body-border;
|
||||
}
|
||||
|
||||
tr:first-child th,
|
||||
tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Stripe classes - add "cell-border" class to the table to activate
|
||||
&.cell-border tbody {
|
||||
th, td {
|
||||
border-top: $table-body-border;
|
||||
border-right: $table-body-border;
|
||||
}
|
||||
|
||||
tr th:first-child,
|
||||
tr td:first-child {
|
||||
border-left: $table-body-border;
|
||||
}
|
||||
|
||||
tr:first-child th,
|
||||
tr:first-child td,
|
||||
tr:last-child th,
|
||||
tr:last-child td {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Stripe classes - add "stripe" class to the table to activate
|
||||
&.stripe {
|
||||
tr.odd {
|
||||
background-color: shade($table-row-background, 2.35%); // shade by f9
|
||||
}
|
||||
tr.even {
|
||||
background-color: $table-row-background;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hover classes - add "hover" class to the table to activate
|
||||
&.hover tbody {
|
||||
tr:hover,
|
||||
tr.odd:hover,
|
||||
tr.even:hover {
|
||||
background-color: shade($table-row-background, 3.6%); // shade by f5
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sort column highlighting - add "hover" class to the table to activate
|
||||
&.sort-column {
|
||||
tbody {
|
||||
tr>.sorting_1,
|
||||
tr>.sorting_2,
|
||||
tr>.sorting_3 {
|
||||
background-color: shade($table-row-background, 2%); // shade by fa
|
||||
}
|
||||
}
|
||||
|
||||
&.stripe tbody {
|
||||
tr.odd > .sorting_1 {
|
||||
background-color: shade($table-row-background, 5.4%); // shade by f1
|
||||
}
|
||||
tr.odd > .sorting_2 {
|
||||
background-color: shade($table-row-background, 4.7%); // shade by f3;
|
||||
}
|
||||
tr.odd > .sorting_3 {
|
||||
background-color: shade($table-row-background, 3.9%); // shade by f5
|
||||
}
|
||||
|
||||
tr.even > .sorting_1 {
|
||||
background-color: shade($table-row-background, 2%); // shade by fa
|
||||
}
|
||||
tr.even > .sorting_2 {
|
||||
background-color: shade($table-row-background, 1.2%); // shade by fc
|
||||
}
|
||||
tr.even > .sorting_3 {
|
||||
background-color: shade($table-row-background, 0.4%); // shade by fe
|
||||
}
|
||||
}
|
||||
|
||||
&.hover tbody {
|
||||
tr:hover > .sorting_1,
|
||||
tr.odd:hover > .sorting_1,
|
||||
tr.even:hover > .sorting_1 {
|
||||
background-color: shade($table-row-background, 8.2%); // shade by ea
|
||||
}
|
||||
|
||||
tr:hover > .sorting_2,
|
||||
tr.odd:hover > .sorting_2,
|
||||
tr.even:hover > .sorting_2 {
|
||||
background-color: shade($table-row-background, 7.5%); // shade by ec
|
||||
}
|
||||
|
||||
tr:hover > .sorting_3,
|
||||
tr.odd:hover > .sorting_3,
|
||||
tr.even:hover > .sorting_3 {
|
||||
background-color: shade($table-row-background, 6.3%); // shade by ef
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Control feature layout
|
||||
*/
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
clear: both;
|
||||
*zoom: 1;
|
||||
|
||||
|
||||
.dataTables_length {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dataTables_filter {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dataTables_info {
|
||||
clear: both;
|
||||
float: left;
|
||||
padding-top: 0.55em;
|
||||
}
|
||||
|
||||
.dataTables_paginate {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
.paginate_button {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
min-width: 1.5em;
|
||||
padding: 0.5em 1em;
|
||||
margin-left: 2px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
|
||||
color: #333 !important;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.current,
|
||||
&.current:hover {
|
||||
color: white !important;
|
||||
border: 1px solid black;
|
||||
@include gradient( rgba(72,72,72,1), rgba(0,0,0,1) );
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
color: #666 !important;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #dcdcdc;
|
||||
@include gradient( rgba(250,250,250,1), rgba(226,226,226,1) );
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: -50%;
|
||||
margin-top: -25px;
|
||||
padding-top: 20px;
|
||||
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
|
||||
background-color: white;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba($table-row-background, 0)), color-stop(25%,rgba($table-row-background, 0.9)), color-stop(75%,rgba($table-row-background, 0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(left, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(to right, rgba($table-row-background, 0) 0%, rgba($table-row-background, 0.9) 25%, rgba($table-row-background, 0.9) 75%, rgba($table-row-background, 0) 100%); /* W3C */
|
||||
}
|
||||
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.dataTables_info,
|
||||
.dataTables_processing,
|
||||
.dataTables_paginate {
|
||||
color: $table-control-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.paginate_button {
|
||||
display: inline-block;
|
||||
min-width: 1em;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.paginate_button.current {
|
||||
|
||||
}
|
||||
|
||||
.paginate_button.disabled {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Sorting
|
||||
*/
|
||||
table.dataTable thead th.sorting_asc,
|
||||
table.dataTable thead th.sorting_desc,
|
||||
table.dataTable thead th.sorting {
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
.sorting { background: url('../images/sort_both.png') no-repeat center right; }
|
||||
.sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
|
||||
.sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }
|
||||
|
||||
.sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
|
||||
.sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
|
||||
|
||||
table.dataTable thead th:active,
|
||||
table.dataTable thead td:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Scrolling
|
||||
*/
|
||||
.dataTables_scroll {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dataTables_scrollBody {
|
||||
*margin-top: -1px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user