DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(field): field borders now are correctly colored, even on Safari

Browse Source 
TextFields and Selects on Safari were showing a dark line, even when primary color was different.
Fixes: 5668
This commit is contained in:
Lorenzo Montanari 2024-10-22 16:59:40 +02:00
parent 1bdcbd38ab
commit f0a75f02d3
No known key found for this signature in database
GPG Key ID: 925B6A9E16327DDC
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
field/internal/_outlined-field.scss
View File

@ -244,7 +244,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
// States
:hover .outline {
:hover .outline,
:hover .outline-notch {
border-color: var(--_hover-outline-color);
color: var(--_hover-outline-color); // Needed for Firefox HCM
}
@ -257,7 +258,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
border-width: var(--_hover-outline-width);
}
.focused .outline {
.focused .outline,
.focused .outline-notch{
border-color: var(--_focus-outline-color);
color: var(--_focus-outline-color); // Needed for Firefox HCM
}
@ -270,7 +272,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
border-width: var(--_focus-outline-width);
}
.disabled .outline {
.disabled .outline,
.disabled .outline-notch {
border-color: var(--_disabled-outline-color);
color: var(--_disabled-outline-color); // Needed for Firefox HCM
}
@ -289,18 +292,21 @@ $_md-sys-motion: tokens.md-sys-motion-values();
border-width: var(--_disabled-outline-width);
}
.error .outline {
.error .outline,
.error .outline-notch {
border-color: var(--_error-outline-color);
color: var(--_error-outline-color); // Needed for Firefox HCM
}
.error:hover .outline {
.error:hover .outline,
.error:hover .outline-notch {
border-color: var(--_error-hover-outline-color);
// Needed for Firefox HCM
color: var(--_error-hover-outline-color);
}
.error.focused .outline {
.error.focused .outline,
.error.focused .outline-notch {
border-color: var(--_error-focus-outline-color);
// Needed for Firefox HCM
color: var(--_error-focus-outline-color);