Merge pull request #5337 from umbraco/v8/feature/ui-prettier-focus-ou…

…tlines Created umb-outline to make it easy to apply pretty focus outline for elements.
umbraco · Apr 26, 2019 · 09617d9 · 09617d9
2 parents 00e33fb + 53c7df3
commit 09617d9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>