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

Change the layout at SideNav

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-04-07 14:24:38 +09:00
parent c1051afdc0
commit af6cd10e28
5 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
browser/components/SideNavFilter.styl
View File

@@ -3,6 +3,12 @@
.menu-button .menu-button
navButtonColor() navButtonColor()
&:active
background-color alpha($ui-button--active-backgroundColor, 20%)
color $ui-text-color
&:hover
background-color alpha($ui-button--active-backgroundColor, 20%)
color $ui-text-color
height 32px height 32px
padding 0 15px padding 0 15px
font-size 12px font-size 12px
@@ -12,10 +18,11 @@
.menu-button--active .menu-button--active
@extend .menu-button @extend .menu-button
color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:hover &:hover
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
color $ui-text-color
.menu-button-label .menu-button-label
margin-left 5px margin-left 5px

7
browser/components/StorageItem.styl
View File

@@ -17,17 +17,18 @@
&:first-child &:first-child
margin-top 0 margin-top 0
&:hover &:hover
color $ui-text-color
background-color $ui-button--hover-backgroundColor background-color $ui-button--hover-backgroundColor
&:active &:active
color $ui-button--active-color color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
.folderList-item--active .folderList-item--active
@extend .folderList-item @extend .folderList-item
color $ui-button--active-color color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
&:hover &:hover
color $ui-button--active-color color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
.folderList-item-name .folderList-item-name

6
browser/main/SideNav/SideNav.styl
View File

@@ -15,6 +15,12 @@
font-size 12px font-size 12px
width 100% width 100%
text-align left text-align left
&:hover
color $ui-text-color
background-color $ui-button--hover-backgroundColor
&:active
color $ui-text-color
background-color $ui-button--active-backgroundColor
.top-menu-label .top-menu-label
margin-left 5px margin-left 5px

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

@@ -9,26 +9,27 @@
margin-bottom 5px margin-bottom 5px
transition 0.15s transition 0.15s
&:hover &:hover
color $ui-text-color
background-color $ui-button--hover-backgroundColor background-color $ui-button--hover-backgroundColor
&:active &:active
.header-toggleButton .header-toggleButton
.header-addFolderButton .header-addFolderButton
color white color $ui-text-color
&:active &:active
color $ui-active-color color $ui-text-color
.header--active .header--active
@extend .header @extend .header
.header-info .header-info
color $ui-button--active-color color $ui-text-color
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
.header-toggleButton .header-toggleButton
.header-addFolderButton .header-addFolderButton
color white color $ui-text-color
&:active &:active
&:hover &:hover
&:hover:active &:hover:active
color white color $ui-text-color
.header-toggleButton .header-toggleButton
position absolute position absolute
@@ -42,7 +43,7 @@
&:hover &:hover
color $ui-text-color color $ui-text-color
&:active &:active
color $ui-active-color color $ui-text-color
.header-info .header-info
display block display block

2
browser/styles/index.styl
View File

@@ -25,7 +25,7 @@ $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
$ui-button-color = #939395 $ui-button-color = #939395
$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08) $ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
$ui-button--active-color = white $ui-button--active-color = white
$ui-button--active-backgroundColor = #6AA5E9 $ui-button--active-backgroundColor = #D4D4D4
$ui-button--focus-borderColor = lighten(#369DCD, 25%) $ui-button--focus-borderColor = lighten(#369DCD, 25%)
// UI Tooltip // UI Tooltip