Commit | Line | Data |
---|---|---|
5ea92119 AE |
1 | .loginForm > form { |
2 | .userLoginButtons { | |
3 | margin-top: 20px; | |
4 | text-align: center; | |
5 | } | |
6 | ||
7 | .thirdPartyLogin { | |
8 | flex: 0 0 100%; | |
9 | ||
10 | & + .thirdPartyLogin { | |
11 | margin-top: 10px; | |
12 | } | |
13 | ||
14 | .thirdPartyLoginButton { | |
15 | display: flex; | |
16 | border-width: 0; | |
17 | color: rgba(255, 255, 255, 1); | |
18 | ||
19 | > .icon { | |
20 | flex: 0 0 24px; | |
21 | } | |
22 | ||
23 | > span:not(.icon) { | |
24 | flex: 1 1 auto; | |
25 | margin-left: 5px; | |
26 | } | |
27 | ||
28 | /* branding */ | |
29 | &.googleLoginButton { | |
30 | background-color: rgb(221, 75, 57); | |
31 | ||
32 | &:hover { | |
33 | background-color: rgb(202, 53, 35); | |
34 | } | |
35 | } | |
36 | ||
37 | &.facebookLoginButton { | |
38 | background-color: rgb(59, 89, 152); | |
39 | ||
40 | &:hover { | |
41 | background-color: rgb(48, 72, 123); | |
42 | } | |
43 | } | |
44 | ||
45 | &.twitterLoginButton { | |
46 | background-color: rgb(85, 172, 238); | |
47 | ||
48 | &:hover { | |
49 | background-color: rgb(48, 154, 234); | |
50 | } | |
51 | } | |
52 | ||
53 | &.githubLoginButton { | |
54 | background-color: rgb(68, 68, 68); | |
55 | ||
56 | &:hover { | |
57 | background-color: rgb(48, 48, 48); | |
58 | } | |
59 | } | |
60 | } | |
61 | } | |
700ed535 AE |
62 | } |
63 | ||
64 | @include screen-md-up { | |
65 | .loginForm:not(.loginFormLoginOnly) > form { | |
5ea92119 AE |
66 | -webkit-column-count: 2; |
67 | -moz-column-count: 2; | |
68 | column-count: 2; | |
69 | ||
70 | -webkit-column-gap: 40px; | |
71 | -moz-column-gap: 40px; | |
72 | column-gap: 40px; | |
73 | ||
74 | > .section { | |
595cf59c AE |
75 | /* Sections should never be split, but Firefox, IE and Edge don't seem |
76 | to care about this despite advertising the support for it. We can work | |
77 | around this by using `overflow: hidden` which magically does the job, | |
78 | but doesn't affect Chrome which properly breaks anyway. */ | |
79 | ||
5ea92119 | 80 | margin-top: 0; |
595cf59c | 81 | overflow: hidden; /* Fix for Firefox, IE and Edge */ |
5ea92119 AE |
82 | |
83 | -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ | |
84 | page-break-inside: avoid; /* Firefox */ | |
85 | break-inside: avoid; /* IE 10+ */ | |
86 | ||
87 | &.loginFormLogin { | |
88 | -webkit-column-break-after: always; | |
89 | page-break-after: always; | |
90 | break-after: always; | |
91 | } | |
92 | ||
93 | &.loginFormRegister { | |
94 | margin-top: 0; | |
95 | ||
96 | & + .loginFormThirdPartyLogin { | |
97 | margin-top: 30px; | |
98 | } | |
99 | } | |
100 | } | |
101 | } | |
102 | } | |
103 | ||
f216765b | 104 | @include screen-md-up { |
e1e51f46 | 105 | /* full page login: missing margin due to different DOM */ |
5ea92119 AE |
106 | .contentHeader ~ .loginForm { |
107 | margin-top: 30px; | |
108 | } | |
e1e51f46 AE |
109 | |
110 | /* force columns to be 300px wide in login overlay */ | |
700ed535 | 111 | .dialogContent .loginForm:not(.loginFormLoginOnly) .section { |
e1e51f46 AE |
112 | width: 300px; |
113 | } | |
5ea92119 | 114 | } |