From 89628ad24e00e09317fcb4231ff33dd79705e847 Mon Sep 17 00:00:00 2001
From: Lidiya Georgieva <lidiya.georgieva@sap.com>
Date: Wed, 17 Nov 2021 16:53:04 +0200
Subject: [PATCH] fix(ui5-li-notification-group): visual fixes for
 right-to-left mode

- "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
---
 .../fiori/src/themes/NotificationListGroupItem.css | 14 ++++++++++++++
 packages/fiori/src/themes/NotificationListItem.css |  4 ++++
 2 files changed, 18 insertions(+)

diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
index ea91962df183..581c36ecb727 100644
--- a/packages/fiori/src/themes/NotificationListGroupItem.css
+++ b/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;
+}
diff --git a/packages/fiori/src/themes/NotificationListItem.css b/packages/fiori/src/themes/NotificationListItem.css
index 37723f873621..3338b8d6e1ab 100644
--- a/packages/fiori/src/themes/NotificationListItem.css
+++ b/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;