Add a very basic PIN UI implementation that is shared between lock and settings.

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

+/* 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.
+ */
+
+#root {
+  display: flex;
+}
+
+/* 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;
+  border-radius: 2px;
+  box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
+              0 2px 6px rgba(0, 0, 0, 0.15),
+              0 3px 0 rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  flex-direction: column;
+  outline: none;
+}
+
+.row {
+  display: flex;
+}
+
+.row.horizontal-center {
+  justify-content: center;
+}
+
+.digit-button {
+  align-items: center;
+  background: none;
+  border-radius: 50px;
+  display: flex;
+  font-size: 30px;
+  justify-content: center;
+  margin: 5px;
+  min-width: 94px;
+  width: 94px;
+}
+
+.digit-button inner-text {
+  display: flex;
+  flex-direction: column;
+  height: 52px;
+}
+
+.digit-button inner-text subhead {
+  color: var(--paper-grey-500);
+  font-size: 16px;
+}
+
+.digit-button .submit-button {
+  background: var(--paper-blue-a400);
+  color: white;
+  font-size: 20px;
+  height: 60px;
+  min-width: 0;
+  width: 60px;
+}
+
+#pin-input {
+  -webkit-text-security: disc;
+  border-bottom-color: lightgray;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  font-size: 20px;
+  height: 30px;
+  margin-top: 10px;
+  text-align: center;
+  width: 95%;
+}
+
+#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;
+}