Compare commits
2 Commits
3316ac89fd
...
7bb40d32f1
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7bb40d32f1 | ||
|
|
4d2a8dd26b |
@@ -84,6 +84,9 @@
|
|||||||
font-weight: var(--pi-theme-field-label-weight, inherit);
|
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-field.pi-form-field__textarea {
|
||||||
--pi-theme-field-radius: 1.25rem;
|
--pi-theme-field-radius: 1.25rem;
|
||||||
}
|
}
|
||||||
@@ -127,20 +130,3 @@
|
|||||||
font-size: var(--pi-font-size-x-small, 0.75rem);
|
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);
|
@include brand-ramp('highlighted', #6c2fb5, #ffffff);
|
||||||
}
|
}
|
||||||
|
|
||||||
// The `gradient` theme's signature — a gradient focus ring on fields — is a
|
// The `gradient` theme's focus ring is deliberately NOT lifted onto this shell.
|
||||||
// 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
|
// It is drawn as one continuous rounded rectangle over the whole field, while
|
||||||
// does not show through the ring.
|
// the outline underneath is split into three pieces. The leading piece is 12px
|
||||||
.pi-shell__alternative {
|
// wide, so a large radius clamps to a 12x24 ellipse there while the ring keeps
|
||||||
--pi-theme-field-focus-gradient: linear-gradient(
|
// a true 24px circle — two curves that cannot be made to agree at any radius,
|
||||||
120deg,
|
// showing as a doubled edge down the left of every field. Focus is left to the
|
||||||
var(--pi-color-primary),
|
// outline's own colour, which is what `alternative` already defines.
|
||||||
var(--pi-color-accent),
|
|
||||||
var(--pi-color-highlighted)
|
|
||||||
);
|
|
||||||
--pi-theme-field-border-color-focus: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
|
|||||||
Reference in New Issue
Block a user