From d70ecf1c53dcd882b9471c582fb219550ac34e20 Mon Sep 17 00:00:00 2001
From: minusfive <mail@minusfive.com>
Date: Thu, 24 Aug 2017 22:39:14 -0400
Subject: [PATCH] Simplify user-nav styles to facilitate theming

---
 app/assets/stylesheets/common/base/user.scss  | 25 +++----------------
 .../stylesheets/common/components/navs.scss   | 16 +++++++++++-
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 22eb98a87a7..ad5bb38f465 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -3,23 +3,6 @@
   .d-icon-heart {
     color: $love !important;
   }
-  .nav-pills {
-    a {
-      color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
-    }
-
-    a:hover i {
-      color: $quaternary;
-    }
-
-    a.active i {
-      color: $secondary;
-    }
-
-    i {
-      color: dark-light-choose(scale-color($primary, $lightness: 55%), scale-color($secondary, $lightness: 55%));
-    }
-  }
 }
 
 .user-field {
@@ -161,11 +144,9 @@
 .user-nav {
   margin: 5px 0px;
   padding-top: 10px;
-  .d-icon {
-    margin-right: 5px;
-  }
-  .d-icon-comment {
-    margin-right: 2px;
+
+  li a {
+    color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
   }
 }
 
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index 487f5ea719a..a2fcc54cf7d 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -20,9 +20,11 @@
 .nav-pills {
   @extend %nav;
   @extend .clearfix;
+
   > li {
     float: left;
     margin-right: 5px;
+
     > a {
       border: none;
       padding: 5px 12px;
@@ -30,14 +32,26 @@
       font-size: 1.143em;
       line-height: 20px;
       transition: background .15s;
+
+      .d-icon {
+        margin-right: 5px;
+        opacity: .65;
+      }
+
       &:hover {
         color: $quaternary;
         background-color: $quaternary-low;
       }
     }
-    &.active > a, > a.active {
+
+    &.active > a,
+    > a.active {
       color: $secondary;
       background-color: $quaternary;
+
+      .d-icon {
+        opacity: 1;
+      }
     }
   }
 }