Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | /*** |
| 2 | Datatables general customization |
||
| 3 | ***/ |
||
| 4 | |||
| 5 | .table-checkable { |
||
| 6 | tr > th:first-child, |
||
| 7 | tr > td:first-child { |
||
| 8 | text-align: center; |
||
| 9 | max-width: 50px; |
||
| 10 | min-width: 40px; |
||
| 11 | padding-left: 0; |
||
| 12 | padding-right: 0; |
||
| 13 | } |
||
| 14 | } |
||
| 15 | |||
| 16 | table.dataTable thead th, |
||
| 17 | table.dataTable thead td { |
||
| 18 | border-bottom: 2px solid $table-border-color; |
||
| 19 | outline: none !important; |
||
| 20 | } |
||
| 21 | |||
| 22 | // remove bottom border |
||
| 23 | table.dataTable.no-footer { |
||
| 24 | border-bottom-color: $table-border-color; |
||
| 25 | } |
||
| 26 | |||
| 27 | table.dataTable tr.heading > th { |
||
| 28 | background-color: $table-bg-accent; |
||
| 29 | } |
||
| 30 | |||
| 31 | // columb order |
||
| 32 | table.dataTable td, |
||
| 33 | table.dataTable th { |
||
| 34 | &.sorting_1, |
||
| 35 | &.sorting_2, |
||
| 36 | &.sorting_3 { |
||
| 37 | background: $table-bg-accent !important; |
||
| 38 | } |
||
| 39 | } |
||
| 40 | |||
| 41 | /*** |
||
| 42 | Extended pagination |
||
| 43 | ***/ |
||
| 44 | |||
| 45 | .paging_bootstrap_extended { |
||
| 46 | margin: 5px 0 0 0 !important; |
||
| 47 | padding: 0 !important; |
||
| 48 | float: none !important; |
||
| 49 | font-size: 13px; |
||
| 50 | } |
||
| 51 | |||
| 52 | .dataTables_extended_wrapper { |
||
| 53 | margin-top: 10px; |
||
| 54 | |||
| 55 | .seperator { |
||
| 56 | padding: 0 2px; |
||
| 57 | } |
||
| 58 | |||
| 59 | .table.dataTable { |
||
| 60 | margin: 20px 0 !important; |
||
| 61 | } |
||
| 62 | |||
| 63 | div.dataTables_paginate, |
||
| 64 | div.dataTables_length, |
||
| 65 | div.dataTables_info { |
||
| 66 | display: inline-block; |
||
| 67 | float: none !important; |
||
| 68 | padding: 0 !important; |
||
| 69 | margin: 0 !important; |
||
| 70 | position: static !important; |
||
| 71 | } |
||
| 72 | |||
| 73 | .table-group-actions > span { |
||
| 74 | font-size: 13px; |
||
| 75 | } |
||
| 76 | |||
| 77 | // scroller extension integration |
||
| 78 | &.DTS { |
||
| 79 | .paging_bootstrap_extended { |
||
| 80 | display: inline-block; |
||
| 81 | } |
||
| 82 | |||
| 83 | .dataTables_info { |
||
| 84 | display: inline-block; |
||
| 85 | padding-top: 8px !important; |
||
| 86 | |||
| 87 | .seperator { |
||
| 88 | display: none; |
||
| 89 | } |
||
| 90 | } |
||
| 91 | |||
| 92 | .dataTables_scrollHead { |
||
| 93 | border-bottom: 0 !important; |
||
| 94 | .dataTables_scrollHeadInner { |
||
| 95 | .table.dataTable { |
||
| 96 | margin-bottom: 0 !important; |
||
| 97 | } |
||
| 98 | } |
||
| 99 | } |
||
| 100 | |||
| 101 | .dataTables_scrollBody { |
||
| 102 | border-bottom: 0 !important; |
||
| 103 | .table.dataTable { |
||
| 104 | margin: 0 !important; |
||
| 105 | } |
||
| 106 | } |
||
| 107 | } |
||
| 108 | } |
||
| 109 | |||
| 110 | @media (max-width: 480px) { |
||
| 111 | |||
| 112 | .dataTables_extended_wrapper div.dataTables_paginate, |
||
| 113 | .dataTables_extended_wrapper div.dataTables_length, |
||
| 114 | .dataTables_extended_wrapper div.dataTables_info { |
||
| 115 | display: block; |
||
| 116 | margin-bottom: 10px !important; |
||
| 117 | } |
||
| 118 | |||
| 119 | .dataTables_extended_wrapper .seperator { |
||
| 120 | display: none !important; |
||
| 121 | } |
||
| 122 | } |
||
| 123 | |||
| 124 | .dataTables_extended_wrapper div.dataTables_length label { |
||
| 125 | margin: 0 !important; |
||
| 126 | padding: 0 !important; |
||
| 127 | font-size: 13px; |
||
| 128 | float: none !important; |
||
| 129 | display: inline-block !important; |
||
| 130 | } |
||
| 131 | |||
| 132 | .table-container .table-actions-wrapper { |
||
| 133 | display: none; |
||
| 134 | } |
||
| 135 | |||
| 136 | /*** |
||
| 137 | Scroller Extension |
||
| 138 | ***/ |
||
| 139 | |||
| 140 | .dataTables_scroll { |
||
| 141 | margin-bottom: 10px; |
||
| 142 | } |
||
| 143 | |||
| 144 | .dataTables_scrollHead { |
||
| 145 | border-bottom: 2px solid $table-border-color !important; |
||
| 146 | |||
| 147 | thead { |
||
| 148 | th { |
||
| 149 | border-bottom: 0 !important; |
||
| 150 | } |
||
| 151 | } |
||
| 152 | } |
||
| 153 | |||
| 154 | .dataTables_scrollBody { |
||
| 155 | border-bottom: 1px solid $table-border-color !important; |
||
| 156 | } |
||
| 157 | |||
| 158 | .table-both-scroll .dataTables_scrollBody { |
||
| 159 | border-bottom: 0 !important; |
||
| 160 | } |
||
| 161 | |||
| 162 | /*** |
||
| 163 | Datatables processing |
||
| 164 | ***/ |
||
| 165 | |||
| 166 | .dataTables_wrapper .dataTables_processing { |
||
| 167 | width: 200px; |
||
| 168 | display: inline-block; |
||
| 169 | padding: 7px; |
||
| 170 | left: 50%; |
||
| 171 | margin-left: -100px; |
||
| 172 | margin-top: 10px; |
||
| 173 | text-align: center; |
||
| 174 | color: $general-panel-font-color; |
||
| 175 | border: 1px solid darken($general-panel-bg-color, 3%); |
||
| 176 | background: darken($general-panel-bg-color, 1); |
||
| 177 | vertical-align: middle; |
||
| 178 | -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); |
||
| 179 | -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); |
||
| 180 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); |
||
| 181 | } |
||
| 182 | |||
| 183 | /*** |
||
| 184 | Tool Buttons |
||
| 185 | ***/ |
||
| 186 | |||
| 187 | .dt-button-background { |
||
| 188 | display: none !important; |
||
| 189 | } |
||
| 190 | |||
| 191 | div.dt-button-collection { |
||
| 192 | border: 1px solid #eee; |
||
| 193 | background: #ffffff; |
||
| 194 | box-shadow: $dropdown-shadow; |
||
| 195 | padding: 0; |
||
| 196 | |||
| 197 | > a.dt-button { |
||
| 198 | background: none; |
||
| 199 | padding: 8px 16px; |
||
| 200 | font-weight: 300; |
||
| 201 | margin: 1px 1px; |
||
| 202 | box-shadow: none !important; |
||
| 203 | border: 0 !important; |
||
| 204 | |||
| 205 | > span { |
||
| 206 | font-size: 14px; |
||
| 207 | color: #333; |
||
| 208 | } |
||
| 209 | |||
| 210 | &.active { |
||
| 211 | background: lighten(#eee, 3%) !important; |
||
| 212 | box-shadow: none !important; |
||
| 213 | border: 0 !important; |
||
| 214 | |||
| 215 | > span { |
||
| 216 | color: #333; |
||
| 217 | } |
||
| 218 | } |
||
| 219 | } |
||
| 220 | } |
||
| 221 | |||
| 222 | button.dt-button, |
||
| 223 | div.dt-button, |
||
| 224 | a.dt-button { |
||
| 225 | background-image: none !important; |
||
| 226 | padding: 6px 12px !important; |
||
| 227 | |||
| 228 | &:last-child { |
||
| 229 | margin-right: 0; |
||
| 230 | } |
||
| 231 | } |
||
| 232 | |||
| 233 | .dataTables_wrapper .dt-buttons { |
||
| 234 | float: right; |
||
| 235 | |||
| 236 | .portlet.light & { |
||
| 237 | margin-top: -64px; |
||
| 238 | } |
||
| 239 | |||
| 240 | .portlet.box & { |
||
| 241 | margin-top: -50px; |
||
| 242 | } |
||
| 243 | } |
||
| 244 | |||
| 245 | /*** |
||
| 246 | Rot Details |
||
| 247 | ***/ |
||
| 248 | |||
| 249 | .dataTable .row-details.row-details-close { |
||
| 250 | background: url("../img/datatable-row-openclose.png") no-repeat 0 0; |
||
| 251 | } |
||
| 252 | |||
| 253 | .dataTable .row-details.row-details-open { |
||
| 254 | background: url("../img/datatable-row-openclose.png") no-repeat 0 -23px ; |
||
| 255 | } |
||
| 256 | |||
| 257 | /*** |
||
| 258 | Sorting |
||
| 259 | ***/ |
||
| 260 | |||
| 261 | table.dataTable thead .sorting, |
||
| 262 | table.dataTable thead .sorting_asc, |
||
| 263 | table.dataTable thead .sorting_desc, |
||
| 264 | table.dataTable thead .sorting_asc_disabled, |
||
| 265 | table.dataTable thead .sorting_desc_disabled { |
||
| 266 | cursor: pointer; |
||
| 267 | |||
| 268 | &:after { |
||
| 269 | display: none; |
||
| 270 | } |
||
| 271 | } |
||
| 272 | |||
| 273 | table.dataTable thead .sorting { background: url('../plugins/datatables/images/sort_both.png') no-repeat center right; } |
||
| 274 | table.dataTable thead .sorting_asc { background: url('../plugins/datatables/images/sort_asc.png') no-repeat center right; } |
||
| 275 | table.dataTable thead .sorting_desc { background: url('../plugins/datatables/images/sort_desc.png') no-repeat center right; } |
||
| 276 | |||
| 277 | table.dataTable thead .sorting_asc_disabled { background: url('../plugins/datatables/images/sort_asc_disabled.png') no-repeat center right; } |
||
| 278 | table.dataTable thead .sorting_desc_disabled { background: url('../plugins/datatables/images/sort_desc_disabled.png') no-repeat center right; } |
||
| 279 | |||
| 280 | table.dataTable th:active { |
||
| 281 | outline: none; |
||
| 282 | } |
||
| 283 | |||
| 284 | /*** |
||
| 285 | Fixed Header |
||
| 286 | ***/ |
||
| 287 | |||
| 288 | table.dataTable.fixedHeader-floating { |
||
| 289 | margin-top: 0 !important; |
||
| 290 | margin-bottom: 0 !important; |
||
| 291 | border: 1px solid darken($table-border-color, 3%); |
||
| 292 | |||
| 293 | -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); |
||
| 294 | -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); |
||
| 295 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); |
||
| 296 | } |
||
| 297 | |||
| 298 | .table-header-fixed thead > tr > th { |
||
| 299 | border-top: 0; |
||
| 300 | } |
||
| 301 | |||
| 302 | .table>tfoot>tr>th, |
||
| 303 | .table>tfoot>tr>td { |
||
| 304 | border-bottom: 0; |
||
| 305 | padding: 10px 18px; |
||
| 306 | border-top: 1px solid $table-border-color; |
||
| 307 | font-weight: 600; |
||
| 308 | } |
||
| 309 | |||
| 310 | /*** |
||
| 311 | Responsive Datatables |
||
| 312 | ***/ |
||
| 313 | .table.dataTable.dt-responsive |
||
| 314 | .table.dataTable.responsive { |
||
| 315 | width: 100%; |
||
| 316 | } |
||
| 317 | |||
| 318 | table.dataTable.dtr-column > tbody > tr > td.control, |
||
| 319 | table.dataTable.dtr-column > tbody > tr > th.control { |
||
| 320 | text-align: center; |
||
| 321 | width: 14px; |
||
| 322 | } |
||
| 323 | |||
| 324 | table.dataTable.dtr-column>tbody>tr>td.control:before, table.dataTable.dtr-column>tbody>tr>th.control:before { |
||
| 325 | margin-left: -8px; |
||
| 326 | text-align: center; |
||
| 327 | text-indent: 0; |
||
| 328 | line-height: 0; |
||
| 329 | } |
||
| 330 | |||
| 331 | |||
| 332 | table.dataTable.dtr-column > tbody > tr > td.control:before, |
||
| 333 | table.dataTable.dtr-column > tbody > tr > th.control:before, |
||
| 334 | table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, |
||
| 335 | table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before { |
||
| 336 | box-shadow: none !important; |
||
| 337 | background-color: darken($general-panel-bg-color, 20%); |
||
| 338 | font-weight: 300; |
||
| 339 | vertical-align: middle; |
||
| 340 | line-height: 16px; |
||
| 341 | border: 0; |
||
| 342 | } |
||
| 343 | |||
| 344 | table.dataTable.dtr-column > tbody > tr.parent td.control:before, |
||
| 345 | table.dataTable.dtr-column > tbody > tr.parent th.control:before, |
||
| 346 | table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, |
||
| 347 | table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before { |
||
| 348 | background-color: $brand-success; |
||
| 349 | font-weight: 300; |
||
| 350 | vertical-align: middle; |
||
| 351 | border: 0; |
||
| 352 | } |
||
| 353 | |||
| 354 | table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, |
||
| 355 | table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before { |
||
| 356 | top: 10px; |
||
| 357 | } |
||
| 358 | |||
| 359 | table.dataTable.dtr-column > tbody > tr > td.control:before, |
||
| 360 | table.dataTable.dtr-column > tbody > tr > th.control:before { |
||
| 361 | text-align: center; |
||
| 362 | margin-top: -8px; |
||
| 363 | } |
||
| 364 | |||
| 365 | table.dataTable > tbody > tr.child ul li { |
||
| 366 | border: 0; |
||
| 367 | } |
||
| 368 | |||
| 369 | // firefox fix for ajax datatables in portlet |
||
| 370 | @-moz-document url-prefix() { |
||
| 371 | .portlet-datatable { |
||
| 372 | .dataTables_wrapper { |
||
| 373 | .table-responsive { |
||
| 374 | padding: 0 2px !important; |
||
| 375 | } |
||
| 376 | } |
||
| 377 | } |
||
| 378 | } |
||
| 379 | |||
| 380 | // datatable buttons fix on mobile mode |
||
| 381 | |||
| 382 | @media (max-width: $screen-xs-max) { /* 767px */ |
||
| 383 | |||
| 384 | .portlet.box .dataTables_wrapper .dt-buttons, |
||
| 385 | .portlet.light .dataTables_wrapper .dt-buttons { |
||
| 386 | margin-top: 0; |
||
| 387 | margin-bottom: 20px; |
||
| 388 | |||
| 389 | > .dt-button { |
||
| 390 | margin-top: 5px; |
||
| 391 | } |
||
| 392 | } |
||
| 393 | } |
||
| 394 | |||
| 395 | // datatable dropdown menu fix |
||
| 396 | |||
| 397 | .table-scrollable .dataTable th > .btn-group, |
||
| 398 | .table-scrollable .dataTable td > .btn-group { |
||
| 399 | position: absolute; |
||
| 400 | margin-top: -2px; |
||
| 401 | } |
||
| 402 | |||
| 403 | // popover plugin integration |
||
| 404 | .dataTable td .popover-content .btn-group { |
||
| 405 | position: static !important; |
||
| 406 | } |
||
| 407 | |||
| 408 | .table .btn-group .btn { |
||
| 409 | margin-left: 0; |
||
| 410 | margin-right: -1px; |
||
| 411 | } |