mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-17 19:51:42 +00:00
改善:Login/Register部分のデザイン
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
9
browser/styles/mixins/input.styl
Normal file
9
browser/styles/mixins/input.styl
Normal 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
|
||||||
Reference in New Issue
Block a user