|
0
|
1 .breadcrumb {
|
|
|
2 padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
|
|
3 margin-bottom: 1rem;
|
|
|
4 list-style: none;
|
|
|
5 background-color: $breadcrumb-bg;
|
|
|
6 @include border-radius($border-radius);
|
|
|
7 @include clearfix;
|
|
|
8 }
|
|
|
9
|
|
|
10 .breadcrumb-item {
|
|
|
11 float: left;
|
|
|
12
|
|
|
13 // The separator between breadcrumbs (by default, a forward-slash: "/")
|
|
|
14 + .breadcrumb-item::before {
|
|
|
15 display: inline-block; // Suppress underlining of the separator in modern browsers
|
|
|
16 padding-right: $breadcrumb-item-padding;
|
|
|
17 padding-left: $breadcrumb-item-padding;
|
|
|
18 color: $breadcrumb-divider-color;
|
|
|
19 content: "#{$breadcrumb-divider}";
|
|
|
20 }
|
|
|
21
|
|
|
22 // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
|
|
23 // without `<ul>`s. The `::before` pseudo-element generates an element
|
|
|
24 // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
|
|
25 //
|
|
|
26 // To trick IE into suppressing the underline, we give the pseudo-element an
|
|
|
27 // underline and then immediately remove it.
|
|
|
28 + .breadcrumb-item:hover::before {
|
|
|
29 text-decoration: underline;
|
|
|
30 }
|
|
|
31 + .breadcrumb-item:hover::before {
|
|
|
32 text-decoration: none;
|
|
|
33 }
|
|
|
34
|
|
|
35 &.active {
|
|
|
36 color: $breadcrumb-active-color;
|
|
|
37 }
|
|
|
38 }
|
