feature #2909: Improve header style

src/sunstone/public/js/plugins/provision-tab.js

@@ -1720,7 +1720,7 @@ if (Config.isTabPanelEnabled("provision-tab", "flows")) {
   '</span>'
 
 var provision_tab = {
-  list_header: provision_header,
+  list_header: "",
   content: provision_content
 };
 
@@ -4239,6 +4239,15 @@ $(document).ready(function(){
   var tab = $("#"+tab_name);
 
   if (Config.isTabEnabled(tab_name)) {
+    $('body').prepend(
+      '<div style="background: #f7f7f7; border-bottom: 1px solid #dfdfdf; padding: 15px 0px 10px 0px; margin-bottom: 20px">'+
+        '<div class="row">'+
+          '<div class="large-10 large-centered columns">'+
+          provision_header+
+          '</div>'+
+        '</div>'+
+      '<div>')
+
     $(".left-content").remove();
     $(".right-content").addClass("large-centered small-centered");
     $("#footer").removeClass("right");

src/sunstone/public/scss/_settings.scss

@@ -330,7 +330,7 @@ $button-margin-bottom: rem-calc(5);
 // $button-font-sml: rem-calc(13);
 // $button-font-med: rem-calc(16);
 // $button-font-lrg: rem-calc(20);
-$button-font-weight: bold;
+$button-font-weight: normal;
 // $button-font-align: center;
 
 // We use these to control various hover effects.
@@ -787,7 +787,7 @@ $panel-border-color: #dfdfdf;
 // $include-html-pricing-classes: $include-html-classes;
 
 // We use this to control the border color
-$price-table-border: 0px;
+$price-table-border: 1px;
 
 // We use this to control the bottom margin of the pricing table
 $price-table-margin-bottom: rem-calc(0);

src/sunstone/public/scss/app.scss

@@ -764,10 +764,10 @@ div.dataTables_scrollFoot table {
 
 .provision-search-input {
   width: 200px !important;
-  height:35px !important;
+  height:39px !important;
   border-radius: 3px;
   border-color: #efefef;
-  margin: 5px 0 0px 0 !important;
+  margin: 0px !important;
 }
 
 #provision_list_vms_filter select,
@@ -816,16 +816,21 @@ hr {
     border-color: $primary-color ;
   }
 
+  .button {
+    margin-right: 3px;
+  }
+
   a{
     &:hover {
-      color: $primary-color;
+      //color: $primary-color;
     }
 
-    color: #007d9c;
+    //color: #007d9c;
+    font-weight: bold;
 
-    i {
-      color: #555;
-    }
+    //i {
+    //  color: #555;
+    //}
 
   }
 }
@@ -867,7 +872,21 @@ hr {
   dd {
     &>a {
       padding: 0px;
-      background: #fff !important
+      background: #fff !important;
+
+      .button {
+        margin: 0px 3px;
+      }
+
+      select {
+        height: 39px !important;
+        margin: 0px 10px !important;
+        float: right !important;
+      }
+
+      input {
+        margin: 0px 20px !important;
+      }
     }
     &>.content {
       padding: 15px 0px;
@@ -879,6 +898,12 @@ hr {
       }
     }
 
+    &:first-child:not(.active) {
+      .only-active {
+        display: none;
+      }
+    }
+
     &:first-child>a {
       border-bottom: 1px solid #efefef;
     }