studio - sass cleanup: adding in more color variables, proofing box-sizing and older/rougher unit scss

cms/static/sass/_reset.scss

@@ -1,9 +1,9 @@
 // studio - utilities - reset
 // ====================
 
-* {
-	@include box-sizing(border-box);
-}
+// * {
+// 	@include box-sizing(border-box);
+// }
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

cms/static/sass/_variables.scss

@@ -18,7 +18,15 @@ $body-line-height: golden-ratio(.875em, 1);
 
 // colors - new for re-org
 $black: rgb(0,0,0);
+$black-t0: rgba(0,0,0,0.125);
+$black-t1: rgba(0,0,0,0.25);
+$black-t2: rgba(0,0,0,0.50);
+$black-t3: rgba(0,0,0,0.75);
 $white: rgb(255,255,255);
+$white-t0: rgba(255,255,255,0.125);
+$white-t1: rgba(255,255,255,0.25);
+$white-t2: rgba(255,255,255,0.50);
+$white-t3: rgba(255,255,255,0.75);
 
 $gray: rgb(127,127,127);
 $gray-l1: tint($gray,20%);
@@ -41,6 +49,12 @@ $blue-d1: shade($blue,20%);
 $blue-d2: shade($blue,40%);
 $blue-d3: shade($blue,60%);
 $blue-d4: shade($blue,80%);
+$blue-s1: saturate($blue,15%);
+$blue-s2: saturate($blue,30%);
+$blue-s3: saturate($blue,45%);
+$blue-u1: desaturate($blue,15%);
+$blue-u2: desaturate($blue,30%);
+$blue-u3: desaturate($blue,45%);
 
 $pink: rgb(183, 37, 103);
 $pink-l1: tint($pink,20%);
@@ -52,6 +66,29 @@ $pink-d1: shade($pink,20%);
 $pink-d2: shade($pink,40%);
 $pink-d3: shade($pink,60%);
 $pink-d4: shade($pink,80%);
+$pink-s1: saturate($pink,15%);
+$pink-s2: saturate($pink,30%);
+$pink-s3: saturate($pink,45%);
+$pink-u1: desaturate($pink,15%);
+$pink-u2: desaturate($pink,30%);
+$pink-u3: desaturate($pink,45%);
+
+$red: rgb(178, 6, 16);
+$red-l1: tint($red,20%);
+$red-l2: tint($red,40%);
+$red-l3: tint($red,60%);
+$red-l4: tint($red,80%);
+$red-l5: tint($red,90%);
+$red-d1: shade($red,20%);
+$red-d2: shade($red,40%);
+$red-d3: shade($red,60%);
+$red-d4: shade($red,80%);
+$red-s1: saturate($red,15%);
+$red-s2: saturate($red,30%);
+$red-s3: saturate($red,45%);
+$red-u1: desaturate($red,15%);
+$red-u2: desaturate($red,30%);
+$red-u3: desaturate($red,45%);
 
 $green: rgb(37, 184, 90);
 $green-l1: tint($green,20%);
@@ -63,6 +100,12 @@ $green-d1: shade($green,20%);
 $green-d2: shade($green,40%);
 $green-d3: shade($green,60%);
 $green-d4: shade($green,80%);
+$green-s1: saturate($green,15%);
+$green-s2: saturate($green,30%);
+$green-s3: saturate($green,45%);
+$green-u1: desaturate($green,15%);
+$green-u2: desaturate($green,30%);
+$green-u3: desaturate($green,45%);
 
 $yellow: rgb(231, 214, 143);
 $yellow-l1: tint($yellow,20%);
@@ -74,6 +117,29 @@ $yellow-d1: shade($yellow,20%);
 $yellow-d2: shade($yellow,40%);
 $yellow-d3: shade($yellow,60%);
 $yellow-d4: shade($yellow,80%);
+$yellow-s1: saturate($yellow,15%);
+$yellow-s2: saturate($yellow,30%);
+$yellow-s3: saturate($yellow,45%);
+$yellow-u1: desaturate($yellow,15%);
+$yellow-u2: desaturate($yellow,30%);
+$yellow-u3: desaturate($yellow,45%);
+
+$orange: rgb(237, 189, 60);
+$orange-l1: tint($orange,20%);
+$orange-l2: tint($orange,40%);
+$orange-l3: tint($orange,60%);
+$orange-l4: tint($orange,80%);
+$orange-l5: tint($orange,90%);
+$orange-d1: shade($orange,20%);
+$orange-d2: shade($orange,40%);
+$orange-d3: shade($orange,60%);
+$orange-d4: shade($orange,80%);
+$orange-s1: saturate($orange,15%);
+$orange-s2: saturate($orange,30%);
+$orange-s3: saturate($orange,45%);
+$orange-u1: desaturate($orange,15%);
+$orange-u2: desaturate($orange,30%);
+$orange-u3: desaturate($orange,45%);
 
 $shadow: rgba(0,0,0,0.2);
 $shadow-l1: rgba(0,0,0,0.1);
@@ -82,8 +148,6 @@ $shadow-d1: rgba(0,0,0,0.4);
 // colors - inherited 
 $baseFontColor: #3c3c3c;
 $offBlack: #3c3c3c;
-$orange: #edbd3c;
-$red: #b20610;
 $green: #108614;
 $lightGrey: #edf1f5;
 $mediumGrey: #b0b6c2;

cms/static/sass/views/_unit.scss

@@ -385,12 +385,6 @@ body.course.unit {
         border-color: #6696d7;
       }
 
-      .component-actions {
-        position: absolute;
-        top: 7px;
-        right: 9px;
-      }
-
       .drag-handle {
         position: absolute;
         display: block;
@@ -661,27 +655,27 @@ body.course.unit {
       display: none;
     }
   }
+}
 
-  // editing units from courseware
-  body.unit {
+// editing units from courseware
+body.unit {
 
-    .component {
-      padding-top: 30px;
+  .component {
+    padding-top: 30px;
 
-      .component-actions {
-        @include box-sizing(border-box);
-        position: absolute;
-        width: 100%;
-        padding: 15px;
-        top: 0;
-        left: 0;
-        border-bottom: 1px solid $lightBluishGrey2;
-        background: $lightGrey;
-      }
+    .component-actions {
+      @include box-sizing(border-box);
+      position: absolute;
+      width: 100%;
+      padding: 15px;
+      top: 0;
+      left: 0;
+      border-bottom: 1px solid $lightBluishGrey2;
+      background: $lightGrey;
+    }
 
-      &.editing {
-        padding-top: 0;
-      }
+    &.editing {
+      padding-top: 0;
     }
   }
 }