Merge pull request #2981 from IgniteUI/dTsvetkov/add-data-analysis-scrollbar-theme-master

Add scrollbar theme in data analysis samples

Author: zdrawku

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss

@@ -6,20 +6,6 @@
   overflow-y: auto;
 }
 
-@mixin scrollbar($scrollbar-width, $scrollbar-height) {
-    $scrollbar-track: hexrgba(color($color: 'grays', $variant: 200));
-    $scrollbar-thumb: hexrgba(color($color: 'grays', $variant: 400));
-
-    ::-webkit-scrollbar {
-        width: $scrollbar-width;
-        height: $scrollbar-height;
-        background-color: $scrollbar-track;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background-color: $scrollbar-thumb;
-    }
-}
 
 .grid-chart-contextmenu-wrapper {
     width: 100%;
@@ -42,7 +28,7 @@
 
 .selection-area {
 
-    @include scrollbar(6px, 6px);
+    @include scrollbar(scrollbar-theme($size: 6px));
     width: 100%;
     height: 90%;
     display: inline-flex;
@@ -100,7 +86,7 @@ $custom-badge-theme: badge-theme(
     }
     .grid-chart-contextmenu-wrapper {
         igx-grid {
-            @include scrollbar(16px, 16px);
+            @include scrollbar(scrollbar-theme($size: 16px));
         }
     }
 
@@ -127,7 +113,7 @@ $custom-badge-theme: badge-theme(
     }
 
     igx-tab-content {
-        @include scrollbar(10px, 10px);
+        @include scrollbar(scrollbar-theme($size: 10px));
     }
 
 }
@@ -148,7 +134,7 @@ $custom-badge-theme: badge-theme(
 
 $font-family: "Titillium Web", "Roboto", "Helvetica Neue", sans-serif;
 .tab-options-wrapper{
-    @include scrollbar(6px, 6px);
+    @include scrollbar(scrollbar-theme($size: 6px));
 
     display: flex;
     flex-flow: column;

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.scss

@@ -4,20 +4,6 @@
 //   width: 100%;
 // }
 
-@mixin scrollbar($scrollbar-width, $scrollbar-height) {
-    $scrollbar-track: hexrgba(color($color: 'grays', $variant: 200));
-    $scrollbar-thumb: hexrgba(color($color: 'grays', $variant: 400));
-
-    ::-webkit-scrollbar {
-        width: $scrollbar-width;
-        height: $scrollbar-height;
-        background-color: $scrollbar-track;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background-color: $scrollbar-thumb;
-    }
-}
 
 .grid-chart-contextmenu-wrapper {
     width: 90%;
@@ -28,7 +14,7 @@
 :host ::ng-deep {
     .grid-chart-contextmenu-wrapper {
         igx-grid {
-            @include scrollbar(16px, 16px);
+            @include scrollbar(scrollbar-theme($size: 16px));
         }
     }
 
@@ -74,7 +60,7 @@
 
     .selection-area {
 
-        @include scrollbar(6px, 6px);
+        @include scrollbar(scrollbar-theme($size: 6px));
         width: 100%;
         height: 95%;
         position: absolute;
@@ -129,7 +115,7 @@
     }
 
     igx-tab-content {
-        @include scrollbar(10px, 10px);
+        @include scrollbar(scrollbar-theme($size: 10px));
     }
 
 }