fix(ui5-panel): improve header visualization (#7906)

SAP · Nov 26, 2023 · 3c1fe39 · 3c1fe39
1 parent 214780f
commit 3c1fe39
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 22 deletions.
diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css
@@ -102,7 +102,7 @@
 	align-items: center;
 	flex-shrink: 0;
 	width: var(--_ui5_panel_button_root_width);
-	height: var(--_ui5_panel_button_root_width);
+	height: var(--_ui5_panel_button_root_height);
 	padding: var(--_ui5_panel_header_button_wrapper_padding);
 	box-sizing: border-box;
 }

diff --git a/packages/main/src/themes/base/Panel-parameters.css b/packages/main/src/themes/base/Panel-parameters.css
@@ -1,6 +1,8 @@
 :root {
 	--_ui5_panel_focus_border:   var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_panel_button_root_width: 3rem;
+	--_ui5_panel_header_height: 2.75rem;
+	--_ui5_panel_button_root_width: 2.75rem;
+	--_ui5_panel_button_root_height: 2.75rem;
 	--_ui5_panel_border_radius: 0px;
 	--_ui5_panel_border_radius_expanded: 0;
 	--_ui5_panel_default_header_border: none;
@@ -17,5 +19,5 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
-	--_ui5_panel_header_button_wrapper_padding: .5625rem .375rem;
+	--_ui5_panel_header_button_wrapper_padding: .1875rem .25rem;
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -97,9 +97,6 @@
 	/* TextArea */
 	--_ui5_textarea_margin: .25rem 0;
 
-	/* Panel */
-	--_ui5_panel_header_height: 2.75rem;
-
 	/* Radio Button */
 	--_ui5_radio_button_height: 2.75rem;
 	--_ui5_radio_button_label_side_padding: .875rem;
@@ -248,7 +245,9 @@
 
 	--_ui5_month_picker_item_height: 2rem;
 	--_ui5_year_picker_item_height: 2rem;
-	--_ui5_panel_header_height: 2.5rem;
+	--_ui5_panel_header_height: 2rem;
+	--_ui5_panel_button_root_height: 2rem;
+	--_ui5_panel_button_root_width: 2.5rem;
 
 	--_ui5_token_height: 1.25rem;
 	--_ui5_token_right_margin: 0.25rem;

diff --git a/packages/main/src/themes/sap_belize/Panel-parameters.css b/packages/main/src/themes/sap_belize/Panel-parameters.css
@@ -3,6 +3,8 @@
 :root {
 	--_ui5_panel_header_padding_right: 1rem;
 	--_ui5_panel_header_height: 3rem;
+	--_ui5_panel_button_root_width: 3rem;
+	--_ui5_panel_button_root_height: 3rem;
 }
 
 [data-ui5-compact-size],

diff --git a/packages/main/src/themes/sap_fiori_3/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3/Panel-parameters.css
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -22,7 +22,7 @@
 @import "../base/Menu-parameters.css";
 @import "./MonthPicker-parameters.css";
 @import "../base/MessageStrip-parameters.css";
-@import "./Panel-parameters.css";
+@import "../base/Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "../base/PopupsCommon-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -22,7 +22,7 @@
 @import "../base/Menu-parameters.css";
 @import "./MonthPicker-parameters.css";
 @import "../base/MessageStrip-parameters.css";
-@import "./Panel-parameters.css";
+@import "../base/Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "../base/PopupsCommon-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon/Panel-parameters.css b/packages/main/src/themes/sap_horizon/Panel-parameters.css
@@ -1,7 +1,6 @@
 @import "../base/Panel-parameters.css";
 
 :root {
-	--_ui5_panel_button_root_width: 2.75rem;
 	--_ui5_panel_border_radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_panel_border_bottom: none;
 	--_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor);

diff --git a/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css b/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css
@@ -1,7 +1,6 @@
 @import "../base/Panel-parameters.css";
 
 :root {
-	--_ui5_panel_button_root_width: 2.75rem;
 	--_ui5_panel_border_radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_panel_border_bottom: none;
 	--_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor);

diff --git a/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css
@@ -2,7 +2,6 @@
 
 :root {
 	--_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
-	--_ui5_panel_button_root_width: 2.75rem;
 	--_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 	--_ui5_panel_outline_offset: -0.125rem;
 	--_ui5_panel_icon_color: var(--sapButton_Lite_TextColor);