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

5867 enables tabbing to field-lock-toggler, and adds tab-focus styling (#5876)

Browse Source
This commit is contained in:
Sebastiaan Janssen
2019-09-30 18:36:37 +02:00
committed by GitHub
parent 53a129ab22 765d1576e0
commit f1b724bdc4
2 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less
View File

@@ -6,13 +6,26 @@
}
.umb-locked-field__wrapper {
display: flex;
align-items: center;
margin-bottom: 5px;
display: flex;
align-items: center;
margin-bottom: 5px;
}
.umb-locked-field__toggle {
margin-right: 3px;
padding: 0;
background: none;
border: 0;
font-size: inherit;
line-height: inherit;
&:focus {
outline: none;
.tabbing-active & {
outline: 2px solid @inputBorderTabFocus;
}
}
}
.umb-locked-field__toggle:hover,

12
src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
View File

@@ -2,13 +2,13 @@
<div class="umb-locked-field__wrapper">
<a ng-if="locked" href="" ng-click="unlock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-lock"></i>
</a>
<button ng-if="locked" ng-click="unlock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-lock" aria-hidden="true"></i>
</button>
<a ng-if="!locked" href="" ng-click="lock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-unlocked -unlocked"></i>
</a>
<button ng-if="!locked" ng-click="lock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-unlocked -unlocked" aria-hidden="true"></i>
</button>
<input type="text"
no-password-manager