editDialog-shared.css (2348B)
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 :root { 6 --in-field-label-size: 0.8em; 7 --grid-column-row-gap: 8px; 8 /* Use the animation-easing-function that is defined in global-shared.css. */ 9 --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1); 10 } 11 12 /* The overly specific input attributes are required to override 13 padding from common.css */ 14 form input[type="email"], 15 form input[type="tel"], 16 form input[type="text"], 17 form textarea, 18 form select { 19 flex-grow: 1; 20 padding-top: calc(var(--in-field-label-size) + 0.4em); 21 } 22 23 form input[type="tel"] { 24 text-align: match-parent; 25 } 26 27 select { 28 margin: 0; 29 padding-bottom: 5px; 30 } 31 32 form label[class="container"] select { 33 min-width: 0; 34 } 35 36 form label, 37 form div { 38 /* Positioned so that the .label-text and .error-text children will be 39 positioned relative to this. */ 40 position: relative; 41 display: block; 42 line-height: 1em; 43 } 44 45 /* Reset margins for inputs and textareas, overriding in-content styles */ 46 #form textarea, 47 #form input { 48 margin: 0; 49 } 50 51 form :is(label, div) .label-text { 52 position: absolute; 53 opacity: 0.5; 54 pointer-events: none; 55 inset-inline-start: 10px; 56 top: 0.2em; 57 transition: 58 top 0.2s var(--animation-easing-function), 59 font-size 0.2s var(--animation-easing-function); 60 } 61 62 form :is(label, div):focus-within .label-text, 63 form :is(label, div) .label-text[field-populated] { 64 top: 0; 65 font-size: var(--in-field-label-size); 66 } 67 68 form :is(input, select, textarea):focus ~ .label-text { 69 color: var(--color-accent-primary-selected); 70 opacity: 1; 71 } 72 73 /* Focused error fields should get a darker text but not the blue one since it 74 * doesn't look good with the red error outline. */ 75 form :is(input, select, textarea):focus:user-invalid ~ .label-text { 76 color: var(--text-color); 77 } 78 79 form div[required] > label .label-text::after, 80 form :is(label, div)[required] .label-text::after { 81 content: attr(fieldRequiredSymbol); 82 } 83 84 .persist-checkbox label { 85 display: flex; 86 flex-direction: row; 87 align-items: center; 88 margin-block: var(--grid-column-row-gap); 89 } 90 91 #controls-container { 92 display: flex; 93 justify-content: end; 94 margin: 1em 0 0; 95 } 96 97 #billingAddressGUID-container { 98 display: none; 99 }