Unify clear button color

havit · Jun 21, 2024 · 460c449 · 460c449
1 parent 1d50449
commit 460c449
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 4 deletions.
diff --git a/...azor.Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestInternal.razor.css b/...azor.Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestInternal.razor.css
@@ -33,6 +33,10 @@
     font-size: .75rem;
 }
 
-.hx-autosuggest-input-icon div[role="button"]:not(:hover) ::deep .hx-icon {
-    opacity: var(--hx-autosuggest-input-close-icon-opacity);
+::deep .hx-autosuggest-input-icon-clear {
+    color: var(--hx-autosuggest-input-clear-icon-color);
+}
+
+::deep .hx-autosuggest-input-icon-search {
+    color: var(--hx-autosuggest-input-search-icon-color);
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor
@@ -66,13 +66,13 @@
 				else if (!string.IsNullOrEmpty(TextQuery) && (ClearIconEffective is not null))
 				{
 					<div role="button" class="hx-search-box-input-icon hx-search-box-input-icon-end" @onclick="ClearInputAsync">
-						<HxIcon Icon="ClearIconEffective" />
+						<HxIcon CssClass="hx-search-box-input-icon-clear" Icon="ClearIconEffective" />
 					</div>
 				}
 				else if ((SearchIconEffective is not null) && (SearchIconPlacementEffective == SearchBoxSearchIconPlacement.End))
 				{
 					<div class="hx-search-box-input-icon hx-search-box-input-icon-end">
-						<HxIcon Icon="SearchIconEffective" />
+						<HxIcon CssClass="hx-search-box-input-icon-search" Icon="SearchIconEffective" />
 					</div>
 				}
 			</HxDropdownToggleElement>

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css
@@ -60,4 +60,12 @@
 
 ::deep .dropdown:focus-within {
     z-index: 6; /* Assures that the inputs' box shadows are always fully visible (rendered on top). Must be larger than 5 because otherwise the validation message is rendered on top. */
+}
+
+::deep .hx-search-box-input-icon-clear {
+    color: var(--hx-search-box-input-clear-icon-color);
+}
+
+::deep .hx-search-box-input-icon-search {
+    color: var(--hx-search-box-input-search-icon-color);
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css
@@ -5,6 +5,8 @@
 	--hx-autosuggest-item-highlighted-background-color: 			var(--bs-tertiary-bg);
 	--hx-autosuggest-dropdown-menu-height: 							300px;
 	--hx-autosuggest-dropdown-menu-width: 							100%;
+	--hx-autosuggest-input-search-icon-color:						unset;
+	--hx-autosuggest-input-clear-icon-color:						unset;
 
 	/* HxButton */
 	--hx-button-icon-text-spacer-width: 							0.25rem;
@@ -194,6 +196,8 @@
 	--hx-search-box-item-subtitle-font-size: 						.75rem;
 	--hx-search-box-item-highlighted-background-color: 				var(--bs-tertiary-bg);
 	--hx-search-box-dropdown-menu-height: 							300px;
+	--hx-search-box-input-search-icon-color:						unset;
+	--hx-search-box-input-clear-icon-color:							unset;
 }
 
 form {

diff --git a/....Blazor.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Documentation.razor b/....Blazor.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Documentation.razor
@@ -41,5 +41,11 @@
         <ComponentApiDocCssVariable Name="--hx-autosuggest-dropdown-menu-width" Default="100%">
             Width of the results dropdown menu.
         </ComponentApiDocCssVariable>
+        <ComponentApiDocCssVariable Name="--hx-autosuggest-input-search-icon-color" Default="unset">
+            Color of the search icon.
+        </ComponentApiDocCssVariable>
+        <ComponentApiDocCssVariable Name="--hx-autosuggest-input-clear-icon-color" Default="unset">
+            Color of the clear icon.
+        </ComponentApiDocCssVariable>
     </CssVariables>
 </ComponentApiDoc>
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Documentation.razor
@@ -60,5 +60,11 @@
 		<ComponentApiDocCssVariable Name="--hx-search-box-item-highlighted-background-color" Default="var(--bs-tertiary-bg)">
 			Background color of an item when highlighted.
 		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-search-box-input-search-icon-color" Default="unset">
+            Color of the search icon.
+        </ComponentApiDocCssVariable>
+        <ComponentApiDocCssVariable Name="--hx-search-box-input-clear-icon-color" Default="unset">
+            Color of the clear icon.
+        </ComponentApiDocCssVariable>
 	</CssVariables>
 </ComponentApiDoc>