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' /> <i className='fa fa-archive fa-fw' />
<span styleName='menu-button-label'>All Notes</span> <span styleName='menu-button-label'>All Notes</span>
</button> </button>
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'} <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
onClick={handleStarredButtonClick} onClick={handleStarredButtonClick}
> >
<i className='fa fa-star fa-fw' /> <i className='fa fa-star fa-fw' />

40
browser/components/SideNavFilter.styl
View File

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