ionic-item color and href not working

Question

I started a ionic project based on the sidemenu template. I am trying to change the background color for each element of the side menu (I would like every item to be of a different color).

I tried to add a ionic color class:

<ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item class="positive-bg" nav-clear menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item class="calm-bg" nav-clear menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item class="assertive-bg" nav-clear menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item nav-clear menu-close class="balanced-bg" href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>

It works well on the Login element but not on the other elements. Removing the href attribute on other elements works... How can I have the background color and the href element?

Answer 1

The problem is that ion-item directive renders a element with class .item-content inside if it has href attribute. The classes you apply to ion-item elements are defined as something like this:

.assertive-bg {
  background-color: #ef473a;
}

and at the same class ionic defines these styles for links inside as

.item-complex .item-content, .item-radio .item-content {
  position: relative;
  z-index: 2;
  padding: 16px 49px 16px 16px;
  border: none;
  background-color: white;
}

Later rule has higher specificity so it takes precedence over simple .assertive-bg class rule.

To workaround this issue you want to create few additional rules manually:

.item-complex.assertive-bg .item-content {
  background-color: #ef473a;
}

Demo: http://plnkr.co/edit/bbUel2goJGYy8fv0ltXm?p=preview

---

UPD. brandyshea provided much better solution of how styles should be overloaded without color values duplication. I will keep my answer for the sake of explanation it provides, though.

Answer 2

An ion-item with a href attribute renders differently. For more info on the why see dfsq's answer

What you could do is instead of using the ion-list directive, use the classes:

<ion-content>
    <ul class="list">
        <a href="" class="item positive-bg" nav-clear menu-close ng-click="login()">Login</a>
        <a href="#/app/search" class="item calm-bg" nav-clear menu-close>Search</a>
        <a href="#/app/browse" class="item assertive-bg" nav-clear menu-close>Browse</a>
        <a href="#/app/playlists" class="item balanced-bg" nav-clear menu-close>Playlists</a>
    </ul>
</ion-content>

Demo on Codepen

Answer 3

There are a few ways to do this. Here is another way:

Add a custom class to your side-menu list:

<ion-list class="sidemenu-list">

And then tell item-content to inherit the background-color from the item:

.sidemenu-list .item-complex .item-content { 
  background-color: inherit;
}

Codepen demo