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

modify: Fix the SideNavFilter layout

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-04-21 16:13:45 +09:00
parent e350dca72c
commit d039b17715
2 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/SideNavFilter.js
View File

@@ -24,7 +24,7 @@ const SideNavFilter = ({
<i className='fa fa-archive fa-fw' />
<span styleName='menu-button-label'>All Notes</span>
</button>
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
<button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
onClick={handleStarredButtonClick}
>
<i className='fa fa-star fa-fw' />

40
browser/components/SideNavFilter.styl
View File

@@ -12,11 +12,27 @@
.menu-button--active
@extend .menu-button
color $ui-text-color
color #e74c3c
background-color $ui-button--active-backgroundColor
.menu-button-label
color $ui-text-color
&:hover
background-color $ui-button--active-backgroundColor
color #e74c3c
.menu-button-label
color $ui-text-color
.menu-button-star--active
@extend .menu-button
color #F9BF3B
background-color $ui-button--active-backgroundColor
.menu-button-label
color $ui-text-color
&:hover
background-color $ui-button--active-backgroundColor
color #F9BF3B
.menu-button-label
color $ui-text-color
.menu-button-label
margin-left 5px
@@ -55,9 +71,25 @@ body[data-theme="dark"]
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-dark-text-color
.menu-button--active
color $ui-dark-text-color
color #c0392b
background-color $ui-dark-button--active-backgroundColor
&:active
.menu-button-label
color $ui-dark-text-color
&:hover
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
color #c0392b
.menu-button-label
color $ui-dark-text-color
.menu-button-star--active
color $ui-favorite-star-button-color
background-color $ui-dark-button--active-backgroundColor
.menu-button-label
color $ui-dark-text-color
&:hover
background-color $ui-dark-button--active-backgroundColor
color $ui-favorite-star-button-color
.menu-button-label
color $ui-dark-text-color