refactor main navigation

because of annoying bootstrap inheritance

app/assets/javascripts/app/controllers/navigation.js.coffee

@@ -59,7 +59,7 @@ class App.Navigation extends App.Controller
       href = $(d).attr('href')
       active_tab[href] = true
     )
-    @el.find('.navbar-items-menu').html App.view('navigation/menu')(
+    @el.find('.main-navigation').html App.view('navigation/menu')(
       items:      items
       open_tab:   open_tab
       active_tab: active_tab

app/assets/javascripts/app/views/navigation.jst.eco

@@ -9,7 +9,7 @@
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
 </form>
 
-<ul class="nav navbar-nav navbar-items-menu"></ul>
+<ul class="main-navigation"></ul>
 
 <div class="tasks tasks-navigation flex"></div>
 

app/assets/stylesheets/zzz.css.erb

@@ -1412,26 +1412,34 @@ footer {
     display: none !important;
   }
 
-  .navigation .navbar-nav,
-  .navigation .navbar-nav > li {
-    float: none;
+.main-navigation {
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
-  .navigation .nav > li.active > a,
-  .navigation .nav > li > a:hover,
-  .navigation .nav > li > a:focus {
-    background: none;
-    color: #F0FAFF;
-  }
-
-  .navbar-nav > li > a {
+  .main-navigation a {
     padding: 0 15px;
     height: 48px;
     color: rgba(240, 250, 255, .25);
     border-bottom: 1px solid rgba(240, 250, 255, .05);
+    text-decoration: none;
   }
 
-  .navigation .nav > li.active > a {
+  .main-navigation > li.active > a,
+  .main-navigation > li > a:hover,
+  .main-navigation > li > a:focus {
+    background: none;
+    color: #F0FAFF;
+  }
+  
+  .main-navigation > li.active > a .icon,
+  .main-navigation > li > a:hover .icon,
+  .main-navigation > li > a:focus .icon {
+    opacity: 1;
+  }
+
+  .main-navigation li.active > a {
     background: #389ed9;
   }
 
@@ -1441,12 +1449,6 @@ footer {
     vertical-align: bottom;
   }
 
-  .navigation .nav > li.active > a .icon,
-  .navigation .nav > li > a:hover .icon,
-  .navigation .nav > li > a:focus .icon {
-    opacity: 1;
-  }
-
 .tasks {
   background: #2c2d36;
   overflow: auto;