Helium table style provider

Hi

I’m currently migrating an application from Hover to Helium, and for some reason table style does not work.

I tried this:

   .v-table {
        .opportunity-label .v-table-cell-content {
            font-weight: bold;
        }
        .opportunity-state-open .v-table-cell-content {
            background-color: lightyellow
        }
        .opportunity-state-converted .v-table-cell-content {
            background-color: lightgreen
        }
        .opportunity-state-canceled .v-table-cell-content {
            background-color: lightred
        }
    }

And this:

   .v-table {
        .opportunity-label {
            font-weight: bold;
        }
        .opportunity-state-open {
            background-color: lightyellow
        }
        .opportunity-state-converted {
            background-color: lightgreen
        }
        .opportunity-state-canceled  {
            background-color: lightred
        }
    }

Also tried to use a group table or a simple table. Or use the install handler or setting directly the style provider on the injected table with no luck.

Although, style seems applied in Chrome dev tools.
image

Sample project attached:
heliumtablestyle.zip (106.3 KB)

Regards
Michael

Hi,

From your screenshot, I see that you logged in with Hover which according to your demo project doesn’t implement custom CSS class names.

Also, there are mistakes in your code, e.g. missing ; and usage of lightred color which doesn’t exist.

.v-table {
    .opportunity-label .v-table-cell-content {
        font-weight: bold;
    }

    .opportunity-state-open .v-table-cell-content {
        background-color: lightyellow;
    }

    .opportunity-state-converted .v-table-cell-content {
        background-color: lightgreen;
    }

    .opportunity-state-canceled .v-table-cell-content {
        background-color: lightblue;
    }
}

Regards,
Gleb

Thanks @gorelov

Indeed, defining helium as the default theme works better :slight_smile:

I did manage to get what I want with the following.

Interesting to note, the missing trailing ‘;’ does not produce any error while compiling scss.

.v-table {
        .opportunity-label:not(.v-selected) {
            font-weight: bold;
        }
        .opportunity-state-open:not(.v-selected) {
            background-color: yellow;
        }
        .opportunity-state-converted:not(.v-selected) {
            background-color: green;
        }
        .opportunity-state-canceled:not(.v-selected) {
            background-color: coral;
        }
    }