Merge pull request #911 from sharelatex/jel-tab-style

Custom tab styling

services/web/public/stylesheets/app/portals.less

@@ -100,51 +100,9 @@
   }
   // End Print
 
-  /*
-    Begin Tabs
-  */
   .nav-tabs {
-    // Overrides for nav.less
     background-color: @ol-blue-gray-0;
-    border: 0!important;
-    margin-bottom: @margin-md;
-    margin-top: -@line-height-computed; //- adjusted for portal-name
-    padding: @padding-lg 0 @padding-md;
-    text-align: center;
-
-    a {
-      color: @link-color;
-      &:hover {
-        background-color: transparent!important;
-        border: 0!important;
-        color: @link-hover-color!important;
-      }
-    }
-
-    li {
-      display: inline-block;
-      float: none;
-      a {
-        border: 0;
-      }
-    }
-
-    li.active > a {
-      background-color: transparent!important;
-      border: 0;
-      border-bottom: 1px solid @accent-color-secondary!important;
-      color: @accent-color-secondary;
-      &:hover {
-        color: @accent-color-secondary!important;
-      }
-    }
-  }
-
-  .tab-content:extend(.container) {
-    background-color: transparent!important;
-    border: none!important;
   }
-  // End Tabs
 
   @media (max-width: @screen-size-sm-max) {
     .content-pull {

services/web/public/stylesheets/components/tabs.less

@@ -0,0 +1,43 @@
+.ol-tabs {
+  // Overrides for nav.less
+  .nav-tabs {
+    border: 0!important;
+    margin-bottom: @margin-md;
+    margin-top: -@line-height-computed; //- adjusted for portal-name
+    padding: @padding-lg 0 @padding-md;
+    text-align: center;
+  }
+
+  a {
+    color: @link-color;
+    &:hover {
+      background-color: transparent!important;
+      border: 0!important;
+      color: @link-hover-color!important;
+    }
+  }
+
+  li {
+    display: inline-block;
+    float: none;
+    a {
+      border: 0;
+    }
+  }
+
+  li.active > a {
+    background-color: transparent!important;
+    border: 0!important;
+    border-bottom: 1px solid @accent-color-secondary!important;
+    color: @accent-color-secondary!important;
+    &:hover {
+      color: @accent-color-secondary!important;
+    }
+  }
+  .tab-content:extend(.container) {
+    background-color: transparent!important;
+    border: none!important;
+  }
+}
+
+  

services/web/public/stylesheets/ol-style.less

@@ -10,6 +10,7 @@
 @import "components/icons.less";
 @import "components/navs-ol.less";
 @import "components/pagination.less";
+@import "components/tabs.less";
 
 // Pages
 @import "app/about.less";