From 00ecfc7f9a9c465f195df65f5492a799e3191fc5 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 25 Jun 2019 12:16:59 +0300
Subject: [PATCH] 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
---
 aio/src/styles/2-modules/_api-list.scss | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index cfed7402f6..795e5d81c4 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -78,15 +78,21 @@ aio-api-list {
     transition: all .2s;
 
     // PLACEHOLDER TEXT
-    &::-webkit-input-placeholder,
-    &::-moz-placeholder,
-    &::-ms-input-placeholder,
-    &:-moz-placeholder {
-      /* Chrome/Opera/Safari */
-      /* Firefox 19+ */
-      /* IE 10+ */
-      /* Firefox 18- */
-
+    // NOTE: Vendor-prefixed selectors must be on separate blocks, because one invalid/unknown
+    //       selector will invalidate the whole block.
+    &::placeholder {  // Chrome/Firefox/Safari
+      color: $blue-grey-100;
+      @include font-size(14);
+    }
+    &::-webkit-input-placeholder {  // QQ Browser
+      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;
       @include font-size(14);
     }