various vault functionality

src/scss/styles.scss

@@ -1,10 +1,13 @@
-$theme-colors: ( 
-    "primary": #3c8dbc, 
-    "primary-accent": #286090, 
-    "danger": #dd4b39, 
-    "success": #00a65a, 
-    "info": #555555, 
-    "warning": #bf7e16
+$primary: #3c8dbc;
+$primary-accent: #286090;
+$secondary: #ced4da;
+$success: #00a65a;
+$info: #555555;
+$warning: #bf7e16;
+$danger: #dd4b39;
+
+$theme-colors: (  
+    "primary-accent": $primary-accent
 );
 
 $body-bg: #ffffff;
@@ -13,7 +16,7 @@ $body-color: #333333;
 $font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,
     Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
 
-$h1-font-size: 2rem;
+$h1-font-size: 1.7rem;
 $h2-font-size: 1.3rem;
 $h3-font-size: 1rem;
 $h4-font-size: 1rem;
@@ -29,8 +32,11 @@ $list-group-active-color: $body-color;
 $list-group-active-bg: #ffffff;
 $list-group-active-border-color: rgba(#000000, .125);
 
-$dropdown-link-hover-color: #ffffff;
-$dropdown-link-hover-bg: #3c8dbc;
+$dropdown-link-color: $body-color;
+$dropdown-link-hover-bg: rgba(#000000, .06);
+$dropdown-link-active-color: $dropdown-link-color;
+$dropdown-link-active-bg: rgba(#000000, .1);
+$dropdown-item-padding-x: 1rem;
 
 $navbar-brand-font-size: 35px;
 $navbar-brand-height: 35px;
@@ -38,6 +44,12 @@ $navbar-brand-padding-y: 0;
 $navbar-dark-color: rgba(#ffffff, .7);
 $navbar-dark-hover-color: rgba(#ffffff, .9);
 
+$input-bg: #fafafa;
+$input-focus-bg: #ffffff;
+$input-disabled-bg: #e0e0e0;
+
+$table-hover-bg: rgba(#000000, .03);
+
 @import "../../node_modules/bootstrap/scss/bootstrap";
 
 html {
@@ -48,6 +60,16 @@ body {
     min-width: 1010px;
 }
 
+.page-header {
+    border-bottom: 1px solid $border-color;
+    padding-bottom: 0.6rem;
+    margin-bottom: 0.5rem;
+
+    h1, h2, h3, h4 {
+        margin: 0;
+    }
+}
+
 .navbar {
     padding-left: 0;
     padding-right: 0;
@@ -81,10 +103,51 @@ body {
     padding-left: calc(#{$list-group-item-padding-x} - 3px);
 }
 
+.card-header, .modal-header {
+    font-weight: bold;
+    text-transform: uppercase;
+
+    small {
+        font-weight: normal;
+        text-transform: none;
+    }
+}
+
+.modal-body {
+    h3 {
+        font-weight: normal;
+        text-transform: uppercase;
+        color: $text-muted;
+    }
+}
+
+.modal-footer {
+    justify-content: initial;
+    background-color: $input-bg;
+}
+
+form label {
+    font-weight: bold;
+}
+
+.btn[class*="btn-outline-"]:not(:hover) {
+    background-color: #ffffff;
+}
+
+.btn-outline-secondary {
+    color: $text-muted;
+
+    &:hover {
+        color: $body-color;
+    }
+}
+
+app-vault-icon .fa {
+    color: $text-muted;
+}
+
 app-vault {
     .table {
-        line-height: 1;
-
         tr:first-child {
             td {
                 border: none;
@@ -101,17 +164,16 @@ app-vault {
             vertical-align: middle;
 
             small {
-                display: block;
                 color: $text-muted;
             }
         }
 
         td:first-child {
-            width: 25px;
+            width: 35px;
         }
 
         td:nth-child(2) {
-            width: 25px;
+            width: 45px;
             text-align: center;
 
             img {
@@ -120,9 +182,17 @@ app-vault {
             }
         }
 
+        td:nth-child(3) {
+            line-height: 1;
+        }
+
         td:last-child {
-            width: 65px;
+            width: 72px;
             text-align: right;
+
+            .btn {
+                line-height: 1;
+            }
             
             .dropdown:not(.show) button {
                 visibility: hidden;
@@ -130,3 +200,64 @@ app-vault {
         }
     }
 }
+
+app-vault-groupings {
+    .card {
+        #search {
+            margin-bottom: 1rem;
+        }
+
+        h3 {
+            font-weight: normal;
+            text-transform: uppercase;
+            color: $text-muted;
+        }
+
+        ul:last-child {
+            margin-bottom: 0;
+        }
+
+        a {
+            color: $body-color;
+
+            &:hover {
+                &.text-muted {
+                    color: $body-color !important;
+                }
+            }
+        }
+        
+        ul.fa-ul {
+            margin-left: 1.9em;
+
+            .fa-li {
+                top: 4px;
+            }
+
+            &.carets {
+                margin-left: 1.1em;
+
+                .fa-li {
+                    left: -24px;
+                }
+            }
+        }
+
+        .show-active {
+            display: none;
+        }
+
+        li.active {
+            .show-active {
+                display: inline;
+            }
+        }
+
+        li.active {
+            a:first-child {
+                font-weight: bold;
+                color: theme-color("primary");
+            }
+        }
+    }
+}