From c208132dea1ed199cb3041557254eb89a59589e1 Mon Sep 17 00:00:00 2001 From: kskondov Date: Thu, 9 May 2024 11:42:42 +0300 Subject: [PATCH] fix(ui5-upload-collection): correct drag and drop text and icon color (#8863) Downport ui5-upload-collection drag and drop overlay colors change Related to #8616 --- packages/fiori/src/themes/UploadCollection.css | 9 ++++++--- .../src/themes/base/UploadCollection-parameters.css | 4 ++++ .../themes/sap_horizon/UploadCollection-parameters.css | 6 ++++++ .../sap_horizon_dark/UploadCollection-parameters.css | 6 ++++++ .../sap_horizon_hcb/UploadCollection-parameters.css | 9 ++++++--- .../sap_horizon_hcw/UploadCollection-parameters.css | 8 ++++++-- 6 files changed, 34 insertions(+), 8 deletions(-) diff --git a/packages/fiori/src/themes/UploadCollection.css b/packages/fiori/src/themes/UploadCollection.css index 91b68243e5fa..21ca5e2a4a5a 100644 --- a/packages/fiori/src/themes/UploadCollection.css +++ b/packages/fiori/src/themes/UploadCollection.css @@ -22,6 +22,7 @@ flex-direction: column; align-items: center; justify-content: center; + border-radius: var(--ui5_upload_collection_drag_overlay_border_radius); } .uc-drag-overlay { @@ -41,7 +42,8 @@ left: 0; right: 0; background-color: var(--sapGroup_ContentBackground); - opacity: 0.8; + opacity: var(--ui5_upload_collection_drag_overlay_opacity); + border-radius: var(--ui5_upload_collection_drag_overlay_border_radius); } /* use pseudo element to set opacity only for the content and not on the border */ @@ -54,19 +56,20 @@ right: 0; background-color: var(--ui5_upload_collection_drop_overlay_background); opacity: 0.05; + border-radius: var(--ui5_upload_collection_drag_overlay_border_radius); } .uc-dnd-overlay [ui5-icon] { width: 4rem; height: 4rem; margin-bottom: 1rem; - color: var(--sapContent_NonInteractiveIconColor); + color: var(--ui5_upload_collection_drag_overlay_icon_color); } .uc-dnd-overlay .dnd-overlay-text { font-family: "72override", var(--sapFontFamily); font-size: var(--sapFontHeader4Size); - color: var(--sapContent_NonInteractiveIconColor); + color: var(--ui5_upload_collection_drag_overlay_text_color); } .uc-dnd-overlay [ui5-icon], diff --git a/packages/fiori/src/themes/base/UploadCollection-parameters.css b/packages/fiori/src/themes/base/UploadCollection-parameters.css index ac00bf83c58a..18be9e265af0 100644 --- a/packages/fiori/src/themes/base/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/base/UploadCollection-parameters.css @@ -6,4 +6,8 @@ --ui5_upload_collection_thumbnail_margin_inline_end: 0.75rem; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.75rem; --ui5_upload_collection_small_size_buttons_margin_inline_start: 0; + --ui5_upload_collection_drag_overlay_text_color: var(--sapContent_NonInteractiveIconColor); + --ui5_upload_collection_drag_overlay_icon_color: var(--sapContent_NonInteractiveIconColor); + --ui5_upload_collection_drag_overlay_border_radius: 0; + --ui5_upload_collection_drag_overlay_opacity: 0.8; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css index 23cb9e77ee23..37beaa5b9875 100644 --- a/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css @@ -2,4 +2,10 @@ :root { --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; + --ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor); + --ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor); + --ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapField_BorderColor); + --ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor); + --ui5_upload_collection_drag_overlay_border_radius: 0.5rem; + --ui5_upload_collection_drag_overlay_opacity: 0.5; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css index 23cb9e77ee23..37beaa5b9875 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css @@ -2,4 +2,10 @@ :root { --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; + --ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor); + --ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor); + --ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapField_BorderColor); + --ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor); + --ui5_upload_collection_drag_overlay_border_radius: 0.5rem; + --ui5_upload_collection_drag_overlay_opacity: 0.5; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css index 69913c713307..8f1e268bae02 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css @@ -1,8 +1,11 @@ @import "../base/UploadCollection-parameters.css"; :root { - --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); - --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); - --ui5_upload_collection_drop_overlay_background: transparent; + --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapField_BorderColor); + --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_DragAndDropActiveColor); + --ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor); --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; + --ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor); + --ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor); + --ui5_upload_collection_drag_overlay_opacity: 0.5; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css index 18eefa6d36d9..83721b6d195f 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css @@ -1,7 +1,11 @@ @import "../base/UploadCollection-parameters.css"; :root { - --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); - --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); + --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapField_BorderColor); + --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_DragAndDropActiveColor); --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; + --ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor); + --ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor); + --ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor); + --ui5_upload_collection_drag_overlay_opacity: 0.5; } \ No newline at end of file