Turn authentication links into pretty buttons.

This commit is contained in:
Akinori MUSHA 2014-09-24 12:15:12 +09:00
parent 6dd7c639e2
commit c6c91cd8ab
2 changed files with 40 additions and 3 deletions

View file

@ -18,6 +18,8 @@
*/
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
body { padding-top: 60px; }
@ -237,3 +239,38 @@ h2 .scenario, a span.label.scenario {
.confirm-agent .popover {
width: 200px;
}
.btn-auth {
position: relative;
padding-left: 40px;
$border-color: rgba(0,0,0,0.2);
border-color: $border-color;
> i:first-child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 24px;
border-right: 1px solid $border-color;
}
&.btn-auth-twitter {
color: #fff;
background-color: #55acee;
}
&.btn-auth-37signals {
color: #fff;
background-color: #8fc857;
}
&.btn-auth-github {
color: #fff;
background-color: #444;
}
}

View file

@ -12,13 +12,13 @@
for guidance.
</p>
<% if has_oauth_configuration_for?('twitter') %>
<p><%= link_to "Authenticate with Twitter", "/auth/twitter" %></p>
<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>
<% end %>
<% if has_oauth_configuration_for?('37signals') %>
<p><%= link_to "Authenticate with 37Signals (Basecamp)", "/auth/37signals" %></p>
<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>
<% end -%>
<% if has_oauth_configuration_for?('github') %>
<p><%= link_to "Authenticate with Github", "/auth/github" %></p>
<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>
<% end -%>
<hr>