1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-17 19:51:42 +00:00

改善:Login/Register部分のデザイン

This commit is contained in:
Rokt33r
2015-07-29 02:40:27 +09:00
parent 714b5f7b4b
commit 0ac7839f11
6 changed files with 28 additions and 24 deletions

View File

@@ -47,7 +47,7 @@ module.exports = React.createClass({
<input className='stripInput' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/> <input className='stripInput' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
</div> </div>
<div className='form-group'> <div className='form-group'>
<button className='btn-primary' type='submit'>Log In</button> <button className='logInButton' type='submit'>Log In</button>
</div> </div>
</form> </form>
</div> </div>

View File

@@ -58,7 +58,7 @@ module.exports = React.createClass({
<input className='stripInput' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/> <input className='stripInput' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
</div> </div>
<div className='form-group'> <div className='form-group'>
<button className='btn-primary' type='submit'>Sign Up</button> <button className='logInButton' type='submit'>Sign Up</button>
</div> </div>
</form> </form>

View File

@@ -1,11 +1,11 @@
.LoginContainer, .RegisterContainer .LoginContainer, .RegisterContainer
margin 15px auto margin 0 auto
padding 25px 15px padding 25px 15px
box-sizing border-box box-sizing border-box
color inactiveTextColor color inactiveTextColor
.logo .logo
width 215px width 150px
height 215px height 150px
display block display block
margin 0 auto margin 0 auto
.authNavigator .authNavigator
@@ -23,15 +23,15 @@
margin-bottom 25px margin-bottom 25px
.facebookBtn, .githubBtn .facebookBtn, .githubBtn
margin 0 45px margin 0 45px
width 75px width 50px
height 75px height 50px
line-height 75px line-height 50px
font-size 35px font-size 25px
text-align center text-align center
background-image none background-image none
color white color white
border none border none
border-radius 37.5px border-radius 25px
cursor pointer cursor pointer
.facebookBtn .facebookBtn
background-color facebookColor background-color facebookColor
@@ -39,7 +39,8 @@
background-color lighten(facebookColor, 25%) background-color lighten(facebookColor, 25%)
.githubBtn .githubBtn
background-color githubBtn background-color githubBtn
font-size 42px font-size 30px
line-height 30px
&:hover, &.hover &:hover, &.hover
background-color lighten(githubBtn, 25%) background-color lighten(githubBtn, 25%)
.divider .divider
@@ -55,13 +56,14 @@
margin 0 auto 45px margin 0 auto 45px
div.form-group:last-child div.form-group:last-child
margin-top 45px margin-top 45px
.btn-primary button.logInButton
btnPrimary()
height 44px
border-radius 22px
display block display block
width 200px width 200px
font-size 1em
margin 0 auto margin 0 auto
&.hover, &:hover
background-color brandColor
color white
p.alert p.alert
text-align center text-align center
font-size 0.8em font-size 0.8em

View File

@@ -49,18 +49,11 @@ button
margin-bottom 5px margin-bottom 5px
.stripInput .stripInput
border none stripInput()
border-bottom 1px solid borderColor
padding 5px 15px
width 100%
display block display block
width 100%
font-size 1em font-size 1em
height 33px height 33px
box-sizing border-box
transition 0.1s
&:focus, &.focus
border-bottom 1px solid brandBorderColor
outline none
.block-input, .inline-input .block-input, .inline-input
border solid 1px borderColor border solid 1px borderColor

View File

@@ -0,0 +1,9 @@
stripInput()
border none
border-bottom 1px solid borderColor
padding 5px 15px
box-sizing border-box
transition 0.1s
&:focus, &.focus
border-bottom 1px solid brandBorderColor
outline none