Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

--ion-item-background-activated is not being applied #16585

Copy link
Copy link
@wiggitamoo

Description

@wiggitamoo
Issue body actions

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/Users/andre/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.11.1
   @angular-devkit/schematics    : 7.1.1
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : 1.2.0

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.8
   @capacitor/core           : 1.0.0-beta.8

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/andre/Library/Android/sdk)
   NodeJS            : v8.11.3 (/Users/andre/.nvm/versions/node/v8.11.3/bin/node)
   npm               : 6.3.0
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

Describe the Bug
The theme variable --ion-item-background-activated is not being applied.

Steps to Reproduce
Steps to reproduce the behavior:

  1. Click on an ion-item in and ion-list
  2. Apply an "activated" class to the ion-item element
  3. See error

Related Code

<ion-list>
    <ion-item (click)="openItem(asset)" *ngFor="let item of items" [class.activated]="item && item.id == selectedItem.id">
        <ion-label>
            <h2>{{item.name}}</h2>
            <p>{{item.type}}</p>
        </ion-label>
    </ion-item>
</ion-list>
openItem(item) {
    this.selectedItem = item;
}
light: '#333333',
    --ion-color-light: '#333333';
    --ion-color-light-shade: ${Color('#333333').darken(shadeRatio)};
    
    --ion-item-background: var(--ion-color-light);
    --ion-item-background-activated: var(--ion-color-light-shade);

Expected Behavior
the activated class should use the background color defined by the --ion-item-background-activated css variable.

Reactions are currently unavailable

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.