yrtria/azerothcore-armory
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Activity Actions

feat(datatables): add styling to paging buttons

Browse source
This commit is contained in:
Axel Cocat 2022-03-05 22:32:02 +01:00
parent 03eb4e2a51
commit 4c051e316c
4 changed files with 22 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

21
static/css/datatables.css
View file

@ -17,6 +17,7 @@
.dataTables_wrapper .dataTables_length select {
color: #ffffff;
}
.dataTables_wrapper .dataTables_length select option {
color: #000000;
}
@ -35,15 +36,17 @@ table.dataTable.display tbody tr:hover {
background-color: #3f3f3f;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
color: #a3a3a3 !important;
.dataTables_wrapper .dataTables_paginate .ellipsis {
color: #e6e6e6;
line-height: 32px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate {
color: #e6e6e6 !important;
.dataTables_wrapper .dataTables_paginate .button.is-dark.disabled {
background-color: #282f2f;
border-color: transparent;
box-shadow: none;
opacity: 0.5;
cursor: not-allowed;
}
table.dataTable.row-border tbody th,
@ -52,3 +55,7 @@ table.dataTable.display tbody th,
table.dataTable.display tbody td {
border-top: 1px solid #222222;
}
.dataTables_paginate .button {
margin-right: 2px;
}

5
static/partials/datatables.hbs
View file

@ -3,3 +3,8 @@
<link rel="stylesheet" type="text/css" href="/css/datatables.css">
<script type="application/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="application/javascript">
$.fn.dataTable.ext.classes.sPageButton = "button is-dark";
$.fn.dataTable.ext.classes.sPageButtonActive = "is-active is-outlined is-inverted";
</script>