Commit | Line | Data |
---|---|---|
90c74b45 JR |
1 | @mixin thirdPartyLoginButtons { |
2 | border-width: 0; | |
3 | color: rgba(255, 255, 255, 1); | |
8a52619a | 4 | |
90c74b45 JR |
5 | > .icon { |
6 | flex: 0 0 24px; | |
7 | } | |
8a52619a | 8 | |
90c74b45 JR |
9 | > span:not(.icon) { |
10 | flex: 1 1 auto; | |
11 | margin-left: 5px; | |
12 | } | |
8a52619a | 13 | |
90c74b45 JR |
14 | /* branding */ |
15 | &.googleLoginButton { | |
0d20a926 MW |
16 | background-color: rgb(255, 255, 255); |
17 | border: 1px solid rgb(233, 233, 233); | |
18 | color: rgb(51, 51, 51); | |
8a52619a | 19 | |
90c74b45 | 20 | &:hover { |
0d20a926 MW |
21 | background-color: rgb(255, 255, 255); |
22 | } | |
8a52619a | 23 | |
0d20a926 MW |
24 | .fa-google { |
25 | background-image: url(data:image/png;base64,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); | |
26 | background-repeat: no-repeat; | |
27 | background-size: contain; | |
8a52619a | 28 | |
0d20a926 MW |
29 | &::before { |
30 | display: none; | |
31 | } | |
90c74b45 JR |
32 | } |
33 | } | |
8a52619a | 34 | |
90c74b45 JR |
35 | &.facebookLoginButton { |
36 | background-color: rgb(59, 89, 152); | |
8a52619a | 37 | |
90c74b45 JR |
38 | &:hover { |
39 | background-color: rgb(48, 72, 123); | |
40 | } | |
41 | } | |
8a52619a | 42 | |
90c74b45 JR |
43 | &.twitterLoginButton { |
44 | background-color: rgb(85, 172, 238); | |
8a52619a | 45 | |
90c74b45 JR |
46 | &:hover { |
47 | background-color: rgb(48, 154, 234); | |
48 | } | |
49 | } | |
8a52619a | 50 | |
90c74b45 JR |
51 | &.githubLoginButton { |
52 | background-color: rgb(68, 68, 68); | |
8a52619a | 53 | |
90c74b45 JR |
54 | &:hover { |
55 | background-color: rgb(48, 48, 48); | |
56 | } | |
57 | } | |
58 | } | |
59 | ||
5ea92119 AE |
60 | .loginForm > form { |
61 | .userLoginButtons { | |
62 | margin-top: 20px; | |
63 | text-align: center; | |
64 | } | |
8a52619a | 65 | |
5ea92119 AE |
66 | .thirdPartyLogin { |
67 | flex: 0 0 100%; | |
8a52619a | 68 | |
5ea92119 AE |
69 | & + .thirdPartyLogin { |
70 | margin-top: 10px; | |
71 | } | |
8a52619a | 72 | |
5ea92119 | 73 | .thirdPartyLoginButton { |
2adbfaa6 | 74 | align-items: center; |
5ea92119 | 75 | display: flex; |
8a52619a | 76 | |
90c74b45 | 77 | @include thirdPartyLoginButtons; |
5ea92119 AE |
78 | } |
79 | } | |
700ed535 AE |
80 | } |
81 | ||
82 | @include screen-md-up { | |
83 | .loginForm:not(.loginFormLoginOnly) > form { | |
5ea92119 AE |
84 | -webkit-column-count: 2; |
85 | -moz-column-count: 2; | |
86 | column-count: 2; | |
8a52619a | 87 | |
5ea92119 AE |
88 | -webkit-column-gap: 40px; |
89 | -moz-column-gap: 40px; | |
90 | column-gap: 40px; | |
8a52619a | 91 | |
5ea92119 | 92 | > .section { |
595cf59c AE |
93 | /* Sections should never be split, but Firefox, IE and Edge don't seem |
94 | to care about this despite advertising the support for it. We can work | |
95 | around this by using `overflow: hidden` which magically does the job, | |
96 | but doesn't affect Chrome which properly breaks anyway. */ | |
8a52619a | 97 | |
5ea92119 | 98 | margin-top: 0; |
595cf59c | 99 | overflow: hidden; /* Fix for Firefox, IE and Edge */ |
8a52619a | 100 | |
5ea92119 AE |
101 | -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ |
102 | page-break-inside: avoid; /* Firefox */ | |
103 | break-inside: avoid; /* IE 10+ */ | |
8a52619a | 104 | |
5ea92119 | 105 | &.loginFormLogin { |
5ea92119 AE |
106 | page-break-after: always; |
107 | break-after: always; | |
6c04272e | 108 | -webkit-column-break-after: always; |
5ea92119 | 109 | } |
8a52619a | 110 | |
5ea92119 AE |
111 | &.loginFormRegister { |
112 | margin-top: 0; | |
8a52619a | 113 | |
5ea92119 AE |
114 | & + .loginFormThirdPartyLogin { |
115 | margin-top: 30px; | |
116 | } | |
117 | } | |
118 | } | |
119 | } | |
120 | } | |
121 | ||
f216765b | 122 | @include screen-md-up { |
e1e51f46 | 123 | /* full page login: missing margin due to different DOM */ |
5ea92119 AE |
124 | .contentHeader ~ .loginForm { |
125 | margin-top: 30px; | |
126 | } | |
8a52619a | 127 | |
e1e51f46 | 128 | /* force columns to be 300px wide in login overlay */ |
700ed535 | 129 | .dialogContent .loginForm:not(.loginFormLoginOnly) .section { |
e1e51f46 AE |
130 | width: 300px; |
131 | } | |
5ea92119 | 132 | } |
d02dff31 MW |
133 | |
134 | .loginFormLogin > .section { | |
135 | margin-top: 30px !important; | |
136 | } | |
90c74b45 JR |
137 | |
138 | /* CSS does not allow selectors starting with a number. | |
139 | Therefore we are using the unicode character to identify | |
140 | the correct selector. In a nutshell: the selector is #3rdParty.section */ | |
141 | #\33 rdParty.section .thirdPartyLoginButton { | |
2cf28773 MW |
142 | align-items: center; |
143 | display: inline-flex; | |
8a52619a | 144 | |
90c74b45 JR |
145 | @include thirdPartyLoginButtons; |
146 | } |