public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Fix the create folder modal layout at white theme

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-04-08 15:37:55 +09:00
parent 116e27e0db
commit 13418109ea
3 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/main/modals/CreateFolderModal.js
View File

@@ -78,7 +78,7 @@ class CreateFolderModal extends React.Component {
<div styleName='title'>Create new folder</div> <div styleName='title'>Create new folder</div>
</div> </div>
<button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}> <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
<div styleName='close-mark'>X</div> <div styleName='close-mark'>×</div>
<div styleName='close-text'>esc</div> <div styleName='close-text'>esc</div>
</button> </button>
@@ -95,7 +95,7 @@ class CreateFolderModal extends React.Component {
<button styleName='control-confirmButton' <button styleName='control-confirmButton'
onClick={(e) => this.handleConfirmButtonClick(e)} onClick={(e) => this.handleConfirmButtonClick(e)}
> >
Create Folder Create
</button> </button>
</div> </div>
</div> </div>

27
browser/main/modals/CreateFolderModal.styl
View File

@@ -1,15 +1,15 @@
.root .root
modal() modal()
width 700px width 500px
height 200px height 270px
overflow hidden overflow hidden
position relative position relative
padding 0 40px padding 0 40px
.header .header
height 50px height 70px
margin-bottom 10px margin-bottom 10px
margin-top 10px margin-top 20px
font-size 18px font-size 18px
line-height 50px line-height 50px
background-color $ui-backgroundColor background-color $ui-backgroundColor
@@ -19,34 +19,34 @@
font-size 15px font-size 15px
.close .close
height 50px height 70px
position absolute position absolute
background-color transparent background-color transparent
color $ui-inactive-text-color color $ui-inactive-text-color
border none border none
top 7px top 7px
right 10px right 30px
text-align center text-align center
width top-bar--height width top-bar--height
height top-bar--height height top-bar--height
.control-folder-label .control-folder-label
text-align left text-align left
font-size 14px font-size 12px
color $ui-text-color color $ui-text-color
.control-folder-input .control-folder-input
display block display block
height 30px height 30px
width 620px width 420px
padding 0 5px padding 0 5px
margin 10px auto 15px margin 10px auto 15px
border 1px solid #C9C9C9 // TODO: use variable. border 1px solid #C9C9C9 // TODO: use variable.
border-radius 5px border-radius 2px
background-color transparent background-color transparent
outline none outline none
vertical-align middle vertical-align middle
font-size 18px font-size 14px
&:disabled &:disabled
background-color $ui-input--disabled-backgroundColor background-color $ui-input--disabled-backgroundColor
&:focus, &:active &:focus, &:active
@@ -54,13 +54,14 @@
.control-confirmButton .control-confirmButton
display block display block
float right
height 30px height 30px
width 620px width 100px
border none border none
border-radius 5px border-radius 2px
padding 0 25px padding 0 25px
margin 20px auto margin 20px auto
font-size 14px font-size 12px
colorPrimaryButton() colorPrimaryButton()
body[data-theme="dark"] body[data-theme="dark"]

2
browser/styles/index.styl
View File

@@ -78,7 +78,7 @@ colorDefaultButton()
background-color $default-button-background--active background-color $default-button-background--active
// Primary button(Brand color) // Primary button(Brand color)
$primary-button-background = $brand-color $primary-button-background = alpha($brand-color, 60%)
$primary-button-background--hover = darken($brand-color, 5%) $primary-button-background--hover = darken($brand-color, 5%)
$primary-button-background--active = darken($brand-color, 10%) $primary-button-background--active = darken($brand-color, 10%)