talos

1
.breadcrumb {
2
  display: flex;
3
  flex-wrap: wrap;
4
  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
5
  margin-bottom: $breadcrumb-margin-bottom;
6
  @include font-size($breadcrumb-font-size);
7
  list-style: none;
8
  background-color: $breadcrumb-bg;
9
  @include border-radius($breadcrumb-border-radius);
10
}
11

12
.breadcrumb-item {
13
  // The separator between breadcrumbs (by default, a forward-slash: "/")
14
  + .breadcrumb-item {
15
    padding-left: $breadcrumb-item-padding;
16

17
    &::before {
18
      float: left; // Suppress inline spacings and underlining of the separator
19
      padding-right: $breadcrumb-item-padding;
20
      color: $breadcrumb-divider-color;
21
      content: escape-svg($breadcrumb-divider);
22
    }
23
  }
24

25
  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
26
  // without `<ul>`s. The `::before` pseudo-element generates an element
27
  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
28
  //
29
  // To trick IE into suppressing the underline, we give the pseudo-element an
30
  // underline and then immediately remove it.
31
  + .breadcrumb-item:hover::before {
32
    text-decoration: underline;
33
  }
34
  // stylelint-disable-next-line no-duplicate-selectors
35
  + .breadcrumb-item:hover::before {
36
    text-decoration: none;
37
  }
38

39
  &.active {
40
    color: $breadcrumb-active-color;
41
  }
42
}
43