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:
parent
6ff3970ec7
commit
00ecfc7f9a
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue