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   list-style: none;
   7   background-color: $breadcrumb-bg;
   8   @include border-radius($breadcrumb-border-radius);
   9 }
  10
  11 .breadcrumb-item {
  12   // The separator between breadcrumbs (by default, a forward-slash: "/")
  13   + .breadcrumb-item {
  14     padding-left: $breadcrumb-item-padding;
  15
  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: $breadcrumb-divider;
  21     }
  22   }
  23
  24   // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
  25   // without `<ul>`s. The `::before` pseudo-element generates an element
  26   // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
  27   //
  28   // To trick IE into suppressing the underline, we give the pseudo-element an
  29   // underline and then immediately remove it.
  30   + .breadcrumb-item:hover::before {
  31     text-decoration: underline;
  32   }
  33   // stylelint-disable-next-line no-duplicate-selectors
  34   + .breadcrumb-item:hover::before {
  35     text-decoration: none;
  36   }
  37
  38   &.active {
  39     color: $breadcrumb-active-color;
  40   }
  41 }