studio - adding files I forgot to add when cleaning up Sass and originally committing

cms/static/sass/elements/_alerts.scss

@@ -0,0 +1,165 @@
+// studio - elements - alerts, notifications, prompts
+// ====================
+
+// notifications
+.wrapper-notification {
+	@include clearfix();
+	@include box-sizing(border-box);
+	@include transition (bottom 2.0s ease-in-out 5s);
+	@include box-shadow(0 -1px 2px rgba(0,0,0,0.1));
+	position: fixed;
+	bottom: -100px;
+	z-index: 1000;
+	width: 100%;
+	overflow: hidden;
+	opacity: 0;
+	border-top: 1px solid $darkGrey;
+	padding: 20px 40px;
+
+	&.is-shown {
+		bottom: 0;
+		opacity: 1.0;
+	}
+
+	&.wrapper-notification-warning {
+		border-color: shade($yellow, 25%);
+		background: tint($yellow, 25%);
+	}
+
+	&.wrapper-notification-error {
+		border-color: shade($red, 50%);
+		background: tint($red, 20%);
+		color: $white;
+	}
+
+	&.wrapper-notification-confirm {
+		border-color: shade($green, 30%);
+		background: tint($green, 40%);
+		color: shade($green, 30%);
+	}
+}
+
+.notification {
+	@include box-sizing(border-box);
+	margin: 0 auto;
+	width: flex-grid(12);
+	max-width: $fg-max-width;
+	min-width: $fg-min-width;
+
+	.copy {
+		float: left;
+		width: flex-grid(9, 12);
+		margin-right: flex-gutter();
+		margin-top: 5px;
+		font-size: 14px;
+
+		.icon {
+			display: inline-block;
+			vertical-align: top;
+			margin-right: 5px;
+			font-size: 20px;
+		}
+
+		p {
+			width: flex-grid(8, 9);
+			display: inline-block;
+			vertical-align: top;
+		}
+	}
+
+	.actions {
+		float: right;
+		width: flex-grid(3, 12);
+		margin-top: ($baseline/2);
+		text-align: right;
+
+		li {
+			display: inline-block;
+			vertical-align: middle;
+			margin-right: 10px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+
+		.save-button {
+			@include blue-button;
+		}
+
+		.cancel-button {
+		  @include white-button;
+		}
+	}
+
+	strong {
+		font-weight: 700;
+	}
+}
+
+// adopted alerts
+.alert {
+	padding: 15px 20px;
+	margin-bottom: 30px;
+	border-radius: 3px;
+	border: 1px solid #edbd3c;
+	border-radius: 3px;
+	background: #fbf6e1;
+	// background: #edbd3c;
+	font-size: 14px;
+	@include clearfix;
+
+	.alert-message {
+		float: left;
+		margin-top: 4px;
+	}
+
+	strong {
+		font-weight: 700;
+	}
+
+	.alert-action {
+		float: right;
+
+		&.secondary {
+			@include orange-button;
+		}
+	}
+}
+
+body.error {
+	background: $darkGrey;
+	color: #3c3c3c;
+
+	.primary-header {
+		display: none;
+	}
+
+	.error-prompt {
+		width: 700px;
+		margin: 150px auto;
+		padding: 60px 50px 90px;
+		border-radius: 3px;
+		background: #fff;
+		text-align: center;
+	}
+
+	h1 {
+		float: none;
+		margin: 0;
+		font-size: 60px;
+		font-weight: 300;		
+		color: #3c3c3c;
+	}
+
+	.description {
+		margin-bottom: 50px;
+		font-size: 21px;
+	}
+
+	.back-button {
+		@include blue-button;
+		padding: 14px 40px 18px;
+		font-size: 18px;
+	}
+}

cms/static/sass/elements/_footer.scss

@@ -0,0 +1,50 @@
+// studio - global footer
+// ====================
+
+.wrapper-footer {
+  margin: ($baseline*1.5) 0 $baseline 0;
+  padding: $baseline;
+  position: relative;
+  width: 100%;
+
+  footer.primary {
+    @include clearfix();
+    @include font-size(13);
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    padding-top: $baseline;
+    border-top: 1px solid $gray-l4;
+    color: $gray-l2;
+
+    .colophon {
+      width: flex-grid(4, 12);
+      float: left;
+      margin-right: flex-gutter(2);
+    }
+
+    .nav-peripheral {
+      width: flex-grid(6, 12);
+      float: right;
+      text-align: right;
+
+      .nav-item {
+        display: inline-block;
+        margin-right: ($baseline/2);
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    a {
+      color: $gray-l1;
+
+      &:hover, &:active {
+        color: $blue;
+      }
+    }
+  }
+}

cms/static/sass/elements/_header.scss

@@ -0,0 +1,558 @@
+// studio - global header
+// ====================
+
+.wrapper-header {
+  margin: 0 0 ($baseline*1.5) 0;
+  padding: $baseline;
+  border-bottom: 1px solid $gray;
+  @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+  background: $white;
+  height: 76px;
+  position: relative;
+  width: 100%;
+  z-index: 10;
+
+  a {
+    color: $baseFontColor;
+    display: block;
+
+    &:hover, &:active {
+      color: $blue;
+    }
+  }
+
+  header.primary {
+    @include clearfix();
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    color: $gray-l1;
+  }
+}
+
+// ====================
+
+// basic layout
+.wrapper-left, .wrapper-right {
+  @include box-sizing(border-box);
+}
+
+.wrapper-left {
+  width: flex-grid(10, 12);
+  float: left;
+  margin-right: flex-gutter();
+}
+
+.wrapper-right {
+  width: flex-grid(2, 12);
+  float: right;
+}
+
+// ====================
+
+// specific elements - branding
+.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.branding {
+  position: relative;
+  margin: 0 ($baseline/2) 0 0;
+  padding-right: ($baseline*0.75);
+
+  a {
+    @include text-hide();
+    display: block;
+    width: 164px;
+    height: 32px;
+    background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
+  }
+}
+
+// ====================
+
+// specific elements - course name/info
+.info-course {
+  @include font-size(14);
+  position: relative;
+  margin: -3px ($baseline/2) 0 0;
+  padding-right: ($baseline*0.75);
+
+  &:before {
+    @extend .faded-vertical-divider;
+    content: "";
+    display: block;
+    height: 50px;
+    position: absolute;
+    right: 1px;
+    top: -8px;
+    width: 1px;
+  }
+
+  &:after {
+    @extend .faded-vertical-divider-light;
+    content: "";
+    display: block;
+    height: 50px;
+    position: absolute;
+    right: 0px;
+    top: -12px;
+    width: 1px;
+  }
+
+  .course-org {
+    margin-right: ($baseline/4);
+  }
+
+  .course-number, .course-org {
+    @include font-size(12);
+    display: inline-block;
+  }
+
+  .course-title {
+    display: block;
+    width: 100%;
+    max-width: 220px;
+    overflow: hidden;
+    margin-top: -4px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    @include font-size(16);
+    font-weight: 600;
+  }
+}
+
+// ====================
+
+// specific elements - course nav
+.nav-course {
+  width: 335px;
+  margin-top: -($baseline/4);
+  @include font-size(14);
+
+  > ol > .nav-item {
+    vertical-align: bottom;
+    margin: 0 ($baseline/2) 0 0;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .title {
+      display: block;
+      padding: 5px;
+      text-transform: uppercase;
+      font-weight: 600;
+      color: $gray-d3;
+
+      .label-prefix {
+        display: block;
+        @include font-size(11);
+        font-weight: 400;
+      }
+    }
+
+    // specific nav items
+    &.nav-course-courseware {
+    }
+
+    &.nav-course-settings {
+    }
+
+    &.nav-course-tools {
+    }
+  }
+}
+
+// ====================
+
+// specific elements - account-based nav
+.nav-account {
+  width: 100%;
+  margin-top: ($baseline*0.75);
+  @include font-size(14);
+  text-align: right;
+
+  .nav-account-username {
+    width: 100%;
+
+    .icon-user {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 3px;
+      @include font-size(12);
+    }
+
+    .account-username {
+      display: inline-block;
+      vertical-align: middle;
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .icon-expand {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
+
+// ====================
+
+// UI - dropdown
+.nav-dropdown {
+
+  .nav-item {
+    position: relative;
+
+    .icon-expand {
+      @include font-size(14);
+      @include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
+      display: inline-block;
+      margin-left: 2px;
+      opacity: 0.5;
+      color: $gray-l2;
+    }
+
+    &:hover {
+
+      .icon-expand {
+        color: $blue;
+        opacity: 1.0;
+      }
+    }
+  }
+
+  .wrapper-nav-sub {
+    position: absolute;
+    left: -7px;
+    top: 47px;
+    width: 140px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .nav-sub {
+    @include border-radius(2px);
+    @include box-sizing(border-box);
+    @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+    position: relative;
+    width: 100%;
+    border: 1px solid $gray-l2;
+    padding: ($baseline/4) ($baseline/2);
+    background: $white;
+
+    &:after, &:before {
+      bottom: 100%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    &:after {
+      border-color: rgba(255, 255, 255, 0);
+      border-bottom-color: #fff;
+      border-width: 5px;
+      right: 3px;
+      margin-left: -5px;
+    }
+
+    &:before {
+      border-color: rgba(178, 178, 178, 0);
+      border-bottom-color: $gray-l2;
+      border-width: 6px;
+      right: 3px;
+      margin-left: -6px;
+    }
+
+    .nav-item {
+      display: block;
+      margin: 0 0 ($baseline/4) 0;
+      border-bottom: 1px solid $gray-l5;
+      padding: 0 0($baseline/4) 0;
+      @include font-size(13);
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      a {
+        display: block;
+      }
+    }
+  }
+
+  // UI - dropdown - specific navs
+  &.nav-account {
+
+    .wrapper-nav-sub {
+      top: 27px;
+      left: auto;
+      right: -13px;
+      width: 110px;
+    }
+
+    .nav-sub {
+      text-align: left;
+
+      .icon-expand {
+        top: -2px;
+      }
+    }
+
+    .nav-sub:after {
+      left: auto;
+      right: 11px;
+    }
+
+    .nav-sub:before {
+      left: auto;
+      right: 10px;
+    }
+  }
+
+  &.nav-course {
+
+    .nav-course-courseware {
+
+      .nav-sub:after {
+        left: 88px;
+      }
+
+      .nav-sub:before {
+        left: 88px;
+      }
+    }
+
+    .nav-course-settings {
+
+      .nav-sub:after {
+        left: 88px;
+      }
+
+      .nav-sub:before {
+        left: 88px;
+      }
+    }
+
+    .nav-course-tools {
+
+      .wrapper-nav-sub {
+        top: ($baseline*1.5);
+        width: 100px;
+      }
+
+      .nav-sub:after {
+        left: 68px;
+      }
+
+      .nav-sub:before {
+        left: 68px;
+      }
+    }
+  }
+}
+
+// ====================
+
+// STATE: is-signed in
+.is-signedin {
+
+  &.course .branding {
+
+    &:before {
+      @extend .faded-vertical-divider;
+      content: "";
+      display: block;
+      height: 50px;
+      position: absolute;
+      right: 1px;
+      top: -8px;
+      width: 1px;
+    }
+
+    &:after {
+      @extend .faded-vertical-divider-light;
+      content: "";
+      display: block;
+      height: 50px;
+      position: absolute;
+      right: 0px;
+      top: -12px;
+      width: 1px;
+    }
+  }
+}
+
+// ====================
+
+// STATE: not signed in
+.not-signedin {
+
+  .wrapper-left {
+    width: flex-grid(4, 12);
+  }
+
+  .wrapper-right {
+    width: flex-grid(8, 12);
+  }
+
+  // STATE: not signed in - unauthenticated nav
+  .nav-not-signedin {
+    float: right;
+    margin-top: ($baseline/4);
+
+    .nav-item {
+      @include font-size(16);
+      vertical-align: middle;
+      margin: 0 $baseline 0 0;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .action {
+        margin-top: -($baseline/4);
+        display: inline-block;
+        padding: ($baseline/4) ($baseline/2);
+      }
+    }
+
+    // STATE: not signed in - specific items
+    .nav-not-signedin-help {
+
+    }
+
+    .nav-not-signedin-signup {
+      margin-right: ($baseline/2);
+
+      .action-signup {
+        @include blue-button;
+        @include transition(all .15s);
+        @include font-size(14);
+        padding: ($baseline/4) ($baseline/2);
+        text-transform: uppercase;
+        font-weight: 600;
+      }
+    }
+
+    .nav-not-signedin-signin {
+
+      .action-signin {
+        @include white-button;
+        @include transition(all .15s);
+        @include font-size(14);
+        padding: ($baseline/4) ($baseline/2);
+        text-transform: uppercase;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+// ====================
+
+// STATE: active/current nav states
+
+.nav-item.is-current,
+body.howitworks .nav-not-signedin-hiw,
+
+// dashboard
+body.dashboard .nav-account-dashboard,
+
+// course content
+body.course.outline .nav-course-courseware .title,
+body.course.updates .nav-course-courseware .title,
+body.course.pages .nav-course-courseware .title,
+body.course.uploads .nav-course-courseware .title,
+
+body.course.outline .nav-course-courseware-outline,
+body.course.updates .nav-course-courseware-updates,
+body.course.pages .nav-course-courseware-pages,
+body.course.uploads .nav-course-courseware-uploads,
+
+// course settings
+body.course.schedule .nav-course-settings .title,
+body.course.grading .nav-course-settings .title,
+body.course.team .nav-course-settings .title,
+body.course.advanced .nav-course-settings .title,
+
+body.course.schedule .nav-course-settings-schedule,
+body.course.grading .nav-course-settings-grading,
+body.course.team .nav-course-settings-team,
+body.course.advanced .nav-course-settings-advanced,
+
+// course tools
+body.course.import .nav-course-tools .title,
+body.course.export .nav-course-tools .title,
+
+body.course.import .nav-course-tools-import,
+body.course.export .nav-course-tools-export,
+
+{
+
+  color: $blue;
+
+  a {
+    color: $blue;
+    pointer-events: none;
+  }
+}
+
+body.signup .nav-not-signedin-signin {
+
+  a {
+    background-color: #d9e3ee;
+    color: #6d788b;    
+  }
+}
+
+body.signin .nav-not-signedin-signup {
+  
+  a {
+    background-color: #62aaf5;
+    color: #fff;    
+  }
+}
+
+// ====================
+
+// STATE: js enabled 
+.js {
+
+  .nav-dropdown {
+
+    .nav-item .title {
+      outline: 0;
+      cursor: pointer;
+
+      &:hover, &:active, &.is-selected {
+        color: $blue;
+
+        .icon-expand {
+          color: $blue;
+        }
+      }
+    }
+  }
+
+  .wrapper-nav-sub {
+    @include transition (opacity 1.0s ease-in-out 0s);
+    opacity: 0;
+    pointer-events: none;
+
+    &.is-shown {
+      opacity: 1.0;
+      pointer-events: auto;
+    }
+  }
+}

cms/static/sass/elements/_jquery-ui-calendar.scss

@@ -0,0 +1,56 @@
+// studio - elements - JQUI calendar
+// ====================
+
+.ui-datepicker {
+  border-color: $darkGrey;
+  border-radius: 2px;
+  background: #fff;
+  font-family: $sans-serif;
+  font-size: 12px;
+  @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
+
+  .ui-widget-header {
+    background: $darkGrey;
+    border: none;
+    border-radius: 2px;
+  }
+
+  .ui-datepicker-next,
+  .ui-datepicker-prev {
+    @include transition(none);
+
+    &.ui-state-hover {
+      border-color: transparent;
+      background: $mediumGrey;
+
+      .ui-icon-circle-triangle-e,
+      .ui-icon-circle-triangle-w {
+        background-image: url(../css/vendor/ui-lightness/images/ui-icons_ffffff_256x240.png);
+      }
+    }
+  }
+
+  .ui-state-default {
+    border-color: $mediumGrey;
+    color: $blue;
+    @include transition(none);
+
+    &.ui-state-hover {
+      background: $orange;
+      border-color: $orange;
+      color: #fff;
+    }
+  }
+
+  .ui-state-highlight {
+    background: $blue;
+    border-color: $blue;
+    color: #fff;
+  }
+
+  .ui-state-active {
+    background: $orange;
+    border-color: $orange;
+    color: #fff;
+  }
+}

cms/static/sass/elements/_modal.scss

@@ -0,0 +1,72 @@
+// studio - elements - modal windows
+// ====================
+
+.modal-cover {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, .8);
+}
+
+.modal {
+	display: none;
+	position: fixed;
+	top: 60px;
+	left: 50%;
+	z-index: 1001;
+	width: 930px;
+	height: 540px;
+	margin-left: -465px;
+	background: #fff;
+
+	.modal-body {
+		height: 400px;
+		padding: 40px;
+		overflow-y: scroll;
+	}
+
+	.modal-actions {
+		height: 60px;
+		@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+		background-color: #d1dae3;
+	}
+
+	h2 {
+		margin: 0 10px 30px;
+		color: #646464;
+		font-size: 19px;
+		font-weight: 300;
+		letter-spacing: 1px;
+		text-transform: uppercase;
+	}
+
+	p {
+		margin: 20px;
+	}
+
+	.revert-button {
+		@include blue-button;
+		margin: 13px 6px 0 13px;
+	}
+
+	.close-button {
+		@include white-button;
+		margin-top: 13px;
+	}
+}
+
+// lean modal alternative
+#lean_overlay {
+	position: fixed;
+	z-index: 10000;
+	top: 0px;
+	left: 0px;
+	display: none;
+	height: 100%;
+	width: 100%;
+	background: $black;
+}

cms/static/sass/elements/_navigation.scss

@@ -0,0 +1,31 @@
+// studio - elements - navigation
+// ====================
+
+// common
+
+// ====================
+
+// primary
+nav.primary {
+
+  .nav-item {
+    display: inline-block;
+  }
+}
+
+
+// ====================
+
+// right hand side
+
+// ====================
+
+// tabs
+
+// ====================
+
+// dropdown
+
+// ====================
+
+//