Layout von Websiten mit Bootstrap und Foundation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_breadcrumb.scss 1.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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. .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. // stylelint-disable-next-line no-duplicate-selectors
  33. + .breadcrumb-item:hover::before {
  34. text-decoration: none;
  35. }
  36. &.active {
  37. color: $breadcrumb-active-color;
  38. }
  39. }