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