changed inline-styling into a appearance property

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js

@@ -47,6 +47,9 @@ The sub header is sticky and will follow along down the page when scrolling.
          transclude: true,
          restrict: 'E',
          replace: true,
+         scope: {
+             "appearance": "@?"
+         },
          templateUrl: 'views/components/editor/subheader/umb-editor-sub-header.html'
       };
 

src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less

@@ -19,6 +19,10 @@
         background: @brownGrayLight;
     }
 }
+.umb-editor-sub-header--white {
+    background-color: white;
+    border-color: white;
+}
 
 .umb-editor-sub-header.--state-selection {
     padding-left: 10px;

src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html

@@ -1,5 +1,5 @@
 <div
-   class="umb-editor-sub-header"
+   class="umb-editor-sub-header umb-editor-sub-header--{{appearance}}"
    umb-sticky-bar
    scrollable-container=".umb-editor-container"
    ng-transclude>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html

@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-property-editor clearfix" id="umb-grid">
 
-    <umb-editor-sub-header ng-if="showReorderButton()" style="background-color: white; border-color: white;">
+    <umb-editor-sub-header ng-if="showReorderButton()" appearance="white">
 
         <umb-editor-sub-header-content-right>
             <umb-button