Description
Version
1.0.2
Reproduction link
https://www.creative-tim.com/learning-lab/bootstrap/pagination/soft-ui-dashboard#colors
Operating System
Window 10
Device
Desktop
Browser & Version
90.0.4430.212
Steps to reproduce
In Color Section of Pagination Documentation.
It is documented that, color of active link can be changed by adding class "pagination-{primary, info, success, etc}" in ul tag along with "pagination" class
What is expected?
As mentioned in Documentation of Pagination, if we add class of "pagination-info", "pagination-danger" to ul tag along with "pagination" class, Pagination active link's colour should change corresponding to color class of info, danger, warning, secondary, etc. However, color is not changing.
What is actually happening?
If we add class of "pagination-info, pagination-danger, etc" in "ul" tag along with "pagination" class. Color of Pagination (Active Link) is not changing.
Color of Active link remains the same of "pagination-primary" class's color.
Solution
Adding css in "soft-ui-dashboard.css" as follow
.pagination-info .page-item.active .page-link { background-color: #17c1e8; border-color: #17c1e8; }
.pagination-danger .page-item.active .page-link { background-color: #ea0606; border-color: #ea0606; }
.pagination-success .page-item.active .page-link { background-color: #82d616; border-color: #82d616; }
.pagination-warning .page-item.active .page-link { background-color: #f53939; border-color: #f53939; }
.pagination-secondary .page-item.active .page-link { background-color: #8392AB; border-color: #8392AB; }
.pagination-primary .page-item.active .page-link { background-color: #cb0c9f; border-color: #cb0c9f; }
I took reference of corresponding btn classes (btn-primary, btn-info, btn-success, etc), however, you can use any color which will match the soft ui dashboard theme.
Additional comments
On Checking CSS(soft-ui-dashboard.css), it is found that no css is available for
.pagination-info .page-item.active .page-link { .... }
.pagination-danger .page-item.active .page-link { .... }
.pagination-warning .page-item.active .page-link { .... }
etc