Created
August 23, 2013 14:32
-
-
Save Anenth/6319964 to your computer and use it in GitHub Desktop.
CSS: Bootstrap icons and theme for DataTables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.dataTables_wrapper { | |
position: relative; | |
clear: both; | |
zoom: 1; /* Feeling sorry for IE */ | |
} | |
.dataTables_length { | |
float: right; | |
width:40%; | |
text-align:right; | |
padding-right:10px | |
} | |
.dataTables_filter { | |
width: 50%; | |
float: left; | |
padding-left:10px; | |
text-align: left; | |
} | |
.dataTables_filter label,.dataTables_length label{ | |
padding-top:10px; | |
font-weight:normal; | |
} | |
.dataTables_filter input,.dataTables_length select{ | |
display: inline-block; | |
height: 34px; | |
padding: 6px 12px; | |
font-size: 14px; | |
line-height: 1.428571429; | |
color: rgb(85, 85, 85); | |
vertical-align: middle; | |
background-color: rgb(255, 255, 255); | |
border: 1px solid rgb(204, 204, 204); | |
border-radius: 4px; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
} | |
.dataTables_length select{ | |
padding:4px 4px; | |
} | |
.dataTables_paginate { | |
float: right; | |
text-align: right; | |
} | |
.dataTables_info{ | |
bottom:0; | |
font-size:90%; | |
font-style: italic; | |
color: #888; | |
margin-left: 10px; | |
} | |
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
* DataTables display | |
*/ | |
table.display { | |
margin: 0 auto; | |
clear: both; | |
width: 100%; | |
} | |
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
* DataTables sorting | |
*/ | |
.sorting_asc:before,.sorting_desc:before,.sorting:before,.paginate_disabled_next:before,.paginate_disabled_previous:before,.paginate_enabled_previous:before,.paginate_enabled_next:before{ | |
position: relative; | |
top: 2px; | |
display: inline-block; | |
font-family: 'Glyphicons Halflings'; | |
-webkit-font-smoothing: antialiased; | |
font-style: normal; | |
font-weight: normal; | |
float:right; | |
line-height: 1; | |
color:#555; | |
} | |
.sorting_asc:before{ | |
content: "\e151"; | |
} | |
.sorting_desc:before { | |
content: "\e152"; | |
} | |
.sorting:before { | |
content: "\e150"; | |
color:#ddd; | |
} | |
/* Pagination nested */ | |
.paginate_disabled_previous, .paginate_enabled_previous, | |
.paginate_disabled_next, .paginate_enabled_next { | |
height: 19px; | |
float: left; | |
cursor: pointer; | |
*cursor: hand; | |
} | |
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover, | |
.paginate_disabled_next:hover, .paginate_enabled_next:hover { | |
text-decoration: none ; | |
} | |
.paginate_disabled_previous:active, .paginate_enabled_previous:active, | |
.paginate_disabled_next:active, .paginate_enabled_next:active { | |
outline: none; | |
} | |
.paginate_disabled_previous, .paginate_enabled_previous { | |
padding-left: 23px; | |
} | |
.paginate_disabled_next, .paginate_enabled_next { | |
padding-right: 23px; | |
margin-left: 10px; | |
} | |
.paginate_disabled_next:before,.paginate_disabled_previous:before,.paginate_disabled_next,.paginate_disabled_previous{ | |
color:#bbb!important; | |
cursor:default; | |
} | |
.paginate_enabled_next:before,.paginate_enabled_previous:before,.paginate_enabled_next,.paginate_enabled_previous{ | |
color:#bbb; | |
} | |
.paginate_disabled_next:before,.paginate_enabled_next:before { | |
margin-left:5px; | |
content: "\e080"; | |
} | |
.paginate_disabled_previous:before,.paginate_enabled_previous:before{ | |
float:left; | |
margin-right:5px; | |
content: "\e079"; | |
} | |
.paginate_enabled_next:before:hover,.paginate_enabled_previous:before:hover.paginate_enabled_next:hover,.paginate_enabled_previous:hover { | |
color:red; | |
} | |
table.display thead th:active, | |
table.display thead td:active { | |
outline: none; | |
} | |
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
* Misc | |
*/ | |
.dataTables_scroll { | |
clear: both; | |
} | |
.dataTables_scrollBody { | |
*margin-top: -1px; | |
-webkit-overflow-scrolling: touch; | |
} | |
.top, .bottom { | |
padding: 15px; | |
background-color: #F5F5F5; | |
border: 1px solid #CCCCCC; | |
} | |
.top .dataTables_info { | |
float: none; | |
} | |
.clear { | |
clear: both; | |
} | |
.dataTables_empty { | |
text-align: center; | |
} | |
tfoot input { | |
margin: 0.5em 0; | |
width: 100%; | |
color: #444; | |
} | |
tfoot input.search_init { | |
color: #999; | |
} | |
td.group { | |
background-color: #d1cfd0; | |
border-bottom: 2px solid #A19B9E; | |
border-top: 2px solid #A19B9E; | |
} | |
td.details { | |
background-color: #d1cfd0; | |
border: 2px solid #A19B9E; | |
} | |
.example_alt_pagination div.dataTables_info { | |
width: 40%; | |
} | |
.paging_full_numbers { | |
width: 400px; | |
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; | |
padding: 2px 5px; | |
margin: 0 3px; | |
cursor: pointer; | |
*cursor: hand; | |
color: #333 !important; | |
} | |
.paging_full_numbers a.paginate_button { | |
background-color: #ddd; | |
} | |
.paging_full_numbers a.paginate_button:hover { | |
background-color: #ccc; | |
text-decoration: none !important; | |
} | |
.paging_full_numbers a.paginate_active { | |
background-color: #99B3FF; | |
} | |
table.display tr.even.row_selected td { | |
background-color: #B0BED9; | |
} | |
table.display tr.odd.row_selected td { | |
background-color: #9FAFD1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment