From 5fd4970602cd806dc6470860e7c47d85049ce231 Mon Sep 17 00:00:00 2001
From: minusfive <mail@minusfive.com>
Date: Wed, 30 Aug 2017 11:01:01 -0400
Subject: [PATCH] Cleanup nav-stacked .active state styles, remove unnecessary
 nesting

---
 .../stylesheets/common/admin/admin_base.scss  |  5 ---
 app/assets/stylesheets/common/base/rtl.scss   |  8 ++--
 .../stylesheets/common/components/navs.scss   | 39 +++++++++----------
 app/assets/stylesheets/desktop/user.scss      | 16 ++++----
 4 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index da1f06fbd71..eedbf6a0b77 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -375,11 +375,6 @@ td.flaggers td {
   width: 18.018%;
   position: relative;
 
-  li a.active {
-    color: $secondary;
-    background-color: $quaternary;
-  }
-
   // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
   @media (max-width: $mobile-breakpoint) {
     position: absolute;
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 71163ef835c..67a9a7ade6a 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -7,7 +7,7 @@
   right: 0 !important;
 }
 
-// This is used to flip the .d-icon-caret-right 
+// This is used to flip the .d-icon-caret-right
 @mixin rotate( $degrees ) {
   -webkit-transform: rotate(#{$degrees}deg);
   -moz-transform: rotate(#{$degrees}deg);
@@ -27,7 +27,7 @@
 
 // Changes the triangle arrow direction in .nav-stacked .active
 // The 'left' and 'right' in these selectors is not being flipped by r2.
-.rtl .nav-stacked .active > a::after {
+.rtl .nav-stacked a.active::after {
   border-left-color: transparent !important;
   border-right-color: $secondary !important;
 }
@@ -38,8 +38,8 @@
 .rtl .pull-left {
   float: right !important;
 }
-.rtl .autocomplete { 
-  left: 27px; 
+.rtl .autocomplete {
+  left: 27px;
 }
 
 .rtl .customize .current-style .toggle-mobile {
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index a2fcc54cf7d..55477793a01 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -76,29 +76,28 @@
     &.indent {
       padding-left: 15px;
     }
-
-    a {
-      margin: 0;
-      padding: 13px;
-      font-size: 1.143em;
-      line-height: 20px;
-      cursor: pointer;
-      color: $primary;
-    }
   }
 
-  .active > a,
-  li > a.active {
-    color: $secondary;
-    background-color: $quaternary;
+  a {
+    margin: 0;
+    padding: 13px;
+    font-size: 1.143em;
+    line-height: 20px;
+    cursor: pointer;
+    color: $primary;
 
-    &:after {
-      left: 90%;
-      top: 33%;
-      content: " ";
-      position: absolute;
-      border: 8px solid transparent;
-      border-left-color: $secondary;
+    &.active {
+      color: $secondary;
+      background-color: $quaternary;
+
+      &::after {
+        left: 90%;
+        top: 33%;
+        content: " ";
+        position: absolute;
+        border: 8px solid transparent;
+        border-left-color: $secondary;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 2d9c59101bd..6a54197484c 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -113,25 +113,27 @@
 
   .nav-stacked {
     background-color: transparent;
+
     li {
       border-bottom: none;
 
-      a {
-        color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
+      &.archive {
+        padding-left: 15px;
       }
+    }
 
-      a.active {
+    a {
+      color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
+
+      &.active {
         color: $primary;
         font-weight: bold;
         background-color: transparent;
 
         &:after {
-        display: none;
+          display: none;
         }
       }
-      &.archive {
-        padding-left: 15px;
-      }
     }
   }
 }