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

// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.

@import "../../assets/scss/variables.scss";

.tfw-grid-ide-statusbar {
  display: grid;
  grid-template-columns: 8fr 1fr;
  background-color: #353535;
}

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

.underline {
  text-decoration: underline;
}

.tfw-tab-btn {
  background-color: #333333;
  color: $tao-gray-400;
  border-radius: 0;
  padding: 0.5em 0.7em;
  z-index: 200;

  .tfw-tab-btn-saved,
  .active,
  .disabled,
  &:disabled {
    background-color: #131313;  // matches vscode dark theme with disbled gray
    color: white;
  }
}

.tfw-deploy-btn-group {
  display: flex;
  justify-content: flex-end;  

  .tfw-deploy-btn {
    background: $tao-bright-green-200;
    padding: 0.5em 0.7em 0.8em 1.5em;
    border-radius: 0;
    border-bottom-left-radius: 2.2em;

    img {
      padding-right: 0.5em;
      position: relative;
      height: 1em;
    }

    &.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); }
    }

  }
}