Studio: renames and re-orgs app-wide Sass extends

cms/static/sass/_mixins-inherited.scss

-../../../common/static/sass/_mixins-inherited.scss
\ No newline at end of file

cms/static/sass/views/_textbooks.scss

@@ -115,7 +115,7 @@ body.course.textbooks {
             }
 
             .delete {
-              @extend .btn-non;
+              @extend .ui-btn-non;
             }
           }
 
@@ -320,7 +320,7 @@ body.course.textbooks {
             }
 
             .action-upload {
-                @extend .btn-flat-outline;
+                @extend .ui-btn-flat-outline;
                 position: absolute;
                 top: 3px;
                 right: 0;
@@ -348,7 +348,7 @@ body.course.textbooks {
 
 
       .action-add-chapter {
-        @extend .btn-flat-outline;
+        @extend .ui-btn-flat-outline;
         @include font-size(16);
         display: block;
         width: 100%;

common/static/sass/_mixins.scss

@@ -26,7 +26,6 @@
   @include size($size);
 }
 
-
 // ====================
 
 // mixins - placeholder styling
@@ -44,78 +43,45 @@
 
 // ====================
 
-// extends - layout
-
-// used for page/view-level wrappers (for centering/grids)
-.wrapper {
+// extends - UI - used for page/view-level wrappers (for centering/grids)
+.ui-wrapper {
   @include clearfix();
   @include box-sizing(border-box);
   width: 100%;
 }
 
-// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
-.no-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  text-indent: 0;
-
-  li {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-// extends - image-replacement hidden text
-.text-hide {
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-// extends - hidden elems - screenreaders
-.text-sr {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-// extends - wrapping
-.text-wrap {
-  text-wrap: wrap;
-  white-space: pre-wrap;
-  white-space: -moz-pre-wrap;
-  word-wrap: break-word;
+// extends - UI - window
+.ui-window {
+  @include clearfix();
+  @include border-radius(3px);
+  @include box-shadow(0 1px 1px $shadow-l1);
+  margin-bottom: $baseline;
+  border: 1px solid $gray-l2;
+  background: $white;
 }
 
-// extends - visual link
-.fake-link {
+// extends - UI - visual link
+.ui-fake-link {
   cursor: pointer;
 }
 
-// extends - functional disable
-.disabled {
+// extends - UI - functional disable
+.ui-disabled {
   pointer-events: none;
   outline: none;
 }
 
-// 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; }
+// extends - UI - depth levels
+.ui-depth0 { z-index: 0; }
+.ui-depth1 { z-index: 10; }
+.ui-depth2 { z-index: 100; }
+.ui-depth3 { z-index: 1000; }
+.ui-depth4 { z-index: 10000; }
+.ui-depth5 { z-index: 100000; }
 
-// ====================
 
-// extends - buttons
-.btn {
+// extends - UI - buttons
+.ui-btn {
   @include box-sizing(border-box);
   @include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
   display: inline-block;
@@ -139,18 +105,18 @@
 }
 
 // pill button
-.btn-pill {
+.ui-btn-pill {
   border-radius: ($baseline/5);
 }
 
-.btn-rounded {
+.ui-btn-rounded {
   border-radius: ($baseline/2);
 }
 
 // primary button
-.btn-primary {
-  @extend .btn;
-  @extend .btn-pill;
+.ui-btn-primary {
+  @extend .ui-btn;
+  @extend .ui-btn-pill;
   padding:($baseline/2) $baseline;
   border-width: 1px;
   border-style: solid;
@@ -172,8 +138,8 @@
 
 // secondary button
 .btn-secondary {
-  @extend .btn;
-  @extend .btn-pill;
+  @extend .ui-btn;
+  @extend .ui-btn-pill;
   border-width: 1px;
   border-style: solid;
   padding:($baseline/2) $baseline;
@@ -190,7 +156,7 @@
   }
 }
 
-.btn-flat-outline {
+.ui-btn-flat-outline {
   @extend .t-action4;
   @include transition(all .15s);
   font-weight: 600;
@@ -217,7 +183,7 @@
 }
 
 // button with no button shell until hover for understated actions
-.btn-non {
+.ui-btn-non {
   @include transition(all .15s);
   border: none;
   border-radius: ($baseline/4);
@@ -236,8 +202,61 @@
   }
 }
 
-// UI archetypes - well
+// extends - UI archetypes - well
 .ui-well {
   box-shadow: inset 0 1px 2px 1px $shadow;
   padding: ($baseline*0.75);
 }
+
+// ====================
+
+// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
+.cont-no-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// extends - content - image-replacement hidden text
+.cont-text-hide {
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// extends - content - hidden elems - screenreaders
+.cont-text-sr {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// extends - content - wrapping
+.cont-text-wrap {
+  text-wrap: wrap;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  word-wrap: break-word;
+}
+
+// content - text overflow by ellipsis
+.cont-overflow-elip {
+  @include box-sizing(border-box);
+  display: block;
+  width: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+>>>>>>> Studio: renames and re-orgs app-wide Sass extends