fix(docs-infra): ensure the main font is applied to inputs (#40881)

It turns out that `<input>` and `<button>` elements do not inherit the
`font-family` style from `<body>` by default, but rather use a
user-agent defined style. This means that their font-family might be
different than the one used in the rest of the page.

This commit fixes it by ensuring `<input>` (and other) elements inherit
their `font-family` style from their parent element.

Before: ![inputs font before][1]
After: ![inputs font after][2]

(The difference in font is subtle, but it's there.)

[1]: https://user-images.githubusercontent.com/8604205/107853245-76bae980-6e1d-11eb-8318-e5f6e13876cc.png
[2]: https://user-images.githubusercontent.com/8604205/107853246-77538000-6e1d-11eb-86f2-e3e7e41158f5.png

PR Close #40881
This commit is contained in:
George Kalpakas 2021-02-18 18:42:48 +02:00 committed by atscott
parent 7bcef26852
commit 44e1f956d0
3 changed files with 5 additions and 1 deletions

View File

@ -100,6 +100,7 @@ input,
a {
@include font-size(16);
@include line-height(32);
font-family: inherit;
font-weight: 400;
color: $darkgray;

View File

@ -63,7 +63,6 @@ aio-nav-menu {
color: $darkgray;
cursor: pointer;
display: flex;
font-family: $main-font;
align-items: center;
justify-content: space-between;
overflow-wrap: break-word;

View File

@ -1,5 +1,9 @@
/* Button Styles */
button {
font-family: inherit;
}
.button,
a.button.mat-button {
display: inline-block;