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;