@rhds/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css

Red Hat Design System Elements

/**
 *  Public vars used *only* in this file must be documented in `rh-breadcrumb.ts`
 * so that CEM adds them to the Code page documentation.
 */

rh-breadcrumb {
  --_breadcrumb-caret-image-default:
    var(--rh-breadcrumb-caret-image,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z'  fill='red' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")); /* stylelint-disable-line @stylistic/declaration-colon-newline-after */

  --_breadcrumb-link-color:
    var(--rh-breadcrumb-link-color,
      var(--rh-color-interactive-primary-default));
  --_breadcrumb-link-color-current-page: var(--rh-color-text-primary);
  --_breadcrumb-link-color-current-page-subtle: var(--rh-color-text-secondary);
  --_breadcrumb-link-color-hover: var(--rh-color-interactive-primary-hover);
  --_breadcrumb-link-color-visited: var(--rh-color-interactive-primary-visited-hover);
  --_breadcrumb-link-color-visited-hover: var(--rh-color-interactive-primary-visited-hover);
  --_breadcrumb-link-focus-outline-color: var(--rh-color-border-interactive);

  display: block;

  & [hidden] {
    display: none !important;
  }

  & > ol {
    container-type: inline-size;
    container-name: breadcrumbs-list;
    font-size: var(--rh-font-size-body-text-sm, 0.875rem);
    line-height: var(--rh-line-height-body-text, 1.5);
    margin-block: 0;
    padding-inline-start: 0;

    & > li {
      display: inline-flex;
      margin-block-end: var(--rh-space-md, 8px);
      padding-inline-end:
        var(--rh-breadcrumb-li-padding-inline-end,
          var(--rh-space-lg, 16px));
      vertical-align: bottom;
      align-items: center;
      gap: var(--rh-space-lg, 16px);

      &:not(:first-of-type):before {
        display: inline-block;
        background-color: var(--rh-color-icon-secondary);
        mask-image: var(--_breadcrumb-caret-image-default);
        mask-position: center center;
        mask-repeat: no-repeat;
        block-size: var(--rh-font-size-body-text-sm, 0.875rem);
        inline-size: var(--rh-font-size-body-text-sm, 0.875rem);
        content: '';
      }

      &:first-child {
        padding-inline-start: 0;

        & > a {
          margin-inline-start: 0;
        }
      }

      &:last-child {
        background-image: none;
      }

      /* stylelint-disable-next-line no-descending-specificity */
      & > a {
        text-decoration: none;

        &:is(:hover, :focus, :active) {
          color: var(--_breadcrumb-link-color-hover);
          text-decoration: underline var(--rh-border-width-sm, 1px) dashed;
          text-decoration-color: inherit;
          text-underline-offset: max(5px, 0.28em);
          transition-timing-function: ease;
          transition-property: text-underline-offset, color, text-decoration-color;
          transition-duration: 0.3s;
        }

        &:is(:focus, :focus-visible) {
          border-radius: var(--rh-border-radius-default, 3px);
          outline: 2px solid var(--_breadcrumb-link-focus-outline-color);
        }

        &:visited {
          color: var(--_breadcrumb-link-color-visited);
        }

        &:visited:hover {
          color: var(--_breadcrumb-link-color-visited-hover);
          text-decoration: underline var(--rh-border-width-sm, 1px) dashed;
          text-decoration-color: inherit;
          text-underline-offset: max(5px, 0.28em);
          transition-timing-function: ease;
          transition-property: text-underline-offset, color, text-decoration-color;
          transition-duration: 0.3s;
        }

        &[aria-current='page'] {
          cursor: default;
          pointer-events: none;
        }
      }

      &:last-child,
      & > a[aria-current='page'] {
        color: var(--_breadcrumb-link-color-current-page);
        text-decoration: none;
      }
    }

    & > li,
    & > li > a {
      color: var(--_breadcrumb-link-color);
    }
  }

  &[variant='subtle'] > ol > li {
    &:not(:first-of-type):before {
      background-color: var(--rh-color-icon-subtle, #707070);
    }

    &:last-child,
    & > a[aria-current='page'] {
      color: var(--_breadcrumb-link-color-current-page-subtle);
    }
  }

  & .truncate-btn {
    background-color: transparent;
    border: 0;
    color: var(--_breadcrumb-link-color);
    cursor: pointer;
    min-inline-size: var(--rh-length-xl, 24px);
    padding: 0;
    text-decoration: none;

    &:hover,
    &:focus {
      color: var(--_breadcrumb-link-color-hover);
    }

    &:focus {
      border-radius: var(--rh-border-radius-default, 3px);
      outline: 2px solid var(--_breadcrumb-link-focus-outline-color);
    }

    & .visually-hidden {
      border: 0;
      clip: rect(0, 0, 0, 0);
      block-size: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      white-space: nowrap;
      inline-size: 1px;
    }
  }
}