From a816961dff5dd72b3770368def100c40875be61b Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 23 Jan 2018 22:57:24 -0500
Subject: [PATCH] box styling on view page

---
 src/app/vault/groupings.component.html |  2 +-
 src/app/vault/view.component.html      | 41 +++++++++----
 src/scss/styles.scss                   | 83 ++++++++++++++++++++++++--
 3 files changed, 108 insertions(+), 18 deletions(-)

diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index e5dab2f9..a329a761 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -4,7 +4,7 @@
             <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>
+        <h2><i class="fa fa-tag"></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>
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index a74f98cd..5f02bc68 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -1,17 +1,32 @@
 <div class="content">
-    <div>Something Something Something Something Something Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div class="inner-content">
+        <div class="box">
+            <div class="box-header">
+                Item Information
+            </div>
+            <div class="box-content">
+                <div class="box-content-row">
+                    <span class="row-label">Name</span>
+                    Google
+                </div>
+                <div class="box-content-row">
+                    <span class="row-label">URI</span>
+                    https://google.com
+                </div>
+                <div class="box-content-row">
+                    <span class="row-label">Username</span>
+                    hello@bitwarden.com
+                </div>
+                <div class="box-content-row">
+                    <span class="row-label">Password</span>
+                    JKsiuhfLKJDOsudfhjksdfjk
+                </div>
+            </div>
+            <div class="box-footer">
+                Some footer information.
+            </div>
+        </div>
+    </div>
 </div>
 <div class="footer">
     Edit
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index e56d3281..89535fa9 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -87,10 +87,6 @@ a {
         max-width: 250px;
         border-right: 1px solid $border-color-dark;
 
-        .inner-content {
-            padding: 10px 15px;
-        }
-
         h2 {
             font-size: $font-size-base;
             font-weight: bold;
@@ -149,6 +145,10 @@ a {
     #categories, #items, #details {
         display: flex;
         flex-direction: column;
+
+        .inner-content {
+            padding: 10px 15px;
+        }
     }
 
     .header {
@@ -558,3 +558,78 @@ a {
         }
     }
 }
+
+.box {
+    min-width: 400px;
+    max-width: 550px;
+    width: 100%;
+    margin: 0 auto;
+
+    .box-header {
+        margin: 0 10px 5px 10px;
+        color: $gray-light;
+        text-transform: uppercase;
+    }
+
+    .box-content {
+        background: $background-color;
+        border-radius: 5px;
+
+        .box-content-row {
+            padding: 10px 15px;
+            position: relative;
+            z-index: 1;
+
+            &:before {
+                content: "";
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                height: 1px;
+                width: calc(100% - 10px);
+                border-bottom: 1px solid $border-color;
+            }
+
+            &:first-child {
+                padding-top: 20px;
+            }
+
+            &:last-child {
+                padding-bottom: 20px;
+
+                &:before {
+                    border: none;
+                    height: 0;
+                }
+            }
+
+            &:after {
+                content: "";
+                display: table;
+                clear: both;
+            }
+
+            &:hover, &:focus, &.active {
+                background-color: $background-color-alt;
+            }
+
+            .row-label {
+                font-size: $font-size-small;
+                color: $text-muted;
+                display: block;
+                width: 100%;
+                font-weight: normal;
+                margin-bottom: 5px;
+            }
+
+            input {
+            }
+        }
+    }
+
+    .box-footer {
+        margin: 5px 10px;
+        font-size: $font-size-small;
+        color: $text-muted;
+    }
+}