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

React components for building web UI in Azure DevOps

.bolt-list-box-multi-select-row.bolt-list-row.selected {
  background: transparent;
}
.bolt-list-box-multi-select-row.bolt-list-row.selected:hover {
  background: rgba(0, 0, 0, .02);
  background: var(--component-grid-row-hover-color,rgba(0, 0, 0, .02));
}
@media (forced-colors: active) {
  .bolt-list-box-multi-select-row.bolt-list-row.selected {
    background: transparent;
  }
}

.bolt-list-box-header-row {
  font-weight: 600;
  cursor: text;
}
.bolt-list-box-header-row.bolt-list-row:hover {
  background: transparent;
}

.bolt-list-box-text .bolt-table-cell-content {
  padding: 5px 0;
}

.bolt-list-box-text-single-select.bolt-list-cell {
  padding: 0 12px;
}

.bolt-list-box-text-multi-select {
  padding-right: 12px;
}

.bolt-list-box-divider-multi-select {
  padding-left: 12px;
}

.bolt-list-box-divider-row,
.bolt-list-box-loading-row {
  cursor: text;
}
.bolt-list-box-divider-row.bolt-list-row:hover,
.bolt-list-box-loading-row.bolt-list-row:hover {
  background: transparent;
}

.bolt-list-box-divider {
  margin-bottom: 1px;
  background-color: rgba(0, 0, 0, 0.10);
  background-color: var(--palette-black-alpha-10,rgba(0, 0, 0, 0.10));
  height: 1px;
}

.bolt-focus-visible .bolt-table.bolt-list-box .bolt-list-row:focus .bolt-list-cell {
  border-color: transparent;
}

.bolt-list-box-loading {
  padding: 8px 0px;
}
.bolt-list-box-loading .bolt-spinner {
  flex-direction: row;
}
.bolt-list-box-loading .bolt-spinner-circle {
  margin-right: 10px;
}
.bolt-list-box-loading .bolt-spinner-label {
  margin-top: 0px;
}

.bolt-list-row.bolt-list-box-item-disabled {
  color: rgba(0, 0, 0, .38);
  color: var(--text-disabled-color,rgba(0, 0, 0, .38));
}
@media (forced-colors: active) {
  .bolt-list-row.bolt-list-box-item-disabled {
    color: graytext;
  }
}

.bolt-list-row.bolt-list-box-item-disabled:hover {
  background: transparent;
  cursor: text;
}

.bolt-list-box-cell-container {
  width: 100%;
}

@media (forced-colors: active) {
  .bolt-focus-visible .bolt-list-box-row:focus {
    font-weight: bold;
    color: highlight;
  }
  .bolt-focus-visible .bolt-list-box-row:focus .bolt-table-cell-select,
  .bolt-focus-visible .bolt-list-box-row:focus .bolt-list-box-text:not(.bolt-list-box-text-multi-select) {
    border-left: 2px solid highlight;
  }
  .bolt-focus-visible .bolt-list-box-row:focus .bolt-list-box-text {
    border-right: 2px solid highlight;
  }
}

@media (forced-colors: active) {
  .bolt-list-box-row .bolt-table-cell-select,
  .bolt-list-box-row .bolt-list-box-text:not(.bolt-list-box-text-multi-select) {
    border-left: 2px solid transparent;
  }
  .bolt-list-box-row .bolt-list-box-text {
    border-right: 2px solid transparent;
  }
}
body.ms-vss-web-vsts-theme-hc-dark .bolt-list-box-row:hover, body.ms-vss-web-vsts-theme-hc-dark .bolt-list-box-row:focus {
  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-list-box-row:hover, body.ms-vss-web-vsts-theme-hc-light .bolt-list-box-row:focus {
  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));
}

@media (forced-colors: active) {
  .bolt-list-box {
    border: 1px solid windowText;
  }
}

.dropdown-list-component-enabled .dropdown-list .checkmark-icon {
  padding-right: 12px;
}
.dropdown-list-component-enabled .dropdown-list .bolt-header-cell {
  width: auto !important;
  min-width: 20px !important;
}

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