1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46:22 +00:00

on Refactoring...

This commit is contained in:
Rokt33r
2015-08-17 01:10:08 +09:00
parent 932997259f
commit 23b8b49c00
59 changed files with 1960 additions and 2179 deletions

View File

@@ -1,4 +1,4 @@
.LoginContainer, .RegisterContainer
.LoginContainer, .SignupContainer
margin 0 auto
padding 25px 15px
box-sizing border-box
@@ -58,6 +58,9 @@
margin-top 15px
margin-bottom 15px
height 44px
padding 5px
border-radius 10px
line-height 44px
text-align center
.alertInfo
alertInfo()

View File

@@ -1,6 +1,8 @@
navigationWidth= 200px
articleListWidth= 275px
.PlanetContainer
absolute top bottom right
left 55px
absolute top bottom right left
.tags
white-space: nowrap;
overflow-x: auto;
@@ -8,6 +10,7 @@
margin 0 2px
text-decoration underline
cursor pointer
font-size 0.9em
&.noTag
color inactiveTextColor
font-size 0.8em
@@ -26,7 +29,7 @@
absolute top left bottom
overflow hidden
display inline-block
width 200px
width navigationWidth
.userName
position absolute
left 15px
@@ -67,7 +70,7 @@
.headerControl
noSelect()
absolute top bottom right
left 200px
left navigationWidth
.searchInput
display block
position absolute
@@ -81,32 +84,36 @@
top 8px
left 12px
color inactiveTextColor
.refreshButton, .settingButton
.refreshButton
display block
position absolute
top 12px
font-size em
btnDefault()
box-sizing border-box
circle()
right 55px
width 28px
height 28px
btnDefault()
circle()
text-align center
cursor pointer
transition 0.1s
&:focus, &.focus
outline none
.refreshButton
right 45px
.settingButton
.logo
display block
position absolute
top 4px
right 10px
cursor pointer
transition 0.1s
opacity 0.9
&:hover, &.hover
opacity 1
.PlanetNavigator
absolute bottom left
noSelect()
top 55px
width 200px
width navigationWidth
border-right solid 1px highlightenBorderColor
padding 10px
box-sizing border-box
@@ -127,44 +134,12 @@
transition 0.1s
btnDefault()
border none
.usersLabel
margin-top 35px
margin-bottom 5px
.users
li
width 44px
height 44px
float left
margin 3px
line-height 44px
.userPhoto
circle()
width 44px
height 44px
box-shadow 1px 1px 4px 0px #C5C5C5
.userTooltip
position absolute
z-index 500
background-color transparentify(invBackgroundColor, 80%)
color invTextColor
padding 10px
line-height 1em
border-radius 5px
margin-top -15px
opacity 0
transition 0.1s
pointer-events none
&:hover .userTooltip
opacity 1
&.addUserButton
circle()
.PlanetArticleList
absolute bottom right
left 200px
left navigationWidth
top 55px
width 250px
width articleListWidth
border-right solid 1px highlightenBorderColor
&>ul
@@ -177,22 +152,28 @@
padding 10px
cursor pointer
transition 0.1s
.itemHeader
clearfix()
margin-bottom 15px
.callSign, .title
clearfix()
.itemLeft
float left
font-weight 600
font-size 1.1em
line-height 140%
.updatedAt
float right
line-height 16px
color lighten(textColor, 25%)
font-size 0.8em
.description
line-height 120%
margin-bottom 15px
width 25px
text-align center
.profileImage
margin-bottom 5px
.fa
line-height 25px
.itemRight
float left
width 225px
overflow-x hidden
padding-left 10px
.updatedAt
margin-bottom 10px
color lighten(textColor, 25%)
font-size 0.7em
.description
line-height 120%
margin-bottom 15px
font-size 1em
&:hover, &.hover
background-color hoverBackgroundColor
&:active, &.active
@@ -205,7 +186,7 @@
.PlanetArticleDetail
absolute right bottom
top 55px
left 450px
left navigationWidth + articleListWidth
&>.viewer-header
height 44px
line-height 44px
@@ -223,7 +204,7 @@
absolute bottom right
left 1px
top 44px
&.snippetDetail>.viewer-body
&.codeDetail>.viewer-body
.viewer-detail
border-bottom solid 1px borderColor
height 150px
@@ -243,7 +224,7 @@
absolute left right
top 155px
bottom 5px
&.blueprintDetail>.viewer-body
&.noteDetail>.viewer-body
.tags
absolute top
left 15px

