X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=src%2Fui%2Fkeyboard%2Fresources%2Felements%2Fkb-row.html;h=d858ac18af2b2ded2306a790709c3acbf2755e59;hb=ff3e2503a20db9193d323c1d19c38c68004dec4a;hp=fbfbded5a355bf22d2d5224af9ae9e0b63aea275;hpb=7338fba38ba696536d1cc9d389afd716a6ab2fe6;p=platform%2Fframework%2Fweb%2Fcrosswalk.git

diff --git a/src/ui/keyboard/resources/elements/kb-row.html b/src/ui/keyboard/resources/elements/kb-row.html
index fbfbded..d858ac1 100644
--- a/src/ui/keyboard/resources/elements/kb-row.html
+++ b/src/ui/keyboard/resources/elements/kb-row.html
@@ -4,23 +4,76 @@
   -- found in the LICENSE file.
   -->
 
-<polymer-element name="kb-row" attributes="align">
+<polymer-element name="kb-row" attributes="align weight">
   <template>
     <style>
-      :host {
-        text-align: center;
-        margin-right: 0.25em;
-        margin-top: 0.25em;
-      }
-      :host :last-of-type {
-        margin-bottom: 0.25em;
-      }
+    :host {
+      text-align: center;
+      margin-right: 0.25em;
+      margin-top: 0.25em;
+    }
+    :host :last-of-type {
+      margin-bottom: 0.25em;
+    }
+
+    :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(4)>: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>: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])::part(hint) {
+      color: #2C2C2C;
+    }
+
+    :host:nth-child(3) :not([invert])::part(hint) {
+      color: #272727;
+    }
+
+    :host:nth-child(4) :not([invert])::part(hint) {
+      color: #232323;
+    }
     </style>
     <content select="*"></content>
   </template>
   <script>
     Polymer('kb-row', {
       align: RowAlignment.STRETCH,
+      weight: DEFAULT_KEY_WEIGHT_Y,
     });
   </script>
 </polymer-element>