diff --git a/README.md b/README.md index d15d0f4..f04537b 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,8 @@ Or you can copy and include JS and CSS files directly to your HTML page: Code dependencies: -* Bootstrap 3.* (include Font-Awesome) +* Bootstrap 3.* +* Font Awesome 4.* * jQuery DataTables plugin 1.10.* Fork changes diff --git a/bower.json b/bower.json index a5211d9..e07aeef 100644 --- a/bower.json +++ b/bower.json @@ -1,12 +1,14 @@ { "name": "datatables-bootstrap3-plugin", - "version": "0.1.0", + "version": "0.2.0", "main": [ "media/css/datatables-bootstrap3.css", + "media/css/datatables-bootstrap3.less", "media/js/datatables-bootstrap3.js" ], "dependencies": { "bootstrap": "3.3.x", + "components-font-awesome": "4.2.x", "datatables": "1.10.x" }, "description": "jQuery DataTables plugin and Bootstrap 3 integration", @@ -19,6 +21,7 @@ ], "ignore": [ ".gitignore", - "example" + "example", + "README.md" ] } \ No newline at end of file diff --git a/media/css/datatables-bootstrap3.less b/media/css/datatables-bootstrap3.less new file mode 100644 index 0000000..dd38a51 --- /dev/null +++ b/media/css/datatables-bootstrap3.less @@ -0,0 +1,298 @@ +div.dataTables_length { + label { + font-weight: normal; + text-align: left; + white-space: nowrap; + } + select { + width: 75px; + display: inline-block; + } +} +div.dataTables_filter { + text-align: right; + label { + font-weight: normal; + white-space: nowrap; + text-align: left; + } + input { + margin-left: 0.5em; + display: inline-block; + } +} +div.dataTables_info { + padding-top: 8px; + white-space: nowrap; +} +div.dataTables_paginate { + margin: 0; + white-space: nowrap; + text-align: right; + ul.pagination { + margin: 2px 0; + white-space: nowrap; + } + li.first { + a:before { + content: "\f100"; + } + } + li.previous { + a:before { + content: "\f104"; + } + } + li.next { + a:after { + content: "\f105"; + } + } + li.last { + a:after { + content: "\f101"; + } + } +} +div.dataTables_paginate li.first &>a,div.dataTables_paginate li.previous &>a { + position: relative; + padding-left: 24px; +} +div.dataTables_paginate li.next &>a,div.dataTables_paginate li.last &>a { + position: relative; + padding-right: 24px; +} +div.dataTables_paginate li.first a:before,div.dataTables_paginate li.previous a:before { + position: absolute; + top: 6px; + left: 10px; + display: block; + font-family: FontAwesome; +} +div.dataTables_paginate li.next a:after,div.dataTables_paginate li.last a:after { + position: absolute; + top: 6px; + right: 10px; + display: block; + font-family: FontAwesome; +} +table.dataTable td,table.dataTable th { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +table.dataTable { + clear: both; + margin-top: 6px !important; + margin-bottom: 6px !important; + max-width: none !important; + thead { + th { + position: relative; + background-image: none !important; + } + th.sorting:after { + content: "\f0dc"; + color: #ddd; + font-size: 0.8em; + padding-top: 0.12em; + } + th.sorting_asc:after { + content: "\f0de"; + } + th.sorting_desc:after { + content: "\f0dd"; + } + & > tr { + & > th { + padding-left: 18px; + padding-right: 18px; + } + } + } + th:active { + outline: none; + } +} +table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled { + cursor: pointer; +} +table.dataTable thead th.sorting:after,table.dataTable thead th.sorting_asc:after,table.dataTable thead th.sorting_desc:after { + position: absolute; + top: 12px; + right: 8px; + display: block; + font-family: FontAwesome; +} +div.dataTables_scrollBody table.dataTable thead th.sorting:after,div.dataTables_scrollBody table.dataTable thead th.sorting_asc:after,div.dataTables_scrollBody table.dataTable thead th.sorting_desc:after { + content: ""; +} +table.table thead th.sorting:after,table.table thead th.sorting_asc:after,table.table thead th.sorting_desc:after { + top: 8px; +} +div.dataTables_scrollHead { + table { + margin-bottom: 0 !important; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + table.table-bordered { + border-bottom-width: 0; + } +} +div.dataTables_scrollHead table thead tr:last-child th:first-child,div.dataTables_scrollHead table thead tr:last-child td:first-child { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +div.dataTables_scrollBody { + table { + border-top: none; + margin-top: 0 !important; + margin-bottom: 0 !important; + } +} +div.dataTables_scrollBody tbody tr:first-child th,div.dataTables_scrollBody tbody tr:first-child td { + border-top: none; +} +div.dataTables_scrollFoot { + table { + margin-top: 0 !important; + border-top: none; + } +} +table.table-bordered.dataTable { + border-collapse: separate !important; +} +table.table-bordered thead th,table.table-bordered thead td { + border-left-width: 0; + border-top-width: 0; +} +table.table-bordered tbody th,table.table-bordered tbody td { + border-left-width: 0; + border-bottom-width: 0; +} +table.table-bordered th:last-child,table.table-bordered td:last-child { + border-right-width: 0; +} +.table.dataTable tbody tr.active td,.table.dataTable tbody tr.active th { + background-color: #08C; + color: white; +} +.table.dataTable tbody tr.active:hover td,.table.dataTable tbody tr.active:hover th { + background-color: #0075b0 !important; +} +.table.dataTable tbody tr.active th &>a,.table.dataTable tbody tr.active td &>a { + color: white; +} +.table-striped.dataTable tbody tr.active:nth-child(odd) td,.table-striped.dataTable tbody tr.active:nth-child(odd) th { + background-color: #017ebc; +} +table.DTTT_selectable { + tbody { + tr { + cursor: pointer; + } + } +} +div.DTTT { + .btn:hover { + text-decoration: none !important; + } +} +ul.DTTT_dropdown.dropdown-menu { + z-index: 2003; + a { + color: #333 !important; + } + li { + position: relative; + } + li:hover { + a { + background-color: #0088cc; + color: white !important; + } + } +} +div.DTTT_collection_background { + z-index: 2002; +} +div.DTTT_print_info { + position: fixed; + top: 50%; + left: 50%; + width: 400px; + height: 150px; + margin-left: -200px; + margin-top: -75px; + text-align: center; + color: #333; + padding: 10px 30px; + opacity: 0.95; + background-color: white; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); + h6 { + font-weight: normal; + font-size: 28px; + line-height: 28px; + margin: 1em; + } + p { + font-size: 14px; + line-height: 20px; + } +} +div.dataTables_processing { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 60px; + margin-left: -50%; + margin-top: -25px; + padding-top: 20px; + padding-bottom: 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))); + 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%); + 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%); + 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: -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: 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%); +} +div.DTFC_LeftHeadWrapper table,div.DTFC_LeftFootWrapper table,div.DTFC_RightHeadWrapper table,div.DTFC_RightFootWrapper table,table.DTFC_Cloned tr.even { + background-color: white; + margin-bottom: 0; +} +div.DTFC_RightHeadWrapper table ,div.DTFC_LeftHeadWrapper table { + border-bottom: none !important; + margin-bottom: 0 !important; + border-top-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +div.DTFC_RightBodyWrapper table,div.DTFC_LeftBodyWrapper table { + border-top: none; + margin: 0 !important; +} +div.DTFC_RightBodyWrapper tbody tr:first-child th,div.DTFC_RightBodyWrapper tbody tr:first-child td,div.DTFC_LeftBodyWrapper tbody tr:first-child th,div.DTFC_LeftBodyWrapper tbody tr:first-child td { + border-top: none; +} +div.DTFC_RightFootWrapper table,div.DTFC_LeftFootWrapper table { + border-top: none; + margin-top: 0 !important; +} +div.FixedHeader_Cloned { + table { + margin: 0 !important; + } +}