Studio: references newly renamed app-wide Sass extends

cms/static/sass/_base.scss

@@ -576,7 +576,7 @@ p, ul, ol, dl {
 
 // misc
 hr.divide {
-  @extend .text-sr;
+  @extend .cont-text-sr;
 }
 
 .item-details {
@@ -824,7 +824,7 @@ hr.divide {
 
 // basic utility
 .sr {
-  @extend .text-sr;
+  @extend .cont-text-sr;
 }
 
 .fake-link {

cms/static/sass/elements/_controls.scss

@@ -3,7 +3,7 @@
 
 // gray primary button
 .btn-primary-gray {
-  @extend .btn-primary;
+  @extend .ui-btn-primary;
   background: $gray-l1;
   border-color: $gray-l2;
   color: $white;
@@ -25,7 +25,7 @@
 
 // blue primary button
 .btn-primary-blue {
-  @extend .btn-primary;
+  @extend .ui-btn-primary;
   background: $blue;
   border-color: $blue-s1;
   color: $white;
@@ -48,7 +48,7 @@
 
 // green primary button
 .btn-primary-green {
-  @extend .btn-primary;
+  @extend .ui-btn-primary;
   background: $green;
   border-color: $green;
   color: $white;
@@ -71,7 +71,7 @@
 
 // gray secondary button
 .btn-secondary-gray {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
   border-color: $gray-l3;
   color: $gray-l1;
 
@@ -92,7 +92,7 @@
 
 // blue secondary button
 .btn-secondary-blue {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
   border-color: $blue-l3;
   color: $blue;
 
@@ -114,7 +114,7 @@
 
 // green secondary button
 .btn-secondary-green {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
   border-color: $green-l4;
   color: $green-l2;
 

cms/static/sass/elements/_header.scss

@@ -2,10 +2,10 @@
 // ====================
 
 .wrapper-header {
-  @extend .depth3;
-  box-shadow: 0 1px 2px 0 $shadow-l1;
+  @extend .ui-depth3;
   position: relative;
   width: 100%;
+  box-shadow: 0 1px 2px 0 $shadow-l1;
   margin: 0;
   padding: 0 $baseline;
   background: $white;
@@ -22,7 +22,6 @@
   // ====================
 
   // basic layout
-
   .wrapper-l, .wrapper-r {
     background: $white;
   }

cms/static/sass/elements/_modal.scss

@@ -2,7 +2,7 @@
 // ====================
 
 .modal-cover {
-	@extend .depth3;
+	@extend .ui-depth3;
 	display: none;
 	position: fixed;
 	top: 0;
@@ -13,7 +13,7 @@
 }
 
 .modal {
-	@extend .depth4;
+	@extend .ui-depth4;
 	display: none;
 	position: fixed;
 	top: 60px;
@@ -61,7 +61,7 @@
 
 // lean modal alternative
 #lean_overlay {
-	@extend .depth4;
+	@extend .ui-depth4;
 	position: fixed;
 	top: 0px;
 	left: 0px;

cms/static/sass/elements/_navigation.scss

@@ -5,7 +5,7 @@
 nav {
 
   ol, ul {
-    @extend .no-list;
+    @extend .cont-no-list;
   }
 
   .nav-item {

cms/static/sass/elements/_sock.scss

@@ -10,7 +10,7 @@
 
   .wrapper-inner {
     @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
-    @extend .depth0;
+    @extend .ui-depth0;
     display: none;
     width: 100% !important;
     border-bottom: 1px solid $white;
@@ -19,7 +19,7 @@
 
   // sock - actions
   .list-cta {
-    @extend .depth1;
+    @extend .ui-depth1;
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -27,7 +27,7 @@
     text-align: center;
 
     .cta-show-sock {
-      @extend .btn-pill;
+      @extend .ui-btn-pill;
       @extend .t-action4;
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
@@ -113,7 +113,7 @@
         }
 
         .action-primary {
-          @extend .btn-primary-blue;
+          @extend .ui-btn-primary-blue;
           @extend .t-action3;
         }
       }

cms/static/sass/elements/_system-feedback.scss

@@ -144,8 +144,8 @@
 
 // prompts
 .wrapper-prompt {
-  @extend .depth5;
-  @include transition(all $tmg-f3 ease-in-out 0s);
+  @extend .ui-depth5;
+  @include transition(all $tmg-f3 ease-in-out  0s);
   position: fixed;
   top: 0;
   background: $black-t0;
@@ -242,7 +242,7 @@
 
 // notifications
 .wrapper-notification {
-  @extend .depth5;
+  @extend .ui-depth5;
   @include clearfix();
   box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
   position: fixed;
@@ -444,7 +444,7 @@
     }
 
     .copy p {
-      @extend .text-sr;
+      @extend .cont-text-sr;
     }
   }
 }
@@ -453,7 +453,7 @@
 
 // alerts
 .wrapper-alert {
-  @extend .depth2;
+  @extend .ui-depth2;
   @include box-sizing(border-box);
   box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
   position: relative;
@@ -599,7 +599,7 @@
     text-align: center;
 
     .label {
-      @extend .text-sr;
+      @extend .cont-text-sr;
     }
 
     [class^="icon"] {
@@ -696,7 +696,7 @@ body.uxdesign.alerts {
   }
 
   .content-primary {
-    @extend .window;
+    @extend .ui-window;
     width: flex-grid(12, 12);
     margin-right: flex-gutter();
     padding: $baseline ($baseline*1.5);

cms/static/sass/views/_checklists.scss

@@ -14,7 +14,7 @@ body.course.checklists {
 
   // checklists - general
   .course-checklist {
-    @extend .window;
+    @extend .ui-window;
     margin: 0 0 ($baseline*2) 0;
 
     &:last-child {
@@ -23,7 +23,7 @@ body.course.checklists {
 
     // visual status
     .viz-checklist-status {
-      @extend .text-hide;
+      @extend .cont-text-hide;
       @include size(100%,($baseline/4));
       position: relative;
       display: block;
@@ -40,7 +40,7 @@ body.course.checklists {
         background: $green;
 
         .int {
-          @extend .text-sr;
+          @extend .cont-text-sr;
         }
       }
     }

cms/static/sass/views/_export.scss

@@ -2,9 +2,9 @@
 // ====================
 
 body.course.export {
-  
+
   .export-overview {
-    @extend .window;
+    @extend .ui-window;
     @include clearfix;
     padding: 30px 40px;
   }
@@ -40,7 +40,7 @@ body.course.export {
   }
 
   .export-form-wrapper {
-  
+
     .export-form {
       float: left;
       width: 35%;
@@ -122,4 +122,4 @@ body.course.export {
       }
     }
   }
-}
\ No newline at end of file
+}

cms/static/sass/views/_import.scss

@@ -2,9 +2,9 @@
 // ====================
 
 body.course.import {
-  
+
   .import-overview {
-    @extend .window;
+    @extend .ui-window;
     @include clearfix;
     padding: 30px 40px;
   }
@@ -103,4 +103,4 @@ body.course.import {
     color: #fff;
     line-height: 48px;
   }
-}
\ No newline at end of file
+}

cms/static/sass/views/_settings.scss

@@ -9,7 +9,7 @@ body.course.settings {
   }
 
   .content-primary {
-    @extend .window;
+    @extend .ui-window;
     width: flex-grid(9, 12);
     margin-right: flex-gutter();
     padding: $baseline ($baseline*1.5);

cms/static/sass/views/_static-pages.scss

@@ -171,7 +171,7 @@ body.course.static-pages {
   }
 
   .static-page-details {
-    @extend .window;
+    @extend .ui-window;
     padding: 32px 40px;
 
     .row {