diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index b66d5857e..172bf4307 100755 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less index 49c153491..c030ba040 100755 --- a/src/definitions/globals/site.less +++ b/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(); diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables old mode 100644 new mode 100755 index 7ab6fdf68..3209a2029 --- a/src/themes/default/globals/site.variables +++ b/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 --------------------*/