Temporary moves row gradient rules to kb-key.

BUG=352267

Review URL: https://codereview.chromium.org/196193007

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@257177 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 45 insertions, 91 deletions

diff --git a/ui/keyboard/resources/elements/kb-key.html b/ui/keyboard/resources/elements/kb-key.html
index 38b6c4b..9992aaf 100644
--- a/ui/keyboard/resources/elements/kb-key.html
+++ b/ui/keyboard/resources/elements/kb-key.html
@@ -92,6 +92,51 @@
         border-top-color: #4f4f4f;
       }
 
+      :host(:not(.dark):not(.active)) {
+        -webkit-box-shadow: inset 0px 1px #6f6f6f, inset 0px -1px #565656;
+        background-image: -webkit-linear-gradient(#636363, #5b5b5b);
+        background-size: cover;
+        border-bottom-color: #4a4a4a;
+        border-top-color: #878787;
+      }
+
+      /** TODO(rsadam@): Move to kb-row once /shadow/ is supported. */
+      :ancestor(kb-row:nth-child(2)):host(:not(.dark):not(.active)) {
+        -webkit-box-shadow: inset 0px 1px #666666, inset 0px -1px #4c4c4c;
+        background-image: -webkit-linear-gradient(#5a5a5a, #515151);
+        background-size: cover;
+        border-bottom-color: #414141;
+        border-top-color: #7f7f7f;
+      }
+
+      :ancestor(kb-row:nth-child(3)):host(:not(.dark):not(.active)) {
+        -webkit-box-shadow: inset 0px 1px #5d5d5d, inset 0px -1px #444444;
+        background-image: -webkit-linear-gradient(#505050, #494949);
+        background-size: cover;
+        border-bottom-color: #3a3a3a;
+        border-top-color: #787878;
+      }
+
+      :ancestor(kb-row:nth-child(n+3)):host(:not(.dark):not(.active)) {
+        -webkit-box-shadow: inset 0px 1px #565656, inset 0px -1px #434343;
+        background-image: -webkit-linear-gradient(#484848, #474747);
+        background-size: cover;
+        border-bottom-color: #393939;
+        border-top-color: #717171;
+      }
+
+      :ancestor(kb-row:nth-child(2)):host(:not([invert])) .hint {
+        color: #2C2C2C;
+      }
+
+      :ancestor(kb-row:nth-child(3)):host(:not([invert])) .hint {
+        color: #272727;
+      }
+
+      :ancestor(kb-row:nth-child(n+3)):host(:not([invert])) .hint {
+        color: #232323;
+      }
+
       /**
        * The microphone key is handled separately from other images since the
        * image displayed changes depending on whether it's pressed or not.
diff --git a/ui/keyboard/resources/elements/kb-row.html b/ui/keyboard/resources/elements/kb-row.html
index 394759d..e8429bb 100644
--- a/ui/keyboard/resources/elements/kb-row.html
+++ b/ui/keyboard/resources/elements/kb-row.html
@@ -15,97 +15,6 @@
     :host(:last-of-type) {
       margin-bottom: 0.25em;
     }
-    /**
-    * TODO(rsadam@): Remove polyfill shadowdom rules once we switch to native
-    * shadowdom.
-    */
-    :host:nth-child(1)>:not(.dark):not(.active) {
-      -webkit-box-shadow: inset 0px 1px #6f6f6f, inset 0px -1px #565656;
-      background-image: -webkit-linear-gradient(#636363, #5b5b5b);
-      background-size: cover;
-      border-bottom-color: #4a4a4a;
-      border-top-color: #878787;
-    }
-
-    :host:nth-child(2)>:not(.dark):not(.active) {
-      -webkit-box-shadow: inset 0px 1px #666666, inset 0px -1px #4c4c4c;
-      background-image: -webkit-linear-gradient(#5a5a5a, #515151);
-      background-size: cover;
-      border-bottom-color: #414141;
-      border-top-color: #7f7f7f;
-    }
-
-    :host:nth-child(3)>:not(.dark):not(.active) {
-      -webkit-box-shadow: inset 0px 1px #5d5d5d, inset 0px -1px #444444;
-      background-image: -webkit-linear-gradient(#505050, #494949);
-      background-size: cover;
-      border-bottom-color: #3a3a3a;
-      border-top-color: #787878;
-    }
-
-    :host:nth-child(n+3)>:not(.dark):not(.active) {
-      -webkit-box-shadow: inset 0px 1px #565656, inset 0px -1px #434343;
-      background-image: -webkit-linear-gradient(#484848, #474747);
-      background-size: cover;
-      border-bottom-color: #393939;
-      border-top-color: #717171;
-    }
-
-    :host:nth-child(2) :not([invert]) .hint {
-      color: #2C2C2C;
-    }
-
-    :host:nth-child(3) :not([invert]) .hint {
-      color: #272727;
-    }
-
-    :host:nth-child(4) :not([invert]) .hint {
-      color: #232323;
-    }
-
-    :host(:nth-child(1)) ::content :not(.dark):not(.active) {
-      -webkit-box-shadow: inset 0px 1px #6f6f6f, inset 0px -1px #565656;
-      background-image: -webkit-linear-gradient(#636363, #5b5b5b);
-      background-size: cover;
-      border-bottom-color: #4a4a4a;
-      border-top-color: #878787;
-    }
-
-    :host(:nth-child(2)) ::content :not(.dark):not(.active) {
-      -webkit-box-shadow: inset 0px 1px #666666, inset 0px -1px #4c4c4c;
-      background-image: -webkit-linear-gradient(#5a5a5a, #515151);
-      background-size: cover;
-      border-bottom-color: #414141;
-      border-top-color: #7f7f7f;
-    }
-
-    :host(:nth-child(3)) ::content :not(.dark):not(.active) {
-      -webkit-box-shadow: inset 0px 1px #5d5d5d, inset 0px -1px #444444;
-      background-image: -webkit-linear-gradient(#505050, #494949);
-      background-size: cover;
-      border-bottom-color: #3a3a3a;
-      border-top-color: #787878;
-    }
-
-    :host(:nth-child(n+3)) ::content :not(.dark):not(.active) {
-      -webkit-box-shadow: inset 0px 1px #565656, inset 0px -1px #434343;
-      background-image: -webkit-linear-gradient(#484848, #474747);
-      background-size: cover;
-      border-bottom-color: #393939;
-      border-top-color: #717171;
-    }
-
-    :host(nth-child(2)) ::content :not([invert]) .hint {
-      color: #2C2C2C;
-    }
-
-    :host(:nth-child(3)) ::content :not([invert]) .hint {
-      color: #272727;
-    }
-
-    :host(:nth-child(4)) ::content :not([invert]) .hint {
-      color: #232323;
-    }
     </style>
     <content select="*"></content>
   </template>