diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
index f04d9d52d134..eb3dd1e43fe2 100644
--- a/packages/fiori/src/DynamicPage.hbs
+++ b/packages/fiori/src/DynamicPage.hbs
@@ -18,11 +18,11 @@
-
- {{#if headerInContent}}
-
- {{/if}}
+ {{#if headerInContent}}
+
+ {{/if}}
+
{{#unless actionsInTitle}}
-
-
\ No newline at end of file
+
+
diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
index 590884cc7dad..15aca60d77e7 100644
--- a/packages/fiori/src/themes/DynamicPage.css
+++ b/packages/fiori/src/themes/DynamicPage.css
@@ -49,6 +49,9 @@
border: 1px solid;
border-radius: 0.25rem;
background-color: #fff;
+ box-sizing: border-box;
+ width: auto;
+ margin: 0 0.5rem 0.5rem 0.5rem;
}
/* Footer animation */
@@ -73,21 +76,37 @@
}
}
+::slotted([slot="titleArea"]) {
+ width: auto;
+}
+
+::slotted([slot="headerArea"]) {
+ display: block;
+}
+
/* Responsive paddings */
-:host([media-range="S"]) .ui5-dynamic-page-root {
+:host([media-range="S"]) .ui5-dynamic-page-content,
+:host([media-range="S"]) ::slotted([slot="titleArea"]),
+:host([media-range="S"]) ::slotted([slot="headerArea"]) {
padding: 0 1rem;
}
-:host([media-range="S"]) ::slotted([ui5-dynamic-page-header][slot="headerArea"]) {
+:host([media-range="S"]) ::slotted([slot="headerArea"]) {
padding-top: 0.5rem;
}
-:host([media-range="M"]) .ui5-dynamic-page-root,
-:host([media-range="L"]) .ui5-dynamic-page-root {
+:host([media-range="M"]) .ui5-dynamic-page-content,
+:host([media-range="M"]) ::slotted([slot="titleArea"]),
+:host([media-range="M"]) ::slotted([slot="headerArea"]),
+:host([media-range="L"]) .ui5-dynamic-page-content,
+:host([media-range="L"]) ::slotted([slot="titleArea"]),
+:host([media-range="L"]) ::slotted([slot="headerArea"]) {
padding: 0 2rem;
}
-:host([media-range="XL"]) .ui5-dynamic-page-root {
+:host([media-range="XL"]) .ui5-dynamic-page-content,
+:host([media-range="XL"]) ::slotted([slot="titleArea"]),
+:host([media-range="XL"]) ::slotted([slot="headerArea"]) {
padding: 0 3rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css
index e8e240f5d698..06263867c5a1 100644
--- a/packages/fiori/src/themes/DynamicPageHeader.css
+++ b/packages/fiori/src/themes/DynamicPageHeader.css
@@ -1,8 +1,5 @@
:host {
background: #fff;
- padding-top: var(--_ui5_dynamic_page_header_padding_top);
- padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom);
- display: block;
}
.ui5-dynamic-page-header-root {
diff --git a/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css b/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css
deleted file mode 100644
index e930737f274e..000000000000
--- a/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css
+++ /dev/null
@@ -1,4 +0,0 @@
-:root {
- --_ui5_dynamic_page_header_padding_top: 1rem;
- --_ui5_dynamic_page_header_padding_bottom: 1rem;
-}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
index 617e604eae32..9da626b9315c 100644
--- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
index 7a6127a914b3..6041c4fca78f 100644
--- a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
index 7a6127a914b3..6041c4fca78f 100644
--- a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
index 67ebf4269608..f9c94ef8e13c 100644
--- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 67ebf4269608..f9c94ef8e13c 100644
--- a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 7a6127a914b3..6041c4fca78f 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index 7a6127a914b3..6041c4fca78f 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
index a682ab7f37a0..12ea4aa5e086 100644
--- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
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 a682ab7f37a0..12ea4aa5e086 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
index 9b2d12fa832d..806494fc6f9b 100644
--- a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
index 9b2d12fa832d..806494fc6f9b 100644
--- a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
index 94e705a03bb1..f1359bb15083 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
index 94e705a03bb1..f1359bb15083 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
index 60b43b5e0f3d..a91b63b97c20 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
index 60b43b5e0f3d..a91b63b97c20 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
@import "../base/sizes-parameters.css";
@import "../base/DynamicPage-parameters.css";
@import "../base/DynamicPageTitle-parameters.css";
-@import "../base/DynamicPageHeader-parameters.css";
@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";