Style access

[cribbstechnologies]

I'm trying to override some of the styles within the library to make the collapsed version of the card appear differently but nothing I've tried seems to work and it seems to be due to how the styles are applied by the library. The generated class is far more specific than anything I could ever put in a stylesheet [_nghost-c5] .mgl-timeline-entry-card[_ngcontent-c5]

I'm attempting to remove the background of the card and the header and display just the header content as a rounded corner div.

mgl-timeline-entry .mgl-timeline-entry-card, mgl-timeline-entry .mgl-timeline-entry-card-header {
    background-color: transparent !important;
}

mgl-timeline-entry-header {
    border-radius: 10px;
    background-color: #EEE;
    margin: 0 auto;
    width: 50%;
}

Is there a way the card and header could have a distinct class that's assignable similar to how the dot has the class attribute so this can be overridden? I'm not using Material, just Bootstrap. Angular 7

[cribbstechnologies]

I cloned the repo and tried to make the change but the way the styles are declared in the scss file completely overrides any external styles due to the specificity of the style injected by the library.

[glutengo]

This is due to Angular Style Encapsulation: https://angular.io/api/core/ViewEncapsulation

I did not use a specific value, so it is set to emulated which results in the specific classes that you mentioned above. You could clone the repo and change the ViewEncapsulation mode to none. Another option would be using ::ng-deep but this is deprecated. (https://angular.io/guide/component-styles)

[cribbstechnologies]

I tried just changing it to None which didn't really change anything due to how the styles are declared at the component level and not the top level using :host. The only way I could get the styles to be put into a single style element was if I put them all in timeline-theme.scss and even then I can't seem to override those styles. The theme styles are applied appropriately:

But if I try to override in my stylesheet for the component that's using the timeline it's ignored

I've tried the selectors:

mgl-timeline .mgl-timeline-line
mgl-timeline div.mgl-timeline-line

I've tried using colors from my theme and also directly specifying the colors directly both with including !important to no avail.

If I force the inline style using jquery it changes but that's the only way I've been able to manipulate it as it's ignored every other way I've tried. $('mgl-timeline div.mgl-timeline-line').style='background-color: green'

[cribbstechnologies]

I got it figured out. PR https://github.com/glutengo/angular-mgl-timeline/pull/21 created