add outlined button style

src/Umbraco.Web.UI.Client/src/less/buttons.less

@@ -227,13 +227,29 @@ input[type="button"] {
     font-size: 16px;
     border: none;
     background: @green;
-    color: white;
+    color: @white;
     font-weight: bold;
       &:hover {
         background: @green-d1;
 		}
 }
 
+// outlined
+.btn-outline {
+  border: 1px solid @gray-8;
+  background: @white;
+  color: @black;
+  padding: 5px 13px;
+}
+
+.btn-outline:hover,
+.btn-outline:focus,
+.btn-outline:active {
+  border-color: @gray-7;
+  background: transparent;
+  color: @black;
+}
+
 // Cross-browser Jank
 // --------------------------------------------------
 

src/Umbraco.Web.UI.Client/src/views/components/content/edit.html

@@ -39,10 +39,9 @@
                     <umb-button 
                         alias="preview" 
                         ng-if="!page.isNew && content.allowPreview && page.showPreviewButton"
-                        type="button" 
-                        button-style="info" 
+                        type="button"
+                        button-style="outline"
                         action="preview(content)"
-                        label="Preview page" 
                         label-key="buttons_showPage">
                     </umb-button>
 

src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html

@@ -5,23 +5,26 @@
         <umb-editor-sub-header-content-right>
 
             <umb-button
+                style="margin-right: 5px;"
                 alias="compositions"
                 ng-if="compositions !== false"
                 type="button"
-                button-style="link"
+                button-style="outline"
                 label-key="contentTypeEditor_compositions"
                 icon="icon-merge"
-                action="openCompositionsDialog()">
+                action="openCompositionsDialog()"
+                size="xs">
             </umb-button>
 
             <umb-button
                 alias="reorder"
                 ng-if="sorting !== false"
                 type="button"
-                button-style="link"
+                button-style="outline"
                 label-key="{{sortingButtonKey}}"
                 icon="icon-navigation"
-                action="toggleSortingMode();">
+                action="toggleSortingMode();"
+                size="xs">
             </umb-button>
 
         </umb-editor-sub-header-content-right>

src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html

@@ -48,8 +48,8 @@
                 <umb-editor-sub-header-section>
                     <umb-button
                         type="button"
-                        label="Clear selection"
                         size="xs"
+                        button-style="outline"
                         label-key="buttons_clearSelection"
                         action="vm.clearSelection()"
                         disabled="actionInProgress">
@@ -62,48 +62,52 @@
             </umb-editor-sub-header-content-left>
 
             <umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
-                <div style="margin-right: 5px;">
-                    <umb-button
-                        ng-if="vm.allowSetUserGroup"
-                        type="button" size="xs"
-                        label-key="actions_setGroup"
-                        icon="icon-users"
-                        action="vm.openBulkUserGroupPicker()">
-                    </umb-button>
-                </div>
-                <div style="margin-right: 5px;">
-                    <umb-button
-                        ng-if="vm.allowEnableUser"
-                        type="button"
-                        size="xs"
-                        state="vm.enableUserButtonState"
-                        label-key="actions_enable"
-                        icon="icon-check"
-                        action="vm.enableUsers()">
-                    </umb-button>
-                </div>
-                <div style="margin-right: 5px;">
-                    <umb-button
-                        ng-if="vm.allowUnlockUser"
-                        type="button"
-                        size="xs"
-                        state="vm.unlockUserButtonState"
-                        label-key="actions_unlock"
-                        icon="icon-unlocked"
-                        action="vm.unlockUsers()">
-                    </umb-button>
-                </div>
-                <div>
-                    <umb-button
-                        ng-if="vm.allowDisableUser"
-                        type="button"
-                        size="xs"
-                        state="vm.disableUserButtonState"
-                        label-key="actions_disable"
-                        icon="icon-block"
-                        action="vm.disableUsers()">
-                    </umb-button>
-                </div>
+                <umb-button
+                    style="margin-right: 5px;"
+                    ng-if="vm.allowSetUserGroup"
+                    type="button" 
+                    size="xs"
+                    button-style="outline"
+                    label-key="actions_setGroup"
+                    icon="icon-users"
+                    action="vm.openBulkUserGroupPicker()">
+                </umb-button>
+
+                <umb-button
+                    style="margin-right: 5px;"
+                    ng-if="vm.allowEnableUser"
+                    type="button"
+                    size="xs"
+                    button-style="outline"
+                    state="vm.enableUserButtonState"
+                    label-key="actions_enable"
+                    icon="icon-check"
+                    action="vm.enableUsers()">
+                </umb-button>
+      
+                <umb-button
+                    style="margin-right: 5px;"
+                    ng-if="vm.allowUnlockUser"
+                    type="button"
+                    size="xs"
+                    button-style="outline"
+                    state="vm.unlockUserButtonState"
+                    label-key="actions_unlock"
+                    icon="icon-unlocked"
+                    action="vm.unlockUsers()">
+                </umb-button>
+
+                <umb-button
+                    ng-if="vm.allowDisableUser"
+                    type="button"
+                    size="xs"
+                    button-style="outline"
+                    state="vm.disableUserButtonState"
+                    label-key="actions_disable"
+                    icon="icon-block"
+                    action="vm.disableUsers()">
+                </umb-button>
+
             </umb-editor-sub-header-content-right>
 
         </umb-editor-sub-header>