1 files changed, 60 insertions, 0 deletions
diff --git a/browser/extensions/formautofill/skin/shared/editAddress.css b/browser/extensions/formautofill/skin/shared/editAddress.css
new file mode 100644
index 0000000000..c50024e542
--- /dev/null
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -0,0 +1,60 @@
+/* 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/. */
+
+.editAddressForm {
+  display: flex;
+  flex-wrap: wrap;
+  /* Use space-between so --grid-column-row-gap is in between the elements on a row */
+  justify-content: space-between;
+}
+
+dialog:not([subdialog]) .editAddressForm {
+  margin-inline: calc(var(--grid-column-row-gap) / -2);
+}
+
+.editAddressForm .container {
+  /* !important is needed to override preferences.css's generic label rule. */
+  margin-top: var(--grid-column-row-gap) !important;
+  margin-inline: calc(var(--grid-column-row-gap) / 2);
+  flex-grow: 1;
+}
+
+#country-container {
+  /* The country dropdown has a different intrinsic (content) width than the
+     other fields which are <input>. */
+  flex-basis: calc(50% - var(--grid-column-row-gap));
+  flex-grow: 0;
+  /* Country names can be longer than 50% which ruins the symmetry in the grid. */
+  max-width: calc(50% - var(--grid-column-row-gap));
+}
+
+#name-container,
+#street-address-container {
+  /* Name and street address are always full-width */
+  flex: 0 1 100%;
+}
+
+#street-address {
+  resize: vertical;
+}
+
+#country-warning-message {
+  box-sizing: border-box;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  text-align: start;
+  opacity: .5;
+  padding-inline-start: 1em;
+  flex: 1;
+}
+
+dialog:not([subdialog]) #country-warning-message {
+  display: none;
+}
+
+moz-button-group{
+  margin-inline: 4px;
+  margin-block-end: 4px;
+}