diff --git a/packages/fiori/src/themes/SearchField.css b/packages/fiori/src/themes/SearchField.css index 89a8b1377c8b9..7831245dfeb42 100644 --- a/packages/fiori/src/themes/SearchField.css +++ b/packages/fiori/src/themes/SearchField.css @@ -45,6 +45,11 @@ background-color: var(--_ui5-search-wrapper-hover-background-color); } +:host(:not([collapsed]):focus-within), +.ui5-shellbar-search-field-wrapper:focus-within { + background-color: var(--_ui5-search-wrapper-active-background-color); +} + :host([focused-inner-input]) .ui5-search-field-root { outline: var(--_ui5_search_wrapper_outline); border-radius: var(--_ui5_search_input_border_radius); diff --git a/packages/fiori/src/themes/base/SearchField-parameters.css b/packages/fiori/src/themes/base/SearchField-parameters.css index 2d4df0defe5df..1d34a965adc74 100644 --- a/packages/fiori/src/themes/base/SearchField-parameters.css +++ b/packages/fiori/src/themes/base/SearchField-parameters.css @@ -6,7 +6,8 @@ --_ui5-search-wrapper-background: var(--sapShell_InteractiveBackground); --_ui5_search_separator_background: var(--sapShell_InteractiveBorderColor); --_ui5-search-wrapper-hover-background: var(--sapField_Hover_BackgroundStyle); - --_ui5-search-wrapper-hover-background-color: var(--sapField_Hover_Background); + --_ui5-search-wrapper-hover-background-color: none; + --_ui5-search-wrapper-active-background-color: none; --_ui5-search-elements-hover-background: none; --_ui5-search-elements-active-background: none; --_ui5_search_input_scope_margin: 0 0.125rem 0 .5rem; diff --git a/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css index 25455d3465b61..6d6826448e10c 100644 --- a/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css @@ -7,7 +7,6 @@ --_ui5-search-wrapper-background: var(--sapShellColor); --_ui5_search_separator_background: none; --_ui5-search-wrapper-hover-background: none; - --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; --_ui5-search_input_scope_hover_shadow: none; --_ui5-search_input_scope_active_shadow: none; diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css index 398218acec364..6da19679a8e30 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css @@ -7,7 +7,6 @@ --_ui5-search-wrapper-background: var(--sapShellColor); --_ui5_search_separator_background: none; --_ui5-search-wrapper-hover-background: none; - --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; --_ui5-search_input_scope_hover_shadow: none; --_ui5-search_input_scope_active_shadow: none; diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css index 692fc8dfef4a2..b25a362875cd6 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css @@ -7,7 +7,6 @@ --_ui5-search-wrapper-background: var(--sapShellColor); --_ui5_search_separator_background: none; --_ui5-search-wrapper-hover-background: none; - --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; --_ui5-search_input_scope_hover_shadow: none; --_ui5-search_input_scope_active_shadow: none; diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css index ac17dfaa37244..8afeff66d799c 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css @@ -7,7 +7,6 @@ --_ui5-search-wrapper-background: var(--sapShellColor); --_ui5_search_separator_background: none; --_ui5-search-wrapper-hover-background: none; - --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; --_ui5-search_input_scope_hover_shadow: none; --_ui5-search_input_scope_active_shadow: none; diff --git a/packages/fiori/src/themes/sap_horizon/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon/SearchField-parameters.css new file mode 100644 index 0000000000000..3a2245812298d --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon/SearchField-parameters.css @@ -0,0 +1,6 @@ +@import "../base/SearchField-parameters.css"; + +:host { + --_ui5-search-wrapper-hover-background-color: var(--sapShell_Hover_Background); + --_ui5-search-wrapper-active-background-color: var(--sapShell_Active_Background); +} diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css index 3277af7d37203..ca37aa4bd4316 100644 --- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css @@ -18,8 +18,7 @@ @import "./FlexibleColumnLayout-parameters.css"; @import "./MediaGallery-parameters.css"; @import "../base/DynamicPage-parameters.css"; -@import "../base/SearchField-parameters.css"; -@import "../base/Search-parameters.css"; +@import "./SearchField-parameters.css"; @import "../base/Search-parameters.css"; @import "./DynamicPageTitle-parameters.css"; @import "../base/DynamicPageHeader-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_dark/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/SearchField-parameters.css new file mode 100644 index 0000000000000..3a2245812298d --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon_dark/SearchField-parameters.css @@ -0,0 +1,6 @@ +@import "../base/SearchField-parameters.css"; + +:host { + --_ui5-search-wrapper-hover-background-color: var(--sapShell_Hover_Background); + --_ui5-search-wrapper-active-background-color: var(--sapShell_Active_Background); +} diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css index 118bcf65fb4cb..f4d81d4eb9fcc 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css @@ -8,7 +8,7 @@ @import "./ProductSwitchItem-parameters.css"; @import "../base/ShellBar-parameters.css"; @import "./ShellBar-parameters.css"; -@import "../base/SearchField-parameters.css"; +@import "./SearchField-parameters.css"; @import "../base/Search-parameters.css"; @import "./TimelineItem-parameters.css"; @import "./SideNavigation-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css index 3ef5768a9d223..1166cef26b690 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css @@ -7,7 +7,6 @@ --_ui5-search-wrapper-background: none; --_ui5_search_separator_background: none; --_ui5-search-wrapper-hover-background: none; - --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; --_ui5-search_input_scope_hover_shadow: none; --_ui5-search_input_scope_active_shadow: none; diff --git a/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css index 3ef5768a9d223..1166cef26b690 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css @@ -7,7 +7,6 @@ --_ui5-search-wrapper-background: none; --_ui5_search_separator_background: none; --_ui5-search-wrapper-hover-background: none; - --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; --_ui5-search_input_scope_hover_shadow: none; --_ui5-search_input_scope_active_shadow: none;