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 | } | |
62 | ||
63 | @include large-screen-only { | |
64 | -webkit-column-count: 2; | |
65 | -moz-column-count: 2; | |
66 | column-count: 2; | |
67 | ||
68 | -webkit-column-gap: 40px; | |
69 | -moz-column-gap: 40px; | |
70 | column-gap: 40px; | |
71 | ||
72 | > .section { | |
73 | margin-top: 0; | |
74 | ||
75 | -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ | |
76 | page-break-inside: avoid; /* Firefox */ | |
77 | break-inside: avoid; /* IE 10+ */ | |
78 | ||
79 | &.loginFormLogin { | |
80 | -webkit-column-break-after: always; | |
81 | page-break-after: always; | |
82 | break-after: always; | |
83 | } | |
84 | ||
85 | &.loginFormRegister { | |
86 | margin-top: 0; | |
87 | ||
88 | & + .loginFormThirdPartyLogin { | |
89 | margin-top: 30px; | |
90 | } | |
91 | } | |
92 | } | |
93 | } | |
94 | } | |
95 | ||
96 | @include large-screen-only { | |
97 | .contentHeader ~ .loginForm { | |
98 | margin-top: 30px; | |
99 | } | |
100 | } |