toolbar support disabled and divider style

app/index.html

@@ -36,30 +36,34 @@
         <nav class="navbar navbar-static-top" role="navigation">
             <div class="navbar-toolbar">
                 <ul class="nav navbar-nav">
-                    <li>
+                    <li class="disabled">
                         <a class="toolbar" title="{{'New' | translate}}">
                             <i class="fa fa-plus"></i>
                             <span translate>New</span>
                         </a>
                     </li>
-                    <li>
+                    <li class="divider"></li>
+                    <li class="disabled">
                         <a class="toolbar" title="{{'Start' | translate}}">
                             <i class="fa fa-play"></i>
                         </a>
                     </li>
-                    <li>
+                    <li class="disabled">
                         <a class="toolbar" title="{{'Pause' | translate}}">
                             <i class="fa fa-pause"></i>
                         </a>
                     </li>
-                    <li>
+                    <li class="disabled">
                         <a class="toolbar" title="{{'Delete' | translate}}">
                             <i class="fa fa-trash-o"></i>
+                            <i class="fa fa-caret-right fa-right-bottom fa-rotate-45 fa-half" aria-hidden="true"></i>
                         </a>
                     </li>
+                    <li class="divider"></li>
                     <li>
                         <a class="toolbar dropdown-toggle" data-toggle="dropdown" title="{{'Display Order' | translate}}">
                             <i class="fa fa-sort-alpha-asc"></i>
+                            <i class="fa fa-caret-right fa-right-bottom fa-rotate-45 fa-half" aria-hidden="true"></i>
                         </a>
                         <ul class="dropdown-menu" role="menu">
                             <li>

app/styles/aria-ng.css

@@ -16,6 +16,10 @@
     background-color: #f6f6f6;
 }
 
+.skin-aria-ng .main-header .navbar .navbar-nav {
+    margin-left: 5px;
+}
+
 .skin-aria-ng .main-header .navbar .nav > li {
     display: inline-block;
 }
@@ -23,6 +27,8 @@
 .skin-aria-ng .main-header .navbar .nav > li > a {
     color: #707070;
     font-size: 16px;
+    padding-left: 10px;
+    padding-right: 10px;
 }
 
 .skin-aria-ng .main-header .navbar .nav > li > a:hover,
@@ -35,6 +41,20 @@
     color: #0080ff;
 }
 
+.skin-aria-ng .main-header .navbar .nav > li.disabled > a {
+    color: #ccc !important;
+    pointer-events: none !important;
+}
+
+.skin-aria-ng .main-header .navbar .nav > li.divider {
+    padding: 10px 0 10px 0;
+    margin-left: 4px;
+    margin-right: 4px;
+    border-right: 1px solid #ccc;
+    position: relative;
+    top: 15px;
+}
+
 .skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle {
     color: #707070;
 }
@@ -58,6 +78,16 @@
         padding-left: 20px;
     }
 
+    .skin-aria-ng .main-header .navbar .navbar-nav {
+        margin-left: -10px;
+    }
+
+    .skin-aria-ng .main-header .navbar .nav > li.divider {
+        margin-left: 0;
+        margin-right: 0;
+        top: 5px;
+    }
+
     .skin-aria-ng .main-header .navbar .dropdown-menu li.divider {
         background-color: rgba(255, 255, 255, 0.1);
     }
@@ -224,6 +254,25 @@ td {
     }
 }
 
+/* font-awesome extend */
+.fa-half {
+    font-size: 0.5em;
+}
+
+.fa-rotate-45 {
+    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    filter: none;
+}
+
+.fa-right-bottom {
+    position: relative;
+    right: 0;
+    bottom: -6px;
+}
+
 /* toolbar */
 .toolbar {
     cursor: pointer;