resolving local merge with master

cms/static/client_templates/checklist.html

@@ -44,7 +44,7 @@
 
                 <% if (item['action_text'] !== '' && item['action_url'] !== '') { %>
                 <ul class="list-actions task-actions">
-                    <li>
+                    <li class="action-item">
                         <a href="<%= item['action_url'] %>" class="action action-primary"
                         <% if (item['action_external']) { %>
                         rel="external" title="This link will open in a new browser window/tab"

cms/static/coffee/src/views/module_edit.coffee

@@ -15,7 +15,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
   $component_editor: => @$el.find('.component-editor')
 
   loadDisplay: ->
-       XModule.loadModule(@$el.find('.xmodule_display'))
+    XModule.loadModule(@$el.find('.xmodule_display'))
 
   loadEdit: ->
     if not @module
@@ -55,6 +55,11 @@ class CMS.Views.ModuleEdit extends Backbone.View
   clickSaveButton: (event) =>
     event.preventDefault()
     data = @module.save()
+
+    analytics.track "Saved Module",
+      course: course_location_analytics
+      id: _this.model.id
+
     data.metadata = _.extend(data.metadata || {}, @metadata())
     @hideModal()
     @model.save(data).done( =>

cms/static/coffee/src/views/tabs.coffee

@@ -28,6 +28,10 @@ class CMS.Views.TabsEdit extends Backbone.View
     @$('.component').each((idx, element) =>
         tabs.push($(element).data('id'))
     )
+
+    analytics.track "Reordered Static Pages",
+      course: course_location_analytics
+
     $.ajax({
       type:'POST',
       url: '/reorder_static_tabs', 
@@ -56,10 +60,18 @@ class CMS.Views.TabsEdit extends Backbone.View
       'i4x://edx/templates/static_tab/Empty'
     )
 
+    analytics.track "Added Static Page",
+      course: course_location_analytics
+
   deleteTab: (event) =>
     if not confirm 'Are you sure you want to delete this component? This action cannot be undone.'
       return
     $component = $(event.currentTarget).parents('.component')
+
+    analytics.track "Deleted Static Page",
+      course: course_location_analytics
+      id: $component.data('id')
+
     $.post('/delete_item', {
       id: $component.data('id')
     }, =>

cms/static/coffee/src/views/unit.coffee

@@ -35,6 +35,10 @@ class CMS.Views.UnitEdit extends Backbone.View
     @$('.components').sortable(
       handle: '.drag-handle'
       update: (event, ui) =>
+        analytics.track "Reordered Components",
+          course: course_location_analytics
+          id: unit_location_analytics
+
         payload = children : @components()
         options = success : => @model.unset('children')
         @model.save(payload, options)
@@ -89,6 +93,11 @@ class CMS.Views.UnitEdit extends Backbone.View
       $(event.currentTarget).data('location')
     )
 
+    analytics.track "Added a Component",
+      course: course_location_analytics
+      unit_id: unit_location_analytics
+      type: $(event.currentTarget).data('location')
+
     @closeNewComponent(event)
 
   components: => @$('.component').map((idx, el) -> $(el).data('id')).get()
@@ -111,6 +120,11 @@ class CMS.Views.UnitEdit extends Backbone.View
     $.post('/delete_item', {
       id: $component.data('id')
     }, =>
+      analytics.track "Deleted a Component",
+        course: course_location_analytics
+        unit_id: unit_location_analytics
+        id: $component.data('id')
+
       $component.remove()
       # b/c we don't vigilantly keep children up to date
       # get rid of it before it hurts someone
@@ -129,6 +143,10 @@ class CMS.Views.UnitEdit extends Backbone.View
       id: @$el.data('id')
       delete_children: true
     }, =>
+      analytics.track "Deleted Draft",
+        course: course_location_analytics
+        unit_id: unit_location_analytics
+
       window.location.reload()
     )
 
@@ -138,6 +156,10 @@ class CMS.Views.UnitEdit extends Backbone.View
     $.post('/create_draft', {
       id: @$el.data('id')
     }, =>
+      analytics.track "Created Draft",
+        course: course_location_analytics
+        unit_id: unit_location_analytics
+
       @model.set('state', 'draft')
     )
 
@@ -148,20 +170,31 @@ class CMS.Views.UnitEdit extends Backbone.View
     $.post('/publish_draft', {
       id: @$el.data('id')
     }, =>
+      analytics.track "Published Draft",
+        course: course_location_analytics
+        unit_id: unit_location_analytics
+
       @model.set('state', 'public')
     )
 
   setVisibility: (event) ->
     if @$('.visibility-select').val() == 'private'
       target_url = '/unpublish_unit'
+      visibility = "private"
     else
       target_url = '/publish_draft'
+      visibility = "public"
 
     @wait(true)
 
     $.post(target_url, {
       id: @$el.data('id')
     }, =>
+      analytics.track "Set Unit Visibility",
+        course: course_location_analytics
+        unit_id: unit_location_analytics
+        visibility: visibility
+
       @model.set('state', @$('.visibility-select').val())
     )
 
@@ -193,6 +226,11 @@ class CMS.Views.UnitEdit.NameEdit extends Backbone.View
     @model.save(metadata: metadata)
     # Update name shown in the right-hand side location summary.
     $('.unit-location .editing .unit-name').html(metadata.display_name)
+    analytics.track "Edited Unit Name",
+      course: course_location_analytics
+      unit_id: unit_location_analytics
+      display_name: metadata.display_name
+
 
 class CMS.Views.UnitEdit.LocationState extends Backbone.View
   initialize: =>

cms/static/js/base.js

@@ -37,11 +37,11 @@ $(document).ready(function () {
         $(this).select();
     });
 
+    $('body').addClass('js');
+
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
-    $('body').addClass('js');
-
     // lean/simple modal
     $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
     $('a.action-modal-close').click(function(e){
@@ -89,6 +89,9 @@ $(document).ready(function () {
     // tender feedback window scrolling
     $('a.show-tender').bind('click', smoothScrollTop);
 
+    // toggling footer additional support
+    $('.cta-show-sock').bind('click', toggleSock);
+
     // toggling overview section details
     $(function () {
         if ($('.courseware-section').length > 0) {
@@ -331,6 +334,12 @@ function createNewUnit(e) {
     var parent = $(this).data('parent');
     var template = $(this).data('template');
 
+    analytics.track('Created a Unit', {
+        'course': course_location_analytics,
+        'parent_location': parent
+    });
+
+
     $.post('/clone_item',
         {'parent_location': parent,
             'template': template,
@@ -363,6 +372,12 @@ function _deleteItem($el) {
 
     var id = $el.data('id');
 
+    analytics.track('Deleted an Item', {
+        'course': course_location_analytics,
+        'id': id
+    });
+
+
     $.post('/delete_item',
         {'id': id, 'delete_children': true, 'delete_all_versions': true},
         function (data) {
@@ -426,6 +441,11 @@ function displayFinishedUpload(xhr) {
     var html = Mustache.to_html(template, resp);
     $('table > tbody').prepend(html);
 
+    analytics.track('Uploaded a File', {
+        'course': course_location_analytics,
+        'asset_url': resp.url
+    });
+
 }
 
 function markAsLoaded() {
@@ -453,6 +473,33 @@ function onKeyUp(e) {
     }
 }
 
+function toggleSock(e) {
+    e.preventDefault();
+
+    var $btnLabel = $(this).find('.copy');
+    var $sock = $('.wrapper-sock');
+    var $sockContent = $sock.find('.wrapper-inner');
+
+    $sock.toggleClass('is-shown');
+    $sockContent.toggle('fast');
+
+    $.smoothScroll({ 
+       offset: -200, 
+       easing: 'swing', 
+       speed: 1000,
+       scrollElement: null,
+       scrollTarget: $sock
+    });
+
+    if($sock.hasClass('is-shown')) {
+        $btnLabel.text('Hide Studio Help');
+    }
+
+    else {
+        $btnLabel.text('Looking for Help with Studio?');
+    }
+}
+
 function toggleSubmodules(e) {
     e.preventDefault();
     $(this).toggleClass('expand').toggleClass('collapse');
@@ -555,6 +602,11 @@ function saveNewSection(e) {
     var template = $saveButton.data('template');
     var display_name = $(this).find('.new-section-name').val();
 
+    analytics.track('Created a Section', {
+        'course': course_location_analytics,
+        'display_name': display_name
+    });
+
     $.post('/clone_item', {
             'parent_location': parent,
             'template': template,
@@ -600,6 +652,12 @@ function saveNewCourse(e) {
         return;
     }
 
+    analytics.track('Created a Course', {
+        'org': org,
+        'number': number,
+        'display_name': display_name
+    });
+
     $.post('/create_new_course', {
             'template': template,
             'org': org,
@@ -646,9 +704,14 @@ function saveNewSubsection(e) {
 
     var parent = $(this).find('.new-subsection-name-save').data('parent');
     var template = $(this).find('.new-subsection-name-save').data('template');
-
     var display_name = $(this).find('.new-subsection-name-input').val();
 
+    analytics.track('Created a Subsection', {
+        'course': course_location_analytics,
+        'display_name': display_name
+    });
+
+
     $.post('/clone_item', {
             'parent_location': parent,
             'template': template,
@@ -702,6 +765,13 @@ function saveEditSectionName(e) {
         return;
     }
 
+    analytics.track('Edited Section Name', {
+        'course': course_location_analytics,
+        'display_name': display_name,
+        'id': id
+    });
+
+
     var $_this = $(this);
     // call into server to commit the new order
     $.ajax({
@@ -741,6 +811,12 @@ function saveSetSectionScheduleDate(e) {
 
     var id = $modal.attr('data-id');
 
+    analytics.track('Edited Section Release Date', {
+        'course': course_location_analytics,
+        'id': id,
+        'start': start
+    });
+
     // call into server to commit the new order
     $.ajax({
         url: "/save_item",

cms/static/js/views/checklists_view.js

@@ -77,11 +77,18 @@ CMS.Views.Checklists = Backbone.View.extend({
         var task_index = $checkbox.data('task');
         var model = this.collection.at(checklist_index);
         model.attributes.items[task_index].is_checked = $task.hasClass(completed);
+
         model.save({},
             {
                 success : function() {
                     var updatedTemplate = self.renderTemplate(model, checklist_index);
                     self.$el.find('#course-checklist'+checklist_index).first().replaceWith(updatedTemplate);
+
+                    analytics.track('Toggled a Checklist Task', {
+                        'course': course_location_analytics,
+                        'task': model.attributes.items[task_index].short_description,
+                        'state': model.attributes.items[task_index].is_checked
+                    });
                 },
                 error : CMS.ServerError
             });

cms/static/js/views/course_info_edit.js

@@ -107,6 +107,11 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         // push change to display, hide the editor, submit the change        
         targetModel.save({}, {error : CMS.ServerError});
         this.closeEditor(this);
+
+        analytics.track('Saved Course Update', {
+            'course': course_location_analytics,
+            'date': this.dateEntry(event).val() 
+        });
     },
     
     onCancel: function(event) {
@@ -147,6 +152,11 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
             return;
         }
 
+        analytics.track('Deleted Course Update', {
+            'course': course_location_analytics,
+            'date': this.dateEntry(event).val() 
+        });
+
         var targetModel = this.eventModel(event);
         this.modelDom(event).remove();
         var cacheThis = this;
@@ -284,6 +294,11 @@ CMS.Views.ClassInfoHandoutsView = Backbone.View.extend({
         this.model.save({}, {error: CMS.ServerError});
         this.$form.hide();
         this.closeEditor(this);
+
+        analytics.track('Saved Course Handouts', {
+            'course': course_location_analytics
+        });
+
     },
 
     onCancel: function(event) {

cms/static/js/views/settings/advanced_view.js

@@ -137,6 +137,10 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
             success : function() {
                 self.render();
                 self.showMessage(self.successful_changes);
+                analytics.track('Saved Advanced Settings', {
+                    'course': course_location_analytics
+                });
+
             },
             error : CMS.ServerError
         });

cms/static/sass/_base.scss

@@ -22,7 +22,7 @@ body, input {
 a {
   text-decoration: none;
   color: $blue;
-  @include transition(color .15s);
+  @include transition(color 0.25s ease-in-out);
 
   &:hover {
     color: #cb9c40;
@@ -52,7 +52,6 @@ h1 {
 
 // layout - basic page header
 .wrapper-mast {
-  margin: 0;
   padding: 0 $baseline;
   position: relative;
   
@@ -63,7 +62,7 @@ h1 {
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
-    margin: 0 auto $baseline auto;
+    margin: ($baseline*1.5) auto $baseline auto;
     color: $gray-d2;
   }
 
@@ -272,19 +271,17 @@ h1 {
   }
 
   .title-1 {
-
+    @extend .t-title-1;
   }
 
   .title-2 {
-    @include font-size(24);
+    @extend .t-title-2;
     margin: 0 0 ($baseline/2) 0;
-    font-weight: 600;
   }
 
   .title-3 {
-    @include font-size(16);
+    @extend .t-title-3;
     margin: 0 0 ($baseline/2) 0;
-    font-weight: 600;
   }
 
   .title-4 {
@@ -351,7 +348,7 @@ h1 {
 // layout - grandfathered
 .main-wrapper {
   position: relative;
-  margin: 40px;
+  margin: 0 ($baseline*2);
 }
 
 .inner-wrapper {

cms/static/sass/_cms_mixins.scss

@@ -1,6 +1,7 @@
 // studio - utilities - mixins and extends
 // ====================
 
+// mixins - utility
 @mixin clearfix {
 	&:after {
 		content: '';
@@ -11,6 +12,7 @@
 	}
 }
 
+// mixins - grandfathered
 @mixin button {
 	display: inline-block;
 	padding: 4px 20px 6px;
@@ -110,6 +112,21 @@
 	}
 }
 
+@mixin gray-button {
+	@include button;
+	border: 1px solid $gray-d1;
+	border-radius: 3px;
+	@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
+	background-color: $gray-d2;
+	@include box-shadow(0 1px 0 $white-t1 inset);
+	color: $gray-l3;
+
+	&:hover {
+		background-color: $gray-d3;
+		color: $white;
+	}
+}
+
 @mixin green-button {
 	@include button;
 	border: 1px solid $darkGreen;
@@ -279,20 +296,97 @@
 	}
 }
 
-@mixin sr-text {
-  border: 0; 
-  clip: rect(0 0 0 0); 
-  height: 1px; 
-  margin: -1px; 
-  overflow: hidden; 
-  padding: 0; 
-  position: absolute; 
-  width: 1px;
-}
-
 @mixin active {
 	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
 	background-color: rgba(255, 255, 255, .3);
 	@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
+}
+
+// ====================
+
+// extends - buttons
+.btn {
+  @include box-sizing(border-box);
+  @include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
+  display: inline-block;
+  cursor: pointer;
+
+  &:hover, &:active {
+
+  }
+
+  &.disabled, &[disabled] {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .icon-inline {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: ($baseline/4);
+  }
+}
+
+// pill button
+.btn-pill {
+	@include border-radius($baseline/5);
+}
+
+.btn-rounded {
+	@include border-radius($baseline/2);
+}
+
+// primary button
+.btn-primary {
+  @extend .btn;
+  @extend .btn-pill;
+  padding:($baseline/2) $baseline;
+  border-width: 1px;
+  border-style: solid;
+  line-height: 1.5em;
+  text-align: center;
+
+  &:hover, &:active {
+    @include box-shadow(0 2px 1px $shadow-l1);
+  }
+
+  &.current, &.active {
+  	@include box-shadow(inset 1px 1px 2px $shadow-d1);
+
+  	&:hover, &:active {
+  		@include box-shadow(inset 1px 1px 1px $shadow-d1);
+  	}
+  }
+}
+
+// secondary button
+.btn-secondary {
+	@extend .btn;
+	@extend .btn-pill;
+	border-width: 1px;
+  border-style: solid;
+	padding:($baseline/2) $baseline;
+  background: transparent;
+  line-height: 1.5em;
+  text-align: center;
+
+	&:hover, &:active {
+
+	}
+
+	&.current, &.active {
+
+	}
+}
+
+// ====================
+
+// extends - depth levels
+.depth0 { z-index: 0; }
+.depth1 { z-index: 10; }
+.depth2 { z-index: 100; }
+.depth3 { z-index: 1000; }
+.depth4 { z-index: 10000; }
+.depth5 { z-index: 100000; }

cms/static/sass/_reset.scss

@@ -1,6 +1,7 @@
 // studio - utilities - reset
 // ====================
 
+// not ready for this yet, but this should be done as things get cleaner
 // * {
 // 	@include box-sizing(border-box);
 // }
@@ -26,6 +27,10 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 
+html,body {
+  height: 100%;
+}
+
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;

cms/static/sass/_variables.scss

@@ -57,6 +57,10 @@ $blue-s3: saturate($blue,45%);
 $blue-u1: desaturate($blue,15%);
 $blue-u2: desaturate($blue,30%);
 $blue-u3: desaturate($blue,45%);
+$blue-t0: rgba(85, 151, 221,0.125);
+$blue-t1: rgba(85, 151, 221,0.25);
+$blue-t2: rgba(85, 151, 221,0.50);
+$blue-t3: rgba(85, 151, 221,0.75);
 
 $pink: rgb(183, 37, 103);
 $pink-l1: tint($pink,20%);
@@ -148,7 +152,7 @@ $shadow-l1: rgba(0,0,0,0.1);
 $shadow-d1: rgba(0,0,0,0.4);
 
 // colors - inherited 
-$baseFontColor: #3c3c3c;
+$baseFontColor: $gray-d2;
 $offBlack: #3c3c3c;
 $green: #108614;
 $lightGrey: #edf1f5;
@@ -163,4 +167,4 @@ $disabledGreen: rgb(124, 206, 153);
 $darkGreen: rgb(52, 133, 76);
 $lightBluishGrey: rgb(197, 207, 223);
 $lightBluishGrey2: rgb(213, 220, 228);
-$error-red: rgb(253, 87, 87);
+$error-red: rgb(253, 87, 87);

cms/static/sass/base-style.scss

@@ -21,9 +21,13 @@
 @import 'base';
 
 // elements
+@import 'elements/typography';
+@import 'elements/icons';
+@import 'elements/controls';
+@import 'elements/navigation';
 @import 'elements/header';
 @import 'elements/footer';
-@import 'elements/navigation';
+@import 'elements/sock';
 @import 'elements/forms';
 @import 'elements/modal';
 @import 'elements/alerts';

cms/static/sass/elements/_controls.scss

@@ -0,0 +1,143 @@
+// studio - elements - UI controls
+// ====================
+
+// gray primary button
+.btn-primary-gray {
+  @extend .btn-primary;
+  background: $gray-l1;
+  border-color: $gray-l2;
+  color: $white;
+
+  &:hover, &:active {
+    border-color: $gray-l1;
+    background: $gray;
+  }
+
+  &.current, &.active {
+    background: $gray-d1;
+    color: $gray-l1;
+
+    &:hover, &:active {
+      background: $gray-d1;
+    }
+  }
+}
+
+// blue primary button
+.btn-primary-blue {
+  @extend .btn-primary;
+  background: $blue;
+  border-color: $blue-s1;
+  color: $white;
+
+  &:hover, &:active {
+    background: $blue-s2;
+    border-color: $blue-s2;
+  }
+
+  &.current, &.active {
+    background: $blue-d1;
+    color: $blue-l4;
+    border-color: $blue-d2;
+
+    &:hover, &:active {
+      background: $blue-d1;
+    }
+  }
+}
+
+// green primary button
+.btn-primary-green {
+  @extend .btn-primary;
+  background: $green;
+  border-color: $green;
+  color: $white;
+
+  &:hover, &:active {
+    background: $green-s1;
+    border-color: $green-s1;
+  }
+
+  &.current, &.active {
+    background: $green-d1;
+    color: $green-l4;
+    border-color: $green-d2;
+
+    &:hover, &:active {
+      background: $green-d1;
+    }
+  }
+}
+
+// gray secondary button
+.btn-secondary-gray {
+  @extend .btn-secondary;
+  border-color: $gray-l3;
+  color: $gray-l1;
+
+  &:hover, &:active {
+    background: $gray-l3;
+    color: $gray-d2;
+  }
+
+  &.current, &.active {
+    background: $gray-d2;
+    color: $gray-l5;
+
+    &:hover, &:active {
+      background: $gray-d2;
+    }
+  }
+}
+
+// blue secondary button
+.btn-secondary-blue {
+  @extend .btn-secondary;
+  border-color: $blue-l3;
+  color: $blue;
+
+  &:hover, &:active {
+    background: $blue-l3;
+    color: $blue-s2;
+  }
+
+  &.current, &.active {
+    border-color: $blue-l3;
+    background: $blue-l3;
+    color: $blue-d1;
+
+    &:hover, &:active {
+
+    }
+  }
+}
+
+// green secondary button
+.btn-secondary-green {
+  @extend .btn-secondary;
+  border-color: $green-l4;
+  color: $green-l2;
+
+  &:hover, &:active {
+    background: $green-l4;
+    color: $green-s1;
+  }
+
+  &.current, &.active {
+    background: $green-s1;
+    color: $green-l4;
+
+    &:hover, &:active {
+      background: $green-s1;
+    }
+  }
+}
+
+// ====================
+
+// layout-based buttons
+
+// ====================
+
+// calls-to-action
+

cms/static/sass/elements/_footer.scss

@@ -2,10 +2,10 @@
 // ====================
 
 .wrapper-footer {
-  margin: ($baseline*1.5) 0 $baseline 0;
-  padding: $baseline;
   position: relative;
   width: 100%;
+  margin: 0 0 $baseline 0;
+  padding: $baseline;
 
   footer.primary {
     @include clearfix();
@@ -14,9 +14,7 @@
     min-width: $fg-min-width;
     width: flex-grid(12);
     margin: 0 auto;
-    padding-top: $baseline;
-    border-top: 1px solid $gray-l4;
-    color: $gray-l2;
+    color: $gray-l1;
 
     .colophon {
       width: flex-grid(4, 12);
@@ -24,6 +22,14 @@
       margin-right: flex-gutter(2);
     }
 
+    a {
+      color: $gray;
+
+      &:hover, &:active {
+        color: $gray-d2;
+      }
+    }
+
     .nav-peripheral {
       width: flex-grid(6, 12);
       float: right;
@@ -36,14 +42,33 @@
         &:last-child {
           margin-right: 0;
         }
-      }
-    }
 
-    a {
-      color: $gray-l1;
+        a {
+          @include border-radius(2px);
+          padding: ($baseline/2) ($baseline*0.75);
+          background: transparent;
 
-      &:hover, &:active {
-        color: $blue;
+          .ss-icon {
+            @include transition(top .25s ease-in-out .25s);
+            @include font-size(15);
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: ($baseline/4);
+            color: $gray-l1;
+          }
+
+          &:hover, &:active {
+            color: $gray-d2;
+
+            .ss-icon {
+              color: $gray-d2;
+            }
+          }
+
+          &.is-active {
+            color: $gray-d2;
+          }
+        }
       }
     }
   }

cms/static/sass/elements/_header.scss

@@ -2,7 +2,7 @@
 // ====================
 
 .wrapper-header {
-  margin: 0 0 ($baseline*1.5) 0;
+  margin: 0;
   padding: $baseline;
   border-bottom: 1px solid $gray;
   @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));

cms/static/sass/elements/_icons.scss

@@ -0,0 +1,16 @@
+// studio - elements - icons
+// ====================
+
+.icon {
+
+}
+
+.ss-icon {
+  
+}
+
+.icon-inline {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: ($baseline/4);
+}

cms/static/sass/elements/_sock.scss

@@ -0,0 +1,152 @@
+// studio - elements - support sock
+// ====================
+
+.wrapper-sock {
+  @include clearfix();
+  position: relative;
+  margin: ($baseline*2) 0 0 0;
+  border-top: 1px solid $gray-l4;
+  width: 100%;
+
+  .wrapper-inner {
+    @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
+    @extend .depth0;
+    display: none;
+    width: 100% !important;
+    border-bottom: 1px solid $white;
+    padding: 0 $baseline !important;
+  }
+
+  // sock - actions
+  .list-cta {
+    @extend .depth1;
+    position: absolute;
+    top: -($baseline*0.75);
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+
+    .cta-show-sock {
+      @extend .btn-pill;
+      @extend .t-action3;
+      background: $gray-l5;
+      padding: ($baseline/2) $baseline;
+      color: $gray;
+
+      .icon {
+        @include font-size(16);
+      }
+
+      &:hover {
+        background: $blue;
+        color: $white;
+      }
+    }
+  }
+
+  // sock - additional help
+  .sock {
+    @include clearfix();
+    @extend .t-copy-sub2;
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    padding: ($baseline*2) 0;
+    color: $gray-l3;
+
+    // support body
+    header {
+
+      .title {
+        @extend .t-title-2;
+      }
+
+      .ss-icon {
+        @extend .t-icon;
+        @extend .icon-inline;
+      }
+    }
+
+    // shared elements
+    .support, .feedback {
+      @include box-sizing(border-box);
+
+      .title {
+        @extend .t-title-3;
+        color: $white;
+        margin-bottom: ($baseline/2);
+      }
+
+      .copy {
+        margin: 0 0 $baseline 0;
+      }
+
+      .list-actions {
+        @include clearfix();
+
+        .action-item {
+          float: left;
+          margin-right: ($baseline/2);
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          .action {
+            display: block;
+
+            .icon {
+              @include font-size(18);
+            }
+
+            &:hover, &:active {
+
+            }
+          }
+
+          .tip {
+            @extend .sr;
+          }
+        }
+
+        .action-primary {
+          @extend .btn-primary-blue;
+          @extend .t-action3;
+        }
+      }
+    }
+
+    // studio support content
+    .support {
+      width: flex-grid(8,12);
+      float: left;
+      margin-right: flex-gutter();
+
+      .action-item {
+        width: flexgrid(4,8);
+      }
+    }
+
+    // studio feedback content
+    .feedback {
+      width: flex-grid(4,12);
+      float: left;
+
+      .action-item {
+        width: flexgrid(4,4);
+      }
+    }
+  }
+
+  // case: sock content is shown
+  &.is-shown {
+    border-color: $gray-d3;
+
+    .list-cta .cta-show-sock {
+      background: $gray-d3;
+      border-color: $gray-d3;
+      color: $white;
+    }
+  }
+}

cms/static/sass/elements/_typography.scss

@@ -0,0 +1,85 @@
+// studio - elements - typography
+// ====================
+
+// headings/titles
+.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5, .t-title-5 {
+  color: $gray-d3;
+}
+
+.t-title-1 {
+  @include font-size(36);
+}
+
+.t-title-2 {
+  @include font-size(24);
+  font-weight: 600;
+}
+
+.t-title-3 {
+  @include font-size(16);
+  font-weight: 600;
+}
+
+.t-title-4 {
+
+}
+
+.t-title-5 {
+
+}
+
+// ====================
+
+// copy
+.t-copy-base {
+  @include font-size(16);
+}
+
+.t-copy-lead1 {
+  @include font-size(18);
+}
+
+.t-copy-lead2 {
+  @include font-size(20);
+}
+
+.t-copy-sub1 {
+  @include font-size(14);
+}
+
+.t-copy-sub2 {
+  @include font-size(13);
+}
+
+.t-copy-sub3 {
+  @include font-size(12);
+}
+
+// ====================
+
+// actions/labels
+.t-action1 {
+  @include font-size(14);
+  font-weight: 600;
+}
+
+.t-action2 {
+  @include font-size(13);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.t-action3 {
+  @include font-size(13);
+}
+
+.t-action4 {
+  @include font-size(12);
+}
+
+// ====================
+
+// misc
+.t-icon {
+  line-height: 0;
+}

cms/static/sass/views/_account.scss

@@ -71,7 +71,7 @@ body.signup, body.signin {
           @include blue-button;
           @include transition(all .15s);
           @include font-size(15);
-          display:block;
+          display: block;
           width: 100%;
           padding: ($baseline*0.75) ($baseline/2);
           font-weight: 600;

cms/static/sass/views/_index.scss

@@ -9,17 +9,6 @@ body.index {
       margin-bottom: 0;
     }
 
-    .wrapper-footer {
-      margin: 0;
-      border-top: 2px solid $gray-l3;
-
-      footer.primary {
-        border: none;
-        margin-top: 0;
-        padding-top: 0;
-      }
-    }
-
     .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
       @include box-sizing(border-box);
       margin: 0;
@@ -199,7 +188,7 @@ body.index {
           img {
             display: block;
             width: 100%;
-            height: 100%;
+            height: auto;
           }
         }
 
@@ -306,8 +295,8 @@ body.index {
 
     // call to action content
     .wrapper-content-cta {
-      padding-bottom: ($baseline*2);
-      padding-top: ($baseline*2);
+      position: relative;
+      padding: ($baseline*2) 0;
       background: $white;
     }