mirror of
https://github.com/Part-DB/Part-DB-server.git
synced 2025-06-20 17:15:51 +02:00
Make the checkboxes of datatables look like regular bootstrap checkboxes
This commit is contained in:
Jan Böhmer
parent
b7ce91e2d8
commit
f5d53dc305
3 changed files with 74 additions and 53 deletions
|
|
@ -24,7 +24,10 @@ import 'datatables.net-bs5/css/dataTables.bootstrap5.css'
|
||||||
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.css'
|
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.css'
|
||||||
import 'datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.css'
|
import 'datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.css'
|
||||||
import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.css';
|
import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.css';
|
||||||
import 'datatables.net-select-bs5/css/select.bootstrap5.css';
|
|
||||||
|
//Use our own styles for the select extension which fit the bootstrap theme better
|
||||||
|
//import 'datatables.net-select-bs5/css/select.bootstrap5.css';
|
||||||
|
import '../../../css/components/datatables_select_bs5.css';
|
||||||
|
|
||||||
//JS
|
//JS
|
||||||
import 'datatables.net-bs5';
|
import 'datatables.net-bs5';
|
||||||
|
|
|
||||||
|
|
@ -113,55 +113,4 @@ Classes for Datatables export
|
||||||
#export-messageTop,
|
#export-messageTop,
|
||||||
.export-helper{
|
.export-helper{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/******************************************************
|
|
||||||
* Styling for the select all checkbox in the parts table
|
|
||||||
* Should match the styling of the select checkbox
|
|
||||||
******************************************************/
|
|
||||||
table.dataTable > thead > tr > th.select-checkbox {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
table.dataTable > thead > tr > th.select-checkbox:before,
|
|
||||||
table.dataTable > thead > tr > th.select-checkbox:after {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0.9em;
|
|
||||||
left: 50%;
|
|
||||||
width: 1em !important;
|
|
||||||
height: 1em !important;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
table.dataTable > thead > tr > th.select-checkbox:before {
|
|
||||||
content: " ";
|
|
||||||
margin-top: -5px;
|
|
||||||
margin-left: -6px;
|
|
||||||
border: 2px solid var(--bs-tertiary-color);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:before {
|
|
||||||
border: 2px solid var(--bs-tertiary-color) !important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > td.select-checkbox:after, table.dataTable > tbody > tr > th.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:after {
|
|
||||||
width: 1em !important;
|
|
||||||
height: 1em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.dataTable > thead > tr.selected > th.select-checkbox:after {
|
|
||||||
content: "✓";
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: -20px;
|
|
||||||
margin-left: -6px;
|
|
||||||
text-align: center;
|
|
||||||
/*text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9; */
|
|
||||||
}
|
|
||||||
table.dataTable.compact > thead > tr > th.select-checkbox:before {
|
|
||||||
margin-top: -12px;
|
|
||||||
}
|
|
||||||
table.dataTable.compact > thead > tr.selected > th.select-checkbox:after {
|
|
||||||
margin-top: -16px;
|
|
||||||
}
|
|
||||||
69
assets/css/components/datatables_select_bs5.css
Normal file
69
assets/css/components/datatables_select_bs5.css
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
/******************************************************************************************
|
||||||
|
* This styles the checkboxes of the select extension exactly like the ones in bootstrap 5
|
||||||
|
******************************************************************************************/
|
||||||
|
|
||||||
|
table.dataTable > tbody > tr > .selected {
|
||||||
|
background-color: var(--bs-primary-bg-subtle) !important;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
table.dataTable > tbody > tr > .dt-select {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
table.dataTable > thead > tr > .dt-select {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
table.dataTable input.dt-select-checkbox {
|
||||||
|
--bs-form-check-bg: var(--bs-body-bg);
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
vertical-align: top;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-color: var(--bs-form-check-bg);
|
||||||
|
background-image: var(--bs-form-check-bg-image);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: contain;
|
||||||
|
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||||
|
-webkit-print-color-adjust: exact;
|
||||||
|
color-adjust: exact;
|
||||||
|
print-color-adjust: exact;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.dataTable input.dt-select-checkbox:checked {
|
||||||
|
background-color: rgb(var(--bs-secondary-rgb));
|
||||||
|
border-color: rgb(var(--bs-secondary-rgb));
|
||||||
|
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
|
||||||
|
table.dataTable input.dt-select-checkbox:indeterminate {
|
||||||
|
background-color: rgb(var(--bs-secondary-rgb));
|
||||||
|
border-color: rgb(var(--bs-secondary-rgb));
|
||||||
|
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
div.dt-container span.select-info,
|
||||||
|
div.dt-container span.select-item {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 640px) {
|
||||||
|
div.dt-container span.select-info,
|
||||||
|
div.dt-container span.select-item {
|
||||||
|
margin-left: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table.dataTable.table-sm tbody td.select-checkbox::before {
|
||||||
|
margin-top: -9px;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue