yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

umb-outline to make it easy to apply pretty focus outline for elements.

Browse Source
This commit is contained in:
Niels Lyngsø
2019-04-24 13:55:31 +02:00
parent 950849a4c6
commit 53c7df36b0
5 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less Normal file
View File

@@ -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;
}
}
}

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -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

1
src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
View File

@@ -12,7 +12,6 @@
}
a, a:hover {
outline: none;
text-decoration: none;
}

2
src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
View File

@@ -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>

6
src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
View File

@@ -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 @@
<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>