editAddress.css (1378B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .editAddressForm { 6 display: flex; 7 flex-wrap: wrap; 8 /* Use space-between so --grid-column-row-gap is in between the elements on a row */ 9 justify-content: space-between; 10 } 11 12 .editAddressForm .container { 13 /* !important is needed to override preferences.css's generic label rule. */ 14 margin-top: var(--grid-column-row-gap) !important; 15 margin-inline: calc(var(--grid-column-row-gap) / 2); 16 flex-grow: 1; 17 18 &.new-line { 19 flex: 0 1 100%; 20 } 21 22 input, 23 textarea, 24 select { 25 width: 100%; 26 margin: 0; 27 } 28 } 29 30 #country-container { 31 /* The country dropdown has a different intrinsic (content) width than the 32 other fields which are <input>. */ 33 flex-basis: calc(50% - var(--grid-column-row-gap)); 34 flex-grow: 0; 35 /* Country names can be longer than 50% which ruins the symmetry in the grid. */ 36 max-width: calc(50% - var(--grid-column-row-gap)); 37 } 38 39 #street-address { 40 resize: vertical; 41 } 42 43 #country-warning-message { 44 box-sizing: border-box; 45 font-size: 1rem; 46 display: flex; 47 align-items: center; 48 text-align: start; 49 opacity: 0.5; 50 padding-inline-start: 1em; 51 flex: 1; 52 } 53 54 moz-button-group { 55 margin-inline: 4px; 56 margin-block-end: 4px; 57 }