public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 02:06:29 +00:00
Code Issues Releases Wiki Activity

Merge pull request #520 from BoostIO/improvement-of-sidebar-uiux

Browse Source 
Improvement of sidebar uiux
This commit is contained in:
Kazu Yokomizo
2017-04-29 11:17:03 +09:00
committed by GitHub
parent d94f7626c2 60e5665133
commit 6dcd653eac
2 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/StorageItem.styl
View File

@@ -35,7 +35,7 @@
.folderList-item-name .folderList-item-name
display block display block
flex 1 flex 1
padding 0 15px padding 0 25px
height 26px height 26px
line-height 26px line-height 26px
border-width 0 0 0 2px border-width 0 0 0 2px

37
browser/main/SideNav/StorageItem.styl
View File

@@ -4,12 +4,13 @@
.header .header
position relative position relative
height 26px height 25px
width 100% width 100%
margin-bottom 5px margin-bottom 5px
transition 0.15s transition 0.15s
.header--active .header--active
margin-bottom 5px
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
transition color background-color 0.15s transition color background-color 0.15s
@@ -30,26 +31,29 @@
position absolute position absolute
left 0 left 0
width 25px width 25px
height 26px height 25px
padding 0 padding 0
border none border none
border-radius 50%
&:hover &:hover
background-color transparent transition 0.2s
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color color $ui-text-color
.header-info .header-info
navButtonColor() navButtonColor()
display block display block
width 100% width 100%
height 30px height 25px
padding-left 25px padding-left 23px
padding-right 10px padding-right 10px
line-height 26px line-height 22px
cursor pointer cursor pointer
font-size 13px font-size 13px
border none border none
overflow ellipsis overflow ellipsis
text-align left text-align left
background-color alpha($ui-button--active-backgroundColor, 20%)
.header-info-path .header-info-path
font-size 10px font-size 10px
@@ -60,11 +64,14 @@
position absolute position absolute
right 0 right 0
width 25px width 25px
height 26px height 25px
padding 0 padding 0
border none border none
margin-right 5px
border-radius 50%
&:hover &:hover
background-color transparent transition 0.2s
background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color color $ui-text-color
.root--folded .root--folded
@@ -117,10 +124,17 @@ body[data-theme="dark"]
.header-toggleButton .header-toggleButton
&:hover &:hover
transition 0.2s
color $ui-dark-text-color color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header-info .header-info
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:hover &:hover
transition 0.2s
color $ui-dark-text-color color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:active, &:active:hover &:active, &:active:hover
@@ -129,4 +143,9 @@ body[data-theme="dark"]
.header-addFolderButton .header-addFolderButton
&:hover &:hover
color $ui-dark-text-color transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor