add scrollbar indicators on filter-tables

matt-deboer · Oct 29, 2017 · d7df17b · d7df17b
1 parent cd3e03d
commit d7df17b
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 37 deletions.
diff --git a/pkg/ui/src/components/filter-table/FilterTable.css b/pkg/ui/src/components/filter-table/FilterTable.css
@@ -12,3 +12,27 @@ table.filter-table {
       margin-right: 0 !important; }
   table.filter-table tr th:first-child, table.filter-table tr td:first-child {
     padding-left: 15px !important; }
+
+.filter-table-root > div > div:nth-child(2)::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.1); }
+
+.filter-table-root > div > div:nth-child(2)::-webkit-scrollbar {
+  width: 15px;
+  z-index: 1500; }
+
+.filter-table-root > div > div:nth-child(2)::-webkit-scrollbar-thumb {
+  border-radius: 7px;
+  border: 1px solid transparent;
+  -webkit-box-shadow: inset -1 -1 0px rgba(0, 0, 0, 0.05);
+  background-color: rgba(0, 0, 0, 0.1);
+  background-clip: padding-box;
+  box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.05);
+  border: solid 3px transparent; }
+
+.filter-table-root > div > div:nth-child(2)::-webkit-scrollbar-corner {
+  background-color: transparent; }
+
+.filter-table-root > div > div:nth-child(2)::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+  display: none; }
diff --git a/pkg/ui/src/components/filter-table/FilterTable.scss b/pkg/ui/src/components/filter-table/FilterTable.scss
@@ -32,42 +32,62 @@ table.filter-table {
 
 }
 
-// .filter-table-root {
-//   &>div {
-//     &>div:nth-child(2) {
-//       &::-webkit-scrollbar-track {
-//         // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-//         // box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-//         border-radius: 7px;
-//         // background-color: rgba(0,0,0,0.1);
-//         // border: 2px solid rgba(0, 0, 0, 0);
-//         // height: 100%;
-//       }
-
-//       &::-webkit-scrollbar {
-//           width: 12px;
-//           // background-color: transparent;
-//           z-index: 1500;
-//           // border: 4px solid rgba(0, 0, 0, 0);
-//       }
-
-//       &::-webkit-scrollbar-thumb {
-//           border-radius: 7px;
-//           border: 2px solid rgba(0, 0, 0, 0);
-//           -webkit-box-shadow: inset -1 -1 0px rgba(0,0,0,.3);
-//           box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-//           background-color: rgba(0,0,0,0.2);
-//           background-clip: padding-box;
-//       }
+.filter-table-root > div {
 
-//       &::-webkit-scrollbar-corner {
-//         background-color: transparent;
-//       }
-//       &::-webkit-scrollbar-button {
-//         width: 0;
-//         height: 0;
-//         display: none;
-//       }
-//     }
-//   }
+  &>div:nth-child(2) {
+
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 10px 10px rgba(0,0,0,.1);
+      // border: solid 1px transparent
+    }
+
+    &::-webkit-scrollbar {
+      width: 15px;
+      z-index: 1500;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 7px;
+      border: 1px solid rgba(0, 0, 0, 0);
+      -webkit-box-shadow: inset -1 -1 0px rgba(0,0,0,.05);
+      background-color: rgba(0,0,0,0.1);
+      background-clip: padding-box;
+
+      box-shadow: inset 0 0 10px 10px rgba(0,0,0,.05);
+      border: solid 3px transparent;
+    }
+
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-button {
+      width: 0;
+      height: 0;
+      display: none;
+    }
+  }
+}
+
+
+// overflow-y: auto;
+// overflow-x: hidden;
+// height: calc(100vh - 565px);
+// &::-webkit-scrollbar-track {
+//   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+//   box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+//   border-radius: 10px;
+//   background-color: transparent;
+// }
+
+// &::-webkit-scrollbar {
+//     width: 12px;
+//     background-color: transparent;
+//     z-index: 1500;
+// }
+
+// &::-webkit-scrollbar-thumb {
+//     border-radius: 10px;
+//     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+//     box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+//     background-color: #444;
 // }