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

React components for building web UI in Azure DevOps

.bolt-label {
  border-radius: 12px;
  padding: 2px 8px;
  white-space: nowrap;
  max-width: 120px;
  background-color: rgba(244, 244, 244, 1);
  background-color: var(--component-label-default-color,rgba(244, 244, 244, 1));
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}
.bolt-label:hover {
  background-color: rgba(218, 218, 218, 1);
  background-color: var(--component-label-default-color-hover,rgba(218, 218, 218, 1));
}
.bolt-label.light {
  color: black;
}
.bolt-label.dark {
  color: white;
}
.bolt-label.selected, .bolt-label:focus {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--communication-background,rgba(0, 120, 212, 1));
  color: rgba(255, 255, 255, 1);
  color: var(--text-on-communication-background,rgba(255, 255, 255, 1));
  outline: none;
}
.bolt-label:focus {
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.23);
  box-shadow: 0 0 0 2px var(--focus-pulse-max-color,rgba(0, 120, 212, 0.23));
}
.bolt-label .bolt-label-content {
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.bolt-labelgroup-title-wrapper {
  margin-bottom: 8px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}
.bolt-labelgroup-title-wrapper .vss-Icon {
  margin-left: 8px;
}

.bolt-labelgroup-addButton {
  align-self: flex-start;
  margin-left: 11px;
}

.bolt-labelgroup {
  padding: 2px 2px;
}
.bolt-labelgroup.one-line {
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 8px 2px;
}
.bolt-labelgroup.one-line.fade-out {
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(0, 0, 0) 20px);
  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgb(0, 0, 0) 20px);
}
.bolt-labelgroup.free-flow {
  flex-wrap: wrap;
  margin-bottom: -6px;
}
.bolt-labelgroup.free-flow .bolt-label {
  margin-bottom: 6px;
}
.bolt-labelgroup .bolt-label {
  margin-right: 6px;
}

.bolt-labelgroup-editable {
  padding: 2px;
}
.bolt-labelgroup-editable .bolt-labelgroup-title-wrapper {
  margin-left: 11px;
}
.bolt-labelgroup-editable .bolt-label-autocomplete {
  margin-bottom: 6px;
  flex-grow: 1;
}
.bolt-labelgroup-editable .bolt-label-autocomplete input {
  border: none;
}
.bolt-labelgroup-editable .bolt-label-autocomplete input:focus {
  outline: none;
}
.bolt-labelgroup-editable .bolt-label:hover {
  cursor: pointer;
}
.bolt-labelgroup-editable:hover:not(.edit) {
  cursor: pointer;
}

.bolt-labelgroup--editableWrapper {
  border-radius: 2px;
}
.bolt-labelgroup--editableWrapper.default-padding, .bolt-labelgroup--editableWrapper.edit {
  padding: 7px 9px;
}
.bolt-labelgroup--editableWrapper.edit {
  border: 1px solid rgba(0, 120, 212, 1);
  border: 1px solid var(--communication-background,rgba(0, 120, 212, 1));
  animation: ms-focus-shadow-pulse 4s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.23);
  box-shadow: 0 0 0 3px var(--focus-pulse-max-color,rgba(0, 120, 212, 0.23));
}
@media (forced-colors: active) {
  .bolt-labelgroup--editableWrapper.edit {
    animation: none;
  }
}
.bolt-labelgroup--editableWrapper:hover:not(.edit) {
  cursor: pointer;
}

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