Pin keyboard moved to under the user profile.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
index 578269313f4b33d49fe26c54d4c91200c503e443..82fa625ffabb4473ccddb1c8869d85f53ddb803f 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
@@ -26,16 +26,23 @@
         cursor: pointer;
         flex-direction: column;
         outline: none;
+        width: 100%;
       }
 
       .row {
         display: flex;
+        width: 100%;
       }
 
       .row.horizontal-center {
+        height: 16%;
         justify-content: center;
       }
 
+      .row.keyboard {
+        height: 21%;

[jdufault, 2016/06/14 22:50:33]

For this entire CL, can we use margin/offset with pixel values instead of using
% values?

+      }
+
       .digit-button {
         align-items: center;
         background: none;
@@ -44,14 +51,21 @@
         font-size: 30px;
         justify-content: center;
         margin: 5px;
-        min-width: 94px;
-        width: 94px;
+      }
+
+      .row.keyboard paper-button {
+        display: block;
+        min-height: 20px;
+        min-width: 20px;
+        position: relative;
+        width: 34%;

[jdufault, 2016/06/14 22:50:33]

Do the buttons change sizes? Can we define the width in terms of pixels?

       }
 
       .digit-button inner-text {
         display: flex;
         flex-direction: column;
-        height: 52px;
+        font-size: 34px;
+        text-align: center;
       }
 
       .digit-button inner-text subhead {
@@ -63,9 +77,7 @@
         background: var(--paper-blue-a400);
         color: white;
         font-size: 20px;
-        height: 60px;
         min-width: 0;
-        width: 60px;
       }
 
       #pin-input {
@@ -93,14 +105,12 @@
         pointer-events: none;
       }
     </style>
-
     <div id="root">

[jdufault, 2016/06/14 22:50:33]

Revert change.

[sammiequon, 2016/06/15 21:56:58]

Done.

       <div id="container-constrained-width">
         <div class="row horizontal-center">
           <input id="pin-input" type="number" placeholder="Enter PIN"
                  on-keydown="onInputKeyDown_"></input>
         </div>
-
         <div class="row keyboard">

[jdufault, 2016/06/14 22:50:33]

Revert change.

[sammiequon, 2016/06/15 21:56:58]

Done.

           <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
             <inner-text>1</inner-text>
@@ -144,7 +154,6 @@
                                icon="icons:check" on-tap="onPinSubmit_">
             </paper-icon-button>
           </div>
-        </div>
       </div>

[jdufault, 2016/06/14 22:50:33]

Revert change.

[sammiequon, 2016/06/15 21:56:58]

Done.

     </div>
   </template>