censa_front_end_library/css/src/components/breadcrumbs.css

React components library project for censa Design System

/* breadcrumbs */

.Breadcrumbs {
  display: flex;
  align-items: center;
}

.Breadcrumbs-item {
  display: flex;
  align-items: center;
}

.Breadcrumbs-link {
  /* 160px */
  max-width: calc(var(--spacing-2) * 10);
  margin: var(--spacing-m) 0;
  font-weight: var(--font-weight) !important;
}

.Breadcrumbs-link:active {
  color: var(--inverse);
}

.Breadcrumbs-item:first-child .Breadcrumbs-link {
  margin-left: 0;
}

.Breadcrumbs-itemSeparator {
  color: var(--secondary);
  font-size: var(--font-size-s);
  line-height: var(--font-height-s);
  width: var(--spacing-m);
  margin: 0 var(--spacing-m);
}

.Breadcrumbs-dropdown {
  height: var(--font-height-m);
}

.Breadcrumbs-Button:focus {
  background: var(--secondary) !important;
}

.Breadcrumbs-last-item {
  color: var(--Content-Secondary, #343238);
  font-size: var(--font-size-s);
  height: var(--font-height-s);
  line-height: var(--font-height-s);
}