Use prettier for SCSS (#3895)

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / avatar.scss

.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;
		}
	}
}