@spotinst/spinnaker-deck/app/scripts/modules/core/src/managed/StatusBubble.less

Spinnaker-Deck service, forked with support to Spotinst

.StatusBubble {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  color: var(--color-icon-light);

  .status-bubble-content {
    display: flex;
    flex-direction: row;
    grid-column: 1;
    grid-row: 1;
  }

  .icon-wrapper {
    border-radius: 50%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    &.with-quantity {
      border-bottom-right-radius: 0%;
    }
  }

  .icon-container {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
  }

  .status-future {
    border: 1px dotted var(--color-icon-neutral);
  }

  .status-neutral {
    background-color: var(--color-status-neutral);
  }

  .status-info {
    background-color: var(--color-status-info);
    color: var(--color-icon-neutral);
  }

  .status-progress {
    background-color: var(--color-status-progress);
    color: var(--color-icon-neutral);
  }

  .status-success {
    background-color: var(--color-status-success);
  }

  .status-warning {
    background-color: var(--color-status-warning);
    color: var(--color-icon-dark);
  }

  .status-error {
    background-color: var(--color-status-error);
    color: var(--color-icon-dark);
  }

  .status-archived {
    background-color: var(--color-status-archived);
  }

  .quantity-pill {
    align-self: flex-end;
    display: inline-block;
    z-index: -1;

    &.small {
      border-radius: 0 16px 16px 0;
      font-size: 11px;
      line-height: 13px;
      margin-left: -10px;
      padding: 2px 6px 2px 10px;
    }

    &.medium {
      border-radius: 0 16px 16px 0;
      font-size: 13px;
      line-height: 16px;
      margin-left: -10px;
      padding: 2px 6px 2px 10px;
    }

    &.large {
      border-radius: 0 18px 18px 0;
      font-size: 17px;
      line-height: 20px;
      margin-left: -10px;
      padding: 3px 6px 3px 10px;
    }

    &.extraLarge {
      border-radius: 0 20px 20px 0;
      font-size: 20px;
      line-height: 23px;
      margin-left: -10px;
      padding: 4px 6px 4px 10px;
    }
  }
}