bootstrap-table
bootstrap-table copied to clipboard
Is there a way to easily change the color of the sort icons / make it a scss variable
Is there a way to easily change the color of the sort icons / make it a scss variable
The color is of the sort icon (asc|desc) is now purple-ish, I would like to theme that color in my project.
I just needed to do this as my table header was light grey making the sort icons hard to see.
I used an online base64 image converter to generate png's of the 3 icons, edited their colour and converted them back to base64
See below for what I put in my custom css for the table to sort this out:
Note that I only edited the "both" class to change the icon to green as the blue for the "asc" and "desc" classes were ok so they are just copied as is from the original css.
The css selectors for all 3 still need to be included in the custom css due to the ordering as for some reason the "both" class still remains on the div inside the
There might be a better way to specify the css to work around that issue but this works for me and I can change the other ones later if I decide to.
.bootstrap-table .fixed-table-container .table thead th .both {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIAAwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAToAMABAAAAAEAAAATAAAAADKyfrgAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kr+UDfAAAAYZJREFUOBHVUztIA0EQndk7SCJEMbWlNiltrdJJ8AMigqWiQZSIIKRSFBQLQYgJFn5jZ6EoKgatFCSFha2FxEatE9QiiSY7zooHl3MvaSx0Ydid92Ye8wYW4K8erDdY5DTSUJHepddSILY/MP9eq17UIhVXBt8EChhv8uVG69XWnGwoHQ0aEi+IsIWFsoYhOzfCyQc3UdfJiBVEBae/hVR/a7ksJhXuJma4EU/t+ZBAnGPeZ9UgQvDs/vz6du/m0cLst3ay4eOYn/c0SwDN9mJ++yXATDQd9Tjwr1QrJkSxH0h0AFDRGewyVCgbfTqxX8W0yxw5mRpki7uAkl05DglepRzb6k6kHAxobfrMyiEiXQKg90egzEjpPXAKqVwrlgwnS0wsMv9mb2IbeZKwsNO7XIVbNVoxRa53xTNEUGWFgI62e1avrGbn7SqG7NM0ZYIbsqqJ02dp0IrCnSJW7iqmCtTXQaA4x4ckTKTCyTurUXebOtCOvRQCm42eXJspCmt2/H+9PwELW4FbScq8QAAAAABJRU5ErkJggg==")
}
.bootstrap-table .fixed-table-container .table thead th .desc {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ");
}
.bootstrap-table .fixed-table-container .table thead th .asc {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==");
}