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

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

Index: chrome/browser/resources/chromeos/quick_unlock/pin.css
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin.css b/chrome/browser/resources/chromeos/quick_unlock/pin.css
new file mode 100644
index 0000000000000000000000000000000000000000..bb668657c416951795b17fb20a42d7b6422ef3bc
--- /dev/null
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin.css
@@ -0,0 +1,104 @@
+/* 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;
+}
+
+#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),

[tommycli, 2016/05/02 16:11:26]

It appears that this shares CSS from user_pod_row.css. Can we de-duplicate?

[jdufault, 2016/05/03 19:21:57]

The only way I can think of is to split user_pod_row.css into another file,
user_pod_row_shared.css, then <include> the css into each file.

The shared code is ~8 lines. I'm not sure it is worth it.

It's also possible the UI mocks will not include this common-theming in the
settings. If that's the case, then this CSS will be removed and put somewhere
else.

+              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;
+}
+
+.btn {

[tommycli, 2016/05/02 16:11:26]

Can we use a more descriptive class name such as "digit-button"?

[jdufault, 2016/05/03 19:21:57]

Done.

+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 50px;
+  display: flex;
+  font-size: 30px;
+  height: 100px;
+  justify-content: center;
+  margin: 5px;
+  min-width: 100px;
+  width: 100px;
+}
+
+.btn inner-text {
+  display: flex;
+  flex-direction: column;
+  height: 52px;
+}
+
+.btn inner-text subhead {
+  color: #969696;

[tommycli, 2016/05/02 16:11:26]

Can we use --paper-grey-500 here?

[jdufault, 2016/05/03 19:21:57]

Done.

+  font-size: 16px;
+}
+
+#submitContainer {
+  align-items: center;
+  display: flex;
+  height: 100px;
+  justify-content: center;
+  width: 100px;
+}
+
+.btn#submitButton {
+  background: rgb(63,132,249);

[tommycli, 2016/05/02 16:11:27]

spaces between commas

[jdufault, 2016/05/03 19:21:57]

Replaced with var(...).

+  color: white;
+  font-size: 20px;
+  height: 60px;
+  margin-bottom: 15px;
+  margin-right: 15px;
+  min-width: 0;
+  width: 60px;
+}
+
+.blank-element {
+  flex-grow: 1;
+}
+
+#profile-picture {
+  background: lightgray;
+  height: 150px;
+  margin: 10px;
+}
+
+#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,

[tommycli, 2016/05/02 16:11:26]

missing \n above

[jdufault, 2016/05/03 19:21:57]

Done.

+#pin-input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+[hidden] {

[tommycli, 2016/05/02 16:11:27]

Why is this necessary?

[jdufault, 2016/05/03 19:21:57]

Removed, stale/unused code.

+  display: none !important;

[tommycli, 2016/05/02 16:11:26]

Why is this necessary?

[jdufault, 2016/05/03 19:21:57]

Removed, stale/unused code.

+}