Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Flat button hover background ignores CSS variables #818

Closed
@unascribed

Description

@unascribed

What MDC-Web Version are you using?

0.13.0, served from jsdelivr

What browser(s) is this bug affecting?

Chromium 58.0.3029.81

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

Firefox Nightly 56.0a1

Mozilla/5.0 (X11; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0

What OS are you using?

Arch Linux x86_64 (last updated May 3rd)

What are the steps to reproduce the bug?

  1. Create a flat button with accent or primary coloring (class="mdc-button mdc-button--accent")
  2. Hover over it, or click on it (Chrome devtools "Force element state" is useful here)

What is the expected behavior?

The flat button background is based on the relevant CSS variables.

What is the actual behavior?

The flat button background is always indigo or pink.

Any other information you believe would be useful?

The offending CSS rule is under the selector .mdc-button.mdc-button--primary::before. This can probably be fixed by using smaller opacity values and switching background-color to the (opaque) variable value.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions