| 1 | @mixin thirdPartyLoginButtons { |
| 2 | border-width: 0; |
| 3 | color: rgba(255, 255, 255, 1); |
| 4 | |
| 5 | > .icon { |
| 6 | flex: 0 0 24px; |
| 7 | } |
| 8 | |
| 9 | > span:not(.icon) { |
| 10 | flex: 1 1 auto; |
| 11 | margin-left: 5px; |
| 12 | } |
| 13 | |
| 14 | /* branding */ |
| 15 | &.googleLoginButton { |
| 16 | background-color: rgb(255, 255, 255); |
| 17 | border: 1px solid rgb(233, 233, 233); |
| 18 | color: rgb(51, 51, 51); |
| 19 | |
| 20 | &:hover { |
| 21 | background-color: rgb(255, 255, 255); |
| 22 | } |
| 23 | |
| 24 | .fa-google { |
| 25 | background-image: url(data:image/png;base64,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); |
| 26 | background-repeat: no-repeat; |
| 27 | background-size: contain; |
| 28 | |
| 29 | &::before { |
| 30 | display: none; |
| 31 | } |
| 32 | } |
| 33 | } |
| 34 | |
| 35 | &.facebookLoginButton { |
| 36 | background-color: rgb(59, 89, 152); |
| 37 | |
| 38 | &:hover { |
| 39 | background-color: rgb(48, 72, 123); |
| 40 | } |
| 41 | } |
| 42 | |
| 43 | &.twitterLoginButton { |
| 44 | background-color: rgb(85, 172, 238); |
| 45 | |
| 46 | &:hover { |
| 47 | background-color: rgb(48, 154, 234); |
| 48 | } |
| 49 | } |
| 50 | |
| 51 | &.githubLoginButton { |
| 52 | background-color: rgb(68, 68, 68); |
| 53 | |
| 54 | &:hover { |
| 55 | background-color: rgb(48, 48, 48); |
| 56 | } |
| 57 | } |
| 58 | } |
| 59 | |
| 60 | .loginForm > form { |
| 61 | .userLoginButtons { |
| 62 | margin-top: 20px; |
| 63 | text-align: center; |
| 64 | } |
| 65 | |
| 66 | .thirdPartyLogin { |
| 67 | flex: 0 0 100%; |
| 68 | |
| 69 | & + .thirdPartyLogin { |
| 70 | margin-top: 10px; |
| 71 | } |
| 72 | |
| 73 | .thirdPartyLoginButton { |
| 74 | align-items: center; |
| 75 | display: flex; |
| 76 | |
| 77 | @include thirdPartyLoginButtons; |
| 78 | } |
| 79 | } |
| 80 | } |
| 81 | |
| 82 | @include screen-md-up { |
| 83 | .loginForm:not(.loginFormLoginOnly) > form { |
| 84 | -webkit-column-count: 2; |
| 85 | -moz-column-count: 2; |
| 86 | column-count: 2; |
| 87 | |
| 88 | -webkit-column-gap: 40px; |
| 89 | -moz-column-gap: 40px; |
| 90 | column-gap: 40px; |
| 91 | |
| 92 | > .section { |
| 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. */ |
| 97 | |
| 98 | margin-top: 0; |
| 99 | overflow: hidden; /* Fix for Firefox, IE and Edge */ |
| 100 | |
| 101 | -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ |
| 102 | page-break-inside: avoid; /* Firefox */ |
| 103 | break-inside: avoid; /* IE 10+ */ |
| 104 | |
| 105 | &.loginFormLogin { |
| 106 | page-break-after: always; |
| 107 | break-after: always; |
| 108 | -webkit-column-break-after: always; |
| 109 | } |
| 110 | |
| 111 | &.loginFormRegister { |
| 112 | margin-top: 0; |
| 113 | |
| 114 | & + .loginFormThirdPartyLogin { |
| 115 | margin-top: 30px; |
| 116 | } |
| 117 | } |
| 118 | } |
| 119 | } |
| 120 | } |
| 121 | |
| 122 | @include screen-md-up { |
| 123 | /* full page login: missing margin due to different DOM */ |
| 124 | .contentHeader ~ .loginForm { |
| 125 | margin-top: 30px; |
| 126 | } |
| 127 | |
| 128 | /* force columns to be 300px wide in login overlay */ |
| 129 | .dialogContent .loginForm:not(.loginFormLoginOnly) .section { |
| 130 | width: 300px; |
| 131 | } |
| 132 | } |
| 133 | |
| 134 | .loginFormLogin > .section { |
| 135 | margin-top: 30px !important; |
| 136 | } |
| 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 { |
| 142 | align-items: center; |
| 143 | display: inline-flex; |
| 144 | |
| 145 | @include thirdPartyLoginButtons; |
| 146 | } |