-
-
Notifications
You must be signed in to change notification settings - Fork 106
Description
Before submitting...
- I have searched for duplicate or closed issues.
- I have read the CONTRIBUTING document and my issue is following the guidelines.
- I have read the template completely before filling it in.
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
materialize/components/text-fields/_input-fields.scss
Lines 70 to 72 in 49d9ff2
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: