public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46: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

2
browser/styles/main/components/ArticleDetail.styl → browser/styles/main/HomeContainer/ArticleDetail.styl
View File

@@ -3,7 +3,7 @@ noTagsColor = #999
.ArticleDetail
absolute right bottom
top 60px
left 250px
left 510px
padding 10px
*
-webkit-user-select all

3
browser/styles/main/components/ArticleList.styl → browser/styles/main/HomeContainer/ArticleList.styl
View File

@@ -2,8 +2,9 @@ articleItemHoverBgColor = darken(white, 5%)
articleItemColor = #777
.ArticleList
absolute left bottom
absolute bottom
top 60px
left 260px
width 250px
border-right solid 1px highlightenBorderColor
&>ul

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'

43
browser/styles/main/components/TopBar.styl
View File

@@ -1,43 +0,0 @@
.TopBar
absolute top left right
height 60px
border-bottom solid 1px borderColor
noSelect()
.left
float left
.search
position absolute
top 13.5px
left 15px
height 33px
i.fa
position absolute
line-height 33px
z-index 1
width 33px
text-align center
input.searchInput
absolute top left
background-color white
borderInput()
width 350px
padding-left 30px
border-radius 16.5px
font-size 14px
height 33px
line-height 33px
outline none
&:focus
border-color brandColor
.right
float right
.logo
&>img
margin-top 7px
margin-right 15px
.tooltip
tooltip()
right 5px
&:hover
.tooltip
opacity 1.0

153
browser/styles/main/containers/HomeContainer.styl
View File

@@ -1,153 +0,0 @@
homeNavigatorBgColor = #1B1C1C
homeNavigatorColor = #DDD
userAnchorColor = #979797
userAnchorBgColor = #BEBEBE
userAnchorActiveColor = textColor
userAnchorActiveBgColor = white
.HomeContainer
.HomeNavigator
noSelect()
background-color homeNavigatorBgColor
absolute left top bottom
width 60px
text-align center
box-sizing border-box
// must be moved
// .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
// width 155px
// padding 10px 15px
// text-align left
// display block
// text-decoration none
// 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.userList
margin-top 25px
&>li
.shortCut
margin-top 5px
font-size 0.8em
color homeNavigatorColor
a
display block
width 44px
height 44px
margin 0 auto
text-align center
background-color userAnchorBgColor
text-decoration none
color userAnchorColor
line-height 44px
font-size 1.1em
cursor pointer
circle()
img
width 44px
height 44px
transition 0.1s
&:hover, &.active
background-color userAnchorActiveBgColor
color userAnchorActiveColor
.userTooltip
position absolute
z-index popupZIndex
background-color transparentify(invBackgroundColor, 80%)
color invTextColor
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
&:hover .userTooltip
opacity 1
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

227
browser/styles/main/index.css
View File

@@ -1823,6 +1823,162 @@ a img {
.ArticleList>ul li .divider {
border-bottom: solid 1px #d0d0d0;
}
.ArticleNavigator {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: userNavigatorWidth;
background-color: userNavigatorBgColor;
color: userNavigatorColor;
-webkit-user-select: none;
cursor: default;
}
.ArticleNavigator>.profile {
height: 60px;
padding: 10px 15px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
border-bottom: solid 1px userNavigatorBorderColor;
cursor: pointer;
}
.ArticleNavigator>.profile>.profileName {
color: userNavigatorProfileNameColor;
font-size: 22px;
cursor: pointer;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
-ms-transition: 0.1s;
transition: 0.1s;
}
.ArticleNavigator>.profile>.name {
padding: 5px 10px;
font-size: 14px;
color: userNavigatorColor;
cursor: pointer;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
-ms-transition: 0.1s;
transition: 0.1s;
}
.ArticleNavigator>.profile>.dropdownIcon {
position: absolute;
top: 20px;
right: 25px;
float: right;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 8px;
border: solid 1px userNavigatorColor;
-webkit-border-radius: 12.5px;
border-radius: 12.5px;
text-align: center;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
-ms-transition: 0.1s;
transition: 0.1s;
}
.ArticleNavigator>.profile:hover>.profileName {
color: #31c4a3;
}
.ArticleNavigator>.profile:hover>.name {
color: #fff;
}
.ArticleNavigator>.profile:hover>.dropdownIcon {
border-color: #fff;
}
.ArticleNavigator>.profile:hover:active>.dropdownIcon {
background-color: #2bac8f;
border-color: #2bac8f;
}
.ArticleNavigator>.control {
padding: 15px 15px;
}
.ArticleNavigator>.control>.newPostButton {
background-color: #2bac8f;
color: #fff;
height: 44px;
width: 100%;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
-ms-transition: 0.1s;
transition: 0.1s;
}
.ArticleNavigator>.control>.newPostButton:hover {
background-color: #31c4a3;
}
.ArticleNavigator>.menu {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 134px;
padding: 15px 0;
overflow: auto;
}
.ArticleNavigator>.menu>.menuGruop>.label {
border-bottom: 1px solid userNavigatorBorderColor;
padding: 10px 15px;
font-size: 18px;
margin-bottom: 10px;
}
.ArticleNavigator>.menu>.menuGruop>.label>.plusButton {
float: right;
width: 20px;
height: 20px;
margin-top: -2.5px;
margin-right: -5px;
line-height: 15px;
font-size: 8px;
border: solid 1px userNavigatorColor;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: transparent;
text-align: center;
color: userNavigatorColor;
}
.ArticleNavigator>.menu>.menuGruop>.label>.plusButton:hover {
border-color: #fff;
color: #fff;
}
.ArticleNavigator>.menu>.menuGruop>.label>.plusButton:hover:active {
background-color: #2bac8f;
border-color: #2bac8f;
}
.ArticleNavigator>.menu>.folders .folderButton {
padding: 10px 25px;
width: 100%;
background-color: transparent;
border: none;
font-size: 14px;
color: userNavigatorColor;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
-ms-transition: 0.1s;
transition: 0.1s;
text-align: left;
}
.ArticleNavigator>.menu>.folders .folderButton:hover {
background-color: rgba(255,255,255,0.2);
color: #fff;
}
.ArticleNavigator>.menu>.folders .folderButton.active {
background-color: #2bac8f;
color: #fff;
}
.Select {
position: relative;
}
@@ -2211,7 +2367,7 @@ a img {
-ms-filter: none;
filter: none;
}
.HomeContainer .HomeNavigator {
.HomeContainer .UserNavigator {
-webkit-user-select: none;
cursor: default;
background-color: #1b1c1c;
@@ -2225,49 +2381,52 @@ a img {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.HomeContainer .HomeNavigator ul.userList {
.HomeContainer .UserNavigator ul.userList {
margin-top: 25px;
}
.HomeContainer .HomeNavigator ul.userList>li .shortCut {
margin-top: 5px;
font-size: 0.8em;
color: #ddd;
}
.HomeContainer .HomeNavigator ul.userList>li a {
.HomeContainer .UserNavigator ul.userList>li a {
display: block;
width: 44px;
height: 44px;
margin: 0 auto;
height: 64px;
margin: 0 auto 20px;
text-align: center;
background-color: #bebebe;
text-decoration: none;
color: #979797;
line-height: 44px;
font-size: 1.1em;
cursor: pointer;
-webkit-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-o-transition: 0.1s;
-ms-transition: 0.1s;
transition: 0.1s;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.HomeContainer .HomeNavigator ul.userList>li a img {
.HomeContainer .UserNavigator ul.userList>li a img.ProfileImage {
width: 44px;
height: 44px;
-webkit-border-radius: 22px;
border-radius: 22px;
}
.HomeContainer .HomeNavigator ul.userList>li a:hover,
.HomeContainer .HomeNavigator ul.userList>li a.active {
background-color: #fff;
color: #4d4d4d;
.HomeContainer .UserNavigator ul.userList>li a:hover,
.HomeContainer .UserNavigator ul.userList>li a.active {
opacity: 1;
-ms-filter: none;
filter: none;
}
.HomeContainer .HomeNavigator ul.userList>li a .userTooltip {
.HomeContainer .UserNavigator ul.userList>li a:hover .userTooltip,
.HomeContainer .UserNavigator ul.userList>li a.active .userTooltip {
opacity: 1;
-ms-filter: none;
filter: none;
}
.HomeContainer .UserNavigator ul.userList>li a .userTooltip {
position: absolute;
z-index: 500;
background-color: rgba(31,31,31,0.8);
color: #fff;
color: invTextColorq;
padding: 10px;
line-height: 1em;
-webkit-border-radius: 5px;
@@ -2285,12 +2444,12 @@ a img {
transition: 0.1s;
pointer-events: none;
}
.HomeContainer .HomeNavigator ul.userList>li a:hover .userTooltip {
opacity: 1;
-ms-filter: none;
filter: none;
.HomeContainer .UserNavigator ul.userList>li a .keyLabel {
margin-top: -25px;
font-size: 0.8em;
color: #ddd;
}
.HomeContainer .HomeNavigator button.newTeamButton {
.HomeContainer .UserNavigator button.newTeamButton {
display: block;
margin: 0 auto;
width: 30px;
@@ -2312,20 +2471,20 @@ a img {
right: 0;
bottom: 15px;
}
.HomeContainer .HomeNavigator button.newTeamButton:hover,
.HomeContainer .HomeNavigator button.newTeamButton.hover,
.HomeContainer .HomeNavigator button.newTeamButton:focus,
.HomeContainer .HomeNavigator button.newTeamButton.focus {
.HomeContainer .UserNavigator button.newTeamButton:hover,
.HomeContainer .UserNavigator button.newTeamButton.hover,
.HomeContainer .UserNavigator button.newTeamButton:focus,
.HomeContainer .UserNavigator button.newTeamButton.focus {
border-color: #454545;
color: #454545;
}
.HomeContainer .HomeNavigator button.newTeamButton:active,
.HomeContainer .HomeNavigator button.newTeamButton.active {
.HomeContainer .UserNavigator button.newTeamButton:active,
.HomeContainer .UserNavigator button.newTeamButton.active {
border-color: #39a18a;
background-color: #2bac8f;
color: #fff;
}
.HomeContainer .HomeNavigator button.newTeamButton .tooltip {
.HomeContainer .UserNavigator button.newTeamButton .tooltip {
position: fixed;
z-index: 500;
background-color: rgba(31,31,31,0.8);
@@ -2349,7 +2508,7 @@ a img {
margin-left: 33px;
font-size: 14px;
}
.HomeContainer .HomeNavigator button.newTeamButton:hover .tooltip {
.HomeContainer .UserNavigator button.newTeamButton:hover .tooltip {
opacity: 1;
-ms-filter: none;
filter: none;

1
browser/styles/main/index.styl
View File

@@ -5,6 +5,7 @@ global-reset()
@import '../shared/*'
@import './components/*'
@import './containers/*'
@import './HomeContainer'
*
-webkit-app-region no-drag

2
browser/styles/mixins/input.styl
View File

@@ -3,6 +3,7 @@ stripInput()
border-bottom 1px solid borderColor
padding 5px 15px
transition 0.1s
font-size 14px
&:focus, &.focus
border-bottom 1px solid brandBorderColor
outline none
@@ -11,6 +12,7 @@ borderInput()
border solid 1px borderColor
padding 5px 15px
transition 0.1s
font-size 14px
&:focus, &.focus
border-color brandBorderColor
outline none