frontend-tutorial-framework/src/app/webide/webide.component.scss

$space: 24px;
$small: 0.75 * $space;
$tiny: 0.5 * $space;

$tao-navbar-height: 67px;

$tao-bright-green-100: #c5f2e4;
$tao-bright-green-200: #a0ead3;

$tao-warm-yellow-200: #FFE0A9;
$tao-warm-yellow-600: #E59C3C;

$tao-plum-200: #BEC7F3;
$tao-plum-900: #272F4C;
$tao-red-500: #FF5252;

.tfw-grid-webide-statusbar {
  display: grid;
  height: $tao-navbar-height;
  grid-template-columns: 8fr 1fr;
}

.tfw-ace-editor {
  height: calc(100% - 67px);
  width: 100%;
}

.btn-group {
  padding-left: 34px;
}

.tfw-tab-btn {
  background-color: white;
  border: 1px solid $tao-plum-900;
  border-left: 0;
  border-right: 0;
  border-radius: 100px;
  padding: 5px 19px;
  z-index: 200;

  .tfw-tab-btn-saved,
  .active,
  .disabled,
  &:disabled {
    background-color: $tao-plum-200;
    color: black;
  }
}

.tfw-deploy-btn-group {
  margin: auto $tiny;

  .tfw-deploy-btn {
    background: $tao-bright-green-200;
    border-radius: 100px;
    padding: 6px 19px;

    img {
      position: relative;
      bottom: 1px;
      height: $small;
    }

    &.failed {
      background-color: $tao-red-500;
      color:white;
    }

    &:disabled,
    &.disabled,
    &.deployed,
    &.deploy
    {
      background-color: $tao-bright-green-100;
      color: black;
    }

    &.deploy {
      background-color: $tao-warm-yellow-200;
    }


    .loader {
      border: 2px solid $tao-warm-yellow-600;
      border-radius: 50%;
      border-top: 2px solid $tao-warm-yellow-200;
      width: 15px;
      height: 15px;
      animation: spin 2s linear infinite;
      display: inline-block;
      margin-right: 5px;
      position: relative;
      top: 2px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

  }
}