coriolis-web/src/components/MigrationTasks/MigrationTasks.scss

/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';

.root {

}

.container {
  margin: 0 auto;
  padding: 0 0 40px;
  max-width: $max-content-width;
  :global(.row), :global(.headerItems) {
    :global(.cell) {
      &:nth-child(1) {
        width: 31%;
      }
      &:nth-child(2) {width: 16%;}
      &:nth-child(3) {width: 34%;}
      &:nth-child(4) {width: 19%;}
    }
    transition: background $animation-swift-out;
  }
  .taskDetails {
    padding: 20px 32px 4px;
    .group {
      float: left;
      margin-bottom: 16px;
      .detailTitle {
        font-weight: $weight-semibold;
        font-size: 10px;
        color: $black;
        text-transform: uppercase;
        margin-bottom: 5px;
      }
      .detailValue {
        font-weight: $weight-regular;
        font-size: 14px;
        color: $gray-dark;
      }
      &:nth-child(2n) {
        width: 500px;
      }
      &:nth-child(2n+1) {
        width: 225px;
      }
      &.progressUpdates {
        width: 100%;
        &>div {

          span:first-child {
            width: 225px;
            display: inline-block;
          }
          span:last-child {
            width: 500px;
            display: inline-block;
          }
        }
        :global(.first) {
          color: $black;
        }
      }
    }
    &:after {
      clear: both;
      display: block;
      height: 0;
      content: " ";
    }
  }
  :global(.status-pill) {
    background-color: $blue;
  }

}


@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}