fix(docs-infra): separate vendor-specific CSS selectors (#31252)

In #31118, some vendor-specific selectors were combined in one rule-set.
As pointed out in [this comment][1], this would result in the whole
rule-set being ignored by all browsers, since one invalid/unrecognized
selector invalidates the declaration block.

This commit fixes it by defining a separate rule-set per selector. The
list of vendor-specific selectors is also adjusted to better target the
currently supported browsers.

[1]: https://github.com/angular/angular/pull/31118/files#r296923652

PR Close #31252
This commit is contained in:
George Kalpakas 2019-06-25 12:16:59 +03:00 committed by Kara Erickson
parent 6ff3970ec7
commit 00ecfc7f9a
1 changed files with 15 additions and 9 deletions

View File

@ -78,15 +78,21 @@ aio-api-list {
transition: all .2s; transition: all .2s;
// PLACEHOLDER TEXT // PLACEHOLDER TEXT
&::-webkit-input-placeholder, // NOTE: Vendor-prefixed selectors must be on separate blocks, because one invalid/unknown
&::-moz-placeholder, // selector will invalidate the whole block.
&::-ms-input-placeholder, &::placeholder { // Chrome/Firefox/Safari
&:-moz-placeholder { color: $blue-grey-100;
/* Chrome/Opera/Safari */ @include font-size(14);
/* Firefox 19+ */ }
/* IE 10+ */ &::-webkit-input-placeholder { // QQ Browser
/* Firefox 18- */ color: $blue-grey-100;
@include font-size(14);
}
&::-ms-input-placeholder { // Edge
color: $blue-grey-100;
@include font-size(14);
}
&:-ms-input-placeholder { // IE
color: $blue-grey-100; color: $blue-grey-100;
@include font-size(14); @include font-size(14);
} }