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

React components for building web UI in Azure DevOps

@keyframes runningAnimation {
  100% {
    transform: rotate(360deg);
  }
}
.bolt-status {
  fill: currentColor;
}
.bolt-status.success {
  color: rgba(85, 163, 98, 1);
  color: var(--component-status-success,rgba(85, 163, 98, 1));
}
@media (forced-colors: active) {
  .bolt-status.success {
    fill: rgba(85, 163, 98, 1);
    fill: var(--component-status-success,rgba(85, 163, 98, 1));
  }
}
.bolt-status.failed {
  color: rgba(205, 74, 69, 1);
  color: var(--component-status-error,rgba(205, 74, 69, 1));
}
@media (forced-colors: active) {
  .bolt-status.failed {
    fill: rgba(205, 74, 69, 1);
    fill: var(--component-status-error,rgba(205, 74, 69, 1));
  }
}
.bolt-status.warning {
  color: rgba(214, 127, 60, 1);
  color: var(--component-status-warning,rgba(214, 127, 60, 1));
}
@media (forced-colors: active) {
  .bolt-status.warning {
    fill: rgba(214, 127, 60, 1);
    fill: var(--component-status-warning,rgba(214, 127, 60, 1));
  }
}
.bolt-status.active {
  color: rgba(0, 120, 212, 1);
  color: var(--component-status-info,rgba(0, 120, 212, 1));
}
@media (forced-colors: active) {
  .bolt-status.active {
    fill: rgba(0, 120, 212, 1);
    fill: var(--component-status-info,rgba(0, 120, 212, 1));
  }
}
.bolt-status.neutral {
  color: rgba(102, 102, 102, 1);
  color: var(--component-status-neutral,rgba(102, 102, 102, 1));
}
@media (forced-colors: active) {
  .bolt-status.neutral {
    fill: rgba(102, 102, 102, 1);
    fill: var(--component-status-neutral,rgba(102, 102, 102, 1));
  }
}
.bolt-status.animate {
  animation: runningAnimation 8s infinite linear;
}
.bolt-status.small-animate {
  animation: runningAnimation 4s infinite linear;
}
.bolt-status.rotate {
  transform: rotate(180deg);
}

.bolt-status-text {
  padding-right: 12px;
  padding-top: 3px;
  padding-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bolt-status-text.xl {
  padding-right: 16px;
  padding-top: 5px;
  padding-bottom: 7px;
}

.bolt-status-text-extra-padding {
  padding-left: 8px;
}

.bolt-status-extended {
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  height: 24px;
  border-radius: 15px;
}
.bolt-status-extended.xl {
  border-radius: 48px;
  height: 32px;
}
.bolt-status-extended.success {
  background-color: rgba(85, 163, 98, 1);
  background-color: var(--component-status-success,rgba(85, 163, 98, 1));
}
.bolt-status-extended.failed {
  background-color: rgba(205, 74, 69, 1);
  background-color: var(--component-status-error,rgba(205, 74, 69, 1));
}
.bolt-status-extended.warning {
  background-color: rgba(214, 127, 60, 1);
  background-color: var(--component-status-warning,rgba(214, 127, 60, 1));
}
.bolt-status-extended.active {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--component-status-info,rgba(0, 120, 212, 1));
}
.bolt-status-extended.neutral {
  background-color: rgba(102, 102, 102, 1);
  background-color: var(--component-status-neutral,rgba(102, 102, 102, 1));
}

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