You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
3.3 KiB
151 lines
3.3 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Responsive extension |
|
* |
|
* Optimise the table's layout for different screen sizes through the dynamic |
|
* insertion and removal of columns from the table |
|
* |
|
* Version: 1.0 |
|
* Latest update: May 25, 2015 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
|
|
// Layouts |
|
// ------------------------------ |
|
|
|
// Inline details row |
|
.dtr-inline { |
|
&.collapsed tbody { |
|
tr { |
|
td, |
|
th { |
|
&:before { |
|
margin-right: 10px; |
|
} |
|
|
|
&:first-child { |
|
position: relative; |
|
cursor: pointer; |
|
white-space: nowrap; |
|
|
|
&.dataTables_empty:before { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Column details row |
|
.dtr-column { |
|
tbody { |
|
td, |
|
th { |
|
&.control { |
|
position: relative; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// Expand/collapse icons |
|
// ------------------------------ |
|
|
|
.dtr-inline.collapsed tbody tr td:first-child:before, |
|
.dtr-inline.collapsed tbody tr th:first-child:before, |
|
.dtr-column tbody tr td.control:before, |
|
.dtr-column tbody tr th.control:before { |
|
content: '\e9e4'; |
|
font-family: 'icomoon'; |
|
display: inline-block; |
|
font-size: @icon-font-size; |
|
width: @icon-font-size; |
|
line-height: 1; |
|
position: relative; |
|
top: -1px; |
|
vertical-align: middle; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
} |
|
.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before, |
|
.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before, |
|
.dataTable.dtr-column tbody tr.parent td.control:before, |
|
.dataTable.dtr-column tbody tr.parent th.control:before { |
|
content: '\e9e7'; |
|
} |
|
.dtr-inline.collapsed tbody tr.child td:before { |
|
display: none; |
|
} |
|
|
|
|
|
// Child rows with details |
|
// ------------------------------ |
|
|
|
.dataTable { |
|
tr { |
|
|
|
// Child row |
|
&.child { |
|
&:hover { |
|
background-color: transparent; |
|
} |
|
|
|
.dtr-title { |
|
display: table-cell; |
|
font-weight: 500; |
|
padding-right: 40px; |
|
} |
|
|
|
.dtr-data { |
|
display: table-cell; |
|
padding: 8px 0; |
|
} |
|
} |
|
|
|
// Child cell |
|
td.child { |
|
white-space: normal; |
|
position: relative; |
|
|
|
> ul { |
|
display: table; |
|
table-layout: fixed; |
|
width: 100%; |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
|
|
> li { |
|
display: table-row; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// Responsive stuff |
|
// ------------------------------ |
|
|
|
// Make dropdown menus full width |
|
@media (max-width: @screen-xs) { |
|
.dataTable tr td.child > ul > li { |
|
.dropdown, |
|
.dropup, |
|
.btn-group { |
|
position: static; |
|
} |
|
|
|
.dropdown-menu { |
|
left: 0; |
|
right: 0; |
|
border-radius: 0; |
|
border-width: 1px 0; |
|
} |
|
} |
|
} |
|
|
|
|