ux breadcrumb work

public/app/core/components/navbar/navbar.html

 <div class="page-nav">
   <div class="container">
-    <div class="page-breadcrumb">
-      <div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.breadcrumbs">
-        <a class="pointer" ng-href="{{::item.url}}">
-          {{::item.text}}
-        </a>
-
-        <ul class="dropdown-menu dropdown-menu--navbar">
-          <li ng-repeat="subItem in ::item.children">
-            <a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
-              {{::subItem.text}}
-            </a>
-          </li>
-        </ul>
-      </div>
+    <div class="page-breadcrumbs">
+      <a class="breadcrumb-item active" href="/">
+        <i class="fa fa-home"></i>
+      </a>
+      <a class="breadcrumb-item" ng-href="{{::item.url}}" ng-repeat="item in ctrl.model.breadcrumbs">
+        {{::item.text}}
+      </a>
     </div>
   </div>
 </div>

public/app/core/components/navbar/navbar.ts

-///<reference path="../../../headers/common.d.ts" />
-
 import coreModule from '../../core_module';
 import {NavModel}  from '../../nav_model_srv';
 

public/app/core/components/scroll/scroll.ts

@@ -7,7 +7,6 @@ export function geminiScrollbar() {
     link: function(scope, elem, attrs) {
 
       let scrollbar = new PerfectScrollbar(elem[0]);
-      console.log('scrllbar!');
 
       scope.$on('$destroy', () => {
         scrollbar.destroy();

public/app/features/plugins/partials/ds_list.html

@@ -46,4 +46,3 @@
 		</div>
 	</div>
 </div>
-

public/sass/components/_scrollbar.scss

@@ -92,8 +92,6 @@
   .ps {
     overflow: auto !important;
   }
-}.ps:hover > .ps__rail-x,
-.ps:hover > .ps__rail-y {
 }
 
 .ps__rail-x:hover,

public/sass/layout/_page.scss

@@ -121,81 +121,88 @@
   margin-bottom: $spacer*2;
 }
 
-.page-breadcrumb {
+.page-breadcrumbs {
   display: flex;
-  padding: 0 $spacer;
+  padding: 3px 1.5rem 1.5rem 1.5rem;
   line-height: 0.5;
 }
 
-$page-breadcrumb__angle-1: 39px;
-$page-breadcrumb__angle-ul: 31px;
-$page-breadcrumb__angle-a: 30px;
-
-.page-breadcrumb__item {
-  background: $page-nav-bg;
-  box-shadow: $page-nav-shadow;
-
-  > a {
-    color: $page-nav-breadcrumb-color;
-    font-size: $font-size-sm;
-    display: block;
-    padding: 0.6rem 1rem 0.6rem 3rem;;
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: -53px;
-      left: 100%;
-      content: '';
-      height: 0;
-      width: 0;
-      border: $page-breadcrumb__angle-1 solid transparent;
-      border-right-width: 0;
-      border-left-width: $page-breadcrumb__angle-a;
-      z-index: 2;
-      border-left-color: $page-nav-bg;
-    }
-  }
+.breadcrumb {
+  display: inline-block;
+  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  border-radius: 5px;
+  counter-reset: flag;
+}
+
+.breadcrumb-item {
+  text-decoration: none;
+  outline: none;
+  display: block;
+  float: left;
+  font-size: 12px;
+  line-height: 36px;
+  padding: 0 7px 0 37px;
+  @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  position: relative;
+  box-shadow: $card-shadow;
 
   &:first-child {
-    a {
-      padding-left: 1rem;
-    }
+    padding-left: 13px;
+    border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
+    font-size: 20px;
+  }
+
+  &:first-child:before {
+    left: 14px;
+  }
+
+  &:last-child {
+    border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
+    padding-right: 20px;
+  }
+
+  &.active,
+  &:hover {
+    background: #333;
+    background: linear-gradient(#333, #000);
+  }
+
+  &.active:after,
+  &:hover:after {
+    background: #333;
+    background: linear-gradient(135deg, #333, #000);
   }
 
-  &::after {
+  &:after {
     content: '';
     position: absolute;
-    top: -53px;
-    left: 100%;
-    content: '';
-    height: 0;
-    width: 0;
-    border: $page-breadcrumb__angle-1 solid transparent;
-    border-right-width: 0;
-    border-left-width: $page-breadcrumb__angle-ul;
+    top: 0;
+    right: -18px; // half of square's length
+
+    // same dimension as the line-height of .breadcrumb-item
+    width: 36px;
+    height: 36px;
+
+    transform: scale(0.707) rotate(45deg);
+    // we need to prevent the arrows from getting buried under the next link
     z-index: 1;
-    transform: translateX(4px);
-    border-left-color: #282020;
-    margin: 0;
-  }
 
-  &:hover {
-    background: $breadcrumb-hover-hl;
+    // background same as links but the gradient will be rotated to compensate with the transform applied
+    background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
 
-    .page-breadcrumb__caret {
-      opacity: 1;
-    }
+    // stylish arrow design using box shadow
+    box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
 
-    > a {
-      color: $text-color;
+    // 5px - for rounded arrows and
+    // 50px - to prevent hover glitches on the border created using shadows*/
+    border-radius: 0 5px 0 50px;
+  }
 
-      &::after {
-        border-left-color: $breadcrumb-hover-hl;
-        color: $text-color;
-      }
-    }
+  // we dont need an arrow after the last link
+  &:last-child:after {
+    content: none;
   }
 }
 
+