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

[juliandoucette, 2017/10/24 09:51:13]

I think that this text is too close together, vertically, when broken?

[ire, 2017/10/25 10:00:06]

Done.

 {
   float: left;
   position: relative;
-  padding-right: 2em;
+  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: "";
 }
 
@@ skipping 11 matching lines @@
 
 .breadcrumb li a
 {
   color: $gray-dark;
 }
 
 .breadcrumb .heading-icon
 {
   height: 1.2em;
 }