fixed styles for mobile navbar-inverse dropdowns

Author: Ben Centra

dev/members.css

@@ -140,6 +140,9 @@ a.btn {
   background-color: #8b2c93;
   border-color: #66206c;
 }
+.navbar-inverse .navbar-collapse {
+  border-color: #66206c;
+}
 .navbar-inverse .navbar-brand {
   color: #ffffff;
 }
@@ -161,20 +164,33 @@ a.btn {
   background-color: #66206c;
   color: #e0a6e5;
 }
-.navbar-inverse .navbar-nav li.dropdown .open a {
-  background-color: #66206c;
+.navbar-inverse .navbar-nav li.dropdown a.dropdown-toggle {
+  color: #ffffff;
+  background-color: #8b2c93;
 }
-.navbar-inverse .navbar-nav li.dropdown a:hover,
-.navbar-inverse .navbar-nav li.dropdown a:active,
-.navbar-inverse .navbar-nav li.dropdown a:focus {
+.navbar-inverse .navbar-nav li.dropdown a.dropdown-toggle:hover,
+.navbar-inverse .navbar-nav li.dropdown a.dropdown-toggle:active {
+  color: #e0a6e5;
+}
+.navbar-inverse .navbar-nav li.dropdown a.dropdown-toggle[aria-expanded=true] {
   background-color: #66206c;
 }
 .navbar-inverse .navbar-nav li.dropdown .dropdown-menu li > a {
-  color: #222222;
+  color: #ffffff;
 }
 .navbar-inverse .navbar-nav li.dropdown .dropdown-menu li > a:hover,
-.navbar-inverse .navbar-nav li.dropdown .dropdown-menu li > a:active {
-  background-color: #eee;
+.navbar-inverse .navbar-nav li.dropdown .dropdown-menu li > a:active,
+.navbar-inverse .navbar-nav li.dropdown .dropdown-menu li > a:focus {
+  color: #e0a6e5;
+}
+.navbar-inverse .navbar-nav li.dropdown .dropdown-menu li.active > a {
+  background-color: #66206c;
+}
+.navbar-inverse .navbar-nav li.dropdown .dropdown-menu .dropdown-header {
+  color: #e0a6e5;
+}
+.navbar-inverse .navbar-nav li.dropdown .dropdown-menu .divider {
+  background-color: #66206c;
 }
 .navbar-inverse .navbar-toggle {
   border-color: #66206c;

dev/members.less

@@ -179,6 +179,9 @@ a {
 .navbar-inverse {
   background-color: @members-purple;
   border-color: @members-purple-dark;
+  .navbar-collapse {
+    border-color: @members-purple-dark;
+  }
   .navbar-brand {
     color: @white;
     &:hover {
@@ -200,21 +203,40 @@ a {
       }
     }
     li.dropdown {
-      .open {
-        a {
+      // &.open {
+      //   a {
+      //     background-color: @members-purple-dark;
+      //   }
+      // }
+      // a:hover, a:active, a:focus {
+      //   background-color: @members-purple-dark;
+      // }
+      a.dropdown-toggle {
+        color: @white;
+        background-color: @members-purple;
+        &:hover, &:active {
+          color: @members-puprle-light;
+        }
+        &[aria-expanded=true] {
           background-color: @members-purple-dark;
         }
       }
-      a:hover, a:active, a:focus {
-        background-color: @members-purple-dark;
-      }
       .dropdown-menu {
         li > a {
-          color: @charcoal;
-          &:hover, &:active {
-            background-color: #eee;
+          color: @white;
+          &:hover, &:active, &:focus {
+            color: @members-puprle-light;
           }
         }
+        li.active > a {
+          background-color: @members-purple-dark;
+        }
+        .dropdown-header {
+          color: @members-puprle-light;
+        }
+        .divider {
+          background-color: @members-purple-dark;
+        }
       }
     }
   }