Add grid view

1 files changed, 97 insertions, 15 deletions

diff --git a/sass/credentials.scss b/sass/credentials.scss
index a3e4a79a..51e37080 100644
--- a/sass/credentials.scss
+++ b/sass/credentials.scss
@@ -35,10 +35,37 @@
         left: 10px;
         top: -19px;
       }
+    }
 
-
-
+    .viewModes{
+      float: right;
+      margin-right: 5px;
+      margin-top: 3px;
+      .view-mode:first-child{
+        @include border-left-radius(5px);
+        border: 1px solid rgba(240,240,240,.9);
+      }
+      .view-mode:last-child{
+        @include border-right-radius(5px);
+        border: 1px solid rgba(240,240,240,.9);
+      }
+      .view-mode{
+        display: inline-block;
+        padding: 7px;
+        background-color: rgba(240,240,240,.9);
+      }
+      .view-mode.active{
+        display: inline-block;
+        padding: 7px;
+        background-color: rgba(226, 226, 226, 0.9);
+      }
+      .view-mode{
+        cursor: pointer;
+        display: inline-block;
+        padding: 7px;
+      }
     }
+
     .searchboxContainer{
       display: inline-block;
       margin-right: 14px;
@@ -67,19 +94,7 @@
             margin-right: 5px;
             margin-left: 3px;
           }
-          .tags {
-            float: right;
-            .tag {
-              background-color: rgba(240, 240, 240, .9);
-              padding: 4px;
-              font-size: 12px;
-              margin-right: 3px;
-              @include border-radius(5px);
-            }
-            .tag:last-child{
-              margin-right: 8px;
-            }
-          }
+
           .icon-more {
             display: inline-block;
             float: right;
@@ -120,6 +135,73 @@
       }
     }
 
+    .tags {
+      float: right;
+      .tag {
+        background-color: rgba(240, 240, 240, .9);
+        padding: 4px;
+        font-size: 12px;
+        margin-right: 3px;
+        @include border-radius(5px);
+      }
+      .tag:last-child{
+        margin-right: 8px;
+      }
+    }
+
+    .grid-view{
+      margin-top: 44px;
+      display: flex;
+      flex-wrap: wrap;
+      .credential{
+        display: flex;
+        padding: 0.5em;
+        width: 100%;
+        border: 1px solid rgba(240,240,240,.9);
+        margin: 25px;
+        cursor: pointer;
+        @include border-radius(5px);
+        .credential_content{
+          display: flex;
+          flex-direction: column;
+          background-color: #fff;
+          width: 100%;
+          font-size: 1.75em;
+          text-align: center;
+          .label{
+            padding-top: 1em;
+            padding-left: 1em;
+            padding-right: 1em;
+            line-height: 1.3em;
+
+          }
+          .tags{
+            .tag{
+              margin-top: 5px;
+              display: inline-block;
+            }
+          }
+        }
+      }
+      @media all and (min-width: 40em) {
+        .credential {
+          width: 40%;
+        }
+      }
+      @media all and (min-width: 58em) {
+        .credential {
+          width: 26%;
+        }
+      }
+      @media all and (min-width: 78em) {
+        .credential {
+          width: 20%;
+        }
+      }
+
+
+    }
+
     .edit_credential {
       label {
         display: block;