Commit | Line | Data |
---|---|---|
a073b70d AE |
1 | .avatarEdit .avatarType { |
2 | display: flex; | |
3 | ||
4 | > dt { | |
5 | flex: 0 0 auto; | |
6 | order: 2; | |
7 | } | |
8 | ||
9 | > dd { | |
10 | order: 1; | |
11 | } | |
12 | ||
13 | .avatarUploadButtonContainer { | |
14 | margin-top: 10px; | |
15 | } | |
16 | ||
f216765b | 17 | @include screen-md-up { |
a073b70d AE |
18 | /* use fixed height to ensure a constant gap between <dl> with and without an image */ |
19 | height: 100px; | |
20 | ||
21 | > dt:not(:empty) { | |
22 | margin: 0 0 0 30px; | |
23 | } | |
24 | ||
25 | > dd { | |
26 | flex: 1 1 auto; | |
27 | } | |
28 | ||
29 | & + .avatarType { | |
30 | margin-top: 30px; | |
31 | } | |
32 | ||
33 | .avatarUploadButtonContainer { | |
34 | margin-left: 24px; | |
35 | } | |
36 | } | |
37 | ||
f216765b | 38 | @include screen-sm-down { |
a073b70d AE |
39 | flex-wrap: wrap; |
40 | ||
41 | > dt:not(:empty) { | |
42 | flex: 0 0 100%; | |
43 | margin-top: 20px; | |
44 | text-align: center; | |
45 | } | |
46 | ||
47 | > dd { | |
48 | flex: 0 0 100%; | |
49 | } | |
50 | ||
51 | .avatarUploadButtonContainer { | |
52 | text-align: center; | |
53 | } | |
54 | } | |
55 | } |