-
Notifications
You must be signed in to change notification settings - Fork 828
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Setting individual shape to outlined text field fails if unit is not set #5443
Comments
Hm, I believe we use the value in CSS |
AFAIK --md-filled-icon-button-container-color: color-mix(
in srgb,
var(--md-sys-color-secondary-container),
transparent calc(var(--md-sys-state-hover-state-layer-opacity) * 100%)
); where |
|
Defining css custom properties with @property --md-filled-icon-button-container-color {
syntax: "<length>";
...
} But I'm not sure if it will work with external library. |
What is affected?
Component
Description
I need to set a shape of the
md-outlined-text-field
to have rounded top angles but not rounded bottom ones when active. But it does not work if unit is not specified in css custom property which controls the shape.Reproduction
I need to set a shape of the md-outlined-text-field to have rounded top angles and not rounded bottom.
So I set the default shape and override the bottom corners:
But it results in broken shape of the component: not only the top left corner has the radius of 0, but also the left padding / margin completely disappeared:
Workaround
I found that if I set units explicitly (0px or 0rem) it works.
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
Failing on 1.2.0
Browser/OS/Node environment
Firefox 123.0b4 (64-bit)
mas OS 14.3 (23D56)
node v18.14.0
The text was updated successfully, but these errors were encountered: