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

// studio - views - course export
// ====================

.view-export {

  // UI: basic layout
  .content-primary,
  .content-supplementary {
    box-sizing: border-box;
  }

  .content-primary {
    @extend .ui-col-wide;
  }

  .content-supplementary {
    @extend .ui-col-narrow;
  }


  // UI: introduction
  .introduction {
    .title {
      @extend %cont-text-sr;
    }
  }

  // UI: export controls
  .export-controls {
    box-sizing: border-box;

    @extend %ui-window;

    padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);

    .title {
      @extend %t-title4;
    }

    .action-export {
      @extend %btn-primary-blue;
      @extend %t-action1;

      display: block;
      margin: $baseline 0;
      padding: ($baseline*0.75) $baseline;
    }

    .action {
      .icon {
        @extend %t-icon2;

        display: inline-block;
        vertical-align: middle;
        margin-right: ($baseline/4);
      }

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


  // UI: export rules
  .export-contents {
    @include clearfix();

    margin: ($baseline*2) 0;

    .export-includes,
    .export-excludes {
      width: flex-grid(4, 9);

      .item-detail {
        @extend %t-copy-sub1;
        @extend %wipe-last-child;

        padding-bottom: ($baseline/4);
        border-bottom: 1px solid $gray-l4;
        margin-bottom: ($baseline/4);
      }
    }

    .export-includes {
      float: left;
    }

    .export-excludes {
      float: right;
    }
  }

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

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

    opacity: 1;

    // STATE: hidden
    &.is-hidden {
      opacity: 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);

        .icon {
          @include transition(opacity $tmg-f1 ease-in-out 0);

          @extend %t-icon4;

          position: absolute;
          top: ($baseline/2);
          left: $baseline;
        }
      }

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

        .title {
          @extend %t-title5;
          @extend %t-strong;
        }

        .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 {
          .item-progresspoint-success-date {
            @include margin-left($baseline/4);

            display: none;
          }

          &.is-complete {
            .item-progresspoint-success-date {
              display: inline;
            }
          }
        }


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

          .fa-warning {
            visibility: hidden;
            opacity: 0;
          }

          .fa-cog {
            visibility: visible;
            opacity: 1;
          }

          .fa-check {
            opacity: 0.3;
          }
        }

        // STATE: started
        &.is-started {
          .fa-warning {
            visibility: hidden;
            opacity: 0;
          }

          .fa-cog {
            @include animation(fa-spin 2s infinite linear);

            visibility: visible;
            opacity: 1;
          }
        }

        // STATE: completed
        &.is-complete {
          .fa-cog {
            visibility: visible;
            opacity: 1;
          }

          .fa-warning {
            visibility: hidden;
            opacity: 0;
          }

          .icon {
            color: $green;
          }

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

          .list-actions {
            display: block;
          }
        }

        // STATE: error
        &.has-error {
          .fa-cog {
            visibility: hidden;
            opacity: 0;
          }

          .fa-warning {
            visibility: visible;
            opacity: 1;
          }

          .icon {
            color: $red;
          }

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