@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);
}
margin-top: 20px;
text-align: center;
}
-
+
.thirdPartyLogin {
flex: 0 0 100%;
-
+
& + .thirdPartyLogin {
margin-top: 10px;
}
-
+
.thirdPartyLoginButton {
align-items: center;
display: flex;
-
+
@include thirdPartyLoginButtons;
}
}
-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;
}
.contentHeader ~ .loginForm {
margin-top: 30px;
}
-
+
/* force columns to be 300px wide in login overlay */
.dialogContent .loginForm:not(.loginFormLoginOnly) .section {
width: 300px;
#\33 rdParty.section .thirdPartyLoginButton {
align-items: center;
display: inline-flex;
-
+
@include thirdPartyLoginButtons;
}