From 16a9630be2c84591b2083d0ae42762f6db940a20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 7 Jan 2020 17:00:31 +0100
Subject: [PATCH] adjusting focus outlines with new color and spacing

---
 .../lib/bootstrap/less/dropdowns.less         | 13 +++----
 .../application/umb-language-picker.less      |  6 ++--
 .../less/components/tree/umb-tree-item.less   | 20 +++--------
 .../src/less/components/tree/umb-tree.less    | 34 ++++++++++--------
 .../src/less/components/umb-checkmark.less    | 19 +++++++---
 .../umb-editor-navigation-item.less           |  1 -
 .../src/less/components/umb-sub-views.less    |  1 -
 .../src/less/components/umb-table.less        | 36 ++++++++++---------
 .../src/less/mixins.less                      |  1 -
 src/Umbraco.Web.UI.Client/src/less/navs.less  | 34 +++++++-----------
 .../src/less/variables.less                   |  5 ++-
 .../views/components/buttons/umb-button.html  | 21 ++++++++---
 .../editor/umb-editor-navigation-item.html    |  2 +-
 .../views/components/tree/umb-tree-item.html  |  2 +-
 .../src/views/components/umb-checkmark.html   |  2 +-
 .../propertyeditors/listview/listview.html    |  8 ++---
 16 files changed, 104 insertions(+), 101 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
index 94f229a191..5d0e1c8e7e 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
@@ -79,11 +79,9 @@
 // Hover/Focus state
 // -----------
 .dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
 .dropdown-menu > li > button:hover,
-.dropdown-menu > li > button:focus,
 .dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
