Index: static/src/scss/components/_breadcrumb.scss |
=================================================================== |
new file mode 100644 |
--- /dev/null |
+++ b/static/src/scss/components/_breadcrumb.scss |
@@ -0,0 +1,80 @@ |
+// 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 |
+ ******************************************************************************/ |
+ |
+.breadcrumb |
+{ |
+ padding-top: 0.75em; |
+ padding-bottom: 0.75em; |
+ border-bottom: 1px solid $gray-light; |
+ background-color: $white; |
+} |
+ |
+.breadcrumb li |
+{ |
+ float: left; |
+ position: relative; |
+ 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: 0.25em 0 0.25em 2em; |
+} |
+ |
+.breadcrumb li:after |
+{ |
+ position: absolute; |
+ 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(/dist/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(/dist/img/png/arrow-icon-left-gray.png); |
+} |
+ |
+.breadcrumb li:last-child:after |
+{ |
+ content: none; |
+} |
+ |
+.breadcrumb li a |
+{ |
+ color: $gray-dark; |
+} |
+ |
+.breadcrumb .pre-icon |
+{ |
+ margin-top: -0.5em; |
+ background-size: 1.1em; |
+} |