Unable to change style of accordion component

Support
#1

Hi

It should be straightforward but for some reason I cannot change the tab caption color of accordion.

If i change background image in chrome directly it works
image

image

image

Following is my scss, I tried everything.

@mixin com_company_svp-hover-ext {

  .hover .v-accordion {
    background-image: -webkit-linear-gradient(top, #c6e6f3 0, #f4f4f4 100);
    background-image: linear-gradient(to bottom,#c6e6f3 0,white 100%);
  }

  .v-accordion {
    background-image: -webkit-linear-gradient(top, #c6e6f3 0, #f4f4f4 100);
    background-image: linear-gradient(to bottom,#c6e6f3 0,white 100%);
  }

  .v-accordion-item-caption {
    background-image: -webkit-linear-gradient(top, #c6e6f3 0, #f4f4f4 100);
    background-image: linear-gradient(to bottom,#c6e6f3 0,white 100%);
  }

  .hover .v-accordion-item-caption {
    background-image: -webkit-linear-gradient(top, #c6e6f3 0, #f4f4f4 100);
    background-image: linear-gradient(to bottom,#c6e6f3 0,white 100%);
  }

  .v-accordion .v-accordion-item-caption {
    background-image: -webkit-linear-gradient(top, #c6e6f3 0, #f4f4f4 100);
    background-image: linear-gradient(to bottom,#c6e6f3 0,white 100%);
  }

  .hover .v-accordion .v-accordion-item-caption {
    background-image: -webkit-linear-gradient(top, #c6e6f3 0, #f4f4f4 100);
    background-image: linear-gradient(to bottom,#c6e6f3 0,white 100%);
  }

}

Regards
Michael

#2

With sample project

accordstyle.zip (86.4 KB)

#4

Hi,

The correct css selector is .v-accordion .v-accordion-item-caption > .v-caption. Also, in case of gradient, you need to use the predefined linear-gradient mixin that avoids an issue with compiling linear-gradient from scss to css. So, the working code should look as follows:

.v-accordion .v-accordion-item-caption > .v-caption {
  @include linear-gradient(to bottom, #c6e6f3 0, white 100%);
}

Regards,
Gleb

#6

Tried this : “invalid property value”

image

Tried also this : no error but no effect

    .v-accordion .v-accordion-item-caption > .v-caption {
        background-image: -webkit-linear-gradient(top, #c6e6f3 0, #f4f4f4 100);
        background-image: linear-gradient(to bottom,#c6e6f3 0,white 100%);
    }
#7

In the screenshot above -webkit-linear-gradient and linear-gradient have different values, but @include linear-gradient generates the same for both. It seems that you need hard refresh the page in order to apply the code that I suggested.

#8

Hard refresh did the job, my bad…

Thanks @gorelov.

Michael