Merge branch 'ui-improvements' into next

3 files changed, 95 insertions, 65 deletions

diff --git a/sass/bookmarklet.scss b/sass/bookmarklet.scss
index fca8bc17..50e63061 100644
--- a/sass/bookmarklet.scss
+++ b/sass/bookmarklet.scss
@@ -20,44 +20,65 @@
  *
  */
 
-header, nav{
+header {
   display: none;
 }
-#content{
+
+#content {
 
 }
-#content-wrapper{
+
+#content-wrapper {
   padding-top: 0;
 
 }
 
-#app-content-wrapper{
+#app-content {
+  margin-left: 0;
+  overflow-x: auto;
+}
+
+#app-content-wrapper {
   min-height: inherit !important;
 }
 
 .warning_bar .fa-times {
- margin-right: 20px;
+  margin-right: 20px;
 }
-.tab_container{
+
+#passman-controls .breadcrumb {
+  padding-left: 0;
+  a, a i {
+    cursor: default;
+  }
+}
+
+.tab_container {
   padding-top: 10px;
-  div{
+
+  div {
     margin-bottom: 5px;
     overflow: hidden;
   }
+
   margin-bottom: 20px;
 }
-.vault_wrapper{
+
+.vault_wrapper {
   margin-top: 70px;
 }
-.active_vault{
+
+.active_vault {
   float: right;
   text-align: right;
   padding-right: 5px;
   font-size: 10px;
 }
-.tab_header{
-  margin: 0;
-}
-.angularjs-datetime-picker{
+
+.angularjs-datetime-picker {
   z-index: 9999;
-}
\ No newline at end of file
+}
+
+.icon-picker {
+  display: none;
+}
diff --git a/sass/menu.scss b/sass/menu.scss
index 66a268a7..8d849417 100644
--- a/sass/menu.scss
+++ b/sass/menu.scss
@@ -55,7 +55,7 @@
       //border-left: 3px solid #0082c9;
       background-image: var(--icon-delete-e9322d);
     }
-    background-color: #fff !important;
+    //background-color: #fff !important;
     opacity: 1 !important;
     z-index: 140;
     //padding: 0 20px;
@@ -70,6 +70,19 @@
   .collapsible:hover .app-navigation-entry-bullet{
     background: var(--color-primary) !important;
   }
+  /* Custom bullet icon */
+  .app-navigation-entry-bullet-with-hover {
+    position: absolute;
+    display: block;
+    margin: 16px;
+    width: 12px;
+    height: 12px;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 100ms ease-in-out;
+    z-index: 101;
+  }
 }
 
 
@@ -82,7 +95,7 @@
     }
   }
 
-  li{
+  li {
     .app-navigation-entry-bullet-color {
       background-color: var(--color-primary);
     }
@@ -99,22 +112,22 @@
       background-color: #4db728;
     }
 
-    .highlight-selected{
-        background-color: var(--color-primary);
+    .highlight-selected {
+      background-color: var(--color-primary);
     }
 
-    .autocomplete{
+    .autocomplete {
       position: relative;
     }
 
-    a.taginput{
+    a.taginput {
       opacity: 1;
     }
-    a{
+    a {
       overflow: visible;
-      tags-input{
+      tags-input {
         opacity: 1.0;
-        li{
+        li {
           width: auto !important;
         }
       }
@@ -129,4 +142,4 @@
 //source https://material.io/tools/icons/?icon=restore&style=baseline
 .icon-expired{
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/></svg>");
-}
\ No newline at end of file
+}
diff --git a/sass/partials/tabs.scss b/sass/partials/tabs.scss
index 7a5a0ca6..3ba79aa7 100644
--- a/sass/partials/tabs.scss
+++ b/sass/partials/tabs.scss
@@ -20,51 +20,47 @@
  *
  */
 
-.tab_header {
-  width: calc(100vw - 300px);
- // margin: 44px 0 0;
-  margin: 0 0 0;
-  list-style: none;
-  padding: 0;
-  li.tab:first-child {
-    margin-left: 0;
-  }
-  li.tab {
-    /*@include border-top-radius(2px);*/
-    float: left;
-    border-bottom-width: 0;
-    margin: 0;
-    padding: 10px 10px 10px 10px;
+.app-sidebar-tabs {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 100%;
+}
+
+.app-sidebar-tabs__nav ul {
+  display: flex;
+  justify-content: stretch;
+}
 
-    cursor: pointer;
-    border-right: 1px solid #eee;
-    -webkit-transition: background-color 250ms linear;
-    -moz-transition: background-color 250ms linear;
-    -o-transition: background-color 250ms linear;
-    -ms-transition: background-color 250ms linear;
-    transition: background-color 250ms linear;
-    .indicator {
-      display: none;
-    }
-  }
+.app-sidebar-tabs__tab.active {
+  color: var(--color-text-light);
+  border-bottom-color: var(--color-primary-element);
+  box-shadow: inset 0 -1px 0 var(--color-primary-element);
+  font-weight: bold;
+}
 
-  li.inactive {
-    background-color: #fff !important;
-    color: unset !important;
-  }
+.app-sidebar-tabs__tab:not(.active):hover, .app-sidebar-tabs__tab:not(.active):focus {
+  border-bottom-color: var(--color-background-darker);
+  box-shadow: inset 0 -1px 0 var(--color-background-darker);
+}
 
-  li.active {
+.app-sidebar-tabs__tab:hover, .app-sidebar-tabs__tab:focus, .app-sidebar-tabs__tab:active, .app-sidebar-tabs__tab.active {
+  opacity: 1;
+  cursor: pointer;
+}
 
-    //position: relative;
-    .indicator {
-      display: inline-block;
-      position: absolute;
-      height: 7px;
-      left: 0;
-      right: 0;
-      bottom: -1px;
-    }
-  }
+.app-sidebar-tabs__tab {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  padding: 10px 10px 10px 10px;
+  transition: color var(--animation-quick), opacity var(--animation-quick), border-color var(--animation-quick);
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  opacity: .7;
+  color: var(--color-main-text);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .tab_container {