feat(ui5-dynamic-page): apply paddings to individual elements

SAP · Nov 27, 2023 · c143204 · c143204
1 parent 637e14d
commit c143204
Show file tree

Hide file tree

Showing 19 changed files with 32 additions and 35 deletions.
diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
@@ -18,11 +18,11 @@
 
  </div>
 
- <div class="{{classes.content}}">
- {{#if headerInContent}}
- <slot name="headerArea"></slot>
- {{/if}}
+ {{#if headerInContent}}
+ <slot name="headerArea"></slot>
+ {{/if}}
 
+ <div class="{{classes.content}}">
  {{#unless actionsInTitle}}
  <ui5-dynamic-page-header-actions
  ?snapped="{{headerSnapped}}"
@@ -36,7 +36,7 @@
  </div>
  </div>
 
-  <div class="{{classes.footer}}">
-  <slot name="footer"></slot>
-  </div>
-</div>
+ <div class="{{classes.footer}}">
+ <slot name="footer"></slot>
+ </div>
+</div>
diff --git 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;
 }
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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";