| @@ -149,8 +149,63 @@ | ||
| 149 | 149 | margin: 0; |
| 150 | 150 | accent-color: #f252fc; |
| 151 | 151 | } |
| 152 | 152 | |
| 153 | +/* | |
| 154 | + * The field's label and the "too buggy" question share one grid cell, | |
| 155 | + * so the slot is always as tall as the taller of the two and swapping | |
| 156 | + * them never resizes the card. The card is centred: a height change | |
| 157 | + * would slide every checkbox under the pointer. | |
| 158 | + * | |
| 159 | + * The outgoing text hides its visibility only after its fade, and the | |
| 160 | + * incoming one shows at once, so assistive tech never meets both. | |
| 161 | + */ | |
| 162 | +.os-deactivation-feedback__field-head { | |
| 163 | + display: grid; | |
| 164 | + margin: 0 0 8px; | |
| 165 | +} | |
| 166 | + | |
| 167 | +.os-deactivation-feedback__label, | |
| 168 | +.os-deactivation-feedback__prompt { | |
| 169 | + grid-area: 1 / 1; | |
| 170 | + align-self: end; | |
| 171 | + margin: 0; | |
| 172 | + line-height: 1.45; | |
| 173 | + transition: | |
| 174 | + opacity 200ms ease, | |
| 175 | + transform 200ms ease, | |
| 176 | + visibility 0s linear 0s; | |
| 177 | +} | |
| 178 | + | |
| 179 | +.os-deactivation-feedback__label { | |
| 180 | + font-size: 13px; | |
| 181 | + color: #6b6771; | |
| 182 | +} | |
| 183 | + | |
| 184 | +.os-deactivation-feedback__prompt { | |
| 185 | + font-size: 13.5px; | |
| 186 | + font-weight: 600; | |
| 187 | + color: #1a1721; | |
| 188 | + opacity: 0; | |
| 189 | + transform: translateY(4px); | |
| 190 | + visibility: hidden; | |
| 191 | + transition-delay: 0s, 0s, 200ms; | |
| 192 | +} | |
| 193 | + | |
| 194 | +.os-deactivation-feedback__field-head[data-asking] .os-deactivation-feedback__label { | |
| 195 | + opacity: 0; | |
| 196 | + transform: translateY(-4px); | |
| 197 | + visibility: hidden; | |
| 198 | + transition-delay: 0s, 0s, 200ms; | |
| 199 | +} | |
| 200 | + | |
| 201 | +.os-deactivation-feedback__field-head[data-asking] .os-deactivation-feedback__prompt { | |
| 202 | + opacity: 1; | |
| 203 | + transform: none; | |
| 204 | + visibility: visible; | |
| 205 | + transition-delay: 0s; | |
| 206 | +} | |
| 207 | + | |
| 153 | 208 | .os-deactivation-feedback__details { |
| 154 | 209 | display: block; |
| 155 | 210 | width: 100%; |
| 156 | 211 | min-height: 72px; |
| @@ -249,6 +304,13 @@ | ||
| 249 | 304 | |
| 250 | 305 | .os-deactivation-feedback__btn, |
| 251 | 306 | .os-deactivation-feedback__reason { |
| 252 | 307 | transition: none; |
| 308 | + } | |
| 309 | + | |
| 310 | + /* The label and the question still cross-fade; they just don't slide. */ | |
| 311 | + .os-deactivation-feedback__label, | |
| 312 | + .os-deactivation-feedback__prompt, | |
| 313 | + .os-deactivation-feedback__field-head[data-asking] .os-deactivation-feedback__label { | |
| 314 | + transform: none; | |
| 253 | 315 | } |
| 254 | 316 | } |
