text-color-hover issue

[matevz-spacapan]

Hi there! I'm using the Webpixels SCSS (latest version) on a Laravel 8 app. On some buttons I'm using a text-COLOR-hover class, however I've just now noticed that since some time between June and July this stopped working. I don't have much knowledge on how SCSS files are compiled, but I've noticed that all classes as mentioned before are missing the --x-text-opacity: 1; line.
So currently the compiled CSS looks like

.text-danger-hover:hover {
  color: rgba(var(--x-danger-rgb), var(--x-text-opacity)) !important;
}

instead of

.text-danger-hover:hover {
    --x-text-opacity: 1;
  color: rgba(var(--x-danger-rgb), var(--x-text-opacity)) !important;
}

Because of this issue, the hover effect is not rendered at all since the var is not found (if I manually add the line to the CSS file or if I edit the style in the browser DevTools, then the hover effect comes back normally).

Can someone please confirm that this is in fact what's causing the issue and not something else? 😊

[extrabright]

Hi @matevz-spacapan, the easiest way to make it work is to add the .text-opacity-{VALUE} next to text-danger-hover. This way the opacity of the text will be rendered.

<a href="#" class="text-danger-hover text-opacity-100">...</a>

Also, make sure you update to the latest version (currently v1.1.8). I've added new text-opacity classes (from 10 to 100)