Studio: Course Outline Static Rendering/Styling

cms/static/sass/_developer.scss

@@ -8,78 +8,3 @@
 // }
 
 // --------------------
-
-//.wrapper-xblock-header {
-
-.view-outline {
-
-  .add-xblock-component {
-    text-align: center;
-
-    .add-button {
-      padding: 5px 10px;
-      background-color: $blue;
-      color: $white;
-      text-align: center;
-    }
-  }
-
-  .draggable-drop-indicator {
-    left: 0;
-  }
-
-  .nav-actions {
-    .collapse-all {
-      .expand-all {
-        display: none;
-      }
-    }
-
-    .expand-all {
-      .collapse-all {
-        display: none;
-      }
-    }
-  }
-
-  .outline-item {
-    padding: 6px 8px 8px 16px;
-    text-wrap: avoid;
-    border: 1px solid $gray;
-    margin: 5px;
-    background-color: $white;
-
-    .wrapper-xblock-header-secondary {
-      padding: 0px 8px 0px 26px;
-
-      .meta-info {
-        font-size: 12px;
-      }
-    }
-
-    .xblock-title {
-      width: 100%;
-    }
-
-    .actions-list {
-      .action-item {
-        display: inline-block;
-      }
-    }
-  }
-
-  .outline-item.collapsed {
-    .sortable-list,
-    .add-xblock-component {
-      display: none;
-    }
-  }
-
-  .item-actions {
-    .configure-button {
-      float: left;
-      margin-right: 13px;
-      color: #a4aab7;
-    }
-  }
-}

cms/static/sass/_variables.scss

@@ -160,6 +160,17 @@ $shadow-l2: rgba($black, 0.05);
 $shadow-d1: rgba($black, 0.4);
 $shadow-d2: rgba($black, 0.6);
 
+// colors - application
+$color-draft: $gray-l3;
+$color-live: $blue;
+$color-ready: $green;
+$color-warning: $orange-l2;
+$color-error: $red-l2;
+$color-staff-only: $black;
+
+$color-heading-base: $gray-d2;
+$color-copy-base: $gray-l1;
+
 // ====================
 
 // timing - used for animation/transition mixin syncing

cms/static/sass/assets/_anims.scss

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

cms/static/sass/elements/_controls.scss

@@ -279,7 +279,7 @@
   }
 }
 
-// UI: elem is collapsible
+// UI: elem is collapsible - TODO: this should be transitioned away from in favor of %ui-expand-collapse
 %expand-collapse {
   @include transition(all $tmg-f2 linear 0s);
   display: inline-block;
@@ -305,6 +305,41 @@
   }
 }
 
+// UI: expand collapse
+%ui-expand-collapse {
+  @include transition(all $tmg-f2 linear 0s);
+
+
+  // CASE: default (is expanded)
+  .ui-toggle-expansion {
+    @include transition(all $tmg-f2 ease-in-out 0s);
+    display: inline-block;
+    vertical-align: middle;
+
+    .icon {
+      @include transition(all $tmg-f2 ease-in-out 0s);
+    }
+
+    // STATE: hover/active
+    &:hover, &:active {
+      cursor: pointer;
+      color: $ui-link-color-focus;
+    }
+  }
+
+  // CASE: is collapsed
+  &.is-collapsed {
+
+    .ui-toggle-expansion {
+
+      .icon {
+        @include transform(rotate(-90deg));
+        @include transform-origin(50% 50%);
+      }
+    }
+  }
+}
+
 // UI: drag handles
 .drag-handle {
 

cms/static/sass/elements/_layout.scss

@@ -77,10 +77,18 @@
             vertical-align: baseline;
           }
 
-          &.new-button {
+          // CASE: new/create button
+          &.new-button,
+          &.button-new {
             @extend %btn-primary-green;
             @extend %sizing;
           }
+
+          // CASE: toggle button
+          &.button-toggle {
+            @extend %btn-secondary-gray;
+            @extend %sizing;
+          }
         }
       }
     }