mirror of
https://github.com/DataTables/DataTables.git
synced 2025-01-30 23:52:11 +01:00
Dev: Completing the work on the new SCSS stylesheet for DataTables
- The SCSS stylesheet is now feature complete, and the jquery.dataTables.css file found in the repo is now directly generated from that SCSS file. The SCSS online compiler will run the stylesheet: http://sass-lang.com/try.html .
This commit is contained in:
Allan Jardine
parent
3cabe9a6db
commit
fe390220cf
@ -1,256 +1,231 @@
|
|||||||
|
/*
|
||||||
|
* THIS IS A GENREATED FILE FROM jquery.dataTables.scss
|
||||||
|
*/
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Table
|
* Table styles
|
||||||
*/
|
*/
|
||||||
table.dataTable {
|
table.dataTable {
|
||||||
margin: 0 auto;
|
width: 100%;
|
||||||
clear: both;
|
margin: 0 auto;
|
||||||
width: 100%;
|
clear: both;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
}
|
/*
|
||||||
|
* Header and footer styles
|
||||||
table.dataTable thead th,
|
*/
|
||||||
table.dataTable thead td {
|
/*
|
||||||
padding: 10px 18px;
|
* Body styles
|
||||||
border-bottom: 1px solid #111;
|
*/ }
|
||||||
}
|
table.dataTable thead th,
|
||||||
|
table.dataTable thead td,
|
||||||
table.dataTable tfoot th,
|
table.dataTable tfoot th,
|
||||||
table.dataTable tfoot td {
|
table.dataTable tfoot td {
|
||||||
padding: 10px 18px;
|
padding: 10px 18px; }
|
||||||
border-top: 1px solid #111;
|
table.dataTable thead th,
|
||||||
}
|
table.dataTable tfoot th {
|
||||||
|
font-weight: bold; }
|
||||||
table.dataTable thead th,
|
table.dataTable thead th,
|
||||||
table.dataTable tfoot th {
|
table.dataTable thead td {
|
||||||
font-weight: bold;
|
border-bottom: 1px solid #111111; }
|
||||||
}
|
table.dataTable thead th:active,
|
||||||
|
table.dataTable thead td:active {
|
||||||
/* Body styles */
|
outline: none; }
|
||||||
table.dataTable tbody th,
|
table.dataTable tfoot th,
|
||||||
table.dataTable tbody td {
|
table.dataTable tfoot td {
|
||||||
padding: 8px 10px;
|
border-top: 1px solid #111111; }
|
||||||
}
|
table.dataTable thead .sorting_asc,
|
||||||
|
table.dataTable thead .sorting_desc,
|
||||||
table.dataTable tbody tr:first-child th,
|
table.dataTable thead .sorting {
|
||||||
table.dataTable tbody tr:first-child td {
|
cursor: pointer;
|
||||||
border-top: none;
|
*cursor: hand; }
|
||||||
}
|
table.dataTable thead .sorting {
|
||||||
|
background: url("../images/sort_both.png") no-repeat center right; }
|
||||||
table.dataTable td.center,
|
table.dataTable thead .sorting_asc {
|
||||||
table.dataTable td.dataTables_empty {
|
background: url("../images/sort_asc.png") no-repeat center right; }
|
||||||
text-align: center;
|
table.dataTable thead .sorting_desc {
|
||||||
}
|
background: url("../images/sort_desc.png") no-repeat center right; }
|
||||||
|
table.dataTable thead .sorting_asc_disabled {
|
||||||
/* Border classes - add "row-border" or "cell-border" class to the table to activate */
|
background: url("../images/sort_asc_disabled.png") no-repeat center right; }
|
||||||
table.dataTable.row-border tbody th,
|
table.dataTable thead .sorting_desc_disabled {
|
||||||
table.dataTable.row-border tbody td {
|
background: url("../images/sort_desc_disabled.png") no-repeat center right; }
|
||||||
padding: 8px 10px;
|
table.dataTable tbody th,
|
||||||
border-top: 1px solid #ddd;
|
table.dataTable tbody td {
|
||||||
}
|
padding: 8px 10px; }
|
||||||
|
table.dataTable th.center,
|
||||||
table.dataTable.cell-border tbody th,
|
table.dataTable td.center,
|
||||||
table.dataTable.cell-border tbody td {
|
table.dataTable td.dataTables_empty {
|
||||||
padding: 8px 10px;
|
text-align: center; }
|
||||||
border-top: 1px solid #ddd;
|
table.dataTable th.right,
|
||||||
border-right: 1px solid #ddd;
|
table.dataTable td.right {
|
||||||
}
|
text-align: right; }
|
||||||
|
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td {
|
||||||
table.dataTable tbody>:last-child th,
|
border-top: 1px solid #dddddd; }
|
||||||
table.dataTable tbody tr:last-child td {
|
table.dataTable.row-border tbody tr:first-child th,
|
||||||
border-bottom: none;
|
table.dataTable.row-border tbody tr:first-child td {
|
||||||
}
|
border-top: none; }
|
||||||
|
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
|
||||||
table.dataTable.cell-border tbody tr th:first-child,
|
border-top: 1px solid #dddddd;
|
||||||
table.dataTable.cell-border tbody tr td:first-child {
|
border-right: 1px solid #dddddd; }
|
||||||
border-left: 1px solid #ddd;
|
table.dataTable.cell-border tbody tr th:first-child,
|
||||||
}
|
table.dataTable.cell-border tbody tr td:first-child {
|
||||||
|
border-left: 1px solid #dddddd; }
|
||||||
|
table.dataTable.cell-border tbody tr:first-child th,
|
||||||
/* Stripe classes - add "stripe" class to the table to activate */
|
table.dataTable.cell-border tbody tr:first-child td,
|
||||||
table.dataTable.stripe tbody tr.odd { background-color: #f9f9f9; }
|
table.dataTable.cell-border tbody tr:last-child th,
|
||||||
table.dataTable.stripe tbody tr.even { background-color: white; }
|
table.dataTable.cell-border tbody tr:last-child td {
|
||||||
|
border-top: none; }
|
||||||
|
table.dataTable.stripe tr.odd {
|
||||||
/* Hover classes - add "hover" class to the table to activate */
|
background-color: #f9f9f9; }
|
||||||
table.dataTable.hover tbody tr:hover,
|
table.dataTable.stripe tr.even {
|
||||||
table.dataTable.hover tbody tr.odd:hover,
|
background-color: white; }
|
||||||
table.dataTable.hover tbody tr.even:hover {
|
table.dataTable.hover tbody tr:hover,
|
||||||
background-color: #f5f5f5;
|
table.dataTable.hover tbody tr.odd:hover,
|
||||||
}
|
table.dataTable.hover tbody tr.even:hover {
|
||||||
|
background-color: whitesmoke; }
|
||||||
/* Sort column highlighting */
|
table.dataTable.sort-column tbody tr > .sorting_1,
|
||||||
table.dataTable.stripe.sort-column tbody tr.odd td.sorting_1 { background-color: #f1f1f1; }
|
table.dataTable.sort-column tbody tr > .sorting_2,
|
||||||
table.dataTable.stripe.sort-column tbody tr.odd td.sorting_2 { background-color: #f3f3f3; }
|
table.dataTable.sort-column tbody tr > .sorting_3 {
|
||||||
table.dataTable.stripe.sort-column tbody tr.odd td.sorting_3 { background-color: #f5f5f5; }
|
background-color: #f9f9f9; }
|
||||||
|
table.dataTable.sort-column.stripe tbody tr.odd > .sorting_1 {
|
||||||
table.dataTable.stripe.sort-column tbody tr.even td.sorting_1 { background-color: #fafafa; }
|
background-color: #f1f1f1; }
|
||||||
table.dataTable.stripe.sort-column tbody tr.even td.sorting_2 { background-color: #fcfcfc; }
|
table.dataTable.sort-column.stripe tbody tr.odd > .sorting_2 {
|
||||||
table.dataTable.stripe.sort-column tbody tr.even td.sorting_3 { background-color: #fefefe; }
|
background-color: #f3f3f3; }
|
||||||
|
table.dataTable.sort-column.stripe tbody tr.odd > .sorting_3 {
|
||||||
table.dataTable.hover.sort-column tbody tr:hover td.sorting_1,
|
background-color: whitesmoke; }
|
||||||
table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_1,
|
table.dataTable.sort-column.stripe tbody tr.even > .sorting_1 {
|
||||||
table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_1 {
|
background-color: #f9f9f9; }
|
||||||
background-color: #eaeaea;
|
table.dataTable.sort-column.stripe tbody tr.even > .sorting_2 {
|
||||||
}
|
background-color: #fbfbfb; }
|
||||||
|
table.dataTable.sort-column.stripe tbody tr.even > .sorting_3 {
|
||||||
table.dataTable.hover.sort-column tbody tr:hover td.sorting_2,
|
background-color: #fdfdfd; }
|
||||||
table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_2,
|
table.dataTable.sort-column.hover tbody tr:hover > .sorting_1,
|
||||||
table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_2 {
|
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_1,
|
||||||
background-color: #eaeaea;
|
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_1 {
|
||||||
}
|
background-color: #eaeaea; }
|
||||||
|
table.dataTable.sort-column.hover tbody tr:hover > .sorting_2,
|
||||||
table.dataTable.hover.sort-column tbody tr:hover td.sorting_3,
|
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_2,
|
||||||
table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_3,
|
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_2 {
|
||||||
table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_3 {
|
background-color: #ebebeb; }
|
||||||
background-color: #eaeaea;
|
table.dataTable.sort-column.hover tbody tr:hover > .sorting_3,
|
||||||
}
|
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 wrapper
|
* Control feature layout
|
||||||
*/
|
*/
|
||||||
.dataTables_wrapper {
|
.dataTables_wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
clear: both;
|
clear: both;
|
||||||
*zoom: 1;
|
*zoom: 1; }
|
||||||
}
|
.dataTables_wrapper .dataTables_length {
|
||||||
|
float: left; }
|
||||||
|
.dataTables_wrapper .dataTables_filter {
|
||||||
/*
|
float: right;
|
||||||
* Page length menu
|
text-align: right; }
|
||||||
*/
|
.dataTables_wrapper .dataTables_info {
|
||||||
.dataTables_length {
|
clear: both;
|
||||||
float: left;
|
float: left;
|
||||||
color: #333;
|
padding-top: 0.55em; }
|
||||||
}
|
.dataTables_wrapper .dataTables_paginate {
|
||||||
|
float: right;
|
||||||
|
text-align: right; }
|
||||||
/*
|
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
||||||
* Filter
|
box-sizing: border-box;
|
||||||
*/
|
display: inline-block;
|
||||||
.dataTables_filter {
|
min-width: 1.5em;
|
||||||
float: right;
|
padding: 0.5em 1em;
|
||||||
text-align: right;
|
margin-left: 2px;
|
||||||
color: #333;
|
text-align: center;
|
||||||
}
|
text-decoration: none !important;
|
||||||
|
cursor: pointer;
|
||||||
|
*cursor: hand;
|
||||||
/*
|
color: #333 !important;
|
||||||
* Table information
|
border: 1px solid transparent; }
|
||||||
*/
|
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
|
||||||
.dataTables_info {
|
color: white !important;
|
||||||
clear: both;
|
border: 1px solid black;
|
||||||
float: left;
|
background-color: #474747;
|
||||||
color: #333;
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #474747), color-stop(100%, black));
|
||||||
padding-top: 0.55em;
|
/* Chrome,Safari4+ */
|
||||||
}
|
background: -webkit-linear-gradient(top, #474747 0%, black 100%);
|
||||||
|
/* Chrome10+,Safari5.1+ */
|
||||||
|
background: -moz-linear-gradient(top, #474747 0%, black 100%);
|
||||||
/*
|
/* FF3.6+ */
|
||||||
* Pagination
|
background: -ms-linear-gradient(top, #474747 0%, black 100%);
|
||||||
*/
|
/* IE10+ */
|
||||||
.dataTables_paginate {
|
background: -o-linear-gradient(top, #474747 0%, black 100%);
|
||||||
float: right;
|
/* Opera 11.10+ */
|
||||||
text-align: right;
|
background: linear-gradient(to bottom, #474747 0%, #000000 100%);
|
||||||
}
|
/* W3C */ }
|
||||||
|
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
|
||||||
.paginate_button {
|
color: #666 !important;
|
||||||
box-sizing: border-box;
|
border: 1px solid transparent;
|
||||||
display: inline-block;
|
background: transparent;
|
||||||
min-width: 1.5em;
|
box-shadow: none; }
|
||||||
padding: 0.5em 1em;
|
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
|
||||||
color: #333 !important;
|
border: 1px solid gainsboro;
|
||||||
margin-left: 2px;
|
background-color: white;
|
||||||
text-align: center;
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
|
||||||
text-decoration: none !important;
|
/* Chrome,Safari4+ */
|
||||||
cursor: pointer;
|
background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
|
||||||
*cursor: hand;
|
/* Chrome10+,Safari5.1+ */
|
||||||
border: 1px solid transparent;
|
background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
|
||||||
}
|
/* FF3.6+ */
|
||||||
|
background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
|
||||||
.paginate_button.current {
|
/* IE10+ */
|
||||||
color: white !important;
|
background: -o-linear-gradient(top, white 0%, gainsboro 100%);
|
||||||
background-color: black;
|
/* Opera 11.10+ */
|
||||||
border: 1px solid black !important;
|
background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%);
|
||||||
background: -webkit-linear-gradient(top, rgba(72,72,72,1) 0%, rgba(0,0,0,1) 100%) !important;
|
/* W3C */ }
|
||||||
}
|
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
|
||||||
|
outline: none;
|
||||||
.paginate_button:hover {
|
background-color: #f6f6f6;
|
||||||
border: 1px solid #dcdcdc;
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #d7d7d7));
|
||||||
background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(226,226,226,1) 100%);
|
/* Chrome,Safari4+ */
|
||||||
}
|
background: -webkit-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%);
|
||||||
|
/* Chrome10+,Safari5.1+ */
|
||||||
.paginate_button.disabled {
|
background: -moz-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%);
|
||||||
color: #666 !important;
|
/* FF3.6+ */
|
||||||
border: 1px solid transparent !important;
|
background: -ms-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%);
|
||||||
background: transparent !important;
|
/* IE10+ */
|
||||||
}
|
background: -o-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
.paginate_button:active {
|
background: linear-gradient(to bottom, #f6f6f6 0%, #d7d7d7 100%);
|
||||||
outline: none;
|
/* W3C */
|
||||||
}
|
box-shadow: inset 0 0 3px #111; }
|
||||||
|
.dataTables_wrapper .dataTables_processing {
|
||||||
|
position: absolute;
|
||||||
/*
|
top: 50%;
|
||||||
* Processing indicator
|
left: 50%;
|
||||||
*/
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
.dataTables_processing {
|
margin-left: -50%;
|
||||||
position: absolute;
|
margin-top: -25px;
|
||||||
top: 50%;
|
padding-top: 20px;
|
||||||
left: 50%;
|
text-align: center;
|
||||||
width: 100%;
|
font-size: 1.2em;
|
||||||
height: 40px;
|
background-color: white;
|
||||||
margin-left: -50%;
|
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)));
|
||||||
margin-top: -25px;
|
/* Chrome,Safari4+ */
|
||||||
padding-top: 20px;
|
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+ */
|
||||||
text-align: center;
|
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%);
|
||||||
font-size: 1.2em;
|
/* 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%);
|
||||||
background-color: white;
|
/* IE10+ */
|
||||||
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: -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%);
|
||||||
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+ */
|
/* Opera 11.10+ */
|
||||||
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: 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%);
|
||||||
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+ */
|
/* W3C */ }
|
||||||
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+ */
|
.dataTables_wrapper .dataTables_length,
|
||||||
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 */
|
.dataTables_wrapper .dataTables_filter,
|
||||||
}
|
.dataTables_wrapper .dataTables_info,
|
||||||
|
.dataTables_wrapper .dataTables_processing,
|
||||||
|
.dataTables_wrapper .dataTables_paginate {
|
||||||
/*
|
color: #333333; }
|
||||||
* Sorting
|
.dataTables_wrapper .dataTables_scroll {
|
||||||
*/
|
clear: both; }
|
||||||
table.dataTable thead th.sorting_asc,
|
.dataTables_wrapper .dataTables_scrollBody {
|
||||||
table.dataTable thead th.sorting_desc,
|
*margin-top: -1px;
|
||||||
table.dataTable thead th.sorting {
|
-webkit-overflow-scrolling: touch; }
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,10 +1,38 @@
|
|||||||
|
|
||||||
|
//
|
||||||
|
// Colour customisation
|
||||||
|
//
|
||||||
|
|
||||||
|
// Border between the header (and footer) and the table body
|
||||||
|
$table-header-border: 1px solid #111;
|
||||||
|
|
||||||
|
// Border of rows / cells
|
||||||
|
$table-body-border: 1px solid #ddd;
|
||||||
|
|
||||||
|
// Row background colour (hover, striping etc are all based on this colour and
|
||||||
|
// calculated automatically)
|
||||||
|
$table-row-background: #ffffff;
|
||||||
|
|
||||||
|
// Text colour of the interaction control elements (info, filter, paging etc)
|
||||||
|
$table-control-color: #333;
|
||||||
|
|
||||||
|
// Highlight colour of the paging button for the current page
|
||||||
|
$table-paging-button-active: #000;
|
||||||
|
|
||||||
|
// Hover colour of paging buttons on mouse over
|
||||||
|
$table-paging-button-hover: #dcdcdc;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Functions / mixins
|
||||||
|
//
|
||||||
@function tint( $color, $percent ) {
|
@function tint( $color, $percent ) {
|
||||||
@return mix(white, $color, $percent);
|
@return mix(white, $color, $percent);
|
||||||
}
|
}
|
||||||
|
|
||||||
@function shade( $color, $percent ) {
|
@function shade( $color, $percent ) {
|
||||||
@return mix(black, $color, $percent);
|
@return mix(black, $color, $percent);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin gradient( $from, $to ) {
|
@mixin gradient( $from, $to ) {
|
||||||
@ -18,19 +46,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$table-header-border: 1px solid #111;
|
/*
|
||||||
$table-body-border: 1px solid #ddd;
|
* Table styles
|
||||||
$table-row-background: #ffffff;
|
*/
|
||||||
$table-control-color: #333;
|
|
||||||
|
|
||||||
|
|
||||||
table.dataTable {
|
table.dataTable {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
clear: both;
|
clear: both;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
|
|
||||||
// Header and footer styles
|
/*
|
||||||
|
* Header and footer styles
|
||||||
|
*/
|
||||||
thead,
|
thead,
|
||||||
tfoot {
|
tfoot {
|
||||||
th,
|
th,
|
||||||
@ -46,6 +73,10 @@ table.dataTable {
|
|||||||
thead th,
|
thead th,
|
||||||
thead td {
|
thead td {
|
||||||
border-bottom: $table-header-border;
|
border-bottom: $table-header-border;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tfoot th,
|
tfoot th,
|
||||||
@ -53,7 +84,36 @@ table.dataTable {
|
|||||||
border-top: $table-header-border;
|
border-top: $table-header-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Body styles
|
// Sorting
|
||||||
|
thead {
|
||||||
|
.sorting_asc,
|
||||||
|
.sorting_desc,
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Body styles
|
||||||
|
*/
|
||||||
tbody {
|
tbody {
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
@ -184,7 +244,6 @@ table.dataTable {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Control feature layout
|
* Control feature layout
|
||||||
*/
|
*/
|
||||||
@ -193,22 +252,25 @@ table.dataTable {
|
|||||||
clear: both;
|
clear: both;
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
|
|
||||||
|
// Page length options
|
||||||
.dataTables_length {
|
.dataTables_length {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Filtering input
|
||||||
.dataTables_filter {
|
.dataTables_filter {
|
||||||
float: right;
|
float: right;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Table info
|
||||||
.dataTables_info {
|
.dataTables_info {
|
||||||
clear: both;
|
clear: both;
|
||||||
float: left;
|
float: left;
|
||||||
padding-top: 0.55em;
|
padding-top: 0.55em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Paging
|
||||||
.dataTables_paginate {
|
.dataTables_paginate {
|
||||||
float: right;
|
float: right;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@ -230,28 +292,42 @@ table.dataTable {
|
|||||||
&.current,
|
&.current,
|
||||||
&.current:hover {
|
&.current:hover {
|
||||||
color: white !important;
|
color: white !important;
|
||||||
border: 1px solid black;
|
border: 1px solid $table-paging-button-active;
|
||||||
@include gradient( rgba(72,72,72,1), rgba(0,0,0,1) );
|
@include gradient(
|
||||||
|
lighten($table-paging-button-active, 28%),
|
||||||
|
$table-paging-button-active
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&.disabled:hover {
|
&.disabled:hover,
|
||||||
|
&.disabled:active {
|
||||||
color: #666 !important;
|
color: #666 !important;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 1px solid #dcdcdc;
|
border: 1px solid $table-paging-button-hover;
|
||||||
@include gradient( rgba(250,250,250,1), rgba(226,226,226,1) );
|
@include gradient(
|
||||||
|
lighten($table-paging-button-hover, 28%),
|
||||||
|
$table-paging-button-hover
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@include gradient(
|
||||||
|
lighten($table-paging-button-hover, 10%),
|
||||||
|
darken($table-paging-button-hover, 2%)
|
||||||
|
);
|
||||||
|
box-shadow: inset 0 0 3px #111;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Processing
|
||||||
.dataTables_processing {
|
.dataTables_processing {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -281,57 +357,15 @@ table.dataTable {
|
|||||||
.dataTables_paginate {
|
.dataTables_paginate {
|
||||||
color: $table-control-color;
|
color: $table-control-color;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
// Scrolling
|
||||||
|
.dataTables_scroll {
|
||||||
|
clear: both;
|
||||||
.paginate_button {
|
}
|
||||||
display: inline-block;
|
|
||||||
min-width: 1em;
|
.dataTables_scrollBody {
|
||||||
padding: 0.25em;
|
*margin-top: -1px;
|
||||||
}
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
.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…
x
Reference in New Issue
Block a user