Change item border colour based on parent class

@Tanakasan1734 wrote:

I feel like this is a pretty simple one but my Google skills are failing me. I have set my ion-item background color to medium and while the text has gone white the dividing lines haven’t. I’m trying to set their color with the border-color variable and failing.

I’ve tried:

<ion-row class="round-log">
      <ion-list-header color="medium">
        <ion-label>Rounds</ion-label>
      </ion-list-header>
      <ion-col>
        <ion-list #roundsLogDisplay>
          <ion-item *ngFor="let round of roundsLog; let i = index; let last = last;"
                     lines="{{ last ? 'none' : '' }}" color="medium"  border-color="#ffffff">
            Round {{ i + 1 }}: {{ round }} secs
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>

and

.round-log ion-item{ 
    --border-color: #ffffff; 
}

in my scss file. There is another list on this page that doesn’t have a medium background colour so it needs to be off the .round-log parent.

What am I missing? Thanks

Posts: 1

Participants: 1

Read full topic