Skip to content

[Bug]: Invalid syntax and missing variable for input-field #636

@Mat2095

Description

@Mat2095

Before submitting...

Context

Some styling of disabled text-fields is broken.

Current Behavior

CSS rules for disabled text-fields are not valid.

Expected behavior

CSS rules should be valid, e.g. making outline semi-transparent.

Possible Solutions or Causes

color: rgba(var(--md_sys_color_on-surface), 0.38);
border-color: rgba(var(--md_sys_color_on-surface), 0.12);
background-color: rgba(var(--md_sys_color_on-surface), 0.04);

This (and some other locations) is invalid. The variable --md_sys_color_on-surface does not exist, it probably should be --md-sys-color-on-surface (always use dashes instead of a mix of underscores and dashes). Also using rgba() in that way is not allowed, you can't put in a color in hex-format and an alpha value. I guess what you want to achieve there is rgb(from var(--md-sys-color-on-surface) r g b / 0.38). See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb for more information on what syntax is allowed.

Steps to reproduce

It can be seen directly with the disabled fields on https://materializeweb.com/text-inputs.html

Your Environment

  • Version used: 2.2.2
  • Browser Name and version: Firefox 140.0.4
  • Operating System and version (desktop or mobile): Windows 11
  • Additional information you want to tell us:

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions