In my tab above, the “News” tab (both text and icon) are hard to read on a device when compared to the active tab, “Contact”. This is a customer complaint so I need to fix it.
I’ve spent almost a day playing with the CSS and SCSS files but cannot find how to make the off text/icon a bit brighter - I did try changing this but no difference
$tabs-striped-off-color: #000;
$tabs-striped-off-opacity: 0.4;
My tab HTML is
<ion-tabs class="tabs-striped tabs-background-positive tabs-light tabs-icon-top">
<ion-tab title="News" icon="icon ion-ios7-paper-outline" href="#/tab/news">
<ion-nav-view name="news-tab"></ion-nav-view>
</ion-tab>
<etc....>
<etc....>
</ion-tabs>
Any help would be appreciated!
Update
I have made some progress on this, have been able to make the off text a bit brighter, and change the colour of the stripe in the on tab independently of the tab colour.
In www/lib/ionic/scss/_tabs.scss lines 97&100 (beta 13) I made these changes:
@mixin tabs-striped($style, $color, $background) {
&.#{$style} {
.tabs{
background-color: $background;
}
.tab-item {
color: rgba($color, 0.7); // ******** from $tabs-striped-off-opacity
opacity: 1;
.badge{
opacity:$tabs-striped-off-opacity;
}
&.tab-item-active,
&.active,
&.activated {
margin-top: -$tabs-striped-border-width;
color: $color;
border-style: solid;
border-width: $tabs-striped-border-width 0 0 0;
border-color: #ff0000 ; // ********* from $color
.badge{
top:$tabs-striped-border-width;
opacity: 1;
}
}
}
}
($tabs-striped-off-opacity was previously set to 0.4 in _variables.scss
Then run :
sass --watch scss/ionic.app.scss:www/css/SASS.app.css
This results in:
However, I still have not figured out how to make the inactive colour different, nor could I change the $tabs-striped-off-opacity from the starting scss file.
I don’t know if this is exactly what you are going for, but maybe it will help.
Instead of changing _tabs.scss
, Try adding the following lines to a custom Sass file (after an @import for the Ionic Sass):
// Make tabs that are not selected white
.tab-item {
color: white;
opacity: 1;
}
// Make the selected tab red
.tab-item.active, .tab-item.activated, .tab-item-active {
color: red;
}
Hi, thanks for your response. I still cannot get this to work:
scss/ionic.app.scss:
@import "../www/lib/ionic/scss/ionic";
// choose silly values to enable them to be found in out file
.tab-item { color: white; opacity: 19238734; }
.tab-item.active, .tab-item.activated, .tab-item-active { color: redgreenblue;}
Out file www/css/ionic.app.css:
// this is the vary last few lines of the file (lines 8654 to 8661)
.tab-item {
color: white;
opacity: 19238734; }
.tab-item.active, .tab-item.activated, .tab-item-active {
color: redgreenblue; }
/*# sourceMappingURL=ionic.app.css.map */
Am I doing something wronf with my sass command?
I am facing the same issue. Off tabs are very hard to read. Has anyone got the solution for this issue.
Hi, I’ve not been doing any Ionic work for a few months now so a bit rusty. But I did solve the problem for myself as described above. I needed to make changes to www/lib/ionic/scss/_tabs.scss (run saas after).
Note this was for beta13 so there may be differences now.