fleetio_spark 0.1.3 → 0.1.4

data/app/assets/stylesheets/spark/components/_tree-nav.scss

@@ -6,7 +6,9 @@
 
   [role=treeitem][aria-expanded=false] > [role=group] {
     max-height: 0;
+    padding: 0;
   }
+
   [role=treeitem][aria-expanded=true] .expand-icon {
     transform: rotate(180deg);
   }

data/app/assets/stylesheets/spark/components/header/_app-nav-header.scss

@@ -5,7 +5,7 @@
   height: $app-nav-header-height;
   border-bottom: 1px solid $fl-gray-100;
   background-color: $fl-white;
-  padding: 0 $pad-lg;
+  padding: 0 $pad-lg { left: 68px }
   position: fixed;
   z-index: 1040;
   top: 0;
@@ -15,26 +15,12 @@
   line-height: $base-line-height;
 
   @include at-least( $width-sm ) {
-    padding: 0 $pad-xl;
+    padding: 0 $pad-xl { left: 60px }
   }
 
   @include at-least( $width-md ) {
-    left: $primary-sidebar-width;
-  }
-
-  .sidebar-nav-toggle {
-    @include circular-button(32px);
-    flex-shrink: 0;
-    color: $fl-gray-500;
-    margin-left: -$pad-base;
-    margin-right: $pad-lg;
-    transition: all $duration $timing;
-
-    &:hover {
-      color: $fl-gray-700;
-      border-radius: 50%;
-      background-color: $fl-gray-50;
-    }
+    left: $sidebar-nav-width;
+    padding-left: $pad-xl;
   }
 
   .app-navbar-logo {
@@ -48,36 +34,16 @@
 
   // Styles for Top Navbar Dropdown Menus
   .dropdown-menu {
-    border: 1px solid transparent;
-    max-height: 85vh;
-    overflow-y: auto;
-    min-width: 260px;
-    @include elevation(4);
-    border-radius: 6px;
-    margin-top: $pad-base;
+    margin-top: $pad-sm;
     margin-right: -$pad-base;
-    padding: $pad-md $pad-base;
-    font-size: 14px;
-
-    .divider { margin: $pad-base; }
-
-    > li {
-      > a {
-        border-radius: 3px;
-        padding: 5px $pad-base 6px;
-      }
+  }
 
-      // Existing Material icons styling (will replace with svg in future)
-      i {
-        font-size: 16px;
-        margin-right: $pad-md;
-      }
-      .pull-right {
-        i {
-          font-size: 14px;
-          margin-right: 0;
-        }
-      }
+  // When search modal is active increase the
+  // z-index so sidebar toggle is behind
+  // the search input
+  [data-modal=search-results] & {
+    @include until( $width-base ) {
+      z-index: 1060;
     }
   }
 }
@@ -107,7 +73,8 @@
   }
 
   .quick-add-btn,
-  .help-menu-btn {
+  .help-menu-btn,
+  .alert-btn {
     @include circular-button(32px);
     color: $fl-gray-500;
     border: 1px solid $fl-gray-100;
@@ -122,6 +89,15 @@
     }
   }
 
+  .alert-btn {
+    &,
+    &:hover,
+    &:focus {
+      color: $fl-yellow-600;
+      border-color: $fl-yellow-600;
+    }
+  }
+
   .help-menu-btn {
     // New announcement indicator dot
     &.new-announcements {

data/app/assets/stylesheets/spark/components/header/_search.scss

@@ -109,13 +109,9 @@
   }
 
   .modal-panel {
-    @include elevation(4);
-    background: $fl-white;
     border-radius: 8px;
     padding-top: 38px;
-    top: 1px;
-    left: -$pad-sm;
-    right: -$pad-sm;
+    top: 0px;
 
     &:before {
       content: "";
@@ -124,7 +120,6 @@
       height: 15px;
       z-index: 1;
       border-top: 1px solid $fl-gray-100;
-      //background-image: linear-gradient( to bottom, white, rgba(#fff, .45), rgba(#fff, 0) );
     }
     &-header {
       background: $fl-gray-25;
@@ -140,6 +135,10 @@
     -webkit-transform-style: preserve-3d;
   }
 
+  .no-results {
+    padding: $pad-base $pad-lg;
+  }
+
   kbd {
     display: inline-block;
     height: 18px;

data/app/assets/stylesheets/spark/core/_layout.scss

@@ -9,7 +9,7 @@
   }
 
   @include at-least( $width-md ) {
-    margin-left: $primary-sidebar-width;
+    margin-left: $sidebar-nav-width;
   }
 }
 
@@ -21,6 +21,36 @@
   }
 }
 
