Support level support for Studio xblock creation.

TNL-4670

cms/static/sass/_build-v1.scss

@@ -10,7 +10,7 @@
 
 // +Base - Utilities
 // ====================
-@import 'variables';
+@import 'partials/variables';
 @import 'mixins';
 @import 'mixins-inherited';
 

cms/static/sass/elements/_modules.scss

@@ -168,18 +168,47 @@
 
     // specific menu types
     &.new-component-problem {
-      padding-bottom: ($baseline/2);
-
       .problem-type-tabs {
         display: inline-block;
       }
     }
+
+    .support-documentation {
+      float: right;
+      @include margin($baseline, 0, ($baseline/2), ($baseline/2));
+      @include font-size(14);
+
+      .support-documentation-level {
+        padding-right: ($baseline/2);
+      }
+
+      .support-documentation-link {
+        // Override JQuery ui-widget-content link color (black) with our usual link color and hover action.
+        color: $uxpl-blue-base;
+        text-decoration: none;
+        padding-right: ($baseline/2);
+
+        &:hover {
+          color: $uxpl-blue-hover-active;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .support-level {
+      padding-right: ($baseline/2);
+    }
+
+    .icon {
+      color: $uxpl-primary-accent;
+    }
   }
 
   // individual menus
   // --------------------
   .new-component-template {
     @include clearfix();
+    margin-bottom: 0;
 
     li {
       border: none;
@@ -190,7 +219,7 @@
       }
     }
 
-  .button-component {
+    .button-component {
       @include clearfix();
       @include transition(none);
       @extend %t-demi-strong;
@@ -201,11 +230,16 @@
       background: $white;
       color: $gray-d3;
       text-align: left;
+      font-family: $f-sans-serif;
 
       &:hover {
         @include transition(background-color $tmg-f2 linear 0s);
         background: tint($green,30%);
         color: $white;
+
+        .icon {
+          color: $white;
+        }
       }
     }
   }

cms/static/sass/partials/_variables.scss

@@ -39,6 +39,16 @@ $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
 // ====================
 $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
 
+// +Colors - UXPL new pattern library colors
+// ====================
+$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
+$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
+
+$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
+$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
+
+$uxpl-primary-accent: rgb(14, 166, 236);
+
 // +Colors - Primary
 // ====================
 $black: rgb(0,0,0);
@@ -87,12 +97,6 @@ $blue-t1: rgba($blue, 0.25);
 $blue-t2: rgba($blue, 0.50);
 $blue-t3: rgba($blue, 0.75);
 
-$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
-$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
-
-$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
-$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
-
 $pink: rgb(183, 37, 103); // #b72567;
 $pink-l1: tint($pink,20%);
 $pink-l2: tint($pink,40%);