1 @mixin thirdPartyLoginButtons {
3 color: rgba(255, 255, 255, 1);
16 background-color: rgb(221, 75, 57);
19 background-color: rgb(202, 53, 35);
23 &.facebookLoginButton {
24 background-color: rgb(59, 89, 152);
27 background-color: rgb(48, 72, 123);
31 &.twitterLoginButton {
32 background-color: rgb(85, 172, 238);
35 background-color: rgb(48, 154, 234);
40 background-color: rgb(68, 68, 68);
43 background-color: rgb(48, 48, 48);
57 & + .thirdPartyLogin {
61 .thirdPartyLoginButton {
65 @include thirdPartyLoginButtons;
70 @include screen-md-up {
71 .loginForm:not(.loginFormLoginOnly) > form {
72 -webkit-column-count: 2;
76 -webkit-column-gap: 40px;
77 -moz-column-gap: 40px;
81 /* Sections should never be split, but Firefox, IE and Edge don't seem
82 to care about this despite advertising the support for it. We can work
83 around this by using `overflow: hidden` which magically does the job,
84 but doesn't affect Chrome which properly breaks anyway. */
87 overflow: hidden; /* Fix for Firefox, IE and Edge */
89 -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
90 page-break-inside: avoid; /* Firefox */
91 break-inside: avoid; /* IE 10+ */
94 page-break-after: always;
96 -webkit-column-break-after: always;
102 & + .loginFormThirdPartyLogin {
110 @include screen-md-up {
111 /* full page login: missing margin due to different DOM */
112 .contentHeader ~ .loginForm {
116 /* force columns to be 300px wide in login overlay */
117 .dialogContent .loginForm:not(.loginFormLoginOnly) .section {
122 .loginFormLogin > .section {
123 margin-top: 30px !important;
126 /* CSS does not allow selectors starting with a number.
127 Therefore we are using the unicode character to identify
128 the correct selector. In a nutshell: the selector is #3rdParty.section */
129 #\33 rdParty.section .thirdPartyLoginButton {
130 @include thirdPartyLoginButtons;