Permalink
Browse files

Make Persona sign out button distinct from its sign in counterpart.

  • Loading branch information...
1 parent 261f05a commit a772f2e318ef8713cb67612fd728604fbd0494b8 Karthik Viswanathan committed Sep 7, 2012
Showing with 37 additions and 2 deletions.
  1. +35 −0 public/stylesheets/main.styl
  2. +1 −1 views/layout.jade
  3. +1 −1 views/templates/elements/auth.jade
@@ -751,6 +751,17 @@ header a
-webkit-box-shadow 0 1px 0 rgba(0,0,0,0.2)
box-shadow 0 1px 0 rgba(0,0,0,0.2)
+.persona-button.log-out
+ color #222
+ text-shadow 0 1px #ccc, 0 0 2px #ccc
+
+ background #eee
+ background -moz-linear-gradient(-45deg, #eee, #999)
+ background -ms-linear-gradient(-45deg, #eee, #999)
+ background -o-linear-gradient(-45deg, #eee, #999)
+ background -webkit-linear-gradient(-45deg, #eee, #999)
+ background linear-gradient(-45deg, #eee, #999)
+
.persona-button:hover
background #cb6216
background -moz-linear-gradient(top, #cb6216, #b12a13)
@@ -759,6 +770,14 @@ header a
background -webkit-linear-gradient(top, #cb6216, #b12a13)
background linear-gradient(top, #cb6216, #b12a13)
+.persona-button.log-out:hover
+ background #ccc
+ background -moz-linear-gradient(top, #ccc, #aaa)
+ background -ms-linear-gradient(top, #ccc, #aaa)
+ background -o-linear-gradient(top, #ccc, #aaa)
+ background -webkit-linear-gradient(top, #ccc, #aaa)
+ background linear-gradient(top, #ccc, #aaa)
+
.persona-button:active, .persona-button:focus
top 1px
-moz-box-shadow none
@@ -810,6 +829,14 @@ header a
-webkit-border-radius 3px 0 0 3px
border-radius 3px 0 0 3px
+.persona-button.log-out span:before
+ background #666
+ background -moz-linear-gradient(top, #666, #888)
+ background -ms-linear-gradient(top, #666, #888)
+ background -o-linear-gradient(top, #666, #888)
+ background -webkit-linear-gradient(top, #666, #888)
+ background linear-gradient(top, #666, #888)
+
/* Triangle */
.persona-button:before
background #42a9dd
@@ -843,6 +870,14 @@ header a
-webkit-transform rotate(45deg)
transform rotate(45deg)
+.persona-button.log-out:before
+ background #666
+ background -moz-linear-gradient(-45deg, #666, #888)
+ background -ms-linear-gradient(-45deg, #666, #888)
+ background -o-linear-gradient(-45deg, #666, #888)
+ background -webkit-linear-gradient(-45deg, #666, #888)
+ background linear-gradient(-45deg, #666, #888)
+
/* Inset shadow (required here because the icon background clips it when on the `a` element) */
.persona-button:after
content ''
View
@@ -23,7 +23,7 @@ html
if typeof(sharing) === 'undefined' || !sharing
if session.email
- a.persona-button(href='/log-out', tabindex='-1')
+ a.persona-button.log-out(href='/log-out', tabindex='-1')
span Sign out
else
form.login-form(method='post', action='/log-in')
@@ -1,7 +1,7 @@
script#auth-element-template(type='text/template')
if sharing
if session.auth && session.auth[projectId]
- a.persona-button(href='/share/#{userId}/project/#{projectId}/screen/#{screenId}/log-out')
+ a.persona-button.log-out(href='/share/#{userId}/project/#{projectId}/screen/#{screenId}/log-out')
span Sign out
else
!= partial('helpers/share-login-form')

0 comments on commit a772f2e

Please sign in to comment.