From 53c7df36b0e6569c74e425d00c7f8236d58e37be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 24 Apr 2019 13:55:31 +0200
Subject: [PATCH] umb-outline to make it easy to apply pretty focus outline for
 elements.

---
 .../src/less/application/umb-outline.less        | 16 ++++++++++++++++
 src/Umbraco.Web.UI.Client/src/less/belle.less    |  1 +
 .../src/less/components/tree/umb-tree.less       |  1 -
 .../src/views/components/tree/umb-tree-item.html |  2 +-
 .../src/views/components/tree/umb-tree.html      |  6 +++---
 5 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less b/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less
new file mode 100644
index 000000000000..1a04dd10c829
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less
@@ -0,0 +1,16 @@
+.umb-outline {
+    &:focus {
+        outline:none;
+        .tabbing-active &::after {
+            content: '';
+            position: absolute;
+            z-index: 10000;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border-radius: 3px;
+            box-shadow: 0 0 2px @blueMid, inset 0 0 2px 1px @blueMid;
+        }
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 4c86f3289b69..441f52c81b50 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -59,6 +59,7 @@
 @import "application/grid.less";
 @import "rte.less";
 @import "application/shadows.less";
+@import "application/umb-outline.less";
 @import "application/animations.less";
 
 // Utilities
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 8358dc4b67bf..202c9400da34 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
@@ -12,7 +12,6 @@
     }
 
     a, a:hover {
-        outline: none;
         text-decoration: none;
     }
 
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 b11b656c8ea7..fc66c6870e9f 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
@@ -7,7 +7,7 @@
 
         <i class="icon umb-tree-icon sprTree" ng-class="::node.cssClass" title="{{::node.routePath}}" ng-click="select(node, $event)" ng-style="::node.style"></i>
         <span class="umb-tree-item__annotation"></span>
-        <a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)">{{node.name}}</a>
+        <a class="umb-tree-item__label umb-outline" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)">{{node.name}}</a>
 
         <!-- NOTE: These are the 'option' elipses -->
         <a data-element="tree-item-options" class="umb-options" ng-click="options(node, $event)" ng-if="::node.menuUrl"><i></i><i></i><i></i></a>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
index dc8184360b67..c2559ef31a62 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
@@ -3,7 +3,7 @@
     <li ng-if="!tree.root.containsGroups">
         <div class="umb-tree-root" data-element="tree-root" ng-class="getNodeCssClass(tree.root)" ng-hide="hideheader === 'true'" on-right-click="altSelect(tree.root, $event)">
             <h5>
-                <a ng-href="#/{{section}}" ng-click="select(tree.root, $event)" class="umb-tree-root-link" data-element="tree-root-link">
+                <a ng-href="#/{{section}}" ng-click="select(tree.root, $event)" class="umb-tree-root-link umb-outline" data-element="tree-root-link">
                     <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(tree.root)"></i>
                     {{tree.name}}
                 </a>
@@ -29,12 +29,12 @@ <h5>
 
         <div class="umb-tree-root" data-element="tree-root" ng-class="getNodeCssClass(group)" ng-hide="hideheader === 'true'" on-right-click="altSelect(group, $event)">
             <h5>
-                <a ng-href="#/{{section}}" ng-click="select(group, $event)" class="umb-tree-root-link" data-element="tree-root-link">
+                <a ng-href="#/{{section}}" ng-click="select(group, $event)" class="umb-tree-root-link umb-outline" data-element="tree-root-link">
                     <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(group)"></i>
                     {{group.name}}
                 </a>
             </h5>
-            <a data-element="tree-item-options" class="umb-options" ng-hide="group.isContainer || !group.menuUrl" ng-click="options(group, $event)" ng-swipe-right="options(group, $event)">
+            <a data-element="tree-item-options" class="umb-options umb-outline" ng-hide="group.isContainer || !group.menuUrl" ng-click="options(group, $event)" ng-swipe-right="options(group, $event)">
                 <i></i><i></i><i></i>
             </a>
         </div>