View File

@@ -1,12 +1,12 @@
.UserContainer
.UserNavigator
.HomeContainer
.HomeNavigator
background-color planetNavBgColor
absolute left top bottom
width 55px
text-align center
box-sizing border-box
border-right solid 1px borderColor
.userProfile
.profileButton
display block
width 55px
height 55px
@@ -17,12 +17,87 @@
padding 0
cursor pointer
box-sizing border-box
border none
img
transition 0.1s
opacity 0.9
&.vivid.active, &.focus, &:focus, &.hover, &:hover
img
opacity 1
.profilePopup
position fixed
left 35px
top 35px
z-index popupZIndex
width 200px
background-color backgroundColor
box-shadow popupShadow
border-radius 10px
padding 10px 0 0px
&.close
display none
.profileGroup
margin-bottom 10px
.profileGroupLabel
text-align left
height 1em
padding 0 15px
span
position absolute
z-index 2
background-color backgroundColor
padding-right 5px
color inactiveTextColor
font-size 0.8em
&::before
content ''
position absolute
display block
z-index 1
height 0.5em
width 175px
border-bottom solid 1px borderColor
.profileGroupList
li
clearfix()
&:hover
background-color hoverBackgroundColor
.userName
float left
width 155px
padding 10px 15px
text-align left
display block
text-decoration none
cursor pointer
.userSetting
float right
display block
padding 10px 0
width 45px
cursor pointer
.createNewTeam
btnStripDefault()
width 100%
padding 10px 20px
font-size 1em
cursor pointer
text-align left
.controlGroup
list-style none
border-top solid 1px borderColor
padding 10px 0
li
&:hover
background-color hoverBackgroundColor
button
btnStripDefault()
width 100%
padding 10px 20px
font-size 1em
cursor pointer
text-align left
ul.planetList>li
margin 15px 0
.shortCut
@@ -91,29 +166,57 @@
border-color darken(brandBorderColor, 10%)
background-color brandColor
color white
.UserHome
.UserContainer
absolute top bottom right
left 55px
box-sizing border-box
padding 15px
h1
margin 15px 0
.userProfile
absolute top left right
padding 15px
border-bottom solid 1px borderColor
height 125px
clearfix()
.userPhoto
circle()
float left
margin 25px
.userIntro
margin 5px 15px 15px
.userInfo
float left
margin-top 25px
margin-top 15px
.userProfileName
font-size 2em
margin-bottom 15px
.userName
font-size 1.5em
.userPlanetList
padding-left 20px
li
font-size 1.3em
margin 10px
color brandColor
margin-bottom 10px
.userName
font-size 1.1em
.editProfileButton
float right
btnDefault()
margin-top 25px
padding 10px 15px
border-radius 5px
.teamList
absolute left bottom
top 125px
width 200px
padding 15px
border-right solid 1px borderColor
overflow-y auto
.teamLabel
font-size 1.2em
margin-bottom 15px
.planetList
absolute right bottom
top 125px
left 200px
padding 15px
overflow-y auto
.planetLabel
font-size 1.2em
margin-bottom 25px
.planetGroup
margin-left 15px
.planetGroupLabel
font-size 1.1em
margin-bottom 15px
.planets
margin-left 15px

View File

