Refactor CSS rules for the shift-key.

BUG=357714

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

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

ui/keyboard/resources/elements/kb-key.html

@@ -29,6 +29,7 @@
         margin: auto;
         position: absolute;
         right: 0;
+        text-align: center;
         top: 0;
       }
 

ui/keyboard/resources/elements/kb-shift-key.html

@@ -9,64 +9,31 @@
     extends="kb-key">
   <template>
     <style>
-    :host() {
-      border-radius: 2px;
-      border-style: solid;
-      border-width: 1px 0;
-      color: #ffffff;
-      font-family: roboto-bold;
-      font-weight: 300;
-    }
+      .shift-light-wrapper {
+        bottom: 3px;
+        height: 10%;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        width: 100%;
+      }
 
-    :host(.active) {
-      -webkit-box-shadow: inset 0 1px #969696, inset 0 -1px #6f6f6f;
-      background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d);
-      background-size: cover;
-      border-bottom-color: #5b5b5b;
-      border-top-color: #a4a4a4;
-    }
-
-    :host() .key {
-      background-image: none;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      bottom: 0;
-      font-size: 70%;
-      height: 70%;
-      left: 0;
-      margin: auto;
-      position: absolute;
-      right: 0;
-      top: 0;
-      width: auto;
-    }
-
-    :host() .shift-light-wrapper {
-      bottom: 3px;
-      height: 10%;
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      width: 100%;
-    }
-
-    :host() .shift-light {
-      -webkit-box-shadow: inset 0 1px #101010, inset 0 -1px #444444;
-      background-image: -webkit-linear-gradient(#101010, #000000);
-      border: solid;
-      border-bottom-color: #1d1d1d;
-      border-top-color: #2d2d2d;
-      border-width: 1px 0;
-      height: 0.3em;
-      margin: 0 auto;
-      position: relative;
-      width: 1.8em;
-    }
-  </style>
-    <div id="key" class="key"> </div>
+      .shift-light {
+        -webkit-box-shadow: inset 0 1px #101010, inset 0 -1px #444444;
+        background-image: -webkit-linear-gradient(#101010, #000000);
+        border: solid;
+        border-bottom-color: #1d1d1d;
+        border-top-color: #2d2d2d;
+        border-width: 1px 0;
+        height: 0.3em;
+        margin: 0 auto;
+        position: relative;
+        width: 1.8em;
+      }
+    </style>
     <div class="shift-light-wrapper">
       <div class="shift-light"> </div>
     </div>
+    <shadow></shadow>
   </template>
 </polymer-element>

ui/keyboard/resources/main.css

@@ -18,18 +18,18 @@ kb-keyboard.alt-active kb-modifier-key[char=Alt] {
   color: lightblue;
 }
 
-kb-keyboard[keyset="upper"] kb-shift-key.dark /shadow-deep/ .key {
+kb-keyboard[keyset="upper"] kb-shift-key.dark /deep/ .key {
   background-image: url('images/shift-filled.svg');
 }
 
-kb-keyboard[keyset="lower"] kb-shift-key /shadow-deep/ .key {
+kb-keyboard[keyset="lower"] kb-shift-key /deep/ .key{
   background-image: url('images/shift.svg');
 }
 
 /**
 * Controls whether the shift key should be highlighted or not.
 */
-kb-keyboard.caps-locked kb-shift-key.dark /shadow-deep/
+kb-keyboard.caps-locked kb-shift-key.dark /deep/
     .shift-light {
   -webkit-box-shadow: 0 1px 1px rgba(213, 213, 213, 0.5),
     0 -1px 1px rgba(213, 213, 213, 0.5);
@@ -37,7 +37,7 @@ kb-keyboard.caps-locked kb-shift-key.dark /shadow-deep/
   border: none;
   height: 0.2em;
 }
-kb-keyboard.caps-locked kb-shift-key.dark /shadow-deep/
+kb-keyboard.caps-locked kb-shift-key.dark /deep/
     .shift-light-wrapper {
   bottom: 2px;
 }
@@ -72,15 +72,15 @@ kb-row:nth-child(n+3) kb-key:not(.dark):not(.active){
   border-top-color: #717171;
 }
 
-kb-row:nth-child(2) kb-key:not([invert]) /shadow-deep/ .hint {
+kb-row:nth-child(2) kb-key:not([invert]) /deep/ .hint {
   color: #2C2C2C;
 }
 
-kb-row:nth-child(3) kb-key:not([invert]) /shadow-deep/ .hint {
+kb-row:nth-child(3) kb-key:not([invert]) /deep/ .hint {
   color: #272727;
 }
 
-kb-row:nth-child(n+3) kb-key:not([invert]) /shadow-deep/ .hint {
+kb-row:nth-child(n+3) kb-key:not([invert]) /deep/ .hint {
   color: #232323;
 }