Html and styles for toolbar

src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less

@@ -20,10 +20,9 @@
   }
 
   .editors-document-type-canvas{
-    padding: 40px 80px;
+    padding: 0 80px;
     @media screen and (max-width: 1500px) {
-      padding-left: 0;
-      padding-right: 0;
+      padding: 0;
     }
   }
 
@@ -40,12 +39,40 @@
 	display: none;
   }
 
-  .no-style-list{
+  .no-style-list {
 	padding: 0;
 	margin: 0;
 	list-style: none;
   }
 
+  /* ---------- TOOLBAR ---------- */
+
+  .toolbar {
+    padding: 20px;
+    width: 100%;
+    list-style: none;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+    .toolbar-tools {
+      float: right;
+      .toolbar-tool {
+        display: inline-block;
+        padding: 10px 15px;
+        &:hover {
+          text-decoration: none;
+          background: @grayLighter;
+        }
+        &:focus {
+          text-decoration: none;
+        }
+        .icon {
+          font-size: 25px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
   /* ---------- TABS ---------- */
 
   .edt-tab{

src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html

@@ -9,13 +9,30 @@
                 name="contentType.name"
                 menu="page.menu"
                 actions="page.actions">
-
         </umb-editor-header>
 
         <umb-editor-container class="editors-document-type-container">
 
             <div class="editors-document-type-canvas">
 
+                <!-- TOOLBAR -->
+                <div class="toolbar clearfix">
+                    <div class="toolbar-tools">
+
+                        <a href="" class="toolbar-tool">
+                            <i class="icon icon-merge"></i>
+                            <span>Compositions</span>
+                        </a>
+
+                        <a href="" class="toolbar-tool">
+                            <i class="icon icon-navigation"></i>
+                            <span>Reorder</span>
+                        </a>
+
+                    </div>
+                </div>
+
+                <!-- TABS -->
                 <ul ui-sortable="sortableOptionsTab" ng-model="contentType.groups" class="no-style-list">
 
                     <li ng-repeat="tab in contentType.groups">