Mr.wiseguy Mr.wiseguy - 6 months ago 39
HTML Question

ionic tabs annoying activated color

I am creating an Ionic project and am trying to get the tabs styling right for android. I've tried quite a few CSS rules, but every time I change one it has bad consequences for other CSS rules.

I am trying to create the following:

enter image description here

But when I click on an other tab (hold it down - ionic adds 'activated' class) the tab turns white with a white border:

enter image description here

I would like to disable this. I've tried the following CSS rule:

.tabs-striped.tabs-color-light .tab-item.activated{
color: rgba(255, 255, 255, 0.4) !important;
border: none !important;
}


This disables the tab item color and border when I click on it, but it created a new problem. Now when I tab on a tab (so that I navigate to it) it takes a second or what before the new tab gets it white border and color. This looks like if there is some lagg and is quite annoying (goes back to image 1 after 1 second):

enter image description here

I would like to create a tab look and transition like whatsapp has.

The following is the Ionic styling. I have not changed anything.
enter image description here

Any help would be appreciated!

Answer

Try this CSS rule and let me know if it worked :

a.tab-item:not(.tab-item-active){
     color: rgba(255, 255, 255, 0.4) !important;
     border: none !important;
}