@@ -241,7 +241,22 @@ h2 .scenario, a span.label.scenario { |
||
241 | 241 |
width: 200px; |
242 | 242 |
} |
243 | 243 |
|
244 |
-.btn-auth { |
|
244 |
+$services: twitter 37signals github; |
|
245 |
+$service-colors: #55acee #8fc857 #444; |
|
246 |
+ |
|
247 |
+@mixin services { |
|
248 |
+ @each $service in $services { |
|
249 |
+ $i: index($services, $service); |
|
250 |
+ $service-color: nth($service-colors, $i); |
|
251 |
+ |
|
252 |
+ &.service-#{$service} { |
|
253 |
+ color: #fff; |
|
254 |
+ background-color: $service-color; |
|
255 |
+ } |
|
256 |
+ } |
|
257 |
+} |
|
258 |
+ |
|
259 |
+.btn-service { |
|
245 | 260 |
position: relative; |
246 | 261 |
padding-left: 40px; |
247 | 262 |
$border-color: rgba(0,0,0,0.2); |
@@ -260,18 +275,6 @@ h2 .scenario, a span.label.scenario { |
||
260 | 275 |
border-right: 1px solid $border-color; |
261 | 276 |
} |
262 | 277 |
|
263 |
- &.btn-auth-twitter { |
|
264 |
- color: #fff; |
|
265 |
- background-color: #55acee; |
|
266 |
- } |
|
267 |
- |
|
268 |
- &.btn-auth-37signals { |
|
269 |
- color: #fff; |
|
270 |
- background-color: #8fc857; |
|
271 |
- } |
|
272 |
- |
|
273 |
- &.btn-auth-github { |
|
274 |
- color: #fff; |
|
275 |
- background-color: #444; |
|
276 |
- } |
|
278 |
+ @include services; |
|
279 |
+} |
|
277 | 280 |
} |
@@ -53,4 +53,11 @@ module ApplicationHelper |
||
53 | 53 |
def omniauth_provider_name(provider) |
54 | 54 |
t("devise.omniauth_providers.#{provider}") |
55 | 55 |
end |
56 |
+ |
|
57 |
+ def omniauth_button(provider) |
|
58 |
+ link_to [ |
|
59 |
+ omniauth_provider_icon(provider), |
|
60 |
+ content_tag(:span, "Authenticate with #{omniauth_provider_name(provider)}") |
|
61 |
+ ].join.html_safe, user_omniauth_authorize_path(provider), class: "btn btn-default btn-service service-#{provider}" |
|
62 |
+ end |
|
56 | 63 |
end |
@@ -12,7 +12,7 @@ |
||
12 | 12 |
for guidance. |
13 | 13 |
</p> |
14 | 14 |
<%- Devise.omniauth_providers.each { |provider| -%> |
15 |
- <p><%= link_to user_omniauth_authorize_path(provider), class: "btn btn-default btn-auth btn-auth-#{provider}" do %><%= icon_for_service(provider) %><span>Authenticate with <%= t("devise.omniauth_providers.#{provider}") %></span><% end %></p> |
|
15 |
+ <p><%= omniauth_button(provider) %></p> |
|
16 | 16 |
<%- } -%> |
17 | 17 |
<hr> |
18 | 18 |
|