Update Breadcrumb Styles (#1073)

* Update Breadcrumb Styles - Fixes extra padding to the left/right - Used slash instead of >> - Make literalls match other link style - Adds demo docs for testing * Update comment * Update src/sass/_theme_breadcrumbs.sass Co-authored-by: Ana Costa <[email protected]> * Build theme.css for #1073 * Build theme.css for #1073 Co-authored-by: Benjamin Bach <[email protected]> Co-authored-by: Ana Costa <[email protected]>
readthedocs · Aug 27, 2022 · 695a4e1 · 695a4e1
1 parent ba0dc62
commit 695a4e1
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 15 deletions.
diff --git a/docs/demo/level1/index.rst b/docs/demo/level1/index.rst
@@ -0,0 +1,9 @@
+
+******************
+Breadcrumb Level 1
+******************
+
+ .. toctree::
+    :maxdepth: 3
+
+    level2/index.rst
diff --git a/docs/demo/level1/level2/index.rst b/docs/demo/level1/level2/index.rst
@@ -0,0 +1,9 @@
+
+******************************************
+:mod:`Breadcrumb Level 2 <test_py_module>`
+******************************************
+
+ .. toctree::
+    :maxdepth: 3
+
+    level3/index.rst
diff --git a/docs/demo/level1/level2/level3/index.rst b/docs/demo/level1/level2/level3/index.rst
@@ -0,0 +1,9 @@
+
+******************
+Breadcrumb Level 3
+******************
+
+ .. toctree::
+    :maxdepth: 3
+
+    level4/index.rst
diff --git a/docs/demo/level1/level2/level3/level4/index.rst b/docs/demo/level1/level2/level3/level4/index.rst
@@ -0,0 +1,9 @@
+
+******************
+Breadcrumb Level 4
+******************
+
+ .. toctree::
+    :maxdepth: 3
+
+    level5/index.rst
diff --git a/docs/demo/level1/level2/level3/level4/level5/index.rst b/docs/demo/level1/level2/level3/level4/level5/index.rst
@@ -0,0 +1,9 @@
+
+******************
+Breadcrumb Level 5
+******************
+
+ .. toctree::
+    :maxdepth: 3
+
+    level6/index.rst
diff --git a/docs/demo/level1/level2/level3/level4/level5/level6/index.rst b/docs/demo/level1/level2/level3/level4/level5/level6/index.rst
@@ -0,0 +1,4 @@
+
+******************
+Breadcrumb Level 6
+******************
diff --git a/docs/index.rst b/docs/index.rst
@@ -82,3 +82,9 @@ Development
     :hidden:
 
     demo/long
+
+.. toctree::
+    :maxdepth: 3
+    :caption: Breadcrumbs
+
+    demo/level1/index.rst
diff --git a/sphinx_rtd_theme/breadcrumbs.html b/sphinx_rtd_theme/breadcrumbs.html
@@ -22,11 +22,11 @@
 <div role="navigation" aria-label="{{ _('Page navigation') }}">
   <ul class="wy-breadcrumbs">
     {%- block breadcrumbs %}
-      <li><a href="{{ pathto(master_doc) }}" class="icon icon-home"></a> &raquo;</li>
+      <li><a href="{{ pathto(master_doc) }}" class="icon icon-home"></a></li>
         {%- for doc in parents %}
-          <li><a href="{{ doc.link|e }}">{{ doc.title }}</a> &raquo;</li>
+          <li class="breadcrumb-item"><a href="{{ doc.link|e }}">{{ doc.title }}</a></li>
         {%- endfor %}
-      <li>{{ title }}</li>
+      <li class="breadcrumb-item active">{{ title }}</li>
     {%- endblock %}
     {%- block breadcrumbs_aside %}
       <li class="wy-breadcrumbs-aside">

diff --git a/sphinx_rtd_theme/static/css/theme.css b/sphinx_rtd_theme/static/css/theme.css
diff --git a/src/sass/_theme_breadcrumbs.sass b/src/sass/_theme_breadcrumbs.sass
@@ -1,21 +1,22 @@
 .wy-breadcrumbs
   +clearfix
 
-.wy-breadcrumbs li
+.wy-breadcrumbs > li
   display: inline-block
+  padding-top: 5px
   &.wy-breadcrumbs-aside
     float: right
-  a
-    display: inline-block
-    padding: 5px
-    &:first-child
-      padding-left: 0
+  /* Style literals as links */
   code
-    padding: 5px
-    border: none
-    background: none
-    &.literal
-      color: $text-color
+    all: inherit
+    color: inherit
+
+.breadcrumb-item::before
+  content: "/"
+  color: #bbb
+  font-size: 13px
+  padding: 0 6px 0 3px
+
 .wy-breadcrumbs-extra
   margin-bottom: 0
   color: $text-light