/* ------------------------------------------------------------------------------ * * # Datatables library * * Add advanced interaction controls to any HTML table * * Version: 1.2 * Latest update: Mar 10, 2016 * * ---------------------------------------------------------------------------- */ // Base // ------------------------------ // Table container .dataTable { margin: 0; max-width: none; border-collapse: separate; // Header thead { th, td { outline: 0; position: relative; } // Add hand cursor to sortable cells .sorting_asc, .sorting_desc, .sorting { cursor: pointer; } // Add right space to avoid text overlap over arrow .sorting, .sorting_asc, .sorting_desc, .sorting_asc_disabled, .sorting_desc_disabled { padding-right: (@content-padding-large * 2); } // Add sorting icon base .sorting:before, .sorting:after, .sorting_asc:after, .sorting_desc:after, .sorting_asc_disabled:after, .sorting_desc_disabled:after { content: ''; font-family: 'icomoon'; position: absolute; top: 50%; right: @content-padding-large; font-size: @font-size-small; margin-top: -(@font-size-small / 2); display: inline-block; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Icons .sorting { &:before { content: '\e9c1'; margin-top: -2px; color: @text-muted; } &:after { content: '\e9c2'; margin-top: -10px; color: @text-muted; } } .sorting_asc:after { content: '\e9c2'; } .sorting_desc:after { content: '\e9c1'; } .sorting_asc_disabled:after { content: '\e9c2'; color: #ccc; } .sorting_desc_disabled:after { content: '\e9c1'; color: #ccc; } } // Body tbody { // Remove top border in first row > tr:first-child { > th, > td { border-top: 0; } } // Remove top border from thead by default + thead, + tfoot + thead { > tr:first-child { > th, > td { border-top: 0; } } } } // Center text in empty table .dataTables_empty { text-align: center; } // Collapse borders in bordered table &.table-bordered { border-collapse: collapse; } // If table has .media container, remove width from .media-body .media-body { width: auto; } } // Wrapper .dataTables_wrapper { position: relative; clear: both; // Clearfix &:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } // Remove top border from bordered table .table-bordered { border-top: 0; } // Add top border if panel body comes after wrapper + .panel-body { border-top: 1px solid @table-border-color; } } // Processing indicator .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 100%; height: 40px; margin-left: -50%; margin-top: -25px; padding-top: 20px; text-align: center; background-color: #fff; 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%); } // Header and footer // ------------------------------ // Common .datatable-header, .datatable-footer { padding: @line-height-computed @content-padding-large 0 @content-padding-large; // Clearing floats &:after { content: ""; display: table; clear: both; } // Remove left margin from the first item > div:first-child { margin-left: 0; } // Remove horizontal spacing if inside panel body .panel-body & { padding-left: 0; padding-right: 0; } // Highlight header of footer with .*-accent class &-accent { background-color: @table-bg-accent; } } // Header .datatable-header { border-bottom: 1px solid @table-border-color; } // Footer .datatable-footer { border-top: 1px solid @table-border-highlight; } // Controls // ------------------------------ // Length menu .dataTables_length { float: right; display: inline-block; margin: 0 0 @line-height-computed @content-padding-large; // Text label > label { margin-bottom: 0; // Text, excluding select2 container > span:first-child { float: left; margin: (@padding-base-vertical + 1) @content-padding-base; margin-left: 0; } } // Apply default .form-control styles to select select { height: @input-height-base; padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; line-height: @line-height-base; color: @text-color; background-color: @input-bg; border: 1px solid @input-border; outline: 0; } // Left display option .length-left & { float: left; } // Adjust Select2 menu .select2-container { width: auto; } .select2-choice { min-width: 60px; } } // Filter .dataTables_filter { position: relative; display: block; float: left; margin: 0 0 @line-height-computed @content-padding-large; // Text label > label { margin-bottom: 0; position: relative; // Add search icon &:after { content: "\e98e"; font-family: 'icomoon'; font-size: @font-size-small; display: inline-block; position: absolute; top: 50%; right: @padding-base-horizontal; margin-top: -(@font-size-small / 2); color: @text-muted; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Text spacing > span { float: left; margin: (@padding-base-vertical + 1) @content-padding-base; margin-left: 0; } } // Filter input input { outline: 0; width: 200px; height: @input-height-base; padding: @padding-base-vertical @padding-base-horizontal; padding-right: ((@padding-base-horizontal * 2) + @font-size-small); font-size: @font-size-base; line-height: @line-height-base; color: @input-color; background-color: @input-bg; border: 1px solid @input-border; border-radius: @input-border-radius; } // Right display option .filter-right & { float: right; } } // Info .dataTables_info { float: left; padding: (@padding-base-vertical + 1) 0; margin-bottom: @line-height-computed; .info-right & { float: right; } } // Pagination common styles .dataTables_paginate { float: right; text-align: right; margin: 0 0 @line-height-computed @content-padding-large; // Button .paginate_button { display: inline-block; padding: @padding-base-vertical; min-width: @input-height-base; margin-left: 2px; text-align: center; text-decoration: none; cursor: pointer; color: @text-color; border: 1px solid transparent; border-radius: @border-radius-base; // First item &:first-child { margin-left: 0; } // Hover state &:hover, &:focus { background-color: @pagination-hover-bg; } // Current active state &.current { &, &:hover, &:focus { color: #fff; background-color: @color-slate-700; } } // Disabled state &.disabled { &, &:hover, &:focus { cursor: default; background-color: @pagination-disabled-bg; color: @pagination-disabled-color; } } } // Simple paginate &.paging_simple .paginate_button { padding-left: @padding-base-horizontal; padding-right: @padding-base-horizontal; } // Left display option .paginate-left & { float: left; } } // Simple pagination style .paging_simple { .paginate_button { &:hover, &:focus { color: #fff; background-color: @color-slate-700; } } } // Scrollable table // ------------------------------ .dataTables_scroll { clear: both; // Scrolling header .dataTables_scrollHead { table { border-bottom: 0; } th, td { white-space: nowrap; } } // Scrolling body .dataTables_scrollBody { -webkit-overflow-scrolling: touch; table { border-bottom: 0; thead th[class*=sorting] { &:before, &:after { content: none; } } tbody tr:first-child > td { border-top: 0; } } th, td { white-space: nowrap; > .dataTables_sizing { height: 0; overflow: hidden; margin: 0; padding: 0; } } } } // Table inside panels // ------------------------------ // Inside panel body .panel-body { + .dataTables_wrapper, + * > .dataTables_wrapper { border-top: 1px solid @panel-default-border; } > .dataTables_wrapper { .datatable-footer { border-top: 0; .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate { margin-bottom: 0; } } } } // Inside flat panel .panel-flat > .panel-heading + .dataTables_wrapper { > .datatable-header { padding-top: 0; } } // Bordered table inside panel .panel > .dataTables_wrapper .table-bordered { border: 0; > thead, > tbody, > tfoot { > tr { > td, > th { &:first-child { border-left: 0; } &:last-child { border-right: 0; } } } } > tbody > tr:last-child { > th, > td { border-bottom: 0; } } } // Responsive style additions // ------------------------------ // Simple responsive setup .datatable-scroll-lg, .datatable-scroll, .datatable-scroll-sm { min-height: .01%; } // Scroller .datatable-scroll-wrap { width: 100%; min-height: .01%; overflow-x: auto; } @media (max-width: @screen-xs-max) { .datatable-scroll-sm { width: 100%; overflow-x: scroll; th, td { white-space: nowrap; } } } @media (max-width: @screen-sm-max) { .datatable-scroll { width: 100%; overflow-x: scroll; th, td { white-space: nowrap; } } } @media (max-width: @screen-md-max) { .datatable-scroll-lg { width: 100%; overflow-x: scroll; th, td { white-space: nowrap; } } } // Common media queries @media (max-width: @screen-xs-max) { .dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter, .DTTT_container, .ColVis { float: none!important; text-align: center; margin-left: 0; } .dataTables_info, .dataTables_paginate { margin-top: 0; } .datatable-header { text-align: center; } }