_breadcrumb.less 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. .breadcrumb {
  2. display: flex;
  3. flex-wrap: wrap;
  4. padding: @breadcrumb-padding-y @breadcrumb-padding-x;
  5. margin-bottom: @breadcrumb-margin-bottom;
  6. #font-size(@breadcrumb-font-size);
  7. list-style: none;
  8. background-color: @breadcrumb-bg;
  9. #border-radius(@breadcrumb-border-radius);
  10. }
  11. .breadcrumb-item {
  12. display: flex;
  13. // The separator between breadcrumbs (by default, a forward-slash: "/")
  14. + .breadcrumb-item {
  15. padding-left: @breadcrumb-item-padding;
  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: escape-svg(@breadcrumb-divider);
  21. }
  22. }
  23. // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
  24. // without `<ul>`s. The `::before` pseudo-element generates an element
  25. // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
  26. //
  27. // To trick IE into suppressing the underline, we give the pseudo-element an
  28. // underline and then immediately remove it.
  29. + .breadcrumb-item:hover::before {
  30. text-decoration: underline;
  31. }
  32. + .breadcrumb-item:hover::before {
  33. text-decoration: none;
  34. }
  35. &.active {
  36. color: @breadcrumb-active-color;
  37. }
  38. }