From d591927840357e0dabdf6ab822d1d8ab6e985e30 Mon Sep 17 00:00:00 2001
From: Arpad Csanyi <csarpad@gmail.com>
Date: Mon, 1 Aug 2016 09:41:59 +0200
Subject: [PATCH] Create flex layout for the popover tabs. #56

---
 src/components/popover/popover.component.html | 14 +++++++-------
 src/components/popover/popover.component.scss | 10 ++++++++++
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/popover/popover.component.html b/src/components/popover/popover.component.html
index ed3d74a5..ba7b06b1 100644
--- a/src/components/popover/popover.component.html
+++ b/src/components/popover/popover.component.html
@@ -5,37 +5,37 @@
                 <li #keypress (click)="onListItemClick(0)">
                     <a class="menu-tabs--item">
                         <i class="fa fa-keyboard-o"></i>
-                        Keypress
+                        <span>Keypress</span>
                     </a>
                 </li>
                 <li #layer (click)="onListItemClick(1)">
                     <a class="menu-tabs--item">
                         <i class="fa fa-clone"></i>
-                        Layer
+                        <span>Layer</span>
                     </a>
                 </li>
                 <li #mouse (click)="onListItemClick(2)">
                     <a class="menu-tabs--item">
                         <i class="fa fa-mouse-pointer"></i>
-                        Mouse
+                        <span>Mouse</span>
                     </a>
                 </li>
                 <li #macro (click)="onListItemClick(3)">
                     <a class="menu-tabs--item">
                         <i class="fa fa-play"></i>
-                        Macro
+                        <span>Macro</span>
                     </a>
                 </li>
                 <li #keymap (click)="onListItemClick(4)">
                     <a class="menu-tabs--item">
                         <i class="fa fa-keyboard-o"></i>
-                        Keymap
+                        <span>Keymap</span>
                     </a>
                 </li>
                 <li #none (click)="onListItemClick(5)">
                     <a class="menu-tabs--item">
                         <i class="fa fa-ban"></i>
-                        None
+                        <span>None</span>
                     </a>
                 </li>
             </ul>
@@ -55,4 +55,4 @@
             <button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/popover/popover.component.scss b/src/components/popover/popover.component.scss
index fc76bec9..0c855af4 100644
--- a/src/components/popover/popover.component.scss
+++ b/src/components/popover/popover.component.scss
@@ -23,6 +23,16 @@
         .nav-tabs {
             position: relative;
             top: 1px;
+            display: flex;
+
+            .menu-tabs--item {
+                display: flex;
+                align-items: center;
+
+                i {
+                    margin-right: 0.25em;
+                }
+            }
         }
     }
 }