Issue 5691 - Create Breadcrumbs Component for help.eyeo.com

static/scss/components/_breadcrumb.scss

 // This file is part of help.eyeo.com.
 // Copyright (C) 2017 Eyeo GmbH
 //
 // help.eyeo.com is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // help.eyeo.com is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
 //
 // You should have received a copy of the GNU General Public License
 // along with help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
 
 .breadcrumb
 {
-  padding-top: 1em;
-  padding-bottom: 1em;
+  padding-top: 0.75em;
+  padding-bottom: 0.75em;
   border-bottom: 1px solid $gray-light;
   background-color: $white;
 }
 
 .breadcrumb li
 {
   float: left;
   position: relative;
-  padding-right: 2em;
-  color: $gray-dark;
+  padding: 0.25em 2em 0.25em 0;
   font-size: $small-font;
   font-weight: $bold-weight;
   text-transform: uppercase;
 }
 
 [dir="rtl"] .breadcrumb li
 {
   float: right;
-  padding-right: 0;
-  padding-left: 2em;
+  padding: 0.25em 0 0.25em 2em;
 }
 
 .breadcrumb li:after
 {
   position: absolute;
-  top: 0.2em; /* Quarter height of li:after (1em / 4) minus 0.05em */
+  top: 0.45em; /* Half height of li:after (1em / 2) minus 0.05em */
   right: 0.5em; /* Quarter space between li (2em / 4) */
   width: 1em;
   height: 1em;
   background-image: url(/img/png/arrow-icon-right-gray.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 0.6em 0.9em;
   content: "";
 }
 
 [dir="rtl"] .breadcrumb li:after
 {
   right: auto;
   left: $lg / 4;
   background-image: url(/img/png/arrow-icon-left-gray.png);
 }
 
 .breadcrumb li:last-child:after
 {
   content: none;
 }
 
+.breadcrumb li a
+{
+  color: $gray-dark;
+}
+
 .breadcrumb .heading-icon
 {
   height: 1.2em;
 }