Clearer keyboard focus on input elements (#780)

* Add visible border/shadow if buttons have :focus

* Fix obscured outlines when elements have :focus

src/app/vault/add-edit.component.html

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

src/scss/styles.scss

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