1 files changed, 53 insertions, 0 deletions
diff --git a/browser/extensions/formautofill/skin/shared/editCreditCard.css b/browser/extensions/formautofill/skin/shared/editCreditCard.css
new file mode 100644
index 0000000000..00dde3b5b5
--- /dev/null
+++ b/browser/extensions/formautofill/skin/shared/editCreditCard.css
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.editCreditCardForm {
+  display: grid;
+  grid-template-areas:
+    "cc-number          cc-exp-month       cc-exp-year"
+    "cc-name            cc-csc             ."
+    "billingAddressGUID billingAddressGUID billingAddressGUID";
+  grid-template-columns: 4fr 2fr 2fr;
+  grid-row-gap: var(--grid-column-row-gap);
+  grid-column-gap: var(--grid-column-row-gap);
+}
+
+.editCreditCardForm label {
+  /* Remove the margin on these labels since they are styled on top of
+     the input/select element. */
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+.editCreditCardForm .container {
+  display: flex;
+}
+
+#cc-number-container {
+  grid-area: cc-number;
+}
+
+#cc-exp-month-container {
+  grid-area: cc-exp-month;
+}
+
+#cc-exp-year-container {
+  grid-area: cc-exp-year;
+}
+
+#cc-name-container {
+  grid-area: cc-name;
+}
+
+#cc-csc-container {
+  grid-area: cc-csc;
+}
+
+#billingAddressGUID-container {
+  grid-area: billingAddressGUID;
+}
+
+#billingAddressGUID {
+  grid-area: dropdown;
+}