diff --git a/browser/main/HomePage/SideNav/FolderItem.styl b/browser/main/HomePage/SideNav/FolderItem.styl index 817b975e..ac8d60df 100644 --- a/browser/main/HomePage/SideNav/FolderItem.styl +++ b/browser/main/HomePage/SideNav/FolderItem.styl @@ -4,9 +4,12 @@ position relative cursor pointer &:hover - background-color alpha(white, 0.1) + background-color $nav-hover-background .control opacity 1 + &:active + background-color $nav-active-background + color $nav-text-color .label position absolute @@ -16,7 +19,7 @@ right 48px padding-left 20px line-height 33px - color white + color $nav-inactive-text-color .control opacity 0 @@ -33,13 +36,12 @@ border none border-radius 5px background-color transparent - color $nav-inactive-color + color $nav-inactive-text-color &:hover - color white - background-color alpha(white, 0.1) + background-color $nav-hover-background &:active - color white - background-color $brand-color + background-color $nav-active-background + color $nav-text-color .nameInput absolute top bottom diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl index 8230fc3e..260ce797 100644 --- a/browser/main/HomePage/SideNav/RepositorySection.styl +++ b/browser/main/HomePage/SideNav/RepositorySection.styl @@ -2,13 +2,15 @@ margin-top 15px margin-bottom 15px user-select none + color $nav-text-color .header position relative height 33px cursor pointer + color $nav-inactive-text-color &:hover - background-color alpha(white, 0.1) + background-color $nav-hover-background .header-control-button opacity 1 @@ -20,7 +22,6 @@ right 72px padding-left 10px line-height 33px - color white .header-control position absolute @@ -37,14 +38,13 @@ border none border-radius 5px background-color transparent - color $nav-inactive-color + color $nav-inactive-text-color opacity 0 &:hover - color white - background-color alpha(white, 0.1) + background-color $nav-hover-background &:active - color white - background-color $brand-color + background-color $nav-active-background + color $nav-text-color .header-control-button--show @extend .header-control-button @@ -73,11 +73,10 @@ border none padding-left 20px text-align left + color $nav-inactive-text-color background-color transparent - color $nav-inactive-color &:hover - background-color alpha(white, 0.1) - color white + background-color $nav-hover-background &:active - background-color $brand-color - color white + background-color $nav-active-background + color $nav-text-color diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl index 65bb6b37..5e6a076b 100644 --- a/browser/main/HomePage/SideNav/SideNav.styl +++ b/browser/main/HomePage/SideNav/SideNav.styl @@ -4,24 +4,26 @@ border-right solid 1px $nav-border-color background-color $nav-background-color user-select none + color $nav-text-color .top height 60px border-bottom solid 1px $nav-border-color .top-menu - height 60px + height 59px padding 0 10px font-size 14px width 100% text-align left border none - color white + color $nav-inactive-text-color background-color transparent &:hover - background-color alpha(white, 0.1) + background-color $nav-hover-background &:active - background-color $brand-color + background-color $nav-active-background + color $nav-text-color .menu margin-top 15px @@ -33,12 +35,20 @@ width 100% text-align left border none - color white + color $nav-inactive-text-color background-color transparent &:hover - background-color alpha(white, 0.1) + background-color $nav-hover-background &:active - background-color $brand-color + background-color $nav-active-background + color $nav-text-color + +.menu-button--active + @extend .menu-button + background-color $nav-active-background + color $nav-text-color + &:hover + background-color $nav-active-background .repositoryList absolute left right bottom diff --git a/browser/styles/index.styl b/browser/styles/index.styl index f39991a1..24b39ab3 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -56,9 +56,12 @@ $disabled-input-background = #DDD * Nav */ -$nav-border-color = #838383 -$nav-background-color = #353535 -$nav-inactive-color = #838383 +$nav-text-color = #515151 +$nav-inactive-text-color = #939395 +$nav-hover-background = rgba(126, 127, 129, 0.08) +$nav-active-background = #E7E7E7 +$nav-border-color = #D1D1D2 +$nav-background-color = #FAFAFA /** * # Modal Stuff