_breadcrumb.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  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. .breadcrumb-item {
  11. // The separator between breadcrumbs (by default, a forward-slash: "/")
  12. + .breadcrumb-item {
  13. padding-left: $breadcrumb-item-padding;
  14. &::before {
  15. display: inline-block; // Suppress underlining of the separator in modern browsers
  16. padding-right: $breadcrumb-item-padding;
  17. color: $breadcrumb-divider-color;
  18. content: $breadcrumb-divider;
  19. }
  20. }
  21. // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
  22. // without `<ul>`s. The `::before` pseudo-element generates an element
  23. // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
  24. //
  25. // To trick IE into suppressing the underline, we give the pseudo-element an
  26. // underline and then immediately remove it.
  27. + .breadcrumb-item:hover::before {
  28. text-decoration: underline;
  29. }
  30. // stylelint-disable-next-line no-duplicate-selectors
  31. + .breadcrumb-item:hover::before {
  32. text-decoration: none;
  33. }
  34. &.active {
  35. color: $breadcrumb-active-color;
  36. }
  37. }