refactor nav-tabs (remove bootstrap, back to old design)

app/assets/javascripts/app/controllers/_application_controller_generic.coffee

@@ -363,8 +363,6 @@ class App.ControllerTabs extends App.Controller
     super
 
   render: ->
-    @el.addClass 'main--tabs'
-
     @html App.view('generic/tabs')(
       header: @header
       subHeader: @subHeader

app/assets/javascripts/app/views/generic/tabs.jst.eco

@@ -1,4 +1,4 @@
-<div class="page-header">
+<div class="page-header page-header--tabs">
   <div class="page-header-title">
     <h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
   </div>
@@ -10,13 +10,11 @@
   </div>
   <% end %>
 </div>
-<div class="page-tabs">
-  <ul class="nav nav-tabs" role="tablist">
-    <% for tab in @tabs: %>
-      <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
-    <% end %>
-  </ul>
-</div>
 <div class="page-content">
+  <ul class="nav nav-tabs" role="tablist">
+  <% for tab in @tabs: %>
+    <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
+  <% end %>
+  </ul>
   <div class="tab-content"></div>
 </div>

app/assets/stylesheets/bootstrap.css

@@ -566,11 +566,6 @@ a.bg-warning:hover {
 a.bg-danger:hover {
   background-color: #e4b9b9;
 }
-.page-header {
-  padding-bottom: 9px;
-  margin: 40px 0 20px;
-  border-bottom: 1px solid #eee;
-}
 ul,
 ol {
   margin-top: 0;
@@ -2474,50 +2469,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .input-group-btn:last-child > .btn-group {
   margin-left: -1px;
 }
-.nav {
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-.nav > li {
-  position: relative;
-  display: block;
-}
-.nav > li > a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-}
-.nav > li > a:hover,
-.nav > li > a:focus {
-  text-decoration: none;
-}
-.nav > li.disabled > a {
-  color: #777;
-}
-.nav > li.disabled > a:hover,
-.nav > li.disabled > a:focus {
-  color: #777;
-  text-decoration: none;
-  cursor: not-allowed;
-  background-color: transparent;
-}
-.nav .open > a,
-.nav .open > a:hover,
-.nav .open > a:focus {
-  background-color: #eee;
-  border-color: #337ab7;
-}
-.nav .nav-divider {
-  height: 1px;
-  margin: 9px 0;
-  overflow: hidden;
-  background-color: #e5e5e5;
-}
-.nav > li > a > img {
-  max-width: none;
-}
-
 .nav-pills > li {
   float: left;
 }

app/assets/stylesheets/zammad.scss

@@ -1780,7 +1780,6 @@ kbd {
 .page-header {
   margin: 0 0 15px;
   padding: 0;
-  border: none;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -1810,6 +1809,7 @@ kbd {
   margin-left: auto;
   padding-left: 9px;
   display: flex;
+  margin-right: 20px;
 
   .btn + .btn {
     margin-left: 9px;
@@ -1831,35 +1831,6 @@ kbd {
   color: initial;
 }
 
-.main--tabs .page-header {
-  padding: 20px 20px 0;
-  overflow: hidden;
-  margin: 0;
-}
-
-.main--tabs .page-content {
-  padding: 20px;
-}
-
-.page-tabs {
-  display: flex;
-  margin: 0 0 30px;
-  padding: 20px 20px 0;
-  background: linear-gradient(hsla(200,12%,94%,0), hsl(200,12%,94%));
-  border-bottom: 1px solid hsl(200,12%,89%);
-  
-  .nav-tabs li.active {
-    background: hsl(210,17%,98%);
-    border-bottom-color: hsl(210,17%,98%);
-    margin-bottom: -1px;
-    padding-bottom: 1px;
-  }
-  
-  .btn {
-    margin-left: auto;
-  }
-}
-
 .page-body--two-column {
   display: flex;
 }
@@ -5649,21 +5620,51 @@ footer {
   margin: 0;
 }
 
+.nav {
+  list-style: none;
+  padding: 0;
+}
+
+.nav a {
+  padding: 10px 15px;
+  display: block;
+}
+
 .nav-tabs {
   display: flex;
-  margin-left: 1px;
+  margin: 10px 0 20px;
 }
 
 .nav-tabs li {
   margin: 0;
-  border-radius: 3px 3px 0 0;
+  color: hsl(0,0%,70%);
-  border: 1px solid hsl(200,12%,89%);
+  border: 1px solid hsl(0,0%,90%);
-  border-bottom-color: transparent;
   margin-left: -1px;
-}
+  background: white;
   
-.nav-tabs li.active {
+  &:first-child {
-  position: relative;
+    border-radius: 5px 0 0 5px;
+  }
+  
+  &:last-child {
+    border-radius: 0 5px 5px 0;
+  }
+
+  &:only-child {
+    border-radius: 5px;
+  }
+  
+  &.active {
+    color: white;
+    background: hsl(206,7%,28%);
+    border-color: hsl(206,7%,28%);
+  }
+
+  a {
+    padding-bottom: 8px;
+    color: inherit;
+    color: inherit;
+  }
 }
 
 .tab-content {