Turn authentication links into pretty buttons.
Akinori MUSHA
2 changed files with 40 additions and 3 deletions
+ 37
- 0
app/assets/stylesheets/application.css.scss.erb
@@ -18,6 +18,8 @@ |
||
| 18 | 18 |
*/ |
| 19 | 19 |
|
| 20 | 20 |
@import "bootstrap"; |
| 21 |
+@import "font-awesome-sprockets"; |
|
| 22 |
+@import "font-awesome"; |
|
| 21 | 23 |
|
| 22 | 24 |
body { padding-top: 60px; }
|
| 23 | 25 |
|
@@ -237,3 +239,38 @@ h2 .scenario, a span.label.scenario {
|
||
| 237 | 239 |
.confirm-agent .popover {
|
| 238 | 240 |
width: 200px; |
| 239 | 241 |
} |
| 242 |
+ |
|
| 243 |
+.btn-auth {
|
|
| 244 |
+ position: relative; |
|
| 245 |
+ padding-left: 40px; |
|
| 246 |
+ $border-color: rgba(0,0,0,0.2); |
|
| 247 |
+ border-color: $border-color; |
|
| 248 |
+ |
|
| 249 |
+ > i:first-child {
|
|
| 250 |
+ position: absolute; |
|
| 251 |
+ top: 0; |
|
| 252 |
+ left: 0; |
|
| 253 |
+ bottom: 0; |
|
| 254 |
+ width: 32px; |
|
| 255 |
+ height: 32px; |
|
| 256 |
+ text-align: center; |
|
| 257 |
+ line-height: 32px; |
|
| 258 |
+ font-size: 24px; |
|
| 259 |
+ border-right: 1px solid $border-color; |
|
| 260 |
+ } |
|
| 261 |
+ |
|
| 262 |
+ &.btn-auth-twitter {
|
|
| 263 |
+ color: #fff; |
|
| 264 |
+ background-color: #55acee; |
|
| 265 |
+ } |
|
| 266 |
+ |
|
| 267 |
+ &.btn-auth-37signals {
|
|
| 268 |
+ color: #fff; |
|
| 269 |
+ background-color: #8fc857; |
|
| 270 |
+ } |
|
| 271 |
+ |
|
| 272 |
+ &.btn-auth-github {
|
|
| 273 |
+ color: #fff; |
|
| 274 |
+ background-color: #444; |
|
| 275 |
+ } |
|
| 276 |
+} |
+ 3
- 3
app/views/services/index.html.erb
@@ -12,13 +12,13 @@ |
||
| 12 | 12 |
for guidance. |
| 13 | 13 |
</p> |
| 14 | 14 |
<% if has_oauth_configuration_for?('twitter') %>
|
| 15 |
- <p><%= link_to "Authenticate with Twitter", "/auth/twitter" %></p> |
|
| 15 |
+ <p><%= link_to "/auth/twitter", class: 'btn btn-default btn-auth btn-auth-twitter' do %><i class='fa fa-twitter'></i><span>Authenticate with Twitter</span><% end %></p> |
|
| 16 | 16 |
<% end %> |
| 17 | 17 |
<% if has_oauth_configuration_for?('37signals') %>
|
| 18 |
- <p><%= link_to "Authenticate with 37Signals (Basecamp)", "/auth/37signals" %></p> |
|
| 18 |
+ <p><%= link_to "/auth/37signals", class: 'btn btn-default btn-auth btn-auth-37signals' do %><i class='fa fa-lock'></i><span>Authenticate with 37Signals (Basecamp)</span><% end %></p> |
|
| 19 | 19 |
<% end -%> |
| 20 | 20 |
<% if has_oauth_configuration_for?('github') %>
|
| 21 |
- <p><%= link_to "Authenticate with Github", "/auth/github" %></p> |
|
| 21 |
+ <p><%= link_to "/auth/github", class: 'btn btn-default btn-auth btn-auth-github' do %><i class='fa fa-github'></i><span>Authenticate with Github</span><% end %></p> |
|
| 22 | 22 |
<% end -%> |
| 23 | 23 |
<hr> |
| 24 | 24 |
|