feat(datatables): add styling to paging buttons

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

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "azerothcore-armory",
"version": "0.9.0",
"version": "0.9.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "azerothcore-armory",
"version": "0.9.0",
"version": "0.9.1",
"license": "MIT",
"dependencies": {
"@supercharge/promise-pool": "^2.1.0",

View file

@ -1,6 +1,6 @@
{
"name": "azerothcore-armory",
"version": "0.9.0",
"version": "0.9.1",
"description": "",
"scripts": {
"build": "tsc -p tsconfig.json",

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;
}

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>