[Bug] Pagination Color Issue

[nexadomain]

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

[rarestoma]

Hi @nexadomain,

Thank you for working with our products and for pointing us this issue. I just added it to the 'to do' list for the next update.

Thank you,
Rares