azure-devops-ui/Components/Breadcrumb/Breadcrumb.css

React components for building web UI in Azure DevOps

.bolt-breadcrumb-container {
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 3px;
}

.bolt-breadcrumb-with-items {
  min-width: 50px;
}

.bolt-breadcrumb-divider-container {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.bolt-breadcrumb-divider {
  padding: 0px 8px;
}

.bolt-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}
.bolt-breadcrumb-item a {
  text-decoration: none;
}
.bolt-breadcrumb-item a:hover {
  text-decoration: none;
}

.bolt-breadcrumb-hidden-element {
  display: none;
}

.bolt-breadcrumb-item-text-container {
  align-items: center;
  border-radius: 2px;
  display: flex;
}
.bolt-breadcrumb-item-text-container:hover {
  background-color: rgba(0, 0, 0, 0.06);
  background-color: var(--palette-black-alpha-6,rgba(0, 0, 0, 0.06));
}
.bolt-breadcrumb-item-text-container:active {
  background-color: rgba(0, 0, 0, 0.08);
  background-color: var(--palette-black-alpha-8,rgba(0, 0, 0, 0.08));
}

.bolt-breadcrumb-list-item {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.bolt-breadcrumb-overflow {
  position: relative;
  display: flex;
  align-items: center;
}

.bolt-breadcrumb-overflow-visible {
  min-width: 50px;
}

.bolt-breadcrumb-item-icon {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
}
.bolt-breadcrumb-item-icon.icon-only {
  padding-right: 8px;
}

.bolt-breadcrumb-item-text {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  padding: 4px 8px;
  max-width: 200px;
  font-weight: 400;
}

.bolt-breadcrumb .bolt-button {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  font-weight: normal;
  padding: 3px 8px;
}

.bolt-focus-visible .bolt-breadcrumb .bolt-button.bolt-focus-treatment:focus {
  border-color: transparent;
}

body.ms-vss-web-vsts-theme-hc-dark .bolt-breadcrumb-item .bolt-link:hover .bolt-breadcrumb-item-text, body.ms-vss-web-vsts-theme-hc-dark .bolt-breadcrumb-item .bolt-link:focus .bolt-breadcrumb-item-text {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--focus-border-color,rgba(0, 120, 212, 1));
  color: rgba(255, 255, 255, 1);
  color: var(--background-color,rgba(255, 255, 255, 1));
}
body.ms-vss-web-vsts-theme-hc-light .bolt-breadcrumb-item .bolt-link:hover .bolt-breadcrumb-item-text, body.ms-vss-web-vsts-theme-hc-light .bolt-breadcrumb-item .bolt-link:focus .bolt-breadcrumb-item-text {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--focus-border-color,rgba(0, 120, 212, 1));
  color: rgba(255, 255, 255, 1);
  color: var(--background-color,rgba(255, 255, 255, 1));
}

/*# sourceMappingURL=Breadcrumb.css.map */