fix(ui5-dialog): Fixed scrollbars styling (#3067)

Fixes: #2887
SAP · Apr 1, 2021 · f4301b8 · f4301b8
1 parent 573a6c6
commit f4301b8
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js
@@ -8,6 +8,7 @@ import Icon from "./Icon.js";
 // Template
 import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
 // Styles
+import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import dialogCSS from "./generated/themes/Dialog.css.js";
 
@@ -180,7 +181,7 @@ class Dialog extends Popup {
 	}
 
 	static get styles() {
-		return [PopupsCommonCss, dialogCSS];
+		return [browserScrollbarCSS, PopupsCommonCss, dialogCSS];
 	}
 
 	/**

diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -11,6 +11,7 @@ import { addOpenedPopover, removeOpenedPopover } from "./popup-utils/PopoverRegi
 // Template
 import PopoverTemplate from "./generated/templates/PopoverTemplate.lit.js";
 // Styles
+import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import PopoverCss from "./generated/themes/Popover.css.js";
 
@@ -263,7 +264,7 @@ class Popover extends Popup {
 	}
 
 	static get styles() {
-		return [PopupsCommonCss, PopoverCss];
+		return [browserScrollbarCSS, PopupsCommonCss, PopoverCss];
 	}
 
 	static get template() {

diff --git a/packages/main/src/themes/BrowserScrollbar.css b/packages/main/src/themes/BrowserScrollbar.css
@@ -0,0 +1,23 @@
+::-webkit-scrollbar:horizontal {
+	height: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar:vertical {
+	width: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--sapScrollBar_FaceColor);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--sapScrollBar_Hover_FaceColor);
+}
+
+::-webkit-scrollbar-corner {
+	background-color: var(--sapScrollBar_TrackColor);
+}
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -56,7 +56,7 @@
 
 	<ui5-block-layer></ui5-block-layer>
 
-	<ui5-dialog id="msg-dialog" header-text="Message dialog">
+	<ui5-dialog id="msg-dialog" header-text="Message dialog" style="--sapScrollBar_Dimension: 20px">
 		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
 			That´s OpenUI5.</p>
 		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.