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

Merge pull request #5338 from umbraco/v8/feature/ui-app-header-action-focus-outline

Browse Source 
V8: app header action focus outline
This commit is contained in:
Warren Buckley
2019-04-26 10:26:14 +01:00
committed by GitHub
parent dc27bd148a 30385789c8
commit 00e33fb156
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
View File

@@ -25,12 +25,27 @@
height: @appHeaderHeight;
}
.umb-app-header__action a:hover,
.umb-app-header__action a:focus {
.umb-app-header__action a {
outline: none;
&:focus {
.tabbing-active & {
.umb-app-header__action-icon::after {
content: '';
position: absolute;
z-index:10000;
top: -7px;
left: -7px;
width: 36px;
height: 35px;
border-radius: 3px;
box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight;
}
}
}
}
.umb-app-header__action-icon {
position: relative;
opacity: 0.8;
color: @white;
font-size: 22px;

8
src/Umbraco.Web.UI.Client/src/less/sections.less
View File

@@ -65,11 +65,9 @@ ul.sections>li>a:focus .section__name {
}
ul.sections>li>a:focus .section__name {
box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight;
}
ul.sections>li>a:hover .section__name,
ul.sections>li.current>a:focus .section__name {
box-shadow: none;
.tabbing-active & {
box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight;
}
}