1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
/* 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));
}
/* Begin name field rules */
#name-container input {
/* Override the default @size="20" on <input>, which acts like a min-width, not
* allowing the fields to shrink with flexbox as small as they need to to match
* the other rows. This is noticeable on narrow viewports e.g. in the
* PaymentRequest dialog on Linux due to the larger font-size. */
width: 0;
}
/* When there is focus within any of the name fields, the border of the inputs
* should be the focused color, except for inner ones which get overriden below. */
#name-container:focus-within input {
border-color: var(--in-content-border-focus);
}
/* Invalid name fields should show the error outline instead of the focus border */
#name-container:focus-within input:-moz-ui-invalid {
border-color: transparent;
}
#given-name-container,
#additional-name-container,
#family-name-container {
display: flex;
/* The 3 pieces inside the name container don't have the .container class so
need to set flex-grow themselves. See `.editAddressForm .container` */
flex-grow: 1;
/* Remove the bottom margin from the name containers so that the outer
#name-container provides the margin on the outside */
margin-bottom: 0 !important;
margin-inline: 0;
}
/* The name fields are placed adjacent to each other.
Remove the border-radius on adjacent fields. */
#given-name:dir(ltr),
#family-name:dir(rtl) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-width: 0;
}
#given-name:dir(rtl),
#family-name:dir(ltr) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-width: 0;
}
#additional-name {
border-radius: 0;
/* This provides the inner separators between the fields and should never
* change to the focused color. */
border-inline-color: var(--in-content-box-border-color) !important;
}
/* Since the name fields are adjacent, there isn't room for the -moz-ui-invalid
box-shadow so raise invalid name fields and their labels above the siblings
so the shadow is shown around all 4 sides. */
#name-container input:-moz-ui-invalid,
#name-container input:-moz-ui-invalid ~ .label-text {
z-index: 1;
}
/* End name field rules */
#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;
}
dialog:not([subdialog]) #country-warning-message {
display: none;
}
|
