rework nav-tab design

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

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

app/assets/javascripts/app/views/channel/chat.jst.eco

@@ -1,15 +1,9 @@
-<div class="page-header">
+<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
-  <div class="page-header-title">
-    <h1><%- @T('Chat Widget') %></h1>
-  </div>
-</div>
-<div class="page-content">
-  <p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
 
-  <% if _.isEmpty(@chats): %>
+<% if _.isEmpty(@chats): %>
-  <p><%- @T('You have no configured chat\'s right now.') %></p>
+<p><%- @T('You have no configured chat\'s right now.') %></p>
 <% else: %>
-  <table class="settings-list">
+<table class="settings-list">
   <thead>
     <tr>
       <th style="white-space: nowrap;"><%- @T('Name') %></th>
@@ -50,12 +44,12 @@
         </div>
 
   </tbody>
-  </table>
+</table>
 <% end %>
 
-  <h2><%- @T('Designer') %></h2>
+<h2><%- @T('Designer') %></h2>
 
-  <div class="form-group">
+<div class="form-group">
   <label class="formGroup-label"><%- @T('Preview Width') %></label>
   <div class="control">
     <div class="select-tabs js-selectBrowserWidth">
@@ -64,9 +58,9 @@
       <div class="tab" data-value="1280">MacBook</div>
     </div>
   </div>
-  </div>
+</div>
 
-  <div class="browser chat-demo js-browser">
+<div class="browser chat-demo js-browser">
   <div class="browser-head">
     <form class="browser-input js-testurl" novalidate>
       <input type="url" class="js-testurl-input" placeholder="zammad.org">
@@ -112,9 +106,9 @@
       </div>
     </div>
   </div>
-  </div>
+</div>
 
-  <form class="js-params">
+<form class="js-params">
   <fieldset>
     <div class="input form-group formGroup--halfSize">
       <div class="formGroup-label">
@@ -184,13 +178,11 @@
 
 &lt;script&gt;
 $(function() {
-  new ZammadChat({
+new ZammadChat({
 <span class="js-modal-params"></span>
-  });
+});
 });
 &lt;/script&gt;</pre>
-  </form>
+</form>
 
-  <div class="js-settings"></div>
+<div class="js-settings"></div>
-
-</div>

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

@@ -2,6 +2,13 @@
   <div class="page-header-title">
     <h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
   </div>
+  <% if @addTab: %>
+  <div class="page-header-meta">
+    <div class="btn btn--success btn--quad">
+      <%- @Icon('plus') %>
+    </div>
+  </div>
+  <% end %>
 </div>
 <div class="page-content">
   <div class="page-tabs">
@@ -10,11 +17,6 @@
         <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
       <% end %>
     </ul>
-    <% if @addTab: %>
-    <div class="btn btn--success btn--quad">
-      <%- @Icon('plus') %>
-    </div>
-    <% end %>
   </div>
   <div class="tab-content"></div>
 </div>

app/assets/stylesheets/bootstrap.css

@@ -2491,7 +2491,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a:hover,
 .nav > li > a:focus {
   text-decoration: none;
-  background-color: #eee;
 }
 .nav > li.disabled > a {
   color: #777;
@@ -2518,75 +2517,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a > img {
   max-width: none;
 }
-.nav-tabs {
+
-  border-bottom: 1px solid #ddd;
-}
-.nav-tabs > li {
-  float: left;
-  margin-bottom: -1px;
-}
-.nav-tabs > li > a {
-  margin-right: 2px;
-  line-height: 1.42857143;
-  border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
-}
-.nav-tabs > li > a:hover {
-  border-color: #eee #eee #ddd;
-}
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:hover,
-.nav-tabs > li.active > a:focus {
-  color: #555;
-  cursor: default;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-}
-.nav-tabs.nav-justified {
-  width: 100%;
-  border-bottom: 0;
-}
-.nav-tabs.nav-justified > li {
-  float: none;
-}
-.nav-tabs.nav-justified > li > a {
-  margin-bottom: 5px;
-  text-align: center;
-}
-.nav-tabs.nav-justified > .dropdown .dropdown-menu {
-  top: auto;
-  left: auto;
-}
-@media (min-width: 768px) {
-  .nav-tabs.nav-justified > li {
-    display: table-cell;
-    width: 1%;
-  }
-  .nav-tabs.nav-justified > li > a {
-    margin-bottom: 0;
-  }
-}
-.nav-tabs.nav-justified > li > a {
-  margin-right: 0;
-  border-radius: 4px;
-}
-.nav-tabs.nav-justified > .active > a,
-.nav-tabs.nav-justified > .active > a:hover,
-.nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #ddd;
-}
-@media (min-width: 768px) {
-  .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #ddd;
-    border-radius: 4px 4px 0 0;
-  }
-  .nav-tabs.nav-justified > .active > a,
-  .nav-tabs.nav-justified > .active > a:hover,
-  .nav-tabs.nav-justified > .active > a:focus {
-    border-bottom-color: #fff;
-  }
-}
 .nav-pills > li {
   float: left;
 }

app/assets/stylesheets/zammad.scss

@@ -1831,9 +1831,30 @@ kbd {
   color: initial;
 }
 
+.main--tabs .page-header {
+  background: hsl(200,12%,90%);
+  padding: 20px;
+  overflow: hidden;
+  margin: 0;
+}
+
+.main--tabs .page-content {
+  padding: 20px;
+}
+
 .page-tabs {
   display: flex;
-  margin: 28px 0 50px;
+  margin: -20px -20px 50px;
+  padding: 0 20px;
+  background: hsl(200,12%,90%);
+  border-bottom: 1px solid hsl(200,12%,87%);
+  
+  .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;
@@ -3351,9 +3372,10 @@ footer {
   position: relative;
 }
 
-  .main.no-padding {
+.main--tabs,
+.main.no-padding {
   padding: 0;
-  }
+}
 
 .tooltip {
   font-family: inherit;
@@ -5629,46 +5651,21 @@ footer {
 }
 
 .nav-tabs {
-  border-bottom: none; 
+  display: flex;
+  margin-left: 1px;
 }
 
 .nav-tabs li {
   margin: 0;
+  border-radius: 3px 3px 0 0;
+  border: 1px solid hsl(200,12%,87%);
+  border-bottom-color: transparent;
+  background: hsl(197,14%,93%);
+  margin-left: -1px;
 }
 
-.nav-tabs > li > a,
+.nav-tabs li.active {
-.nav-tabs > li > a:hover,
+  position: relative;
-.nav-tabs > li > a:focus {
-  background: white;
-  border-radius: 0;
-  border: 1px solid hsl(0,0%,90%);
-  color: hsl(0,0%,70%);
-  height: 40px;
-  margin: 0;
-}
-
-.nav-tabs > li:not(:last-child):not(:only-child) > a {
-  border-right: none;
-}
-
-.nav-tabs > li:first-child > a {
-  border-radius: 5px 0 0 5px;
-}
-
-.nav-tabs > li:last-child > a {
-  border-radius: 0 5px 5px 0;
-}
-
-.nav-tabs > li:only-child > a {
-  border-radius: 5px;
-}
-
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:hover,
-.nav-tabs > li.active > a:focus {
-  background: hsl(206,7%,28%);
-  color: white;
-  border-color: hsl(0,0%,90%);
 }
 
 .tab-content {