edx-platform/cms/static/sass/views/_import.scss

// studio - views - course import
// ====================

.view-import {

  .content-primary, .content-supplementary {
    @include box-sizing(border-box);
    float: left;
  }

  .content-primary {
    width: flex-grid(9,12);
    margin-right: flex-gutter();
  }

  .content-supplementary {
    width: flex-grid(3,12);
  }

  // UI: export controls
  .export-controls {
    @extend %ui-window;
    @include clearfix;
    padding: 30px 40px;
  }

  // UI: import form
  .import-form {
    @include box-sizing(border-box);
    @extend %ui-window;
    padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);

    > .title {
      @extend %t-title4;
    }

    .file-name-block,
    .error-block {
      display: none;
      margin-bottom: $baseline;
    }

    .error-block {
      color: $error-red;
    }

    .file-input {
      display: none;
    }
  }

  // ====================

  // UI: default
  .action-choose-file {
    @extend %btn-primary-green;
    @extend %t-action1;
    display: block;
    margin: $baseline 0;
    padding: ($baseline*0.75) $baseline;

    [class^="icon"] {
      @extend %t-icon2;
      display: inline-block;
      vertical-align: middle;
      margin-right: ($baseline/4);
    }

    .copy {
      display: inline-block;
      vertical-align: middle;
    }
  }

  // ====================

  // UI: elem - file selection
  .wrapper-file-name {
    @extend %ui-well;
    margin: $baseline 0;
    padding: $baseline ($baseline*1.5);
    background-color: $gray-l4;

    .title {
      @extend %t-copy-lead1;
      overflow-x: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0;

      .label {
        margin-right: ($baseline/2);
      }

      .file-name {
        font-weight: bold;
      }
    }

    // artifact styling needed for current page behavior logic
    .submit-button {
      @extend %btn-primary-green;
      @extend %t-action1;
      display: none;
      margin-top: ($baseline*0.75);
      width: 100%;
      padding: ($baseline*0.75) $baseline;
    }
  }

  // ====================

  // UI: upload progress
  .wrapper-status {
    @include transition(opacity $tmg-f2 ease-in-out 0);
    opacity: 1.0;

    // STATE: hidden
    &.is-hidden {
      opacity: 0.0;
      display: none;
    }

    > .title {
      @extend %t-title4;
      margin-bottom: $baseline;
      border-bottom: 1px solid $gray-l3;
      padding-bottom: ($baseline/2);
    }
    // elem - progress list
    .list-progress {
      width: flex-grid(9, 9);

      .status-visual {
        position: relative;
        float: left;
        width: flex-grid(1,9);

        *[class^="icon-"] {
          @include transition(opacity $tmg-f1 ease-in-out 0);
          @include font-size(22);
          position: absolute;
          top: ($baseline/2);
          left: $baseline;
        }
      }

      .status-detail {
        float: left;
        width: flex-grid(8,9);
        margin-left: ($baseline*3);

        .title {
          @extend %t-title5;
          font-weight: 600;
        }

        .copy {
          @extend %t-copy-base;
          color: $gray-l2;
        }
      }

      .item-progresspoint {
        @include clearfix();
        @include transition(opacity $tmg-f1 ease-in-out 0);
        margin-bottom: $baseline;
        border-bottom: 1px solid $gray-l4;
        padding-bottom: $baseline;

        &:last-child {
          margin-bottom: 0;
          border-bottom: none;
          padding-bottom: 0;
        }

        // CASE: has actions
        &.has-actions {

          .list-actions {
            display: none;

            .action-primary {
              @extend %btn-primary-blue;
            }
          }
        }

        // TYPE: success
        &.item-progresspoint-success {

        }


        // STATE: not started
        &.is-not-started {
          opacity: 0.5;

          .icon-warning-sign {
            visibility: hidden;
            opacity: 0.0;
          }

          .icon-cog {
            visibility: visible;
            opacity: 1.0;
          }

          .icon-check {
            opacity: 0.3;
          }
        }

        // STATE: started
        &.is-started {

          .icon-warning-sign  {
            visibility: hidden;
            opacity: 0.0;
          }

          .icon-cog {
            visibility: visible;
            opacity: 1.0;
          }
        }

        // STATE: completed
        &.is-complete {

          .icon-cog {
            visibility: visible;
            opacity: 1.0;
          }

          .icon-warning-sign {
            visibility: hidden;
            opacity: 0.0;
          }

          *[class^="icon-"] {
            color: $green;
          }

          .status-detail .title {
            color: $green;
          }

          .list-actions {
            display: block;
          }
        }

        // STATE: error
        &.has-error {

          .icon-cog {
            visibility: hidden;
            opacity: 0.0;
          }

          .icon-warning-sign {
            visibility: visible;
            opacity: 1.0;
          }

          *[class^="icon-"] {
            color: $red;
          }

          .status-detail .title, .status-detail .copy {
            color: $red;
          }
        }
      }
    }
  }
}