demosample/css/src/components/breadcrumbs.css

React components library project for CensaNext Design System

/* breadcrumbs */

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

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

.Breadcrumbs-link {
  margin: var(--spacing-m);
  /* 160px */
  max-width: calc(var(--spacing-2) * 10);
  line-height: var(--font-height);
  color: var(--inverse-lighter);
}

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

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

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

.Breadcrumbs-itemSeparator {
  color: var(--secondary);
}

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

.Breadcrumbs-Button {
  margin: 0 var(--spacing-m);
}

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