Merge pull request #331 from travis-ci/signin-btn

Signin btn
This commit is contained in:
Lisa P 2015-02-17 16:17:38 +01:00
commit 0f6a6a9551
6 changed files with 111 additions and 57 deletions

View File

@ -8,12 +8,8 @@
@import "app/ansi";
@import "app/auth";
@import "app/button";
@import "app/caches";
@import "app/charm";
@import "app/components/loader";
@import "app/components/tiles";
@import "app/components/travis-switch";
@import "app/flash";
@import "app/forms";
@import "app/getting_started";
@ -46,6 +42,11 @@
@import "app/tabs";
@import "app/tipsy";
@import "app/components/loader";
@import "app/components/tiles";
@import "app/components/travis-switch";
@import "app/components/buttons";
@import "app/layout";
@import "app/layouts/dashboard";
@import "app/layouts/error";

View File

@ -1,46 +0,0 @@
.button
position: relative
overflow: visible
display: inline-block
padding: 5px 10px
border: 1px solid #d4d4d4
margin: 0
background-color: #E9E9E7
background-clip: padding-box
cursor: pointer
outline: none
text-decoration: none
text-align: center
font: 11px/normal "Source Sans Pro", Helvetica, sans-serif
color: $gray-dark-3
white-space: nowrap
.button:hover,
.button:focus,
.button:active,
.button.active
border-color: #d4d4d4
border-bottom-color: #2a65a0
background-color: #40454f
text-decoration: none
color: #fff
.button:active,
.button.active
border-color: #2a65a0
border-bottom-color: #2356c4
background-color: #40454f
.show-more
background-color: #F2F2EB
display: inline-block
color: #666
padding: 6px 15px
text-decoration: none
border: 1px solid #DDD
.show-more:hover
background-color: #40454F
color: #FFF
border: 1px solid #40454F
cursor: pointer

View File

@ -0,0 +1,81 @@
/*
* Buttons
*/
$button-border-color: #d4d4d4
.button
font-family: $font-family-sans-serif
font-size: $font-size-tiny
font-weight: normal
position: relative
overflow: visible
display: inline-block
padding: 5px 10px
border: 1px solid $button-border-color
margin: 0
background-color: #E9E9E7
background-clip: padding-box
cursor: pointer
outline: none
text-decoration: none
text-align: center
color: $gray-dark-3
white-space: nowrap
.button:hover,
.button:focus,
.button:active,
.button.active
border-color: $button-border-color
border-bottom-color: #2a65a0
background-color: #40454f
text-decoration: none
color: #fff
.button:active,
.button.active
border-color: #2a65a0
border-bottom-color: #2356c4
background-color: #40454f
.show-more
background-color: #F2F2EB
display: inline-block
color: #666
padding: 6px 15px
text-decoration: none
border: 1px solid #DDD
.show-more:hover
background-color: #40454F
color: $white
border: 1px solid #40454F
cursor: pointer
#top #navigation // bad style, we really need to get rid of the ids in the styles
.button--signin
display: inline-block
padding: 0.7em 2em 0.65em 0.6em
color: $white
font-size: $font-size-small
line-height: 1
text-decoration: none
border-radius: 4px
border: none
vertical-align: middle
cursor: pointer
background:
color: #39a85b
image: inline-image('ui/github-signin.svg')
repeat: no-repeat
position: 95.5% 45%
&:hover
background-color: #73c78d
text-decoration: none
&.signing-in
background-image: inline-image('ui/spinner.svg')
background-position: 92% 47%
&:hover
background-color: #39a85b

View File

@ -33,7 +33,7 @@
border-top: 1px solid $topbar-bg-darker
a, span
display: block
padding: 0 12px
padding: 2px 12px 0
&:hover
color: $color-link-top-highlight
@ -59,7 +59,6 @@
ul
line-height: 55px
position: relative
top: 3px
li
display: inline-block
border: none
@ -70,6 +69,7 @@
.nav-burger
overflow: auto
height: 55px
@media #{$medium-up}
display: none
@ -126,8 +126,11 @@
text-align: right
.menu.profile
.signing-in
background: inline-image('ui/spinner.svg') no-repeat 110px 22px
padding: 0.2em 0px 0.5em
@media #{$medium-up}
padding: 0
&.signed-in
top: 2px
img
width: 30px
@ -190,7 +193,7 @@
border-radius: 100px
@media #{$medium-up}
float : right
margin : 10px 0 0 10px
margin : 12px 0 0 10px
// #user ul
// text-align : left

View File

@ -68,13 +68,13 @@
<li {{bind-attr class="view.classProfile"}}>
<p class="handle">
{{#if auth.signedOut}}
<a class="signed-out" href="#" {{action "signIn" target="auth"}}>Sign in with GitHub</a>
<button class="signed-out button--signin" {{action "signIn" target="auth"}}>Sign in with GitHub</button>
{{/if}}
{{#if auth.signedIn}}
{{#link-to "profile" class="signed-in"}}<img {{bind-attr src="gravatarUrl"}}/>{{userName}}{{/link-to}}
{{/if}}
{{#if auth.signingIn}}
<span class="signing-in">Signing In</span>
<button class="signing-in button--signin">Signing In</button>
{{/if}}
</p>
<ul>

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#D7E7D6" d="M7.999,0.25c-4.278,0-7.749,3.558-7.749,7.947
c0,3.51,2.218,6.489,5.302,7.54c0.384,0.072,0.528-0.172,0.528-0.383c0-0.188-0.009-0.689-0.009-1.352
c-2.157,0.479-2.612-1.066-2.612-1.066c-0.354-0.918-0.861-1.162-0.861-1.162c-0.705-0.492,0.052-0.482,0.052-0.482
c0.779,0.057,1.189,0.82,1.189,0.82c0.688,1.211,1.812,0.861,2.255,0.66c0.067-0.514,0.269-0.865,0.491-1.064
c-1.722-0.199-3.529-0.881-3.529-3.926c0-0.868,0.303-1.576,0.796-2.133C3.771,5.447,3.508,4.639,3.929,3.544
c0,0,0.65-0.212,2.129,0.815C6.676,4.184,7.342,4.096,8,4.094c0.658,0.002,1.322,0.09,1.941,0.266
c1.479-1.027,2.127-0.815,2.127-0.815c0.424,1.094,0.159,1.902,0.078,2.103c0.495,0.558,0.796,1.266,0.796,2.133
c0,3.051-1.812,3.725-3.538,3.92c0.279,0.248,0.524,0.73,0.524,1.473c0,1.062-0.007,1.918-0.007,2.18
c0,0.211,0.141,0.459,0.533,0.383c3.076-1.055,5.295-4.029,5.295-7.54C15.75,3.808,12.278,0.25,7.999,0.25"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB