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