1// Foundation by ZURB
2// foundation.zurb.com
3// Licensed under MIT Open Source
4
5@import 'global';
6
7//
8// Breadcrumb Variables
9//
10$include-html-nav-classes: $include-html-classes !default;
11
12// We use this to set the background color for the breadcrumb container.
13$crumb-bg: scale-color($secondary-color, $lightness: 55%) !default;
14
15// We use these to set the padding around the breadcrumbs.
16$crumb-padding: rem-calc(9 14 9) !default;
17$crumb-side-padding: rem-calc(12) !default;
18
19// We use these to control border styles.
20$crumb-function-factor: -10% !default;
21$crumb-border-size: 1px !default;
22$crumb-border-style: solid !default;
23$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default;
24$crumb-radius: $global-radius !default;
25
26// We use these to set various text styles for breadcrumbs.
27$crumb-font-size: rem-calc(11) !default;
28$crumb-font-color: $primary-color !default;
29$crumb-font-color-current: $oil !default;
30$crumb-font-color-unavailable: $aluminum !default;
31$crumb-font-transform: uppercase !default;
32$crumb-link-decor: underline !default;
33
34// We use these to control the slash between breadcrumbs
35$crumb-slash-color: $base !default;
36$crumb-slash: "/" !default;
37$crumb-slash-position: 1px !default;
38
39//
40// Breadcrumb Mixins
41//
42
43// We use this mixin to create a container around our breadcrumbs
44@mixin crumb-container {
45  border-style: $crumb-border-style;
46  border-width: $crumb-border-size;
47  display: block;
48  list-style: none;
49  margin-#{$default-float}: 0;
50  overflow: hidden;
51  padding: $crumb-padding;
52
53  // We control which background color and border come through.
54  background-color: $crumb-bg;
55  border-color: $crumb-border-color;
56}
57
58// We use this mixin to create breadcrumb styles from list items.
59@mixin crumbs {
60
61  // A normal state will make the links look and act like clickable breadcrumbs.
62  color: $crumb-font-color;
63  float: $default-float;
64  font-size: $crumb-font-size;
65  line-height: $crumb-font-size;
66  margin: 0;
67  text-transform: $crumb-font-transform;
68
69  &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
70
71  a {
72    color: $crumb-font-color;
73  }
74
75  // Current is for the link of the current page
76  &.current {
77    color: $crumb-font-color-current;
78    cursor: $cursor-default-value;
79    a {
80      color: $crumb-font-color-current;
81      cursor: $cursor-default-value;
82    }
83
84    &:hover, &:hover a,
85    &:focus, &:focus a { text-decoration: none; }
86  }
87
88  // Unavailable removed color and link styles so it looks inactive.
89  &.unavailable {
90    color: $crumb-font-color-unavailable;
91    a { color: $crumb-font-color-unavailable; }
92
93    &:hover,
94    &:hover a,
95    &:focus,
96    a:focus {
97      color: $crumb-font-color-unavailable;
98      cursor: $cursor-disabled-value;
99      text-decoration: none;
100    }
101  }
102
103  &:before {
104    color: $crumb-slash-color;
105    content: "#{$crumb-slash}";
106    margin: 0 $crumb-side-padding;
107    position: relative;
108    top: $crumb-slash-position;
109  }
110
111  &:first-child:before {
112    content: " ";
113    margin: 0;
114  }
115}
116
117@include exports("breadcrumbs") {
118  @if $include-html-nav-classes {
119    .breadcrumbs {
120      @include crumb-container;
121      @include radius($crumb-radius);
122
123      > * {
124        @include crumbs;
125      }
126    }
127    /* Accessibility - hides the forward slash */
128    [aria-label="breadcrumbs"] [aria-hidden="true"]:after {
129      content: "/";
130    }
131  }
132}
133