Merge pull request #529 from chillkang/WD-10814-build-tabs-25-75-vari…

…ant-for-juju-middle-pages

Build p-tabs--25-75 for Juju middle pages

static/sass/styles.scss

@@ -73,12 +73,6 @@ $breakpoint-large: 1220px;
   }
 }
 
-// TODO: to be removed when fixed in Vanilla
-// https://github.com/canonical/vanilla-framework/issues/4947
-body:not(.docs) .p-navigation__banner {
-  padding-left: 0;
-}
-
 .u-hide--x-large {
   @media only screen and (min-width: $grid-max-width) {
     display: none;
@@ -294,9 +288,25 @@ html {
   display: inline-block;
 }
 
-.middle-page-tabs {
-  @media screen and (min-width: $breakpoint-large) {
-    padding-left: 20.3rem;
+.p-tabs--25-75 {
+  @extend %vf-row;
+  @extend %vf-pseudo-border--bottom;
+  position: relative;
+  margin: 0 auto $spv--x-large;
+
+  .p-tabs__list {
+    margin-bottom: 0;
+
+    @media screen and (min-width: $breakpoint-large) {
+      margin-left: -$sph--large;
+      grid-column-start: 4;
+      grid-column-end: span 9;
+    }
+
+    // hiding the bottom border from p-tabs__list as it is moved to p-tabs
+    &::after {
+      content: none;
+    }
   }
 }
 

templates/how-juju-works.html

@@ -2,8 +2,8 @@
 
 {% block content %}
 <div class="u-fixed-width">
-  <nav class="p-tabs">
-    <ul class="p-tabs__list u-no-margin--top middle-page-tabs" role="tablist">
+  <nav class="p-tabs--25-75">
+    <ul class="p-tabs__list" role="tablist">
       <li class="p-tabs__item" role="presentation">
         <a href="/why-juju" class="p-tabs__link" tabindex="0" role="tab" {% if selected_tab == "why-juju" %}aria-selected="true"{% endif %}>
           Why Juju?

templates/partials/_navigation.html

@@ -78,13 +78,9 @@
     </div>
   </div>
   {% else %}
-  <div class="row">
-    <div class="col-3">
-      {{ nav_logo() }}
-    </div>
-    <div class="col-9">
-      {{ nav_items() }}
-    </div>
+  <div class="p-navigation__row--25-75">
+    {{ nav_logo() }}
+    {{ nav_items() }}
   </div>
   {% endif %}
 </header>