mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-27 12:36:14 +01:00
Clearer keyboard focus on input elements (#780)
* Add visible border/shadow if buttons have :focus * Fix obscured outlines when elements have :focus
This commit is contained in:
parent
a7b7c716d4
commit
bcd488bb87
@ -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"
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user