fix(ui5-li-notification-group): visual fixes for right-to-left mode (#…

…4354)

- "collapse" arrow is now pointing down in RTL
- buttons and status icons are correctly aligned in RTL
- background is not switching to blue when user taps (on touch device)

Fixes #4255
Fixes #4256
Fixes #4257

packages/fiori/src/themes/NotificationListGroupItem.css

@@ -9,6 +9,10 @@
 	transform: rotate(90deg);
 }
 
+:host(:not([collapsed])) [dir="rtl"] .ui5-nli-group-toggle-btn {
+	transform: rotate(270deg);
+}
+
 :host([collapsed]) .ui5-nli-group-items {
 	display: none;
 }
@@ -35,6 +39,10 @@
 	cursor: default;
 }
 
+[dir="rtl"] .ui5-nli-group-header {
+	padding: 0.75rem 0.75rem 0.25rem 0.5rem;
+}
+
 .ui5-nli-group-toggle-btn {
 	margin-right: 0.75rem;
 	cursor: pointer;
@@ -64,9 +72,15 @@
 
 [dir="rtl"] .ui5-nli-group-toggle-btn {
 	margin-left: 1rem;
+	margin-right: 0;
 }
 
 [dir="rtl"] .ui5-nli-group-counter {
 	margin-right: 0.25rem;
 	margin-left: 1rem;
 }
+
+/* fix for blue background color on tap (touchscreen devices) */
+:host([ui5-li-notification-group]) { 
+	-webkit-tap-highlight-color: transparent;
+}

packages/fiori/src/themes/NotificationListItem.css

@@ -74,6 +74,10 @@
 	cursor: pointer;
 }
 
+[dir="rtl"].ui5-nli-root {
+	padding: 1rem 1rem 1rem 0.5rem;
+}
+
 .ui5-nli-content {
 	display: flex;
 	flex-direction: column;