Open nexadomain opened 3 years ago
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
@rarestoma Here is the complete solution for Issue #11:-
File: Main > assets/css > soft-ui-dashboard.css
Add:-
1) .navbar-vertical.navbar-expand-xs .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
2) @media (min-width:576px) {
.....
.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
....
}
3) @media (min-width:768px) {
...
.navbar-vertical.navbar-expand-md .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
...
}
4) @media (min-width:992px) {
...
.navbar-vertical.navbar-expand-lg .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
...
}
5) @media (min-width:1200px) {
...
.navbar-vertical.navbar-expand-xl .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
...
}
6) @media (min-width:1400px) {
...
.navbar-vertical.navbar-expand-xxl .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
...
}
7) For Active Icon
.navbar-vertical .navbar-nav>.nav-item .nav-link.active .icon i { color: #fff; }
Hi @nexadomain,
Thank you for giving the solution. I will test it and introduce it in the next update.
Best regards, Rares
Version
1.0.2
Reproduction link
https://demos.creative-tim.com/soft-ui-dashboard/pages/dashboard.html
Operating System
Win 10
Device
Desktop
Browser & Version
Chrome 90.0.4430.212 and all
Steps to reproduce
In Side Navigation of Soft UI Dashboard, Nav Link's icons are given with
Color Styling of only SVG icons i.e
What is expected?
Icons other than
.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon i { color : ; }
What is actually happening?
In Side Navigation of Soft UI Dashboard. Color Styling of only SVG icons i.e
So, if we use other icons,
color of icon is matching with Side-bar theme.
Solution
Add color styling in CSS Stylesheet { assets/css/soft-ui-dashboard.css }
.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
after .navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon svg .color-foreground { }
Additional comments