chore: Move sass code related to custom scrollbar into @grafana/ui #14759

packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss

@@ -0,0 +1,40 @@
+.custom-scrollbars {
+  // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
+  // make scroll working it should fit outer container size (scroll appears only when inner container size is
+  // greater than outer one).
+  display: flex;
+  flex-grow: 1;
+
+  .view {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+  }
+
+  .track-vertical {
+    border-radius: 3px;
+    width: 6px !important;
+    right: 2px;
+    bottom: 2px;
+    top: 2px;
+  }
+
+  .track-horizontal {
+    border-radius: 3px;
+    height: 6px !important;
+
+    right: 2px;
+    bottom: 2px;
+    left: 2px;
+  }
+
+  .thumb-vertical {
+    @include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
+    border-radius: 6px;
+  }
+
+  .thumb-horizontal {
+    @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
+    border-radius: 6px;
+  }
+}

packages/grafana-ui/src/components/index.scss

@@ -1 +1,2 @@
+@import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';

public/sass/components/_scrollbar.scss

@@ -295,50 +295,6 @@
   }
 }
 
-// Custom styles for 'react-custom-scrollbars'
-
-.custom-scrollbars {
-  // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
-  // make scroll working it should fit outer container size (scroll appears only when inner container size is
-  // greater than outer one).
-  display: flex;
-  flex-grow: 1;
-
-  .view {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-  }
-
-  .track-vertical {
-    border-radius: 3px;
-    width: 6px !important;
-
-    right: 2px;
-    bottom: 2px;
-    top: 2px;
-  }
-
-  .track-horizontal {
-    border-radius: 3px;
-    height: 6px !important;
-
-    right: 2px;
-    bottom: 2px;
-    left: 2px;
-  }
-
-  .thumb-vertical {
-    @include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
-    border-radius: 6px;
-  }
-
-  .thumb-horizontal {
-    @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
-    border-radius: 6px;
-  }
-}
-
 .scroll-margin-helper {
   margin-right: 12px;
 }