Fix scroll bar width issue in ui-grids.

Resolves child-first-authority-fcc-project#406.

Custom styles for the grid scrollbars that override ui-grid
style. Autohides the scrollbars when not needed and uses
!important because of the need to overrid ui-grid inline styles.

I've been investigating some issues with the scrollbars for
a while. Notes about a related bug in issue child-first-authority-fcc-project#423.

client/app/main/main.scss

@@ -58,7 +58,6 @@
   .ui-grid-menu {
     padding: 0;
     .ui-grid-menu-mid {
-      overflow-y: scroll;
       max-height: 234px;
       border: 1px solid #d4d4d4;
     }
@@ -73,8 +72,31 @@
       @include cfa-scrollbar(5px);
     }
   }
-  .ui-grid-viewport {
-    @include cfa-scrollbar(5px, 0, $pale-turquoise);
+  .ui-grid-render-container-body .ui-grid-viewport {
+    overflow-x: auto !important;
+    overflow-y: auto !important;
+    &::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+      &:hover {
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
+      }
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+      &:hover {
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+      &:active {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+    }
   }
   .ui-grid-menu-button .ui-grid-menu {
     // The menu button is inset by 1px use 53 instead of 54px

client/components/grid-defaults/grid-defaults.service.js

@@ -107,7 +107,9 @@ function GridDefaults($filter, $timeout, Student, AbsenceRecord,
       enableFiltering: true,
       enableCellEdit: false,
       treeRowHeaderAlwaysVisible: false,
-      exporterMenuPdf: false
+      exporterMenuPdf: false,
+      enableHorizontalScrollbar: 0,
+      enableVerticalScrollbar: 0
     };
   }