"off" tabs hard to read - change font with (S)CSS?


#1

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!


#2

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.


#3

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;
}

#4

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?


#5

I am facing the same issue. Off tabs are very hard to read. Has anyone got the solution for this issue.


#6

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.