Fix up some SASS issues.

cms/static/js/views/settings/main_settings_view.js

@@ -25,6 +25,14 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
         this.$el.find("#course-number").val(this.model.get('location').get('course'));
         this.$el.find('.set-date').datepicker({ 'dateFormat': 'm/d/yy' });
 
+        // Avoid showing broken image on mistyped/nonexistent image
+        this.$el.find('img.course-image').error(function() {
+            $(this).hide();
+        });
+        this.$el.find('img.course-image').load(function() {
+            $(this).show();
+        });
+
         var dateIntrospect = new Date();
         this.$el.find('#timezone').html("(" + dateIntrospect.getTimezone() + ")");
 

cms/static/sass/base-style.scss

@@ -42,6 +42,7 @@
 @import 'elements/system-help'; // help UI
 @import 'elements/modal'; // interstitial UI, dialogs, modal windows
 @import 'elements/vendor'; // overrides to vendor-provided styling
+@import 'elements/uploads';
 
 // base - specific views
 @import 'views/account';
@@ -59,7 +60,6 @@
 @import 'views/users';
 @import 'views/checklists';
 @import 'views/textbooks';
-@import 'views/uploads';
 
 // temp - inherited
 @import 'assets/content-types';

cms/static/sass/elements/_uploads.scss

@@ -0,0 +1,209 @@
+// studio - elements - uploads
+// ========================
+
+body.course.feature-upload {
+
+  // dialog
+  .wrapper-dialog {
+    @extend .ui-depth5;
+    @include transition(all 0.05s ease-in-out);
+    position: fixed;
+    top: 0;
+    background: $black-t2;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+      margin-right: -0.25em; /* Adjusts for spacing */
+    }
+
+    .dialog  {
+      @include box-sizing(border-box);
+      box-shadow: 0px 0px 7px $shadow-d1;
+      border-radius: ($baseline/5);
+      background-color: $gray-l4;
+      display: inline-block;
+      vertical-align: middle;
+      width: $baseline*23;
+      padding: 7px;
+      text-align: left;
+
+      .title {
+        @extend .t-title5;
+        margin-bottom: ($baseline/2);
+        font-weight: 600;
+        color: $black;
+      }
+
+      .message {
+        @extend .t-copy-sub2;
+        color: $gray;
+      }
+
+      .error {
+        color: $white;
+      }
+
+      form {
+        padding: 0;
+
+        .form-content {
+          box-shadow: 0 0 3px $shadow-d1;
+          padding: ($baseline*1.5);
+          background-color: $white;
+        }
+
+        input[type="file"] {
+          @extend .t-copy-sub2;
+        }
+
+        .status-upload {
+          height: 30px;
+          margin-top: $baseline;
+
+          .wrapper-progress {
+            box-shadow: inset 0 0 3px $shadow-d1;
+            display: block;
+            border-radius: ($baseline*0.75);
+            background-color: $gray-l5;
+            padding: 1px 8px 2px 8px;
+            height: 25px;
+
+            progress {
+              display: inline-block;
+              vertical-align: middle;
+              width: 100%;
+              border: none;
+              border-radius: ($baseline*0.75);
+              background-color: $gray-l5;
+
+              &::-webkit-progress-bar {
+                background-color: transparent;
+                border-radius: ($baseline*0.75);
+              }
+
+              &::-webkit-progress-value {
+                background-color: $pink;
+                border-radius: ($baseline*0.75);
+              }
+
+              &::-moz-progress-bar {
+                background-color: $pink;
+                border-radius: ($baseline*0.75);
+              }
+
+            }
+
+          }
+
+          .message-status {
+            @include border-top-radius(2px);
+            @include box-sizing(border-box);
+            @include font-size(14);
+            display: none;
+            border-bottom: 2px solid $yellow;
+            margin: 0 0 20px 0;
+            padding: 10px 20px;
+            font-weight: 500;
+            background: $paleYellow;
+
+            .text {
+              display: inline-block;
+            }
+
+            &.error {
+              border-color: $red-d2;
+              background: $red-l1;
+              color: $white;
+            }
+
+            &.confirm {
+              border-color: $green-d2;
+              background: $green-l1;
+              color: $white;
+            }
+
+            &.is-shown {
+              display: block;
+            }
+          }
+        }
+
+        .actions {
+          padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
+
+
+
+          .action-item {
+            @extend .t-action4;
+            display: inline-block;
+            margin-right: ($baseline*0.75);
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+
+          .action-primary {
+            @include blue-button();
+            @include font-size(12); // needed due to bad button mixins for now
+            border-color: $blue-d1;
+            color: $white;
+          }
+
+          a {
+            color: $blue;
+
+            &:hover {
+              color: $blue-s2;
+            }
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  // ====================
+
+  // js enabled
+  .js {
+
+    // dialog set-up
+    .wrapper-dialog {
+      visibility: hidden;
+      pointer-events: none;
+
+      .dialog {
+        opacity: 0;
+      }
+    }
+
+    // dialog showing/hiding
+    &.dialog-is-shown {
+
+      .wrapper-dialog {
+        -webkit-filter: blur(2px) grayscale(25%);
+        filter: blur(2px) grayscale(25%);
+      }
+
+      .wrapper-dialog.is-shown {
+        visibility: visible;
+        pointer-events: auto;
+
+        .dialog {
+          opacity: 1.0;
+        }
+      }
+    }
+
+  }
+}