Implement the spring charger replacement UI.

chrome/browser/resources/chromeos/charger_replacement.css

+/* Copyright (c) 2013 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. */
+
+body {
+  padding: 8px;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.page {
+  display: none;
+  margin-left: 20px;
+  margin-right: 20px;
+  padding: 0;
+}
+
+body[page='0'] #check-charger,
+body[page='1'] #confirm-safe-charger {
+  display: block;
+}
+body[page='2'] #charger-update {
+  display: block;
+}
+body[page='3'] #order-charger-online {
+  display: block;
+}
+body[page='4'] #confirm-online-order {
+ display: block;
+}
+body[page='5'] #finish-not-order-charger {
+  display: block;
+}
+body[page='6'] #order-charger-offline {
+  display: block;
+}
+body[page='7'] #charger-still-bad {
+  display: block;
+}
+
+.button-strip {
+  display: -webkit-flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.command-button {
+  width: 80px;
+}
+
+.stop-use-recalled-charger {
+  font-weight: bold;
+}
+
+.checkbox-label {
+ margin-left: 5px;
+}
+
+.selected-charger {
+  border: 2px solid rgb(66, 129, 244);
+}
+
+.de-selected-charger {
+  border: 2px solid #999;
+}
+
+#select-device-country {
+  width: 270px;
+}
+
+#charger-selection {
+  display: -webkit-flex;
+  justify-content: space-between;
+  margin-bottom: 25px;
+  margin-top: 15px;
+}
+
+#charger-selection img {
+  display: block;
+}
+
+#safe-charger-checkmark {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#go-with-good-charger {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+#safe-charger-checkmark {
+  margin-bottom: 40px;
+  margin-top: 40px;
+}
+
+#back-to-check-charger {
+ margin-right: 10px;
+}
+
+#charger-order-form {
+  border-style: none;
+  height: 500px;
+  width: 1100px;
+}
+
+#back-to-check-charger-from-charger-update {
+  margin-right: 10px;
+}
+
+#not-order-charger-checkbox-strip {
+  display: -webkit-flex;
+  margin-left: 20px;
+  margin-top: 5px;
+}
+
+#offline-content {
+  display: -webkit-flex;
+  justify-content: space-between;
+}
+
+#offline-order-contact {
+  font-weight: bold;
+}
+
+#offline-content-left {
+  width: 450px;
+}
+
+#offline-content-divider {
+  border: 1px solid #f5f5f5;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+#offline-content-right {
+  display: -webkit-flex;
+  flex-direction: column;
+  height: 465px;
+  justify-content: space-between;
+}
+
+#confirm-offline-order-checkbox-strip {
+  display: -webkit-flex;
+  flex-direction: row;
+}
+
+#finish-still-bad-charger {
+  margin-top: 40px;
+}