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

// studio - views - assets
// ====================

.view-uploads {

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

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

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

  .nav-actions {

    .icon-cloud-upload {
      @extend %t-copy;
      vertical-align: bottom;
      margin-right: ($baseline/5);
    }

  }

  .no-asset-content {
    @extend %ui-well;
    padding: ($baseline*2);
    background-color: $gray-l4;
    text-align: center;
    color: $gray;

    .new-button {
      @extend %t-action3;
      @include margin-left($baseline);

      [class^="icon-"] {
        @include margin-right($baseline/2);
      }
    }
  }

  // UI: assets - calls-to-action
  .actions-list {
    @extend %actions-list;

    .action-item {

      // special checkbox styling
      &.action-lock {
        position: relative;
      }

      &.action-lock label {
        position: absolute;
        top: 0;
        right: 0;
        height: 30px;
        width: 30px;

        &:hover {
          background-color: $blue;
        }
      }

      &.action-lock .lock-checkbox {
        position: absolute;
        top: 0;
        right: 0;
        height: 30px;
        width: 30px;
        opacity: 0;
      }

      &.action-lock .lock-checkbox:hover ~ .action-button {
        background-color: $blue;
        color: $gray-l6;
      }

      &.action-lock .lock-checkbox ~ .action-button {
        .icon-lock {
          display: none;
        }

        .icon-unlock-alt {
          display: inline-block;
        }
      }

      &.action-lock .lock-checkbox:checked ~ .action-button {
        background-color: $gray;
        color: $white;

        .icon-lock {
          display: inline-block;
        }

       .icon-unlock-alt {
          display: none;
        }
      }
    }
  }

  .show-xml {
    @include blue-button;
  }

  .upload-modal {
    display: none;
    width: 640px !important;
    margin-left: -320px !important;

    .modal-body {
      height: auto !important;
      overflow-y: auto !important;
      text-align: center;
    }

    .title {
      @extend %t-title3;
      @extend %t-light;
      float: none;
      margin: ($baseline*2) 0 ($baseline*1.5);
    }

    .file-input {
      display: none;
    }

    .choose-file-button {
      @include blue-button();
      @extend %t-action2;
      padding: 10px 82px 12px;
    }

    .progress-bar {
      display: none;
      width: ($baseline*15);
      height: 35px;
      margin: ($baseline) auto;
      border: 1px solid $green;
      border-radius: ($baseline*2);

      &.loaded {
        border-color: #66b93d;

        .progress-fill {
          background: #66b93d;
        }
      }
    }

    .progress-fill {
      @extend %t-copy-sub1;
      width: 0%;
      height: ($baseline*1.5);
      border-radius: ($baseline*2);
      background: $green;
      padding-top: ($baseline/4);
      color: $white;
    }

    .close-button {
      @include transition(color $tmg-f2 ease-in-out 0s);
      position: absolute;
      top: 0;
      right: ($baseline*0.75);
      border: none;
      background: none;
      padding: 0;

      [class^="icon-"] {
        @extend %t-action1;
      }

      &:hover {
        background: none;
        box-shadow: none;
        color: $blue;
      }
    }

    .embeddable {
      display: none;
      margin: ($baseline*1.5) 0 ($baseline*4);

      label {
        @extend %t-strong;
        display: block;
        margin-bottom: ($baseline/2);
      }
    }

    .embeddable-xml-input {
      box-shadow: none;
      width: ($baseline*20);
    }

    .copy-button {
      @include white-button;
      display: none;
      margin-bottom: ($baseline*5);
    }
  }
}