]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | .breadcrumb { |
2 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; | |
3 | margin-bottom: $spacer-y; | |
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 | } |