improved buttons styles in studio - updated unit sass to include new styles

cms/static/sass/elements/_controls.scss

@@ -54,8 +54,8 @@
   color: $white;
 
   &:hover, &:active {
-    background: $blue-s2;
-    border-color: $blue-s2;
+    background: $blue-l1;
+    border-color: $blue-l1;
   }
 
   &.current, &.active {

cms/static/sass/elements/_layout.scss

@@ -63,26 +63,9 @@
         }
 
         // buttons
-        .action-button {
+        .button {
           @extend %btn-primary-blue;
           @extend %sizing;
-        }
-
-        .new-button {
-          @extend %btn-primary-green;
-          @extend %sizing;
-        }
-
-        .view-button {
-          @extend %btn-primary-blue;
-          @extend %sizing;
-        }
-
-        .edit-button {
-          @include blue-button;
-          @extend %sizing;
-          padding: ($baseline/4) ($baseline/2);
-          text-align: center;
 
           .action-button-text {
             display: inline-block;
@@ -93,6 +76,11 @@
             display: inline-block;
             vertical-align: baseline;
           }
+
+          &.new-button {
+            @extend %btn-primary-green;
+            @extend %sizing;
+          }
         }
       }
     }

cms/static/sass/elements/_xblocks.scss

@@ -781,3 +781,11 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
   display: none;
 }
 
+
+.wrapper-xblock {
+
+    .discussion-preview {
+      background-color: $gray-l5;
+      font-style: italic;
+    }
+}

cms/static/sass/views/_checklists.scss

@@ -272,10 +272,8 @@
         text-align: right;
 
         .action-primary {
-          @include blue-button;
-          @extend %t-action4;
-          font-weight: 600;
-          text-align: center;
+          @extend %btn-primary-blue;
+          @extend %t-action3;
         }
 
         .action-secondary {
@@ -319,10 +317,8 @@
         .task-actions {
 
           .action-primary {
-            @include grey-button;
-            @extend %t-action4;
-            font-weight: 600;
-            text-align: center;
+            @extend %btn-secondary-blue;
+            @extend %t-action3;
           }
         }
 

cms/static/sass/views/_container.scss

@@ -36,19 +36,10 @@
         .nav-actions {
 
           .button {
-            @extend %btn-primary-blue;
             @extend %t-action3;
-            box-shadow: none;
             padding: ($baseline/4) ($baseline*.75);
             font-weight: 400;
-
-            &.is-disabled {
-              // TO-DO: will review styling before merge to master
-              // background-color: $gray-l2;
-              // border-color: $gray-l2;
-            }
           }
-
         }
       }
     }
