infima/styles/components/breadcrumb.css

A UI framework for content-centric websites.

// TODO: Compat
:root {
  --ifm-breadcrumb-border-radius: 1.5rem;
  --ifm-breadcrumb-spacing: 0.0625rem;
  --ifm-breadcrumb-color-active: var(--ifm-color-primary);
  --ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay);
  --ifm-breadcrumb-padding-horizontal: 1rem;
  --ifm-breadcrumb-padding-vertical: 0.5rem;
  --ifm-breadcrumb-size-multiplier: 1;
  --ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,<svg alt="Chevron Right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
  --ifm-breadcrumb-separator-size: 0.5rem;
  --ifm-breadcrumb-separator-size-multiplier: 1.25;
}

.breadcrumbs {
  margin-bottom: 0;
  padding-left: 0;

  & > .breadcrumb__item {
    display: inline-block;
    list-style-type: none;

    &:not(:first-child) {
      margin-left: var(--ifm-breadcrumb-spacing);
    }

    &:not(:last-child) {
      margin-right: var(--ifm-breadcrumb-spacing);

      &:after {
        background-image: var(--ifm-breadcrumb-separator);
        background-position: center;
        content: ' ';
        display: inline-block;
        height: calc(
          var(--ifm-breadcrumb-separator-size) *
            var(--ifm-breadcrumb-size-multiplier) *
            var(--ifm-breadcrumb-separator-size-multiplier)
        );
        margin: 0 0.5rem;
        opacity: 0.5;
        width: calc(
          var(--ifm-breadcrumb-separator-size) *
            var(--ifm-breadcrumb-size-multiplier) *
            var(--ifm-breadcrumb-separator-size-multiplier)
        );
      }
    }

    & .breadcrumb__link {
      border-radius: var(--ifm-breadcrumb-border-radius);
      color: var(--ifm-font-color-base);
      display: inline-block;
      font-size: calc(1rem * var(--ifm-breadcrumb-size-multiplier));
      padding: calc(
          var(--ifm-breadcrumb-padding-vertical) *
            var(--ifm-breadcrumb-size-multiplier)
        )
        calc(
          var(--ifm-breadcrumb-padding-horizontal) *
            var(--ifm-breadcrumb-size-multiplier)
        );
      text-decoration: none;
    }

    &.breadcrumb__item--active {
      & .breadcrumb__link {
        background: var(--ifm-breadcrumb-item-background-active);
        color: var(--ifm-breadcrumb-color-active);
      }
    }

    &:not(.breadcrumb__item--active):hover {
      & .breadcrumb__link {
        background: var(--ifm-breadcrumb-item-background-active);
        transition: background var(--ifm-transition-fast)
          cubic-bezier(0.08, 0.52, 0.52, 1);
      }
    }
  }

  &.breadcrumbs--sm {
    --ifm-breadcrumb-size-multiplier: 0.8;
  }

  &.breadcrumbs--lg {
    --ifm-breadcrumb-size-multiplier: 1.2;
  }
}