+.dropdown-submenu:hover > button {
   text-decoration: none;
   color: @dropdownLinkColorHover;
   #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
@@ -92,8 +90,7 @@
 // Active state
 // ------------
 .dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
+.dropdown-menu > .active > a:hover {
   color: @dropdownLinkColorActive;
   text-decoration: none;
   outline: 0;
@@ -104,13 +101,11 @@
 // --------------
 // Gray out text and ensure the hover/focus state remains gray
 .dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
+.dropdown-menu > .disabled > a:hover {
   color: @grayLight;
 }
 // Nuke hover/focus effects
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
+.dropdown-menu > .disabled > a:hover {
   text-decoration: none;
   background-color: transparent;
   background-image: none; // Remove CSS gradient
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
index 7d91783e32..4e3741905f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
@@ -19,13 +19,13 @@
     box-sizing: border-box;
     color: @ui-option-type;
     width: 100%;
+    outline-offset: -3px;
 }
 
 .umb-language-picker__expand {
     font-size: 14px;
 }
 
-.umb-language-picker__toggle:focus,
 .umb-language-picker__toggle:hover {
     background: @ui-option-hover;
     color:@ui-option-type-hover;
@@ -54,10 +54,10 @@
     font-size: 14px;
     width: 100%;
     text-align: left;
+    outline-offset: -3px;
 }
 
-.umb-language-picker__dropdown-item:hover, 
-.umb-language-picker__dropdown-item:focus {
+.umb-language-picker__dropdown-item:hover {
     background: @ui-option-hover;
     text-decoration: none;
     color:@ui-option-type-hover;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
index df01477880..4a483ce3f0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
@@ -4,16 +4,16 @@
     width: auto;
     margin-top:1px;
 
-    .umb-tree-item__label {
-        user-select: none;
-    }
-
     &:hover .umb-tree-item__arrow {
         visibility: visible;
         cursor: pointer
     }
 }
 
+.umb-tree-item__label {
+    user-select: none;
+}
+
 .umb-tree-item__arrow {
     position: relative;
     margin-left: -16px;
@@ -92,18 +92,6 @@
         color: @blue;
     }
 
-    .umb-options {
-
-        &:hover i {
-            opacity: .7;
-        }
-
-        i {
-            background: @ui-active-type;
-            transition: opacity 120ms ease;
-        }
-    }
-
     a,
     .umb-tree-icon,
     .umb-tree-item__arrow {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
index 0a0fb29eed..4793bbf4f8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -99,6 +99,7 @@ body.touch .umb-tree {
 
 .umb-tree-item__inner {
     border: 2px solid transparent;
+    overflow: visible;
 }
 
 .umb-tree-header {
@@ -176,9 +177,25 @@ body.touch .umb-tree {
     cursor: pointer;
     border-radius: @baseBorderRadius;
 
-    &:hover {
-        background: @btnBackgroundHighlight;
+    i {
+        height: 5px !important;
+        width: 5px !important;
+        border-radius: 20px;
+        display: inline-block;
+        margin: 0 2px 0 0;
+        background: @ui-active-type;
+        
+        &:last-child {
+            margin: 0;
+        }
     }
+    &:hover {
+        background: rgba(255, 255, 255, .5);
+        i {
+            background: @ui-active-type-hover;
+        }
+    }
+    
     // NOTE - We're having to repeat ourselves here due to an .sr-only class appearing in umbraco/lib/font-awesome/css/font-awesome.min.css
     &.sr-only--hoverable:hover,
     &.sr-only--focusable:focus {
@@ -193,19 +210,6 @@ body.touch .umb-tree {
         border-radius: 3px;
     }
 
-    i {
-        height: 5px !important;
-        width: 5px !important;
-        border-radius: 20px;
-        background: @black;
-        display: inline-block;
-        margin: 0 2px 0 0;
-
-        &:last-child {
-            margin: 0;
-        }
-    }
-
     .hide-options & {
         display: none !important;
     }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less
index 021fc8cc9b..f82e47bf88 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less
@@ -2,21 +2,30 @@
     border: 2px solid @white;
     width: 25px;
     height: 25px;
-    border: 1px solid @gray-7;
+    border: 1px solid @ui-action-discreet-border;
     border-radius: 3px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: @gray-7;
+    color: @ui-selected-type;
     cursor: pointer;
     font-size: 15px;
+    &:hover {
+        border-color:@ui-action-discreet-border-hover;
+        color: @ui-selected-type-hover;
+    }
 }
 
 .umb-checkmark--checked {
-    background: @ui-active;
-    border-color: @ui-active;
+    background: @ui-selected-border;
+    border-color: @ui-selected-border;
     color: @white;
+    &:hover {
+        background: @ui-selected-border-hover;
+        border-color: @ui-selected-border-hover;
+        color: @white;
+    }
 }
 
 .umb-checkmark--xs {
@@ -45,4 +54,4 @@
     width: 50px;
     height: 50px;
     font-size: 20px;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
index 8c39ae0546..6a6a8f9f5b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
@@ -105,7 +105,6 @@
     &__anchor_dropdown {
         // inherits from .dropdown-menu
         margin: 0;
-        overflow: hidden;
 
         // center align horizontal
         left: 50%;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less
index d3ce368356..cc6be8fa37 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less
@@ -8,7 +8,6 @@
     padding-left: 0;
     padding-right: 0;
     &:focus {
-      outline: none;
       text-decoration: none;
     }
   }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
index 94c0318fca..52cd73a31d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
@@ -47,6 +47,8 @@ input.umb-table__input {
 .umb-table-head {
     font-size: 14px;
     font-weight: bold;
+
+    color: @ui-disabled-type;
 }
 
 .umb-table-head__link {
@@ -68,10 +70,12 @@ input.umb-table__input {
 
 .umb-table-head__link.sortable {
     cursor: pointer;
+    color: @ui-action-discreet-type;
     &:hover {
-        text-decoration: none;
-        color: @black;
+        color: @ui-action-discreet-type-hover;
     }
+
+    outline-offset: 1px;
 }
 
 .umb-table-thead__icon {
@@ -129,6 +133,9 @@ input.umb-table__input {
         &::before {
             opacity:.66;
         }
+        .umb-table-body__checkicon {
+            color: @ui-selected-border;
+        }
     }
 }
 
@@ -141,21 +148,19 @@ input.umb-table__input {
 }
 
 .umb-table-body__link {
+    position: relative;
     color: @ui-option-type;
     font-size: 14px;
     font-weight: bold;
     text-decoration: none;
 
-    &:hover, &:focus {
+    &:hover {
         color: @ui-option-type-hover;
         text-decoration: underline;
-        outline: none;
     }
 }
 
-.umb-table-body__icon,
-.umb-table-body__icon[class^="icon-"],
-.umb-table-body__icon[class*=" icon-"] {
+.umb-table-body__icon {
     margin: 0 auto;
     font-size: 20px;
     line-height: 20px;
@@ -164,13 +169,11 @@ input.umb-table__input {
     text-decoration: none;
 }
 
-.umb-table-body__checkicon,
-.umb-table-body__checkicon[class^="icon-"],
-.umb-table-body__checkicon[class*=" icon-"] {
+.umb-table-body__checkicon {
     display: none;
     font-size: 18px;
     line-height: 20px;
-    color: @green;
+    color: @ui-selected-border;
 }
 
 .umb-table-body .umb-table__name {
@@ -179,7 +182,8 @@ input.umb-table__input {
     font-weight: bold;
     a {
         color: @ui-option-type;
-        &:hover, &:focus {
+        outline-offset: 1px;
+        &:hover {
             color: @ui-option-type-hover;
             text-decoration: underline;
         }
@@ -249,8 +253,8 @@ input.umb-table__input {
     flex-flow: row nowrap;
     flex: 1 1 5%;
     position: relative;
-    margin: auto 14px;
-    padding: 6px 2px;
+    margin: auto 0;
+    padding: 6px 16px;
     text-align: left;
     overflow:hidden;
 }
@@ -268,8 +272,8 @@ input.umb-table__input {
 
 .umb-table-cell:first-of-type:not(.not-fixed) {
     flex: 0 0 25px;
-    margin: 0 0 0 15px;
-    padding: 15px 0;
+    margin: 0;
+    padding: 15px 0 15px 15px;
 }
 
 .umb-table-cell--auto-width {
diff --git a/src/Umbraco.Web.UI.Client/src/less/mixins.less b/src/Umbraco.Web.UI.Client/src/less/mixins.less
index b1aef36c2a..f0e14f5ae6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/mixins.less
+++ b/src/Umbraco.Web.UI.Client/src/less/mixins.less
@@ -30,7 +30,6 @@
   outline: thin dotted @gray-3;
   // Webkit
   outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
 }
 
 // Center-align a block level element
diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less
index 46f5a2b039..c347404619 100644
--- a/src/Umbraco.Web.UI.Client/src/less/navs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/navs.less
@@ -236,6 +236,7 @@
     position: relative;
     padding: 8px 20px;
     color: @ui-option-type;
+    text-decoration: none;
 }
 
 .dropdown-menu > li > button {
@@ -300,8 +301,7 @@
 
 // Active:hover/:focus dropdown links
 // -------------------------
-.nav > .dropdown.active > a:hover,
-.nav > .dropdown.active > a:focus {
+.nav > .dropdown.active > a:hover {
   cursor: pointer;
 }
 
@@ -309,24 +309,21 @@
 // -------------------------
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover,
-.nav > li.dropdown.open.active > a:focus {
+.nav > li.dropdown.open.active > a:hover {
   /*color: @white;*/
   background-color: @gray-8;
   border-color: @gray-8;
 }
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret,
-.nav li.dropdown.open a:focus .caret {
+.nav li.dropdown.open a:hover .caret {
   border-top-color: @white;
   border-bottom-color: @white;
   .opacity(100);
 }
 
 // Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover,
-.tabs-stacked .open > a:focus {
+.tabs-stacked .open > a:hover {
   border-color: @gray-8;
 }
 
@@ -377,15 +374,13 @@
 }
 .tabs-below > .nav-tabs > li > a {
   .border-radius(0 0 4px 4px);
-  &:hover,
-  &:focus {
+  &:hover {
     border-bottom-color: transparent;
     border-top-color: @gray-8;
   }
 }
 .tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover,
-.tabs-below > .nav-tabs > .active > a:focus {
+.tabs-below > .nav-tabs > .active > a:hover {
   border-color: transparent @gray-8 @gray-8 @gray-8;
 }
 
@@ -414,13 +409,11 @@
   margin-right: -1px;
   .border-radius(4px 0 0 4px);
 }
-.tabs-left > .nav-tabs > li > a:hover,
-.tabs-left > .nav-tabs > li > a:focus {
+.tabs-left > .nav-tabs > li > a:hover {
   border-color: @gray-10 @gray-8 @gray-10 @gray-10;
 }
 .tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover,
-.tabs-left > .nav-tabs .active > a:focus {
+.tabs-left > .nav-tabs .active > a:hover {
   border-color: @gray-8 transparent @gray-8 @gray-8;
   *border-right-color: @white;
 }
@@ -435,13 +428,11 @@
   margin-left: -1px;
   .border-radius(0 4px 4px 0);
 }
-.tabs-right > .nav-tabs > li > a:hover,
-.tabs-right > .nav-tabs > li > a:focus {
+.tabs-right > .nav-tabs > li > a:hover {
   border-color: @gray-10 @gray-10 @gray-10 @gray-8;
 }
 .tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover,
-.tabs-right > .nav-tabs .active > a:focus {
+.tabs-right > .nav-tabs .active > a:hover {
   border-color: @gray-8 @gray-8 @gray-8 transparent;
   *border-left-color: @white;
 }
@@ -456,8 +447,7 @@
   color: @gray-8;
 }
 // Nuke hover/focus effects
-.nav > .disabled > a:hover,
-.nav > .disabled > a:focus {
+.nav > .disabled > a:hover {
   text-decoration: none;
   background-color: transparent;
   cursor: default;
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index dc5359f241..264b4df23d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -140,6 +140,9 @@
 @ui-option-disabled-type-hover:  @gray-5;
 @ui-option-disabled-hover:       @sand-7;
 
+@ui-disabled-type:        @gray-6;
+@ui-disabled-border:        @gray-6;
+
 //@ui-active:           #346ab3;
 @ui-active:             @pinkLight;
 @ui-active-blur:        @brownLight;
@@ -258,7 +261,7 @@
 // Buttons
 // -------------------------
 @btnBackground:                     @gray-9;
-@btnBackgroundHighlight:            @gray-9;
+@btnBackgroundHighlight:            @gray-10;
 @btnBorder:                         @gray-9;
 
 @btnPrimaryBackground:              @ui-btn-positive;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
index f8495ddfd2..483261a5ad 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
@@ -7,7 +7,12 @@
         <div ng-if="vm.innerState !== 'init'" class="umb-button__overlay"></div>
     </div>
 
-    <a ng-if="vm.type === 'link'" ng-href="{{vm.href}}" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline umb-outline--thin" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
+    <a ng-if="vm.type === 'link'"
+        ng-href="{{vm.href}}"
+        class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline"
+        ng-click="vm.clickButton($event)"
+        hotkey="{{vm.shortcut}}"
+        hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
             <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
             {{vm.buttonLabel}}
@@ -18,7 +23,7 @@
     <button
         ng-if="vm.type === 'button'"
         type="button"
-        class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline umb-outline--thin"
+        class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline"
         ng-click="vm.clickButton($event)"
         hotkey="{{vm.shortcut}}"
         hotkey-when-hidden="{{vm.shortcutWhenHidden}}"
@@ -34,12 +39,20 @@
         </span>
     </button>
 
-    <button ng-if="vm.type === 'submit'" type="submit" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline" ng-class="{'umb-outline--thin':vm.style !== 'btn-success'}" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
+    <button
+        ng-if="vm.type === 'submit'"
+        type="submit"
+        class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline"
+        hotkey="{{vm.shortcut}}"
+        hotkey-when-hidden="{{vm.shortcutWhenHidden}}"
+        ng-disabled="vm.disabled"
+        umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
             <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
             {{vm.buttonLabel}}
             <span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
         </span>
-    </button>
+    </button
+
 
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
index 7e17d24218..d743907d07 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
@@ -12,7 +12,7 @@
 
 <ul class="dropdown-menu umb-sub-views-nav-item__anchor_dropdown" ng-if="vm.item.anchors && vm.item.anchors.length > 1">
     <li ng-repeat="anchor in vm.item.anchors" ng-class="{'is-active': vm.item.active && anchor.active}">
-        <a href="#group-{{anchor.id}}" ng-click="vm.anchorClicked(anchor, $event)" prevent-default class="umb-outline umb-outline--thin">
+        <a href="#group-{{anchor.id}}" ng-click="vm.anchorClicked(anchor, $event)" prevent-default>
             <span class="sr-only"><localize key="visuallyHiddenTexts_jumpTo">Jump to</localize></span> {{anchor.label}} <span class="sr-only"><localize key="visuallyHiddenTexts_group"> group</localize></span>
         </a>
     </li>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
index fb8ae6b22f..1d8829b4ca 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
@@ -11,7 +11,7 @@
 
         <i class="icon umb-tree-icon sprTree" ng-class="::node.cssClass" title="{{::node.title}}" ng-click="select(node, $event)" ng-style="::node.style" tabindex="-1"></i>
         <span class="umb-tree-item__annotation"></span>
-        <a class="umb-tree-item__label umb-outline" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>
+        <a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>
 
         <!-- NOTE: These are the 'option' elipses -->
         <button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-click="options(node, $event)" ng-if="::node.menuUrl" aria-label="{{optionsText}} {{node.name}}"><i></i><i></i><i></i></button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-checkmark.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-checkmark.html
index 89201a144f..faf4dca742 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-checkmark.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-checkmark.html
@@ -1 +1 @@
-<i class="icon-check umb-checkmark umb-checkmark--{{size}}" ng-class="{'umb-checkmark--checked': checked, 'cursor-auto': readonly}"></i>
+<i class="icon-check umb-checkmark umb-checkmark--{{size}} umb-outline" ng-class="{'umb-checkmark--checked': checked, 'cursor-auto': readonly}"></i>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index c566323493..6549c08b17 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -14,14 +14,14 @@
 
                     <!-- Renders when it's only possible to create one specific document type for, which no blueprint exists-->
                    <div class="btn-group" ng-show="createAllowedButtonSingle">
-                       <button type="button" class="btn btn-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
+                       <button type="button" class="btn btn-outline umb-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
                            <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                        </button>
                    </div>
 
                    <!-- Renders when it's only possible to create one specific document type for which a blueprint exits-->
                    <div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints" deep-blur="leaveDropdown()">
-                       <button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
+                       <button type="button" class="btn btn-outline umb-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
                            <span>
                                <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                            </span>
@@ -46,11 +46,11 @@
 
                    <!-- Renders when it's possible to create multiple document types and blueprints for one or more of the document types-->
                    <div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints" deep-blur="leaveDropdown()">
-                       <button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
+                       <button type="button" class="btn btn-outline umb-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
                            <localize key="actions_create">Create</localize>
                            <span class="caret" aria-hidden="true"></span>
                        </button>
-                       
+
                        <umb-dropdown ng-if="page.createDropdownOpen" on-close="page.createDropdownOpen = false">
                            <umb-dropdown-item ng-repeat="contentType in listViewAllowedTypes track by contentType.key | orderBy:'name':false">
                                <button type="button" ng-click="createBlank(entityType,contentType.alias)" prevent-default>