@@ -6,10 +6,19 @@ global-reset()
@import './components/*'
@import './containers/*'
html, body
width 100%
height 100%
overflow hidden
body
font-family "Lato"
color textColor
font-size fontSize
font-weight 400
div, span, a, button, input
box-sizing border-box
h1
font-size 2em
@@ -33,9 +42,11 @@ a
hr
border-top none
border-bottom solid 1px borderColor
margin 25px 0
margin 15px 0
button
font-weight 400
cursor pointer
&:focus, &.focus
outline none

View File

@@ -1,18 +1,11 @@
alert()
line-height 44px
border-radius 5px
alertSuccess()
alert()
background-color successBackgroundColor
color successTextColor
alertError()
alert()
background-color errorBackgroundColor
color errorTextColor
alertInfo()
alert()
background-color infoBackgroundColor
color infoTextColor

View File

@@ -12,6 +12,8 @@ btnDefault()
border-color darken(brandBorderColor, 10%)
background-color brandColor
color white
&:disabled, &.disabled
opacity 0.6
btnPrimary()
border-style solid
@@ -25,3 +27,14 @@ btnPrimary()
&:active, &.active
background-color brandColor
color white
&:disabled, &.disabled
opacity 0.6
btnStripDefault()
border none
background-color transparent
color lightButtonColor
&:hover, &.hover, &:focus, &.focus
color darken(lightButtonColor, 50%)
&:active, &.active
color brandColor

View File

@@ -2,8 +2,15 @@ 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
borderInput()
border solid 1px borderColor
padding 5px 15px
transition 0.1s
&:focus, &.focus
border-color brandBorderColor
outline none

View File

@@ -5,24 +5,24 @@ marked()
margin 15px 0
h1
font-size 2em
margin 0.67em auto
margin 0 auto 0.67em
h2
font-size 1.5em
margin 0.83em auto
margin 0 auto 0.83em
h3
font-size 1.17em
margin 1em auto
margin 0 auto 1em
h4
font-size 1em
margin 1.33em auto
margin 0 auto 1.33em
h5
font-size 0.83em
margin 1.67em auto
margin 0 auto 1.67em
h6
font-size 0.67em
margin 2.33em auto
h1, h2, h3, h4, h5, h6
font-weight bold
font-weight font-weight 400
line-height 1.2em
p
line-height 1.2em

View File