@@ -108,15 +99,18 @@
     .bit-publishing {
       @extend %bar-module;
 
-      &.published {
+      &.published,
+      &.is-published {
         @extend %bar-module-green;
       }
 
-      &.draft {
+      &.draft ,
+      &.is-draft {
         @extend %bar-module-yellow;
       }
 
-      &.staff-only {
+      &.staff-only,
+      &.is-staff-only {
         @extend %bar-module-black;
       }
 
@@ -165,11 +159,6 @@
           @extend %btn-primary-blue;
           display: block;
           padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
-
-          &.is-disabled {
-            border: 1px solid $gray-l2;
-            background-color: $gray-l2;
-          }
         }
 
         .action-discard {

cms/static/sass/views/_settings.scss

@@ -336,7 +336,7 @@
           background: $gray-l5;
 
           .action-primary {
-            @include blue-button();
+            @extend %btn-primary-blue;
             @extend %t-action3;
             font-weight: 600;
 
@@ -739,6 +739,10 @@
         float: left;
         width: flex-grid(9, 9);
 
+        .new-button {
+          @extend %btn-primary-green;
+        }
+
         .delete-button {
           margin: 0;
         }

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

@@ -15,21 +15,8 @@
     margin-right: flex-gutter();
 
     .add-pages {
-      @extend %ui-well;
+      @extend %no-content;
       margin: ($baseline*1.5) 0;
-      background-color: $gray-l4;
-      padding: ($baseline*2);
-      text-align: center;
-      color: $gray;
-
-      .new-button {
-        @include font-size(14);
-        margin-left: $baseline;
-
-        [class^="icon-"] {
-          margin-right: ($baseline/2);
-        }
-      }
     }
 
     .notice-incontext {

cms/static/sass/views/_textbooks.scss

@@ -13,20 +13,7 @@
     margin-right: flex-gutter();
 
     .no-textbook-content {
-      @extend %ui-well;
-      padding: ($baseline*2);
-      background-color: $gray-l4;
-      text-align: center;
-      color: $gray;
-
-      .new-button {
-        @include font-size(14);
-        margin-left: $baseline;
-
-        [class^="icon-"] {
-          margin-right: ($baseline/2);
-        }
-      }
+      @extend %no-content;
     }
 
     .textbook {

cms/static/sass/views/_users.scss

@@ -55,8 +55,7 @@
         }
 
         .action-primary {
-          @include green-button(); // overwriting for the sake of syncing older green button styles for now
-          @extend %t-action3;
+          @extend %btn-primary-green;
           padding: ($baseline/2) $baseline;
         }
       }

cms/templates/container.html

@@ -88,18 +88,18 @@ templates = ["basic-modal", "modal-button", "edit-xblock-modal",
             <ul>
                 % if is_unit_page:
                     <li class="action-item action-view nav-item">
-                        <a href="${published_preview_link}" class="button view-button action-button is-disabled">
+                        <a href="${published_preview_link}" class="button button-view action-button is-disabled">
                             <span class="action-button-text">${_("View Published Version")}</span>
                         </a>
                     </li>
                     <li class="action-item action-preview nav-item">
-                        <a href="${draft_preview_link}" class="button preview-button action-button is-disabled">
+                        <a href="${draft_preview_link}" class="button button-preview action-button is-disabled">
                             <span class="action-button-text">${_("Preview Changes")}</span>
                         </a>
                     </li>
                 % else:
                     <li class="action-item action-edit nav-item">
-                        <a href="#" class="button edit-button action-button">
+                        <a href="#" class="button button-edit action-button edit-button">
                             <i class="icon-pencil"></i>
                             <span class="action-button-text">${_("Edit")}</span>
                         </a>

cms/templates/ux/reference/container.html

@@ -503,7 +503,7 @@
 
                 <!-- case published no changes, future release no staff lock -->
 
-                <div class="bit-publishing published">
+                <div class="bit-publishing is-published">
                   <h3 class="bar-mod-title pub-status"><span class="sr">${_("Publishing Status")} </span>${_("Published")}</h3>
                   <div class="wrapper-last-draft bar-mod-content">
 
@@ -549,7 +549,7 @@
 
                 <!-- case unpubbed changes, future release no staff lock -->
 
-                <div class="bit-publishing draft">
+                <div class="bit-publishing is-draft">
                   <h3 class="bar-mod-title pub-status"><span class="sr">${_("Publishing Status")} </span>${_("Draft (Unpublished changes)")}</h3>
                   <div class="wrapper-last-draft bar-mod-content">
 
@@ -595,7 +595,7 @@
 
                 <!-- case unpubbed changes, future release with staff lock -->
 
-                <div class="bit-publishing draft staff-only">
+                <div class="bit-publishing is-draft is-staff-only">
                   <h3 class="bar-mod-title pub-status"><span class="sr">${_("Publishing Status")} </span>${_("Draft (Unpublished changes)")}</h3>
                   <div class="wrapper-last-draft bar-mod-content">
 
@@ -641,7 +641,7 @@
 
                 <!-- case published no changes, release in past no staff lock -->
 
-                <div class="bit-publishing published">
+                <div class="bit-publishing is-published">
                   <h3 class="bar-mod-title pub-status"><span class="sr">${_("Publishing Status")} </span>${_("Published")}</h3>
                   <div class="wrapper-last-draft bar-mod-content">
 

common/static/sass/_mixins.scss

@@ -152,7 +152,9 @@
   &.disabled, &[disabled], &.is-disabled {
     cursor: default;
     pointer-events: none;
-    opacity: 0.5;
+    border: 1px solid $gray-l3;
+    background-color: $gray-l3;
+    color: $gray-l5;
   }
 
   .icon-inline {
@@ -178,11 +180,13 @@
   padding:($baseline/2) $baseline;
   border-width: 1px;
   border-style: solid;
+  box-shadow: none;
+  font-weight: 600;
   line-height: 1.5em;
   text-align: center;
 
   &:hover, &:active, &:focus {
-    box-shadow: 0 2px 1px $shadow-l1;
+    box-shadow: 0 2px 1px $shadow;
   }
 
   &.current, &.active {
@@ -268,10 +272,21 @@
 
 %no-content {
   @extend %ui-well;
-  padding: $baseline;
+  padding: ($baseline*2);
   background-color: $gray-l4;
   text-align: center;
   color: $gray;
+
+  .button,
+  .action {
+    @extend %btn-primary-green;
+    @include font-size(14);
+    margin-left: $baseline;
+
+    [class^="icon-"] {
+      margin-right: ($baseline/2);
+    }
+  }
 }
 
 .ui-loading {