+@include until( $width-md ) {
+  .app-nav-header,
+  .app-container,
+  .sidebar-nav {
+    transition: transform $duration $timing;
+  }
+
+  .sidebar-nav {
+    transform: translateX(-$sidebar-nav-width);
+  }
+}
+
+@include until( $width-md ) {
+  .show-sidebar {
+    overflow: hidden;
+    max-height: 100vh;
+
+    .app-nav-header,
+    .app-container {
+      transform: translateX($sidebar-nav-width);
+    }
+
+    .sidebar-nav {
+      transform: translateX(0);
+      z-index: 1050;
+    }
+
+  }
+}
+
 .app-container {
   flex-grow: 1;
   position: relative;

data/app/assets/stylesheets/spark/core/_vars.scss

@@ -8,8 +8,10 @@ $base-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI'
 $mono-font: 'Roboto Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
 
 // Sidebar & Navbar
-$primary-sidebar-width:     250px;
-$primary-sidebar-bg:        $fl-blue-900;
+$sidebar-nav-width:         250px;
+$sidebar-nav-bg:            $fl-blue-900;
+$sidebar-nav-item-hover:    lighten($sidebar-nav-bg, 2%);
+$sidebar-nav-item-active:   darken($sidebar-nav-bg, 4%);
 $app-nav-header-height:     60px;
 $app-admin-header-height:   39px;
 
@@ -41,9 +43,9 @@ $timing: cubic-bezier(0.4, 0.0, 0.2, 1);
 
 // Shadows and Elevation depth mapping
 $elevation-base-color: black;
-$elevation-umbra-opacity: .12;
-$elevation-penumbra-opacity: .08;
-$elevation-ambient-opacity: .10;
+$elevation-umbra-opacity: .10;
+$elevation-penumbra-opacity: .06;
+$elevation-ambient-opacity: .08;
 
 $elevation-umbra-map: (
   0: "0px 0px 0px 0px",

data/app/assets/svgs/spark/alert-triangle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.119 19L13.772 1.15C13.6026 0.826739 13.348 0.555993 13.0357 0.367088C12.7235 0.178184 12.3655 0.0783234 12.0005 0.0783234C11.6355 0.0783234 11.2775 0.178184 10.9653 0.367088C10.653 0.555993 10.3984 0.826739 10.229 1.15L0.881002 19C0.721322 19.3048 0.643006 19.6457 0.653624 19.9897C0.664243 20.3337 0.763438 20.6691 0.941617 20.9635C1.1198 21.2579 1.37093 21.5014 1.67073 21.6704C1.97054 21.8393 2.30887 21.9281 2.653 21.928H21.347C21.6911 21.9281 22.0295 21.8393 22.3293 21.6704C22.6291 21.5014 22.8802 21.2579 23.0584 20.9635C23.2366 20.6691 23.3358 20.3337 23.3464 19.9897C23.357 19.6457 23.2787 19.3048 23.119 19ZM11 7.423C11 7.15778 11.1054 6.90343 11.2929 6.71589C11.4804 6.52836 11.7348 6.423 12 6.423C12.2652 6.423 12.5196 6.52836 12.7071 6.71589C12.8946 6.90343 13 7.15778 13 7.423V13.423C13 13.6882 12.8946 13.9426 12.7071 14.1301C12.5196 14.3176 12.2652 14.423 12 14.423C11.7348 14.423 11.4804 14.3176 11.2929 14.1301C11.1054 13.9426 11 13.6882 11 13.423V7.423ZM12.05 18.933H12.022C11.6276 18.9317 11.249 18.778 10.9654 18.5041C10.6817 18.2301 10.515 17.8571 10.5 17.463C10.4928 17.267 10.5247 17.0715 10.5939 16.888C10.6631 16.7045 10.7682 16.5366 10.903 16.3942C11.0378 16.2517 11.1996 16.1376 11.3791 16.0584C11.5585 15.9792 11.7519 15.9366 11.948 15.933H11.976C12.3703 15.9335 12.7491 16.0864 13.0332 16.3599C13.3172 16.6333 13.4845 17.006 13.5 17.4C13.5078 17.5964 13.4762 17.7924 13.4071 17.9765C13.338 18.1605 13.2328 18.3289 13.0977 18.4718C12.9626 18.6146 12.8004 18.729 12.6204 18.8082C12.4405 18.8874 12.2466 18.9298 12.05 18.933Z" fill="black"/>
+</svg>

data/app/assets/svgs/spark/indicator-dot.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="11.5" fill="black"/>
+</svg>

data/app/helpers/spark/nav_menu_helper.rb

@@ -4,6 +4,37 @@ module Spark
       JSON.parse( cookies[ key ] ) if cookies[ key ].present?
     end
 
+    def sidebar_toggle
+      link_to( "#", class: 'sidebar-nav-toggle' ) do
+        concat content_tag( :span, class: "icon-wrapper" ) {
+          tag( :span, class: 'close-sidebar-icon', "aria-label"=>"toggle sidebar " )
+        }
+      end
+
+    end
+
+    def account_nav( options, &block )
+      account = options.delete(:account)
+      contact = options.delete(:contact)
+      avatar  = options.delete(:avatar)
+
+      content_tag( :header, class: 'sidebar-nav-header sidebar-nav-header dropdown' ) do
+        concat link_to( 'javascript:void(0)', class: 'dropdown-toggle', data: { toggle: 'dropdown' } ) {
+          concat content_tag( :div, class: 'details' ) {
+            concat content_tag( :div, class: 'account-name' ) { 
+              concat account 
+              concat use_svg( 'chevron-down', class: 'dropdown-icon', width: 9  )
+            }
+            concat content_tag( :div, class: 'user-name' ) { contact }
+          }
+          concat content_tag( :div, class: 'user-avatar' ) { 
+            concat tag(:img, src: avatar, alt: "User photo")
+          }
+        }
+        concat capture(&block) if block_given?
+      end
+    end
+
     class NavMenu < Spark::MenuHelper::Menu
 
       def initialize( title = nil, options = {} )
@@ -95,6 +126,12 @@ module Spark
         super( title, options )
       end
 
+      def display(body)
+        content_tag( :div, class: 'sidebar-nav-wrapper' ) do
+          super(body)
+        end
+      end
+
       def item( content, url, options={}, &block )
         options = options.stringify_keys
         new = is_new?( options.delete( 'new' ) )

data/app/helpers/spark/search_helper.rb

@@ -0,0 +1,7 @@
+module Spark
+  module SearchHelper 
+    def universal_search_footer
+      "Use <kbd>↑</kbd> <kbd>↓</kbd> to navigate, <kbd>enter</kbd> to select, <kbd>esc</kbd> to dismiss, and <kbd>/</kbd> to activate search.".html_safe
+    end
+  end
+end

data/app/helpers/spark/trial_helper.rb

@@ -16,7 +16,7 @@ module Spark
       content_tag( :div, options ) do
         concat content_tag( :span, class: 'trial-status-text' ) { text }
         concat " "
-        concat link_to "Upgrade", url, class: 'trial-status-link'
+        concat link_to "Manage", url, class: 'trial-status-link'
       end
     end
   end

data/lib/fleetio_spark/version.rb

@@ -1,3 +1,3 @@
 module FleetioSpark
-  VERSION = "0.1.3"
+  VERSION = "0.1.4"
 end

data/public/{spark-0.1.3.css → spark-0.1.4.css}

@@ -45,6 +45,27 @@ svg {
   .hide-sidebar .sidebar-nav {
     z-index: -1; } }
 
+@media all and (max-width: 999px) {
+  .app-nav-header, .app-container, .sidebar-nav {
+    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+
+  .sidebar-nav {
+    -webkit-transform: translateX(-250px);
+            transform: translateX(-250px); } }
+@media all and (max-width: 999px) {
+  .show-sidebar {
+    overflow: hidden;
+    max-height: 100vh; }
+  .show-sidebar .app-nav-header, .show-sidebar .app-container {
+    -webkit-transform: translateX(250px);
+            transform: translateX(250px); }
+  .show-sidebar .sidebar-nav {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    z-index: 1050; } }
 .app-container {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -563,8 +584,8 @@ input:checked + .check-switch-panel {
   border-radius: 5px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   background: #FFFFFF;
-  -webkit-box-shadow: 0px 12px 14px -7px rgba(0, 0, 0, 0.12), 0px 24px 40px 3px rgba(0, 0, 0, 0.08), 0px 10px 48px 10px rgba(0, 0, 0, 0.1);
-          box-shadow: 0px 12px 14px -7px rgba(0, 0, 0, 0.12), 0px 24px 40px 3px rgba(0, 0, 0, 0.08), 0px 10px 48px 10px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.1), 0px 16px 24px 2px rgba(0, 0, 0, 0.06), 0px 6px 32px 6px rgba(0, 0, 0, 0.08);
+          box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.1), 0px 16px 24px 2px rgba(0, 0, 0, 0.06), 0px 6px 32px 6px rgba(0, 0, 0, 0.08);
   position: absolute;
   left: 0;
   right: 0; }
@@ -584,7 +605,8 @@ input:checked + .check-switch-panel {
   border-bottom: 1px solid #D3D9DB;
   margin-bottom: -1px;
   position: relative;
-  z-index: 2; }
+  z-index: 2;
+  line-height: 1.4; }
 .modal-panel-header [data-stack-nav] {
   -ms-flex-item-align: start;
       align-self: flex-start;
@@ -595,16 +617,18 @@ input:checked + .check-switch-panel {
       -ms-flex-order: -1;
           order: -1;
   color: inherit;
-  line-height: 1.1em;
-  text-decoration: none; }
+  text-decoration: none;
+  color: #0091E6; }
 .modal-panel-header [data-stack-nav]:hover, .modal-panel-header [data-stack-nav]:focus {
-  color: #0091E6;
+  color: #006CB8;
   outline: none; }
 .modal-panel-title {
   text-transform: uppercase;
   font-size: 11px;
   font-weight: normal;
-  margin: 0 auto; }
+  margin: 0 auto;
+  line-height: inherit;
+  color: #636F73; }
 .modal-panel-footer {
   border-top: 1px solid rgba(0, 0, 0, 0.1); }
 .modal-panel [aria-hidden=true] {
@@ -638,13 +662,16 @@ input:checked + .check-switch-panel {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  padding: 16px 16px 8px;
+  padding: 24px 16px 8px;
   background: #F6F7F7; }
+.nav-menu-header:first-of-type {
+  padding-top: 16px; }
 .nav-menu-header .nav-menu-title {
   margin: 0;
   text-transform: uppercase;
   font-size: 11px;
-  font-weight: normal; }
+  font-weight: normal;
+  color: #636F73; }
 .nav-menu-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -664,18 +691,18 @@ input:checked + .check-switch-panel {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
+  border-bottom: 1px solid #EDF1F2; }
 .nav-menu-item:hover, .nav-menu-item:focus {
-  background-color: #d8eefc;
+  background-color: #ddf0fd;
   outline: none;
   position: relative;
   z-index: 1;
-  -webkit-box-shadow: 0 0 0 1px #d8eefc;
-          box-shadow: 0 0 0 1px #d8eefc; }
+  -webkit-box-shadow: 0 0 0 1px #ddf0fd;
+          box-shadow: 0 0 0 1px #ddf0fd; }
 .nav-menu-item:hover .nav-menu-item-content, .nav-menu-item:focus .nav-menu-item-content {
   border-color: transparent; }
 .nav-menu-more {
-  color: #4EB3EF;
+  color: #0091E6;
   font-size: 12px; }
 
 [data-stack='root'] {
@@ -702,6 +729,7 @@ input:checked + .check-switch-panel {
           animation: fade-out .12s forwards; }
 
 .sidebar-nav {
+  z-index: 1050;
   height: 100%;
   background-color: #00467A;
   position: fixed;
@@ -713,10 +741,101 @@ input:checked + .check-switch-panel {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
+.sidebar-nav-toggle {
+  position: absolute;
+  right: -45px;
+  z-index: 1;
+  top: 13px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  cursor: default; }
+.sidebar-nav-toggle:after {
+  content: "";
+  opacity: 0;
+  -webkit-transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-box-shadow: 5px -30px 20px rgba(0, 0, 0, 0.4) inset;
+          box-shadow: 5px -30px 20px rgba(0, 0, 0, 0.4) inset;
+  background: rgba(0, 0, 0, 0.2);
+  top: 0;
+  left: 250px;
+  width: 100vw;
+  bottom: -30px;
+  z-index: -1; }
+.sidebar-nav-toggle .icon-wrapper {
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  text-align: center;
+  -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+.sidebar-nav-toggle .icon-wrapper:hover {
+  background-color: #EDF1F2; }
 @media all and (min-width: 1000px) {
-  .sidebar-nav {
-    z-index: 1050; } }
-.sidebar-nav .nav-wrapper {
+  .sidebar-nav-toggle {
+    opacity: 0;
+    overflow: hidden;
+    width: 0; }
+  .sidebar-nav-toggle:after {
+    position: static; } }
+.show-sidebar .sidebar-nav-toggle:after {
+  position: fixed; }
+.show-sidebar .sidebar-nav-toggle .icon-wrapper:focus, .show-sidebar .sidebar-nav-toggle .icon-wrapper:hover {
+  background: none; }
+.show-sidebar .sidebar-nav-toggle:after {
+  opacity: 1; }
+.sidebar-nav .close-sidebar-icon {
+  width: 18px;
+  color: #78858A; }
+.sidebar-nav .close-sidebar-icon:hover {
+  color: #4E595C; }
+.sidebar-nav .close-sidebar-icon, .sidebar-nav .close-sidebar-icon:before, .sidebar-nav .close-sidebar-icon:after {
+  position: relative;
+  display: block;
+  height: 2px;
+  background: currentColor;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+  -webkit-transform-origin: center middle;
+          transform-origin: center middle;
+  -webkit-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-property: background-color, -webkit-transform;
+  transition-property: background-color, -webkit-transform;
+  transition-property: transform, background-color;
+  transition-property: transform, background-color, -webkit-transform; }
+.sidebar-nav .close-sidebar-icon:before, .sidebar-nav .close-sidebar-icon:after {
+  width: 100%;
+  content: ""; }
+.sidebar-nav .close-sidebar-icon:before {
+  top: -5px; }
+.sidebar-nav .close-sidebar-icon:after {
+  top: 3px; }
+.show-sidebar .sidebar-nav .close-sidebar-icon {
+  color: #121515;
+  background: transparent; }
+.show-sidebar .sidebar-nav .close-sidebar-icon, .show-sidebar .sidebar-nav .close-sidebar-icon:before, .show-sidebar .sidebar-nav .close-sidebar-icon:after {
+  -webkit-transition-delay: 0.1s;
+          transition-delay: 0.1s; }
+.show-sidebar .sidebar-nav .close-sidebar-icon:before {
+  -webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
+          transform: rotate(-45deg) translate3d(0, 0, 0);
+  top: 0px; }
+.show-sidebar .sidebar-nav .close-sidebar-icon:after {
+  -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
+          transform: rotate(45deg) translate3d(0, 0, 0);
+  top: -2px; }
+.sidebar-nav .sidebar-nav-wrapper {
   position: relative;
   width: auto;
   height: 100%; }
@@ -735,8 +854,8 @@ input:checked + .check-switch-panel {
       flex-shrink: 0;
   width: 18px;
   height: 18px; }
-.sidebar-nav .nav-tree-item-icon + .nav-tree-item-content {
-  margin-left: 16px; }
+.sidebar-nav .nav-tree-item-icon:first-child {
+  margin-right: 16px; }
 .sidebar-nav .nav-tree-item-content {
   border: none; }
 .sidebar-nav .nav-tree-item {
@@ -769,21 +888,27 @@ input:checked + .check-switch-panel {
       flex-shrink: 0;
   height: 9px;
   width: 9px;
-  -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  color: rgba(255, 255, 255, 0.5); }
+  -webkit-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  color: rgba(255, 255, 255, 0.4); }
 .sidebar-nav .nav-tree-item.item-active {
   color: #FFFFFF;
-  background-color: #003d6b; }
-.sidebar-nav .nav-tree-item.item-active + .nav-tree-group {
-  background-color: #003d6b; }
+  background-color: #003a66; }
 .sidebar-nav .nav-tree-item-content {
   width: 100%;
   min-width: 0;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden; }
+.sidebar-nav .tree-active > .nav-tree-item {
+  color: #FFFFFF; }
+.sidebar-nav .tree-active > .nav-tree-item, .sidebar-nav .tree-active > .nav-tree-item + .nav-tree-group {
+  background-color: #003a66; }
 .sidebar-nav .nav-tree-group {
+  padding-top: 2px;
+  padding-bottom: 8px;
   list-style: none;
   opacity: 0; }
 .sidebar-nav .nav-tree-group .nav-tree-item {
@@ -791,6 +916,8 @@ input:checked + .check-switch-panel {
   padding-left: 54px;
   color: rgba(255, 255, 255, 0.55);
   font-size: 13px; }
+.sidebar-nav .nav-tree-group .nav-tree-item.item-active {
+  color: #FFFFFF; }
 .sidebar-nav .nav-tree-group .nav-tree-item:hover, .sidebar-nav .nav-tree-group .nav-tree-item:focus {
   color: #FFFFFF;
   background-color: transparent; }
@@ -804,6 +931,8 @@ input:checked + .check-switch-panel {
   width: 6px;
   height: 6px;
   border-radius: 50%; }
+.sidebar-nav .nav-tree-group .item-active:before {
+  background-color: #0091E6; }
 .sidebar-nav .nav-tree-group .item-new .nav-tree-item-content:after {
   content: " New";
   font-size: 85%;
@@ -812,10 +941,6 @@ input:checked + .check-switch-panel {
   margin-left: 2px; }
 .sidebar-nav .nav-tree-group .item-new:before {
   background-color: #F2AA2A; }
-.sidebar-nav .nav-tree-group .item-active {
-  color: #FFFFFF; }
-.sidebar-nav .nav-tree-group .item-active:before {
-  background-color: #0091E6; }
 .sidebar-nav .triggered .nav-tree-group {
   -webkit-transition-property: max-height, opacity, padding;
   transition-property: max-height, opacity, padding;
@@ -823,10 +948,9 @@ input:checked + .check-switch-panel {
           transition-duration: 0.2s;
   -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
           transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }
-.sidebar-nav [aria-expanded=true] > .nav-tree-group {
+.sidebar-nav [aria-expanded=true] > [role=group] {
   max-height: 800px;
   opacity: 1;
-  padding: 2px 0 8px;
   -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
           transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); }
 
@@ -846,18 +970,20 @@ input:checked + .check-switch-panel {
   text-decoration: none;
   -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: #00345b;
+  background-color: transparent;
   line-height: 1.4; }
 .sidebar-nav-header > a:hover, .sidebar-nav-header > a:focus {
   color: #FFFFFF;
-  background-color: #002f51; }
+  background-color: #004c84; }
 .sidebar-nav-header > a:hover .dropdown-icon, .sidebar-nav-header > a:focus .dropdown-icon {
   color: inherit; }
 .sidebar-nav-header .dropdown-icon {
-  margin: 0 8px;
-  color: rgba(255, 255, 255, 0.5);
+  margin: 0 6px;
+  color: rgba(255, 255, 255, 0.4);
   -webkit-transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  top: .1em; }
 .sidebar-nav-header .details {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -888,23 +1014,10 @@ input:checked + .check-switch-panel {
   width: 32px;
   height: 32px; }
 .sidebar-nav-header .dropdown-menu {
-  border: 1px solid transparent;
-  max-height: 85vh;
-  overflow-y: auto;
-  min-width: 260px;
-  -webkit-box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08), 0px 6px 32px 6px rgba(0, 0, 0, 0.1);
-          box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08), 0px 6px 32px 6px rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-  margin-top: -4px;
-  margin-left: 16px;
-  padding: 12px 8px; }
-.sidebar-nav-header .dropdown-menu .divider {
-  margin: 8px; }
-.sidebar-nav-header .dropdown-menu .divider.full-width {
-  margin-left: -8px;
-  margin-right: -8px; }
+  margin-top: -8px;
+  margin-left: 16px; }
 .sidebar-nav-header .dropdown-menu .user-name {
-  padding: 0 8px;
+  padding: 0 16px;
   margin: 12px 0; }
 .sidebar-nav-header .dropdown-menu .user-avatar {
   width: 40px;
@@ -913,23 +1026,12 @@ input:checked + .check-switch-panel {
   margin: 8px 0; }
 .sidebar-nav-header .dropdown-menu .nav-group .nav-header {
   padding: 4px 8px; }
-.sidebar-nav-header .dropdown-menu > li > a, .sidebar-nav-header .dropdown-menu > li > label {
-  font-size: 14px;
-  border-radius: 3px;
-  padding: 5px 8px 6px;
-  margin-bottom: 0;
-  color: #3A4245; }
-.sidebar-nav-header .dropdown-menu > li i {
-  font-size: 16px;
-  margin-right: 12px; }
-.sidebar-nav-header .dropdown-menu > li .pull-right i {
-  font-size: 14px;
-  margin-right: 0; }
 
 [role=tree] [role=group] {
   overflow: hidden; }
 [role=tree] [role=treeitem][aria-expanded=false] > [role=group] {
-  max-height: 0; }
+  max-height: 0;
+  padding: 0; }
 [role=tree] [role=treeitem][aria-expanded=true] .expand-icon {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg); }
@@ -975,6 +1077,80 @@ input:checked + .check-switch-panel {
   top: 100%;
   content: ""; }
 
+.app-nav-header .dropdown-menu, .sidebar-nav .dropdown-menu {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  max-height: 85vh;
+  overflow-y: auto;
+  min-width: 260px;
+  -webkit-box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.1), 0px 16px 24px 2px rgba(0, 0, 0, 0.06), 0px 6px 32px 6px rgba(0, 0, 0, 0.08);
+          box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.1), 0px 16px 24px 2px rgba(0, 0, 0, 0.06), 0px 6px 32px 6px rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+  padding: 12px 0;
+  font-size: 14px; }
+.app-nav-header .dropdown-menu .divider, .sidebar-nav .dropdown-menu .divider {
+  margin: 8px 16px; }
+.app-nav-header .dropdown-menu .divider.full-width, .sidebar-nav .dropdown-menu .divider.full-width {
+  margin-left: 0;
+  margin-right: 0; }
+.app-nav-header .dropdown-menu > li > a, .sidebar-nav .dropdown-menu > li > a {
+  padding: 5px 16px 6px; }
+.app-nav-header .dropdown-menu > li i, .sidebar-nav .dropdown-menu > li i {
+  font-size: 16px;
+  margin-right: 12px; }
+.app-nav-header .dropdown-menu > li .pull-right i, .sidebar-nav .dropdown-menu > li .pull-right i {
+  font-size: 14px;
+  margin-right: 0; }
+.app-nav-header .alerts-dropdown .dropdown-menu, .sidebar-nav .alerts-dropdown .dropdown-menu {
+  padding: 0; }
+.app-nav-header .alerts-dropdown .dropdown-header, .sidebar-nav .alerts-dropdown .dropdown-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
+.app-nav-header .alerts-dropdown .dropdown-header-title, .sidebar-nav .alerts-dropdown .dropdown-header-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262C2D;
+  margin: 0; }
+.app-nav-header .alerts-dropdown .dropdown-list-item > a, .sidebar-nav .alerts-dropdown .dropdown-list-item > a {
+  font-size: 13px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  padding: 12px 16px; }
+.app-nav-header .alerts-dropdown .dropdown-list-item:not(:last-of-type), .sidebar-nav .alerts-dropdown .dropdown-list-item:not(:last-of-type) {
+  border-bottom: 1px solid #EDF1F2; }
+.app-nav-header .alerts-dropdown .dropdown-list-item .icon, .sidebar-nav .alerts-dropdown .dropdown-list-item .icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  position: relative;
+  top: 4px;
+  margin-right: 12px;
+  fill: #F2AA2A; }
+.app-nav-header .alerts-dropdown .dropdown-list-item .list-item-text, .sidebar-nav .alerts-dropdown .dropdown-list-item .list-item-text {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap; }
+.app-nav-header .alerts-dropdown .dropdown-list-item .list-item-text h5, .sidebar-nav .alerts-dropdown .dropdown-list-item .list-item-text h5 {
+  font-size: 14px;
+  margin: 0; }
+.app-nav-header .alerts-dropdown .dropdown-list-item .list-item-text p, .sidebar-nav .alerts-dropdown .dropdown-list-item .list-item-text p {
+  margin: 4px 0;
+  color: #78858A; }
+
 .app-nav-header {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -986,6 +1162,7 @@ input:checked + .check-switch-panel {
   border-bottom: 1px solid #D3D9DB;
   background-color: #FFFFFF;
   padding: 0 16px;
+  padding-left: 68px;
   position: fixed;
   z-index: 1040;
   top: 0;
@@ -995,35 +1172,12 @@ input:checked + .check-switch-panel {
   line-height: 1.5; }
 @media all and (min-width: 600px) {
   .app-nav-header {
-    padding: 0 24px; } }
+    padding: 0 24px;
+    padding-left: 60px; } }
 @media all and (min-width: 1000px) {
   .app-nav-header {
-    left: 250px; } }
-.app-nav-header .sidebar-nav-toggle {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  text-align: center;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  color: #78858A;
-  margin-left: -8px;
-  margin-right: 16px;
-  -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
-.app-nav-header .sidebar-nav-toggle:hover {
-  color: #4E595C;
-  border-radius: 50%;
-  background-color: #EDF1F2; }
+    left: 250px;
+    padding-left: 24px; } }
 .app-nav-header .app-navbar-logo {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1033,28 +1187,11 @@ input:checked + .check-switch-panel {
   .app-nav-header .app-navbar-logo {
     margin-right: 24px; } }
 .app-nav-header .dropdown-menu {
-  border: 1px solid transparent;
-  max-height: 85vh;
-  overflow-y: auto;
-  min-width: 260px;
-  -webkit-box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08), 0px 6px 32px 6px rgba(0, 0, 0, 0.1);
-          box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08), 0px 6px 32px 6px rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-  margin-top: 8px;
-  margin-right: -8px;
-  padding: 12px 8px;
-  font-size: 14px; }
-.app-nav-header .dropdown-menu .divider {
-  margin: 8px; }
-.app-nav-header .dropdown-menu > li > a {
-  border-radius: 3px;
-  padding: 5px 8px 6px; }
-.app-nav-header .dropdown-menu > li i {
-  font-size: 16px;
-  margin-right: 12px; }
-.app-nav-header .dropdown-menu > li .pull-right i {
-  font-size: 14px;
-  margin-right: 0; }
+  margin-top: 4px;
+  margin-right: -8px; }
+@media all and (max-width: 799px) {
+  [data-modal=search-results] .app-nav-header {
+    z-index: 1060; } }
 
 .app-nav-actions {
   display: -webkit-box;
@@ -1075,7 +1212,7 @@ input:checked + .check-switch-panel {
 .app-nav-actions .dropdown-menu {
   left: auto;
   right: 0; }
-.app-nav-actions .quick-add-btn, .app-nav-actions .help-menu-btn {
+.app-nav-actions .quick-add-btn, .app-nav-actions .help-menu-btn, .app-nav-actions .alert-btn {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1097,9 +1234,12 @@ input:checked + .check-switch-panel {
           transition-duration: 0.2s;
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-.app-nav-actions .quick-add-btn:hover, .app-nav-actions .quick-add-btn:focus, .app-nav-actions .help-menu-btn:hover, .app-nav-actions .help-menu-btn:focus {
+.app-nav-actions .quick-add-btn:hover, .app-nav-actions .quick-add-btn:focus, .app-nav-actions .help-menu-btn:hover, .app-nav-actions .help-menu-btn:focus, .app-nav-actions .alert-btn:hover, .app-nav-actions .alert-btn:focus {
   color: #4E595C;
   border-color: #A2ABAE; }
+.app-nav-actions .alert-btn, .app-nav-actions .alert-btn:hover, .app-nav-actions .alert-btn:focus {
+  color: #F2AA2A;
+  border-color: #F2AA2A; }
 .app-nav-actions .help-menu-btn.new-announcements:before {
   content: '';
   display: block;
@@ -1353,14 +1493,9 @@ input:checked + .check-switch-panel {
   cursor: pointer;
   background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 20'%3E%3Cpolygon fill='%237A7B7C' points='3.5,14 0,8 7,8'/%3E%3C/svg%3E") calc(100% - 14px) 50%/7px 18px no-repeat; }
 .search-panel .modal-panel {
-  -webkit-box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08), 0px 6px 32px 6px rgba(0, 0, 0, 0.1);
-          box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08), 0px 6px 32px 6px rgba(0, 0, 0, 0.1);
-  background: #FFFFFF;
   border-radius: 8px;
   padding-top: 38px;
-  top: 1px;
-  left: -4px;
-  right: -4px; }
+  top: 0px; }
 .search-panel .modal-panel:before {
   content: "";
   position: absolute;
@@ -1379,6 +1514,8 @@ input:checked + .check-switch-panel {
   position: relative;
   top: .1em;
   -webkit-transform-style: preserve-3d; }
+.search-panel .no-results {
+  padding: 8px 16px; }
 .search-panel kbd {
   display: inline-block;
   height: 18px;