@@ -1,40 +1,114 @@
.ModalBase
fixed top left right bottom
z-index 1000
overflow-y auto
overflow-x auto
background-color modalBaseColor
line-height 100%
fixed top left bottom right
z-index modalZIndex
&.hide
display none
.modalBack
absolute top left bottom right
background-color modalBackColor
z-index modalZIndex + 1
.modal
width 600px
position relative
width 650px
margin 50px auto 0
absolute top left right
z-index modalZIndex + 2
box-shadow popupShadow
background-color white
border-radius 10px
padding 15px
box-shadow popupShadow
.modal-header
border-bottom solid 1px borderColor
margin-bottom 15px
margin-bottom 10px
h1
padding: 10px 0 15px;
font-size: 1.5em;
padding 10px 0 15px
font-size 1.5em
.modal-body
p
margin-bottom 15px
margin-bottom 10px
.modal-footer
clearfix()
border-top solid 1px borderColor
padding-top 15px
padding-top 10px
.modal-control
float right
.EditProfileModal
height 500px
.leftPane
absolute top bottom left
width 175px
padding 20px
border-right solid 1px borderColor
.tabLabel
font-size 1.5em
margin-top 25px
margin-bottom 35px
color brandColor
.tabList button
btnStripDefault()
display block
width 100%
font-size 1.1em
padding 10px 5px
margin-bottom 15px
text-align left
.rightPane
absolute top bottom right
left 175px
padding 15px
.userInfoTab, .paswordTab
padding-top 45px
.formField
position relative
clearfix()
margin-bottom 15px
label
width 30%
display block
line-height 33px
float left
input
width 70%
display block
borderInput()
height 33px
font-size 1em
border-radius 10px
float left
.formConfirm
position relative
clearfix()
margin-bottom 15px
button
float right
btnDefault()
padding 10px 15px
border-radius 5px
font-size 1em
margin-left 5px
.alertInfo, .alertSuccess, .alertError
float right
padding 12px 10px
border-radius 5px
width 200px
font-size 1em
overflow-x hidden
white-space nowrap
transition 0.1s
&.hide
width 0
padding 12px 0
.alertInfo
alertInfo()
.alertSuccess
alertSuccess()
.alertError
alertError()
.LaunchModal
.modal-tab
text-align center
margin-bottom 15px
margin-bottom 10px
.btn-primary, .btn-default
margin 0
border-radius 0
@@ -49,9 +123,6 @@
border-left none
border-top-right-radius 5px
border-bottom-right-radius 5px
textarea.snippetDescription
height 75px
font-size 0.9em
.Select
.Select-control
border-color borderColor
@@ -63,23 +134,30 @@
.ace_editor
border-radius 5px
border solid 1px borderColor
.SnippetForm
.CodeForm, .NoteForm
.form-group
margin-bottom 10px
.CodeForm
textarea.codeDescription
height 75px
font-size 0.9em
margin-bottom 10px
.modeSelect.Select
display inline-block
width 200px
margin-top -15px
top 14px
height 37px
.Select-control
height 37px
.ace_editor
height 258px
.BlueprintForm
.NoteForm
.ace_editor
height 358px
.previewMode
absolute top right
font-size 0.8em
line-height 24px
padding 0 10px
padding 5 15px
background-color transparentify(invBackgroundColor, 0.2)
color invTextColor
border-top-right-radius 5px
@@ -98,13 +176,25 @@
.nameInput
width 80%
font-size 1.3em
margin 35px auto
margin 25px auto 15px
text-align center
.userNameSelect
width 80%
font-size 1.3em
margin 35px auto
text-align center
.formField
text-align center
margin 0 auto 25px
select
display inline-block
width 150px
height 33px
border solid 1px borderColor
background-color white
padding 0 10px
margin 0 15px
.submitButton
display block
margin 0 auto
@@ -150,7 +240,7 @@
absolute top bottom right
left 200px
padding 15px
.PersonalSettingModal.modal
.PreferencesModal.modal
.settingBody
.profile
height 500px
@@ -272,48 +362,3 @@
margin-right 0
.deleteButton
float left
.members
height 500px
box-sizing border-box
padding-top 50px
.userList
height 275px
box-sizing border-box
border-bottom solid 1px borderColor
li
clearfix()
margin-bottom 10px
img.userPhoto
float left
width 44px
height 44px
circle()
box-shadow 1px 1px 4px 0px #C5C5C5
.userName
float left
height 44px
font-size 1.3em
line-height 44px
margin-left 15px
.userControl
float right
height 44px
.ownerLabel
height 44px
padding 0 15px
line-height 44px
.addUserForm
height 225px
.addUserLabel
margin-top 15px
font-size 1.3em
.addUserControl
clearfix()
margin-top 15px
.addUserSelect
float left
height 44px
width 350px
margin-top 5px
.addUserSubmit
float right

View File

@@ -7,9 +7,8 @@ buttonBorderColor = #4C4C4C
lightButtonColor = #898989
hoverBackgroundColor= transparentify(#444, 3%)
hoverBackgroundColor= transparentify(#444, 4%)
// v0.2.0
inactiveTextColor = #888
textColor = #4D4D4D
backgroundColor= white
@@ -32,7 +31,7 @@ planetAnchorActiveColor = textColor
planetAnchorActiveBgColor = white
popupShadow = 0 0 5px 0 #888
modalBaseColor = transparentify(white, 65%)
modalBackColor = transparentify(white, 65%)
tableHeadBgColor = white
tableOddBgColor = #F9F9F9
@@ -47,3 +46,6 @@ errorBackgroundColor= #F2DEDE
errorTextColor= #A64444
infoBackgroundColor= #D9EDF7
infoTextColor= #34708E
modalZIndex= 1000
popupZIndex= 500