Make key spacing relative on the virtual keyboard.

BUG=257686

Review URL: https://chromiumcodereview.appspot.com/23619039

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

3 files changed, 20 insertions, 16 deletions

diff --git a/ui/keyboard/resources/elements/kb-row.html b/ui/keyboard/resources/elements/kb-row.html
index 0a00058..0398587 100644
--- a/ui/keyboard/resources/elements/kb-row.html
+++ b/ui/keyboard/resources/elements/kb-row.html
@@ -12,8 +12,11 @@
            -webkit-box-flex: 1;
            display: -webkit-box;
            text-align: center;
-           margin-right: 5px;
-           margin-top: 7px;
+           margin-right: 0.25em;
+           margin-top: 0.25em;
+        }
+        *:last-of-type {
+           margin-bottom: 0.25em;
         }
       }
       content::-webkit-distributed(kb-key) {
diff --git a/ui/keyboard/resources/main.css b/ui/keyboard/resources/main.css
index 556ac9a..81fe790 100644
--- a/ui/keyboard/resources/main.css
+++ b/ui/keyboard/resources/main.css
@@ -34,7 +34,7 @@ kb-key {
   display: -webkit-box;
   font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
   font-weight: 300;
-  margin-left: 7px;
+  margin-left: 0.25em;
   position: relative;
 }
 
@@ -45,8 +45,8 @@ kb-key::x-key {
   height: 1.2em;
   left: 0;
   margin: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 0.7em;
+  padding-right: 0.7em;
   position: absolute;
   right: 0;
   top: 0;
@@ -146,15 +146,16 @@ kb-altkey::x-key {
   -webkit-box-flex: 0.6 !important;
 }
 
-.backspace,
-.dotcom,
-.left-more,
-.shift,
-.return,
-.right-more,
-.symbol,
-.tab {
+kb-shift-key.shift,
+kb-key:-webkit-any(.backspace,
+                   .dotcom,
+                   .left-more,
+                   .return,
+                   .symbol,
+                   .tab) {
   font-size: 70%;
+  /* Adjust margin for consistent spacing with the smaller font size. */
+  margin-left: 0.35em;
 }
 
 .microphone {
diff --git a/ui/keyboard/resources/webui/main.css b/ui/keyboard/resources/webui/main.css
index afd58e6..092abd2 100644
--- a/ui/keyboard/resources/webui/main.css
+++ b/ui/keyboard/resources/webui/main.css
@@ -31,7 +31,7 @@ kb-key {
   display: -webkit-box;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
-  margin-left: 3px;
+  margin-left: 0.2em;
   position: relative;
 }
 
@@ -41,8 +41,8 @@ kb-key::x-key {
   height: 1.2em;
   left: 0;
   margin: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
   position: absolute;
   right: 0;
   top: 0;