Studio: re-implemeting visual styling for drag and drop:

* adding back in drag and drop indicators to outline DOM
* correcting visual display of drag action in outline UI
* adjusting styling of outline drag and drop indicators
* adjusting styling of drag and drop was-dropped state

cms/static/sass/_shame.scss

@@ -25,15 +25,18 @@
 
 // ====================
 
-// needed to override ui-window styling for dragging state (outline selectors get too specific)
-.courseware-section.is-dragging {
-    box-shadow: 0 1px 2px 0 $shadow-d1 !important;
-    border: 1px solid $gray-d3 !important;
-}
+// overriding outline styling for general drag and drop cases
+.outline-section, .outline-subsection {
+
+  // STATE: is dragging
+  &.is-dragging {
+    border-color: $gray-d3;
+  }
 
-.courseware-section.is-dragging.valid-drop {
-  border-color: $blue-s1 !important;
-  box-shadow: 0 1px 2px 0 $blue-t2 !important;
+  // STATE: is dragging + valid drop
+  &.valid-drop {
+    border-color: $ui-action-primary-color-focus;
+  }
 }
 
 // ====================

cms/static/sass/assets/_anims.scss

@@ -271,3 +271,26 @@
 %anim-pulse {
   @include animation(pulse $tmg-f1 ease-in-out 1);
 }
+
+// ====================
+
+
+// was-dropped
+@include keyframes(was-dropped) {
+  0% {
+    opacity: 1.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-was-dropped {
+  @include animation(was-dropped $tmg-f1 ease-in-out 1);
+}

cms/static/sass/elements/_controls.scss

 // studio - elements - UI controls
 // ====================
 
-// ====================
-
 // general actions
 %action {
   @extend %ui-fake-link;
@@ -350,7 +348,7 @@
 
 // UI: elem is draggable
 .is-draggable {
-  @include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0);
+  @include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0);
   position: relative;
 
   .draggable-drop-indicator {
@@ -390,13 +388,10 @@
 
   // UI: condition - valid drop
   &.valid-drop {
-    border-color: $blue-s1;
-    box-shadow: 0 1px 2px 0 $blue-t2;
+    border-color: $ui-action-primary-color-focus;
+    box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
   }
 }
- .was-dragging {
-  @include transition(transform $tmg-f2 ease-in-out 0);
- }
 
 // UI: drag state - was dragging
 .was-dragging {
@@ -407,6 +402,7 @@
 .drop-target {
 
   &.drop-target-before {
+    margin-top: ($baseline*1.5);
 
     > .draggable-drop-indicator-before {
       opacity: 1.0;
@@ -414,9 +410,17 @@
   }
 
   &.drop-target-after {
+    margin-bottom: ($baseline*1.5);
 
     > .draggable-drop-indicator-after {
       opacity: 1.0;
     }
   }
 }
+
+// UI: drop state - was dropped
+.was-dropped {
+  @include animation(was-dropped $tmg-avg ease-in-out 1);
+  border-color: $ui-action-primary-color-focus;
+  box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
+}

cms/static/sass/views/_outline.scss

@@ -246,6 +246,16 @@
         }
       }
     }
+
+    // STATE: drag and drop
+    .drop-target-prepend .draggable-drop-indicator-initial {
+      opacity: 1.0;
+    }
+
+    // STATE: was dropped
+    &.was-dropped {
+      border-color: $blue;
+    }
   }
 
   // outline: sections
@@ -320,6 +330,11 @@
         @extend %outline-item-content-hidden;
       }
     }
+
+    // STATE: drag and drop - was dropped
+    &.was-dropped {
+      border-left-color: $ui-action-primary-color-focus;
+    }
   }
 
   // outline: subsections
@@ -439,49 +454,36 @@
   // --------------------
   .outline-section {
 
+    .ui-splint-indicator {
+      height: ($baseline/10);
+      margin-left: ($baseline/4);
+    }
+
     .draggable-drop-indicator-before {
-      top: -($baseline/2);
+      top: -($baseline*0.75);
       left: 0;
     }
 
     .draggable-drop-indicator-after {
-      bottom: -13px;
+      bottom: -($baseline*0.75);
       left: 0;
     }
-
-    // CASE: DnD - empty subsection with unit dropping
-    .drop-target-prepend .draggable-drop-indicator-initial {
-      opacity: 1.0;
-    }
-
-    // STATE: was dropped
-    &.was-dropped {
-      background-color: $ui-update-color;
-    }
   }
 
   // UI: drag and drop: subsection
   .outline-subsection {
 
-    .draggable-drop-indicator-before {
-      top: 0;
-    }
-
-    .draggable-drop-indicator-after {
-      bottom: 0;
+    .ui-splint-indicator {
+      height: ($baseline/10);
+      margin-left: ($baseline*1.25);
     }
 
-    // CASE: DnD - empty subsection with unit dropping
-    .drop-target-prepend .draggable-drop-indicator-initial {
-      opacity: 1.0;
+    .draggable-drop-indicator-before {
+      top: -($baseline*0.75);
     }
 
-    // STATE: was dropped
-    &.was-dropped {
-
-      > .section-item {
-        background-color: $ui-update-color !important; // nasty, but needed for specificity
-      }
+    .draggable-drop-indicator-after {
+      bottom: -($baseline*0.75);
     }
   }
 
@@ -489,24 +491,41 @@
   .outline-unit {
 
     .draggable-drop-indicator-before {
-      top: 0;
+      top: -($baseline*0.75);
     }
 
     .draggable-drop-indicator-after {
-      bottom: 0;
-    }
-
-    // STATE: was dropped
-    &.was-dropped {
-
-      > .section-item {
-        background-color: $ui-update-color !important; // nasty, but needed for specificity
-      }
+      bottom: -($baseline*0.75);
     }
   }
 
   // UI: drag and drop: splints
   .ui-splint-indicator {
     position: relative;
+
+    .draggable-drop-indicator {
+      @extend %ui-depth3;
+      @include transition(opacity $tmg-f2 linear 0s);
+      @include size(100%, auto);
+      position: absolute;
+      border-top: 1px solid $blue-l1;
+      opacity: 0.0;
+
+      *[class^="icon-caret"] {
+        @extend %t-icon5;
+        position: absolute;
+        top: -12px;
+        left: -($baseline/4);
+        color: $blue-s1;
+      }
+    }
+
+    .draggable-drop-indicator-before {
+      top: -($baseline/2);
+    }
+
+    .draggable-drop-indicator-after {
+      bottom: -($baseline/2);
+    }
   }
 }