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

use webpack & add some styles

Browse Source
This commit is contained in:
Rokt33r
2015-10-09 20:12:01 +09:00
parent 979dcead49
commit 2e4fc557ea
25 changed files with 601 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
browser/styles/main/HomeContainer/ArticleDetail.styl Normal file
View File

@@ -0,0 +1,169 @@
noTagsColor = #999
.ArticleDetail
absolute right bottom
top 60px
left 510px
padding 10px
*
-webkit-user-select all
.detailInfo
height 70px
width 100%
transition 0.1s
font-size 12px
position relative
.left
absolute top left bottom
right 120px
.right
absolute top right
.detailBody
absolute left right bottom
top 70px
overflow-x hidden
overflow-y auto
.detailPanel
absolute top
left 10px
right 10px
bottom 10px
background-color white
border-radius 5px
border solid 1px borderColor
&>.header
absolute top left right
height 60px
.MarkdownPreview
absolute left right bottom
top 60px
marked()
box-sizing border-box
padding 5px 15px
border-top solid 1px borderColor
overflow-y auto
.CodeEditor
absolute left right bottom
top 60px
border-top solid 1px borderColor
min-height 300px
border-bottom-left-radius 5px
border-bottom-right-radius 5px
&.edit
.detailInfo
.left
.Select
.Select-control
border none
background-color transparent
.folder.Select
width 150px
.Select-control
&:hover
background-color darken(white, 5%)
&.is-focused
.Select-control
background-color white
.tags.Select
.Select-control
white-space nowrap
overflow-x auto
position relative
.Select-arrow-zone, .Select-arrow
display none
.right
button
cursor pointer
height 33px
width 55px
margin-left 5px
font-size 14px
color inactiveTextColor
background-color darken(white, 5%)
border solid 1px borderColor
border-radius 5px
&:hover
background-color white
&.primary
border none
background-color brandColor
color white
&:hover
color white
background-color lighten(brandColor, 10%)
.detailBody
.detailPanel
&>.header
.mode
absolute top bottom right
display block
height 33px
margin-top 12px
width 120px
margin-right 15px
.title
absolute left top bottom
right 120px
padding 0 15px
input
width 100%
border none
background-color transparent
line-height 60px
font-size 32px
font-weight bold
outline none
&.show
.detailInfo
.left
right 99px
.info
padding 5px
overflow ellipsis
.tags
padding 10px 10px 5px
color articleItemColor
a
background-color brandColor
color white
border-radius 2px
padding 1.5px 5px
margin 2px
font-size 10px
opacity 0.8
&:hover
opacity 1
span.noTags
color noTagsColor
.right
button
cursor pointer
height 33px
width 33px
border none
font-size 18px
color inactiveTextColor
background-color transparent
padding 0
&:hover
color inherit
.detailBody
.detailPanel
&>.header
.mode
display block
line-height 60px
width 45px
height 60px
font-size 18px
text-align center
.title
absolute top bottom
left 45px
right 15px
font-size 32px
line-height 60px
font-weight bold
white-space nowrap
overflow-x auto
overflow-y hidden

70
browser/styles/main/HomeContainer/ArticleList.styl Normal file
View File

@@ -0,0 +1,70 @@
articleItemHoverBgColor = darken(white, 5%)
articleItemColor = #777
.ArticleList
absolute bottom
top 60px
left 260px
width 250px
border-right solid 1px highlightenBorderColor
&>ul
absolute top bottom left right
overflow-y auto
noSelect()
li
.articleItem
border solid 2px transparent
position relative
height 88px
width 100%
cursor pointer
transition 0.1s
background-color white
padding 0 10px
font-size 12px
.top
clearfix()
line-height 20px
padding 5px 0
color articleItemColor
.profileImage
vertical-align middle
.updatedAt
float right
line-height 20px
.middle
clearfix()
padding 3px 0 7px
font-size 16px
.mode
float left
font-size 12px
line-height 16px
.title
float left
overflow ellipsis
padding 0 5px
.bottom
padding 5px 0
overflow-x auto
white-space nowrap
.tags
color articleItemColor
a
background-color brandColor
color white
border-radius 2px
padding 1.5px 5px
margin 2px
font-size 10px
opacity 0.8
&:hover
opacity 1
&:hover, &.hover
background-color articleItemHoverBgColor
&:active, &.active
background-color white
&:active, &.active
border-color brandBorderColor
.divider
border-bottom solid 1px borderColor

