blue click and focus styling

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { ToasterModule } from 'angular2-toaster';
 
 import { AddEditComponent } from './vault/add-edit.component';
 import { AppComponent } from './app.component';
+import { BlurClickDirective } from './directives/blur-click.directive';
 import { CiphersComponent } from './vault/ciphers.component';
 import { FallbackSrcDirective } from './directives/fallback-src.directive';
 import { GroupingsComponent } from './vault/groupings.component';
@@ -39,6 +40,7 @@ import { ViewComponent } from './vault/view.component';
     declarations: [
         AddEditComponent,
         AppComponent,
+        BlurClickDirective,
         CiphersComponent,
         FallbackSrcDirective,
         GroupingsComponent,

src/app/directives/blur-click.directive.ts

@@ -0,0 +1,17 @@
+import {
+    Directive,
+    ElementRef,
+    HostListener,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appBlurClick]',
+})
+export class BlurClickDirective {
+    constructor(private el: ElementRef) {
+    }
+
+    @HostListener('click') onClick() {
+        this.el.nativeElement.blur();
+    }
+}

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

@@ -231,13 +231,13 @@
     </div>
 </div>
 <div class="footer">
-    <button (click)="save()" class="primary" title="{{'save' | i18n}}">
+    <button appBlurClick (click)="save()" class="primary" title="{{'save' | i18n}}">
         <i class="fa fa-save fa-lg"></i> {{'save' | i18n}}
     </button>
-    <button (click)="cancel()" title="{{'cancel' | i18n}}">
+    <button appBlurClick (click)="cancel()" title="{{'cancel' | i18n}}">
         {{'cancel' | i18n}}
     </button>
-    <button (click)="delete()" class="danger right" title="{{'delete' | i18n}}" *ngIf="editMode">
+    <button appBlurClick (click)="delete()" class="danger right" title="{{'delete' | i18n}}" *ngIf="editMode">
         <i class="fa fa-trash-o fa-lg"></i>
     </button>
 </div>

src/app/vault/ciphers.component.html

@@ -4,7 +4,7 @@
         <i class="fa fa-search"></i>
     </div>
     <div class="right">
-        <a href="" title="{{'addItem' | i18n}}" appStopClick (click)="addCipher()">
+        <a href="" title="{{'addItem' | i18n}}" appBlurClick appStopClick (click)="addCipher()">
             <i class="fa fa-plus fa-lg"></i>
         </a>
     </div>
@@ -12,21 +12,21 @@
 <div class="content">
     <div class="list">
         <a *ngFor="let cipher of ciphers" appStopClick (click)="cipherClicked(cipher)"
-            href="#" title="{{'viewItem' | i18n}}">
+           href="#" title="{{'viewItem' | i18n}}">
             <app-vault-icon [cipher]="cipher"></app-vault-icon>
             <span class="text">
                 {{cipher.name}}
                 <i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"
-                    title="{{'shared' | i18n}}"></i>
+                   title="{{'shared' | i18n}}"></i>
                 <i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"
-                    title="{{'attachments' | i18n}}"></i>
+                   title="{{'attachments' | i18n}}"></i>
             </span>
             <span class="detail">{{cipher.subTitle}}</span>
         </a>
     </div>
 </div>
 <div class="footer">
-    <button (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">
+    <button appBlurClick (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">
         <i class="fa fa-plus fa-lg"></i>
     </button>
 </div>

src/app/vault/view.component.html

@@ -217,5 +217,5 @@
     </div>
 </div>
 <div class="footer">
-    <button (click)="edit()" title="{{'editItem' | i18n}}">{{'edit' | i18n}}</button>
+    <button appBlurClick (click)="edit()" title="{{'editItem' | i18n}}">{{'edit' | i18n}}</button>
 </div>

src/scss/box.scss

@@ -191,4 +191,3 @@
         color: $text-muted;
     }
 }
-

src/scss/vault.scss

@@ -95,6 +95,7 @@
         text-align: center;
         overflow: hidden;
         flex: 0 0 auto;
+        border-bottom: 1px solid darken($brand-primary, 7%);
 
         a, button {
             color: white !important;
@@ -231,9 +232,16 @@
             font-size: $font-size-base;
             color: $button-color;
 
-            &:hover {
+            &:hover, &:focus {
                 cursor: pointer;
                 background-color: darken($button-backgound-color, 1.5%);
+                border-color: darken($button-border-color, 17%);
+            }
+
+            &:focus {
+                background-color: darken($button-backgound-color, 6%);
+                border-color: darken($button-border-color, 25%);
+                outline: 0;
             }
 
             &.primary {