Merge branch 'breadcrumbs-line' into 'master'sh-test-1

feat(nav): opt for gitlab ui selector and remove bottom border

See merge request gitlab-org/gitlab-docs!1465

4 files changed, 16 insertions, 8 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index d096cca7..31490ca4 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -31,7 +31,8 @@ $page-header-height: 40px;
 $banner-height: 31px;
 
 // Width
-$sidebar-width: 320px;
+$sidebar-width: 16.66667%;
+$sidebar-mobile-width: 320px;
 $toc-width: 320px;
 $page-content-width: 980px;
 
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 474c2775..72cdf160 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 93
+version: 94
 ---
 
 @import "variables";
@@ -537,7 +537,7 @@ h6 {
     &.active {
       position: fixed;
       top: 0;
-      width: $sidebar-width;
+      width: $sidebar-mobile-width;
 
       .nav-toggle {
         display: block;
@@ -712,7 +712,6 @@ a.global-nav-link {
 
 .gl-breadcrumbs {
   border-width: 0;
-  box-shadow: inset 0 -1px 0 0 $help-gray-200;
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
@@ -732,6 +731,13 @@ a.global-nav-link {
   }
 }
 
+.gl-breadcrumb-separator>svg {
+  margin: auto .5rem;
+  width: .5rem;
+  color: $gds-gray-1000;
+  fill: currentColor;
+}
+
 .gl-breadcrumb-avatar-tile {
   margin-right: .25rem;
   margin-top: .1rem;
diff --git a/layouts/breadcrumbs.html b/layouts/breadcrumbs.html
index d7328603..ae98117a 100644
--- a/layouts/breadcrumbs.html
+++ b/layouts/breadcrumbs.html
@@ -5,16 +5,17 @@
       <img src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15" class="gl-breadcrumb-avatar-tile" width="15" height="15">
       <ol class="breadcrumb gl-breadcrumb-list ml-1">
         <% ancestor_array.reverse_each do |item| %>
-        <li class="breadcrumb-item gl-breadcrumb-item"><%= link_to item.key?(:title) ? "#{item[:title]}" : "Breadcrumb", item %></li>
+        <li class="gl-breadcrumb-item"><%= link_to item.key?(:title) ? "#{item[:title]}" : "Breadcrumb", item %></li>
+        <span data-testid="separator" class="gl-breadcrumb-separator"><svg viewBox="0 0 16 16"><path d="M9.9 8.064L5.656 3.821A1 1 0 0 1 7.07 2.407l4.95 4.95a1 1 0 0 1 0 1.414l-4.95 4.95a1 1 0 0 1-1.414-1.414l4.242-4.243z" fill-rule="evenodd"></path></svg></span>
         <% end %>
-        <li class="breadcrumb-item gl-breadcrumb-item"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li>
+        <li class="gl-breadcrumb-item"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li>
       </ol>
     </div>
     <% else %>
     <div class="gl-breadcrumbs d-flex w-100">
       <img src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15" class="gl-breadcrumb-avatar-tile" width="15" height="15">
       <ol class="breadcrumb gl-breadcrumb-list ml-1">
-        <li class="breadcrumb-item gl-breadcrumb-item"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li>
+        <li class="gl-breadcrumb-item"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li>
       </ol>
       </div>
   <% end %>
diff --git a/layouts/default.html b/layouts/default.html
index c78b1cc6..c636e864 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -34,7 +34,7 @@
           </div>
           <div class="row">
             <div class="col">
-              <div class="mt-5 mb-4">
+              <div class="mt-5 mt-lg-0 mb-4 mb-lg-0">
               <a class="position-absolute text-muted mt-2 pt-1 text-decoration-none mobile-nav-toggle" href="#"><i class="fa fa-bars fa-lg" aria-hidden="true"></i> | </a>
               <%= render '/breadcrumbs.*' %>
               </div>