From 8cf3d5377232a4cff56780468d2fc361996667ce Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 23 Jan 2018 17:39:37 -0500
Subject: [PATCH] style categories padding

---
 src/app/vault/vault.component.html | 51 ++++++++++++++++--------------
 src/scss/styles.scss               |  6 +++-
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index ee646e6aba..7bf166b4af 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -13,29 +13,31 @@
     -->
     <div id="categories">
         <div class="content">
-            <ul>
-                <li><a href="#"><i class="fa fa-fw fa-spinner"></i> All Items</a></li>
-                <li><a href="#"><i class="fa fa-fw fa-star"></i> Favorites</a></li>
-            </ul>
-            <h2><i class="fa fa-tags"></i> Types</h2>
-            <ul>
-                <li><a href="#"><i class="fa fa-fw fa-globe"></i> Login</a></li>
-                <li><a href="#"><i class="fa fa-fw fa-credit-card"></i> Card</a></li>
-                <li><a href="#"><i class="fa fa-fw fa-id-card-o"></i> Identity</a></li>
-                <li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> Secure Note</a></li>
-            </ul>
-            <h2><i class="fa fa-folder"></i> Folders</h2>
-            <ul>
-                <li *ngFor="let folder of vaultFolders">
-                    <a href="#"><i class="fa fa-fw fa-caret-right"></i> {{folder.name}}</a>
-                </li>
-            </ul>
-            <h2><i class="fa fa-cubes"></i> Collections</h2>
-            <ul>
-                <li *ngFor="let collection of vaultCollections">
-                    <a href="#"><i class="fa fa-fw fa-caret-right"></i> {{collection.name}}</a>
-                </li>
-            </ul>
+            <div class="inner-content">
+                <ul>
+                    <li><a href="#"><i class="fa fa-fw fa-spinner"></i> All Items</a></li>
+                    <li><a href="#"><i class="fa fa-fw fa-star"></i> Favorites</a></li>
+                </ul>
+                <h2><i class="fa fa-tags"></i> Types</h2>
+                <ul>
+                    <li><a href="#"><i class="fa fa-fw fa-globe"></i> Login</a></li>
+                    <li><a href="#"><i class="fa fa-fw fa-credit-card"></i> Card</a></li>
+                    <li><a href="#"><i class="fa fa-fw fa-id-card-o"></i> Identity</a></li>
+                    <li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> Secure Note</a></li>
+                </ul>
+                <h2><i class="fa fa-folder"></i> Folders</h2>
+                <ul>
+                    <li *ngFor="let folder of vaultFolders">
+                        <a href="#"><i class="fa fa-fw fa-caret-right"></i> {{folder.name}}</a>
+                    </li>
+                </ul>
+                <h2><i class="fa fa-cubes"></i> Collections</h2>
+                <ul>
+                    <li *ngFor="let collection of vaultCollections">
+                        <a href="#"><i class="fa fa-fw fa-caret-right"></i> {{collection.name}}</a>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
     <div id="items">
@@ -64,6 +66,9 @@
                 </div>
             </div>
         </div>
+        <div class="footer">
+            Add Item
+        </div>
     </div>
     <div id="details">
         <div class="content">
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 8b77fe0c7f..e282a2c0ac 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -109,7 +109,10 @@ a {
         min-width: 175px;
         max-width: 250px;
         border-right: 1px solid $border-color-dark;
-        padding: 10px 15px;
+
+        .inner-content {
+            padding: 10px 15px;
+        }
 
         h2 {
             font-size: $font-size-base;
@@ -124,6 +127,7 @@ a {
             li {
                 margin: 0;
                 padding: 0;
+                list-style: none;
 
                 a {
                     display: block;