Add custom scrollbar styles

RELEASE-NOTES.md

@@ -4,9 +4,11 @@
 
 **Enhancements**
 - **Modal** - Adds `tiny` and `mini` sized modals #5123 **Thanks @Banandrew**
+- **Modal** - Adds new `scrolling content` variation to have a modal with content that scrolls
 - **Popup* - Added `bind clickaway` `bind touchclose` `bind close on scroll` behaviors to make it easier for `on: 'manual'` popup to specify behavior
 - **Popup** - Separated className setting for `visible` into `visible` and `popupVisible`, this way you can remove visible indiciation on activating element without modifying popup.
 - **Build Tools** - All Gulp/NPM dependencies have been updated to their latest versions
+- **Site** - Site now includes custom scrollbar styles for UI (not page) by default in WebKit/Chrome. You can disable this by setting `@useCustomScrollbars: false` in your `site.variables`
 
 **Bugs**
 - **Dropdown** - Fixed issue where using `down` key to re-open dropdown when using `search selection dropdown` would start at the top element instead of jumping to selected element

src/definitions/globals/site.less

@@ -46,8 +46,6 @@ body {
   font-smoothing: @fontSmoothing;
 }
 
-
-
 /*******************************
              Headers
 *******************************/
@@ -127,6 +125,39 @@ a:hover {
 }
 
 
+/*******************************
+         Scrollbars
+*******************************/
+
+.addScrollbars() when (@useCustomScrollbars) {
+
+  /* Force Simple Scrollbars */
+  body ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: @customScrollbarWidth;
+  }
+  body ::-webkit-scrollbar-track {
+    background: @trackBackground;
+    border-radius: @trackBorderRadius;
+  }
+
+  body ::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    border-radius: @thumbBorderRadius;
+    background: @thumbBackground;
+    transition: @thumbTransition;
+  }
+
+  body ::-webkit-scrollbar-thumb:window-inactive {
+    background: @thumbInactiveBackground;
+  }
+
+  body ::-webkit-scrollbar-thumb:hover {
+    background: @thumbHoverBackground;
+  }
+
+}
+
 /*******************************
           Highlighting
 *******************************/
@@ -162,5 +193,5 @@ input::selection {
   color: @inputHighlightColor;
 }
 
-
+.addScrollbars();
 .loadUIOverrides();

src/themes/default/globals/site.variables

@@ -139,6 +139,24 @@
 @linkHoverColor      : darken(saturate(@linkColor, 20), 15, relative);
 @linkHoverUnderline  : @linkUnderline;
 
+/*-------------------
+    Scroll Bars
+--------------------*/
+
+@useCustomScrollbars: true;
+
+@customScrollbarWidth: 9px;
+
+@trackBackground: rgba(0, 0, 0, 0.1);
+@trackBorderRadius: 0px;
+
+@thumbBorderRadius: 5px;
+@thumbBackground: rgba(0, 0, 0, 0.25);
+@thumbTransition: color 0.2s ease;
+
+@thumbInactiveBackground: rgba(0, 0, 0, 0.15);
+@thumbHoverBackground: rgba(128, 135, 139, 0.8);
+
 /*-------------------
   Highlighted Text
 --------------------*/