discourse/app/assets/stylesheets/common/components/d-breadcrumbs.scss

.d-breadcrumbs {
  display: flex;
  margin: var(--space-2) 0 var(--space-4) 0;

  &__item {
    list-style-type: none;
  }

  &__link,
  &__link:visited {
    color: var(--primary-medium);
  }

  li {
    .separator {
      margin-right: var(--space-1);

      .d-icon {
        color: var(--primary-medium);
        font-size: var(--font-down-1);
      }
    }
  }

  li:last-child {
    .separator {
      display: none;
    }
  }
}
FEATURE: Introduce DBreadcrumbs components (#27049) This commit introduces the following components: * DBreadcrumbsContainer - The wrapper template-only component, which renders all DBreadcrumbsItem components on the page. * DBreadcrumbsItem - The component that registers a LinkTo for the breadcrumb trail. The breadcrumb > trail > will show based on the order these items are rendered on the page. * BreadcrumbsService - Manages the DBreadcrumbsContainer elements on the page via DBreadcrumbsContainerModifier. * DBreadcrumbsContainerModifier - Handles registering DBreadcrumbsContainer elements with the BreadcrumbsService and deregistering them. For now, we will only use these breadcrumbs in the admin section of Discourse, and this initial commit only uses them in admin/plugins. This is heavily based off of https://github.com/Bagaar/ember-breadcrumbs, but will be further modified for our needs. 2024-05-20 12:25:54 +08:00			`.d-breadcrumbs {`
			`display: flex;`
UX: Implement new top-level nav on admin plugin pages (#27126) This uses a new nav style with the heirarchy: ``` Breadcrumbs \|- Title \|- Description \|- Third-Level Navigation ``` The navigation bar uses the transparent red-underlined buttons similar to the user activity page. Over time all admin pages will use this, but this starts with the new plugin show page. --------- Co-authored-by: Ella <ella.estigoy@gmail.com> 2024-05-29 10:20:55 +08:00			`margin: var(--space-2) 0 var(--space-4) 0;`
FEATURE: Introduce DBreadcrumbs components (#27049) This commit introduces the following components: * DBreadcrumbsContainer - The wrapper template-only component, which renders all DBreadcrumbsItem components on the page. * DBreadcrumbsItem - The component that registers a LinkTo for the breadcrumb trail. The breadcrumb > trail > will show based on the order these items are rendered on the page. * BreadcrumbsService - Manages the DBreadcrumbsContainer elements on the page via DBreadcrumbsContainerModifier. * DBreadcrumbsContainerModifier - Handles registering DBreadcrumbsContainer elements with the BreadcrumbsService and deregistering them. For now, we will only use these breadcrumbs in the admin section of Discourse, and this initial commit only uses them in admin/plugins. This is heavily based off of https://github.com/Bagaar/ember-breadcrumbs, but will be further modified for our needs. 2024-05-20 12:25:54 +08:00
			`&__item {`
			`list-style-type: none;`
			`}`

			`&__link,`
			`&__link:visited {`
			`color: var(--primary-medium);`
			`}`

DEV: Make breadcrumb separators unclickable icons (#29817) The current breadcrumb separators are ">" characters that are added as pseudo-elements. These become part of the clickable area for the links, which causes mis-clicks. This PR does two things: - Replace the pseudo-element with a DIcon. - Make sure the separator is not clickable. 2024-11-19 16:42:43 +08:00			`li {`
			`.separator {`
			`margin-right: var(--space-1);`

			`.d-icon {`
			`color: var(--primary-medium);`
			`font-size: var(--font-down-1);`
			`}`
			`}`
			`}`

			`li:last-child {`
			`.separator {`
			`display: none;`
			`}`
FEATURE: Introduce DBreadcrumbs components (#27049) This commit introduces the following components: * DBreadcrumbsContainer - The wrapper template-only component, which renders all DBreadcrumbsItem components on the page. * DBreadcrumbsItem - The component that registers a LinkTo for the breadcrumb trail. The breadcrumb > trail > will show based on the order these items are rendered on the page. * BreadcrumbsService - Manages the DBreadcrumbsContainer elements on the page via DBreadcrumbsContainerModifier. * DBreadcrumbsContainerModifier - Handles registering DBreadcrumbsContainer elements with the BreadcrumbsService and deregistering them. For now, we will only use these breadcrumbs in the admin section of Discourse, and this initial commit only uses them in admin/plugins. This is heavily based off of https://github.com/Bagaar/ember-breadcrumbs, but will be further modified for our needs. 2024-05-20 12:25:54 +08:00			`}`
			`}`