Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-23 11:56:00 +01:00
Code Issues Projects Releases Wiki Activity

Clearer keyboard focus on input elements (#780)

Browse Source 
* Add visible border/shadow if buttons have :focus

* Fix obscured outlines when elements have :focus
This commit is contained in:
Thomas Rittson 2021-01-25 06:24:09 +10:00 committed by GitHub
parent a7b7c716d4
commit bcd488bb87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/vault/add-edit.component.html
View File

@ -57,12 +57,12 @@
<div class="d-flex">
<label for="loginPassword">{{'password' | i18n}}</label>
<div class="ml-auto d-flex" *ngIf="!cipher.isDeleted && !viewOnly">
<a href="#" class="d-block mr-2" appStopClick
<a href="#" class="d-block mr-2 fa-icon-above-input" appStopClick
appA11yTitle="{{'generatePassword' | i18n}}" (click)="generatePassword()"
*ngIf="cipher.viewPassword">
<i class="fa fa-lg fa-fw fa-refresh" aria-hidden="true"></i>
</a>
<a href="#" class="d-block" #checkPasswordBtn appStopClick
<a href="#" class="d-block fa-icon-above-input" #checkPasswordBtn appStopClick
appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
[appApiAction]="checkPasswordPromise">
<i class="fa fa-lg fa-fw fa-check-circle" [hidden]="checkPasswordBtn.loading"

26
src/scss/styles.scss
View File

@ -315,6 +315,16 @@ input[type="search"]::-webkit-search-cancel-button {
}
}
.btn-link {
&:focus,
&.focus {
outline-color: -webkit-focus-ring-color;
outline-offset: 1px;
outline-style: auto;
outline-width: 1px;
}
}
.btn-outline-secondary {
color: $text-muted;
@ -325,6 +335,11 @@ input[type="search"]::-webkit-search-cancel-button {
&:disabled {
opacity: 1;
}
&:focus,
&.focus {
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($primary), $primary, 15%), .5);
}
}
.btn-submit {
@ -352,6 +367,17 @@ input[type="search"]::-webkit-search-cancel-button {
}
}
.list-group-item {
&:focus,
&.focus {
z-index: 100;
}
}
.fa-icon-above-input {
height: 1.5em;
}
.table.table-list {
thead th {
border-top: none;