From 916e6164e26c41a944281c80990b08ee78a8ff9a Mon Sep 17 00:00:00 2001 From: Greg Roach Date: Tue, 31 Mar 2015 09:43:06 +0100 Subject: [PATCH 1/2] Add RTL support to bootstrap3 plugin (note: requires morteza/bootstrap-rtl) --- .../bootstrap/3/dataTables.bootstrap.css | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/integration/bootstrap/3/dataTables.bootstrap.css b/integration/bootstrap/3/dataTables.bootstrap.css index 2ccacaff..71babc0a 100644 --- a/integration/bootstrap/3/dataTables.bootstrap.css +++ b/integration/bootstrap/3/dataTables.bootstrap.css @@ -1,9 +1,15 @@ +/* RTL support requires morteza/bootstrap-rtl */ + div.dataTables_length label { font-weight: normal; text-align: left; white-space: nowrap; } +[dir=rtl] div.dataTables_length label { + text-align: right; +} + div.dataTables_length select { width: 75px; display: inline-block; @@ -13,18 +19,31 @@ div.dataTables_filter { text-align: right; } +[dir=rtl] div.dataTables_filter { + text-align: left; +} + div.dataTables_filter label { font-weight: normal; white-space: nowrap; text-align: left; } +[dir=rtl] div.dataTables_filter label { + text-align: right; +} + div.dataTables_filter input { margin-left: 0.5em; display: inline-block; width: auto; } +[dir=rtl] div.dataTables_filter input { + margin-left: 0; + margin-right: 0.5em; +} + div.dataTables_info { padding-top: 8px; white-space: nowrap; @@ -36,6 +55,10 @@ div.dataTables_paginate { text-align: right; } +[dir=rtl] div.dataTables_paginate { + text-align: left; +} + div.dataTables_paginate ul.pagination { margin: 2px 0; white-space: nowrap; @@ -90,6 +113,14 @@ table.dataTable thead .sorting_desc:after { font-family: 'Glyphicons Halflings'; opacity: 0.5; } + +[dir=rtl] table.dataTable thead .sorting:after, +[dir=rtl] table.dataTable thead .sorting_asc:after, +[dir=rtl] table.dataTable thead .sorting_desc:after { + right: auto; + left: 8px; +} + table.dataTable thead .sorting:after { opacity: 0.2; content: "\e150"; /* sort */ @@ -115,6 +146,11 @@ table.dataTable thead > tr > th { padding-right: 30px; } +[dir=rtl] table.dataTable thead > tr > th { + padding-left: 30px; + padding-right: 8px; +} + table.dataTable th:active { outline: none; } @@ -125,6 +161,11 @@ table.dataTable.table-condensed thead > tr > th { padding-right: 20px; } +[dir=rtl] table.dataTable.table-condensed thead > tr > th { + padding-left: 20px; + padding-right: 5px; +} + table.dataTable.table-condensed thead .sorting:after, table.dataTable.table-condensed thead .sorting_asc:after, table.dataTable.table-condensed thead .sorting_desc:after { @@ -132,6 +173,13 @@ table.dataTable.table-condensed thead .sorting_desc:after { right: 6px; } +[dir=rtl] table.dataTable.table-condensed thead .sorting:after, +[dir=rtl] table.dataTable.table-condensed thead .sorting_asc:after, +[dir=rtl] table.dataTable.table-condensed thead .sorting_desc:after { + right: auto; + left: 6px; +} + /* Scrolling */ div.dataTables_scrollHead table { margin-bottom: 0 !important; @@ -187,6 +235,14 @@ table.table-bordered th:last-child, table.table-bordered td:last-child { border-right-width: 0; } +[dir=rtl] table.table-bordered th:last-child, +[dir=rtl] table.table-bordered td:last-child { + border-right-width: 1px; +} +[dir=rtl] table.table-bordered th:first-child, +[dir=rtl] table.table-bordered td:first-child { + border-right-width: 0; +} div.dataTables_scrollHead table.table-bordered { border-bottom-width: 0; } @@ -269,6 +325,13 @@ div.DTTT_print_info { box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); } +[dir=rtl] div.DTTT_print_info { + left: auto; + right: 50%; + margin-left: inherit; + margin-right: -200px; +} + div.DTTT_print_info h6 { font-weight: normal; font-size: 28px; @@ -325,6 +388,12 @@ div.DTFC_LeftHeadWrapper table { border-bottom-right-radius: 0 !important; } +[dir=rtl] div.DTFC_RightHeadWrapper table , +[dir=rtl] div.DTFC_LeftHeadWrapper table { + border-top-right-radius: inherit !important; + border-top-left-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, From 126947c96cb322441bfd8ba8099c83d49aa7475a Mon Sep 17 00:00:00 2001 From: Greg Roach Date: Tue, 31 Mar 2015 09:48:39 +0100 Subject: [PATCH 2/2] Consistent use of whitespace --- .../bootstrap/3/dataTables.bootstrap.css | 106 +++++++++--------- 1 file changed, 52 insertions(+), 54 deletions(-) mode change 100644 => 100755 integration/bootstrap/3/dataTables.bootstrap.css diff --git a/integration/bootstrap/3/dataTables.bootstrap.css b/integration/bootstrap/3/dataTables.bootstrap.css old mode 100644 new mode 100755 index 71babc0a..77848802 --- a/integration/bootstrap/3/dataTables.bootstrap.css +++ b/integration/bootstrap/3/dataTables.bootstrap.css @@ -78,7 +78,6 @@ div.dataTables_paginate ul.pagination { } } - table.dataTable td, table.dataTable th { -webkit-box-sizing: content-box; @@ -86,7 +85,6 @@ table.dataTable th { box-sizing: content-box; } - table.dataTable { clear: both; margin-top: 6px !important; @@ -125,12 +123,15 @@ table.dataTable thead .sorting:after { opacity: 0.2; content: "\e150"; /* sort */ } + table.dataTable thead .sorting_asc:after { content: "\e155"; /* sort-by-attributes */ } + table.dataTable thead .sorting_desc:after { content: "\e156"; /* sort-by-attributes-alt */ } + div.dataTables_scrollBody table.dataTable thead .sorting:after, div.dataTables_scrollBody table.dataTable thead .sorting_asc:after, div.dataTables_scrollBody table.dataTable thead .sorting_desc:after { @@ -155,7 +156,6 @@ table.dataTable th:active { outline: none; } - /* Condensed */ table.dataTable.table-condensed thead > tr > th { padding-right: 20px; @@ -216,11 +216,13 @@ div.dataTables_scrollFoot table { 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; @@ -228,28 +230,29 @@ table.table-bordered tbody td { } table.table-bordered tfoot th, table.table-bordered tfoot td { - border-left-width: 0; - border-bottom-width: 0; + border-left-width: 0; + border-bottom-width: 0; } + table.table-bordered th:last-child, table.table-bordered td:last-child { border-right-width: 0; } + [dir=rtl] table.table-bordered th:last-child, [dir=rtl] table.table-bordered td:last-child { border-right-width: 1px; } + [dir=rtl] table.table-bordered th:first-child, [dir=rtl] table.table-bordered td:first-child { border-right-width: 0; } + div.dataTables_scrollHead table.table-bordered { border-bottom-width: 0; } - - - /* * TableTools styles */ @@ -283,7 +286,7 @@ div.DTTT .btn:hover { } ul.DTTT_dropdown.dropdown-menu { - z-index: 2003; + z-index: 2003; } ul.DTTT_dropdown.dropdown-menu a { @@ -300,7 +303,7 @@ ul.DTTT_dropdown.dropdown-menu li:hover a { } div.DTTT_collection_background { - z-index: 2002; + z-index: 2002; } /* TableTools information display */ @@ -320,7 +323,7 @@ div.DTTT_print_info { 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); } @@ -345,28 +348,26 @@ div.DTTT_print_info p { } 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%); + 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%); } - - /* * FixedColumns styles */ @@ -375,53 +376,52 @@ div.DTFC_LeftFootWrapper table, div.DTFC_RightHeadWrapper table, div.DTFC_RightFootWrapper table, table.DTFC_Cloned tr.even { - background-color: white; - margin-bottom: 0; + 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; + margin-bottom: 0 !important; + border-top-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; } - + [dir=rtl] div.DTFC_RightHeadWrapper table , [dir=rtl] div.DTFC_LeftHeadWrapper table { - border-top-right-radius: inherit !important; - border-top-left-radius: 0 !important; + border-top-right-radius: inherit !important; + border-top-left-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; + 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; + 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; + border-top: none; } - + div.DTFC_RightFootWrapper table, div.DTFC_LeftFootWrapper table { - border-top: none; - margin-top: 0 !important; + border-top: none; + margin-top: 0 !important; } - div.DTFC_LeftBodyWrapper table.dataTable thead .sorting:after, div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_asc:after, div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_desc:after, @@ -431,11 +431,9 @@ div.DTFC_RightBodyWrapper table.dataTable thead .sorting_desc:after { display: none; } - /* * FixedHeader styles */ div.FixedHeader_Cloned table { margin: 0 !important } -