.avatarEdit .avatarType {
display: flex;
-
+
> dt {
flex: 0 0 auto;
order: 2;
}
-
+
> dd {
order: 1;
}
-
+
.avatarUploadButtonContainer {
margin-top: 10px;
}
-
+
@include screen-md-up {
/* use fixed height to ensure a constant gap between <dl> with and without an image */
min-height: 100px;
-
+
> dt:not(:empty) {
margin: 0 0 0 30px;
}
-
+
> dd {
flex: 1 1 auto;
}
-
+
& + .avatarType {
margin-top: 30px;
}
-
+
.avatarUploadButtonContainer {
margin-left: 24px;
}
}
-
+
@include screen-sm-down {
flex-wrap: wrap;
-
+
> dt:not(:empty) {
flex: 0 0 100%;
margin-top: 20px;
text-align: center;
}
-
+
> dd {
flex: 0 0 100%;
}
-
+
.avatarUploadButtonContainer {
text-align: center;
}