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