Use prettier for SCSS (#3895)

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

@mixin thirdPartyLoginButtons {
	border-width: 0;
	color: rgba(255, 255, 255, 1);

	> .icon {
		flex: 0 0 24px;
	}

	> span:not(.icon) {
		flex: 1 1 auto;
		margin-left: 5px;
	}

	/* branding */
	&.googleLoginButton {
		background-color: rgb(255, 255, 255);
		border: 1px solid rgb(233, 233, 233);
		color: rgb(51, 51, 51);

		&:hover {
			background-color: rgb(255, 255, 255);
		}

		.fa-google {
			background-image: url(data:image/png;base64,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);
			background-repeat: no-repeat;
			background-size: contain;

			&::before {
				display: none;
			}
		}
	}

	&.facebookLoginButton {
		background-color: rgb(59, 89, 152);

		&:hover {
			background-color: rgb(48, 72, 123);
		}
	}

	&.twitterLoginButton {
		background-color: rgb(85, 172, 238);

		&:hover {
			background-color: rgb(48, 154, 234);
		}
	}

	&.githubLoginButton {
		background-color: rgb(68, 68, 68);

		&:hover {
			background-color: rgb(48, 48, 48);
		}
	}
}

.loginForm > form {
	.userLoginButtons {
		margin-top: 20px;
		text-align: center;
	}

	.thirdPartyLogin {
		flex: 0 0 100%;

		& + .thirdPartyLogin {
			margin-top: 10px;
		}

		.thirdPartyLoginButton {
			align-items: center;
			display: flex;

			@include thirdPartyLoginButtons;
		}
	}
}

@include screen-md-up {
	.loginForm:not(.loginFormLoginOnly) > form {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;

		-webkit-column-gap: 40px;
		-moz-column-gap: 40px;
		column-gap: 40px;

		> .section {
			/* Sections should never be split, but Firefox, IE and Edge don't seem
			   to care about this despite advertising the support for it. We can work
			   around this by using `overflow: hidden` which magically does the job,
			   but doesn't affect Chrome which properly breaks anyway. */

			margin-top: 0;
			overflow: hidden; /* Fix for Firefox, IE and Edge */

			-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
			page-break-inside: avoid; /* Firefox */
			break-inside: avoid; /* IE 10+ */

			&.loginFormLogin {
				page-break-after: always;
				break-after: always;
				-webkit-column-break-after: always;
			}

			&.loginFormRegister {
				margin-top: 0;

				& + .loginFormThirdPartyLogin {
					margin-top: 30px;
				}
			}
		}
	}
}

@include screen-md-up {
	/* full page login: missing margin due to different DOM */
	.contentHeader ~ .loginForm {
		margin-top: 30px;
	}

	/* force columns to be 300px wide in login overlay */
	.dialogContent .loginForm:not(.loginFormLoginOnly) .section {
		width: 300px;
	}
}

.loginFormLogin > .section {
	margin-top: 30px !important;
}

/* CSS does not allow selectors starting with a number. 
   Therefore we are using the unicode character to identify
   the correct selector. In a nutshell: the selector is #3rdParty.section */
#\33 rdParty.section .thirdPartyLoginButton {
	align-items: center;
	display: inline-flex;

	@include thirdPartyLoginButtons;
}