feat: fix items list datatable.

client/src/style/components/DataTable/DataTable.scss

@@ -64,6 +64,10 @@
           border-bottom: 0;
         }
       }
+
+      .bp3-context-menu-popover-target{
+        z-index: 100;
+      }
     }
 
     .th,

client/src/style/components/DataTable/Pagination.scss

@@ -1,12 +1,12 @@
 
 .pagination{
   display: flex;
-  padding: 25px 14px;
+  padding: 28px 14px;
   font-size: 13px;
 
   .bp3-button{
     background: transparent;
-    padding: 4px 4px;
+    padding: 5px;
   }
 
   &__item{
@@ -15,7 +15,7 @@
 
     &:not([class*="bp3-intent-"]){
       color: #666666; 
-      border-radius: 3px;
+      border-radius: 5px;
 
       &:hover{
         background-color: #E6EFFB;
@@ -28,14 +28,14 @@
     }
 
     .pagination .pagination__buttons-group .bp3-button-group &{
-      border-radius: 3px;
+      border-radius: 5px;
     }
     &--next,
     &--previous{
 
       &.bp3-button{
-        padding-left: 6px;
-        padding-right: 6px;
+        padding-left: 10px;
+        padding-right: 10px;
       }
     }
 
@@ -63,20 +63,22 @@
   }
 
   &__info{
-    padding-top: 6px;
-    color: #999;
+    color: #888;
     margin-left: 12px;
+    display: flex;
+    align-items: center;
   }
 
   &__controls{
     display: flex;
+    align-items: center;
     margin-left: auto;
 
     .bp3-html-select{
       margin-left: 6px;
 
       select{
-        height: 20px;
+        height: 24px;
         width: auto;
         padding: 0;
         padding-right: 0px;
@@ -103,7 +105,6 @@
 
   &__pagesize-control{
     margin-left: 12px;
-    padding-top: 4px;
-    color: #777;
+    color: #888;
   }
 }

client/src/style/components/MaterialProgressBar.scss

@@ -0,0 +1,101 @@
+// IONIC DEFAULT THEME COLORS
+$colors: (
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222
+);
+
+// https://css-tricks.com/html5-progress-element/
+.progress, progress[value] {
+  width:              100%;
+  border:             none;
+  margin:             5px 0;
+  height:             5px;
+  display:            block;
+  appearance:         none;
+  -webkit-appearance: none;
+  &::-webkit-progress-bar {
+    background-color: lighten( map-get($colors, primary), 35% );
+  }
+  &::-webkit-progress-value {
+    background-color: map-get($colors, primary);
+  }
+}
+
+// http://materializecss.com/preloader.html
+// https://github.com/Dogfalo/materialize/blob/master/dist/css/materialize.css
+.progress-materializecss {
+  position: absolute;
+  top: -1px;
+  height: 2px;
+  display: block;
+  width: 100%;
+  background-color:  transparent;
+  margin: 0;
+  overflow: hidden;
+  
+  .indeterminate {
+    background-color: #002fff;
+    
+    &:before{
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change:      left, right;
+      animation:        indeterminate 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+    &:after {
+      content:          '';
+      position:         absolute;
+      background-color: inherit;
+      top:              0;
+      left:             0;
+      bottom:           0;
+      will-change:      left, right;
+      animation:        indeterminate-short 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      animation-delay: 2.15s;
+    }
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+.progress-container{
+  width: 100%;
+  position: relative;
+
+}
+//  IRRELEVANTS STYLES  //
+/////////////////////////