Compare commits
2 Commits
3316ac89fd
...
7bb40d32f1
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7bb40d32f1 | ||
|
|
4d2a8dd26b |
@@ -84,6 +84,9 @@
|
||||
font-weight: var(--pi-theme-field-label-weight, inherit);
|
||||
}
|
||||
|
||||
// A stadium is right for a 48px input and wrong for a 112px textarea, which
|
||||
// is all this is now — with the focus ring gone there is no second shape to
|
||||
// agree with.
|
||||
.pi-field.pi-form-field__textarea {
|
||||
--pi-theme-field-radius: 1.25rem;
|
||||
}
|
||||
@@ -127,20 +130,3 @@
|
||||
font-size: var(--pi-font-size-x-small, 0.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
// Focusing a field that already has an error drew it twice: the notched
|
||||
// outline stays in the error colour, and the gradient focus ring is painted on
|
||||
// top of it in the brand's violet-to-cyan. Two rings, two colours, one field —
|
||||
// and on the textarea, at two different radii, which is what made it obvious.
|
||||
//
|
||||
// The ring is worth keeping: it is how focus reads on every other field. It
|
||||
// just has to agree with the state it is decorating, so while the field is
|
||||
// invalid the ring is built from the warn colour instead of the brand one. The
|
||||
// field ends up with a single red indication that still brightens on focus.
|
||||
:host ::ng-deep .pi-field .mat-form-field-invalid {
|
||||
--pi-theme-field-focus-gradient: linear-gradient(
|
||||
120deg,
|
||||
var(--pi-color-warn),
|
||||
var(--pi-color-warn-200, var(--pi-color-warn))
|
||||
);
|
||||
}
|
||||
|
||||
@@ -92,19 +92,14 @@ html {
|
||||
@include brand-ramp('highlighted', #6c2fb5, #ffffff);
|
||||
}
|
||||
|
||||
// The `gradient` theme's signature — a gradient focus ring on fields — is a
|
||||
// token, so it can be lifted onto the `alternative` shell without swapping
|
||||
// themes. `_mat-form-field.scss` reads it; the flat border is turned off so it
|
||||
// does not show through the ring.
|
||||
.pi-shell__alternative {
|
||||
--pi-theme-field-focus-gradient: linear-gradient(
|
||||
120deg,
|
||||
var(--pi-color-primary),
|
||||
var(--pi-color-accent),
|
||||
var(--pi-color-highlighted)
|
||||
);
|
||||
--pi-theme-field-border-color-focus: transparent;
|
||||
}
|
||||
// The `gradient` theme's focus ring is deliberately NOT lifted onto this shell.
|
||||
//
|
||||
// It is drawn as one continuous rounded rectangle over the whole field, while
|
||||
// the outline underneath is split into three pieces. The leading piece is 12px
|
||||
// wide, so a large radius clamps to a 12x24 ellipse there while the ring keeps
|
||||
// a true 24px circle — two curves that cannot be made to agree at any radius,
|
||||
// showing as a doubled edge down the left of every field. Focus is left to the
|
||||
// outline's own colour, which is what `alternative` already defines.
|
||||
|
||||
html,
|
||||
body {
|
||||
|
||||
Reference in New Issue
Block a user