92
browser/styles/main/HomeContainer/ArticleTopBar.styl Normal file
View File

@@ -0,0 +1,92 @@
bgColor = #E6E6E6
inputBgColor = white
refreshBtColor = #B3B3B3
refreshBtnActiveColor = #3A3A3A
infoBtnColor = bgColor
infoBtnBgColor = #B3B3B3
infoBtnActiveBgColor = #3A3A3A
.ArticleTopBar
absolute top right
left 260px
height 60px
background-color bgColor
&>.left
float left
&>.search
position relative
float left
height 33px
margin-top 13.5px
margin-left 15px
width 350px
border-radius 22px
background-color inputBgColor
padding 5px 15px
transition 0.1s
font-size 16px
border 1px solid transparent
border-color transparent
&.focus
border-color brandBorderColor
input
absolute top right
left 35px
width 300px
outline none
font-size 14px
border none
height 33px
line-height 33px
background-color transparent
i.fa
position absolute
display block
top 0
left 10px
line-height 33px
&>.refreshBtn
float left
width 33px
height 33px
margin-top 13.5px
margin-left 15px
border none
color refreshBtColor
background transparent
font-size 18px
line-height 18px
transition 0.1s
&:hover
color refreshBtnActiveColor
&>.right
float right
&>button
display block
position absolute
right 74px
top 20px
width 20px
height 20px
font-size 14px
line-height 14px
background-color infoBtnBgColor
color bgColor
border-radius 11px
border none
transition 0.1s
&:nth-child(1)
right 109px
&:hover
background-color infoBtnActiveBgColor
&>.logo
display block
position absolute
top 8px
right 15px
opacity 0.7
&:hover
opacity 1.0

85
browser/styles/main/HomeContainer/UserNavigator.styl Normal file
View File

@@ -0,0 +1,85 @@
userNavigatorBgColor = #1B1C1C
userNavigatorColor = #DDD
userAnchorColor = #979797
userAnchorBgColor = #BEBEBE
userAnchorActiveColor = textColor
userAnchorActiveBgColor = white
.UserNavigator
noSelect()
background-color userNavigatorBgColor
absolute left top bottom
width 60px
text-align center
box-sizing border-box
ul.userList
margin-top 25px
&>li
a
display block
width 38px
height 64px
margin 0 auto 10px
text-align center
text-decoration none
color userAnchorColor
line-height 44px
font-size 1.1em
cursor pointer
transition 0.1s
opacity 0.8
img.ProfileImage
width 38px
height 38px
border-radius 22px
&:hover, &.active
opacity 1
.userTooltip
opacity 1
.userTooltip
position absolute
z-index popupZIndex
background-color transparentify(invBackgroundColor, 80%)
color invTextColorq
padding 10px
line-height 1em
border-radius 5px
margin-top -52px
margin-left 52px
white-space nowrap
opacity 0
transition 0.1s
pointer-events none
.keyLabel
margin-top -25px
font-size 0.8em
color userNavigatorColor
button.newTeamButton
display block
margin 0 auto
width 30px
height 30px
circle()
border solid 1px lightButtonColor
color lightButtonColor
text-align center
background-image none
background-color transparent
box-sizing border-box
absolute left bottom right
bottom 15px
&:hover, &.hover, &:focus, &.focus
border-color darken(lightButtonColor, 50%)
color darken(lightButtonColor, 50%)
&:active, &.active
border-color darken(brandBorderColor, 10%)
background-color brandColor
color white
.tooltip
tooltip()
margin-top -22px
margin-left 33px
font-size 14px
&:hover .tooltip
opacity 1

4
browser/styles/main/HomeContainer/index.styl Normal file
View File

@@ -0,0 +1,4 @@
@import './UserNavigator'
@import './ArticleTopBar'
@import './ArticleList'
@import './ArticleDetail'