Update Breadcrumbs

trilbymedia · May 25, 2017 · 430bb39 · 430bb39
1 parent 17dccfb
commit 430bb39
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/docs/components.html b/docs/components.html
@@ -1162,19 +1162,21 @@ <h4><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h
           </header>
           <div class="columns">
             <div class="column col-6 col-md-12">
-              <ul class="breadcrumb">
+              <ul class="breadcrumb" role="navigation">
                 <li class="breadcrumb-item">
-                  <a href="#breadcrumbs">
+                  <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
                     Home
                   </a>
                 </li>
                 <li class="breadcrumb-item">
-                  <a href="#breadcrumbs">
+                  <a href="#breadcrumbs" class="tooltip" data-tooltip="Profile">
                     Profile
                   </a>
                 </li>
                 <li class="breadcrumb-item">
-                  Change avatar
+                  <a href="#breadcrumbs">
+                    Change avatar
+                  </a>
                 </li>
               </ul>
             </div>
@@ -1211,7 +1213,9 @@ <h4><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h
     &lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">/li</span>&gt;
   &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
-    Change avatar
+    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+      Change avatar
+    &lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">/li</span>&gt;
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -2260,19 +2260,24 @@ code {
   margin: .5rem 0;
 }
 .breadcrumb {
-  padding: 1.2rem;
+  padding: .4rem 0;
 }
 .breadcrumb .breadcrumb-item {
+  color: #727e96;
   display: inline-block;
   margin: 0;
+  padding: .2rem 0;
 }
-.breadcrumb .breadcrumb-item:last-child {
-  color: #acb3c2;
+.breadcrumb .breadcrumb-item:not(:last-child) {
+  margin-right: .4rem;
+}
+.breadcrumb .breadcrumb-item:not(:last-child) a {
+  color: #727e96;
 }
 .breadcrumb .breadcrumb-item:not(:first-child)::before {
   color: #e7e9ed;
   content: "/";
-  padding: 0 .4rem;
+  padding-right: .4rem;
 }
 .tab {
   -webkit-align-items: center;

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
@@ -1,19 +1,26 @@
 // Breadcrumbs
 .breadcrumb {
-  padding: 1.2rem;
+  padding: .4rem 0;
 
   .breadcrumb-item {
+    color: @gray-color-dark;
     display: inline-block;
     margin: 0;
+    padding: .2rem 0;
 
-    &:last-child {
-      color: @gray-color;
+    &:not(:last-child) {
+      margin-right: .4rem;
+
+      a {
+        color: @gray-color-dark;
+      }
     }
+
     &:not(:first-child) {
       &::before {
         color: @gray-color-light;
         content: "/";
-        padding: 0 .4rem;
+        padding-right: .4rem;
       }
     }
   }