git.roojs.org Git - roojs1/blob - scss/bootstrap/_breadcrumb.scss

   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 }