Pin keyboard moved to under the user profile.

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

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.css
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.css b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.css
new file mode 100644
index 0000000000000000000000000000000000000000..ba322f499306be31c627a22d0bce5f34f56895f9
--- /dev/null
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.css
@@ -0,0 +1,112 @@
+/* Copyright 2016 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ *
+ * This is the stylesheet used by the pin keyboard on the lock screen.
+ */
+

[jdufault, 2016/05/31 19:24:51]

Is there a reason to move the css into it's own file?

md-settings has stylesheets inline in HTML files, login/lock has them in
separate files. However, linked stylesheets (used here) are deprecated in
polymer.

[sammiequon, 2016/06/14 22:22:21]

Done. Reverted back to inline css.

+#root {
+  display: flex;
+}
+
+.pod #pin-container {
+  display: block;
+  height: 60%;
+  position: absolute;
+  top: 40%;
+  width: 100%;
+}
+
+/* TODO(jdufault): Remove this CSS once we inline the PIN element with the
+ * user-pod. */
+#container-constrained-width {
+  -webkit-tap-highlight-color: transparent;
+  background: white;
+  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%;
+}
+
+.digit-button {
+  align-items: center;
+  background: none;
+  display: flex;
+  justify-content: center;
+}
+
+.row.keyboard paper-button {
+  display: block;
+  margin: 0 0 0 0;
+  min-height: 20px;
+  min-width: 20px;
+  position: relative;
+  width: 34%;
+}
+
+.digit-button inner-text {
+  display: flex;
+  flex-direction: column;
+  font-size: 34px;
+  text-align: center;
+}
+
+.digit-button inner-text subhead {
+  color: var(--paper-grey-500);
+  font-size: 12px;
+}
+
+.digit-button .submit-button .clear-button {
+  background: var(--paper-blue-a400);
+  color: white;
+  font-size: 50px;
+  min-width: 0;
+}
+
+.digit-button.clear-button {
+  display: block;
+  height: 100%;
+  margin: 0 0 0 0;
+  padding: 10% 10% 10% 10%;
+  position: relative;
+  width: 34%;
+}
+
+.row.keyboard paper-button[value='0'] {
+  width: 34%;
+}
+
+#pin-input {
+  -webkit-text-security: disc;
+  display: flex;
+  font-size: 16px;
+  height: 100%;
+  text-align: center;
+  width: 100%;
+}
+
+#pin-input[type=number]::-webkit-inner-spin-button,
+#pin-input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Ensure that all children of paper-button do not consume events. This
+ * simplifies the event handler code. */
+paper-button * {
+  pointer-events: none;
+}