From da2c979265ce4a563322451a456d7a1570f3fe46 Mon Sep 17 00:00:00 2001 From: Georgieva Date: Tue, 18 Jun 2024 12:08:29 +0300 Subject: [PATCH] fix(ui5-busy-indicator): add block layer (#9233) According to the design if busy indicator is used over some component there should be transparent background as overlay. Fixes: #9079 --- packages/main/src/themes/BusyIndicator.css | 4 ++++ packages/main/src/themes/base/BusyIndicator-parameters.css | 1 + .../src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css | 5 +++++ .../main/src/themes/sap_fiori_3_hcb/parameters-bundle.css | 2 +- .../src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css | 5 +++++ .../main/src/themes/sap_fiori_3_hcw/parameters-bundle.css | 2 +- .../src/themes/sap_horizon_hcb/BusyIndicator-parameters.css | 1 + .../src/themes/sap_horizon_hcw/BusyIndicator-parameters.css | 1 + 8 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 packages/main/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css create mode 100644 packages/main/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css index 1dc850464b6d..2ae14e4a12bf 100644 --- a/packages/main/src/themes/BusyIndicator.css +++ b/packages/main/src/themes/BusyIndicator.css @@ -89,6 +89,10 @@ flex-direction: column; } +:host(:not(:empty)) .ui5-busy-indicator-busy-area { + background-color: var(--_ui5_busy_indicator_block_layer); +} + .ui5-busy-indicator-busy-area:focus { outline: var(--_ui5_busy_indicator_focus_outline); outline-offset: -2px; diff --git a/packages/main/src/themes/base/BusyIndicator-parameters.css b/packages/main/src/themes/base/BusyIndicator-parameters.css index 51ff3ea3650c..f8d7476fc402 100644 --- a/packages/main/src/themes/base/BusyIndicator-parameters.css +++ b/packages/main/src/themes/base/BusyIndicator-parameters.css @@ -2,4 +2,5 @@ --_ui5_busy_indicator_color: var(--sapContent_IconColor); --_ui5_busy_indicator_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); --_ui5_busy_indicator_focus_border_radius: 0px; + --_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 20%); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css new file mode 100644 index 000000000000..5fdb8325261d --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css @@ -0,0 +1,5 @@ +@import "../base/BusyIndicator-parameters.css"; + +:root { + --_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css index 8717ecd9f146..04b6136ed507 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css @@ -2,7 +2,7 @@ @import "../base/AvatarGroup-parameters.css"; @import "./Badge-parameters.css"; @import "../base/BrowserScrollbar-parameters.css"; -@import "../base/BusyIndicator-parameters.css"; +@import "./BusyIndicator-parameters.css"; @import "./Button-parameters.css"; @import "../base/CalendarLegend-parameters.css"; @import "../base/CalendarLegendItem-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css new file mode 100644 index 000000000000..5fdb8325261d --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css @@ -0,0 +1,5 @@ +@import "../base/BusyIndicator-parameters.css"; + +:root { + --_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css index 8717ecd9f146..04b6136ed507 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css @@ -2,7 +2,7 @@ @import "../base/AvatarGroup-parameters.css"; @import "./Badge-parameters.css"; @import "../base/BrowserScrollbar-parameters.css"; -@import "../base/BusyIndicator-parameters.css"; +@import "./BusyIndicator-parameters.css"; @import "./Button-parameters.css"; @import "../base/CalendarLegend-parameters.css"; @import "../base/CalendarLegendItem-parameters.css"; diff --git a/packages/main/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css index 4175b985726a..45a424628549 100644 --- a/packages/main/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css @@ -2,4 +2,5 @@ :root { --_ui5_busy_indicator_color: var(--sapContent_BusyColor); + --_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css index 4175b985726a..45a424628549 100644 --- a/packages/main/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css @@ -2,4 +2,5 @@ :root { --_ui5_busy_indicator_color: var(--sapContent_BusyColor); + --_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%); } \ No newline at end of file