diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index a9846f5814ee..d4191dd18b67 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -1446,14 +1446,23 @@ class ShellBar extends UI5Element {
}
get showStartSeparator(): boolean {
+ if (this.isSBreakPoint) {
+ return false;
+ }
return this.startContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
}
get showEndSeparator(): boolean {
+ if (this.isSBreakPoint) {
+ return false;
+ }
return this.endContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
}
shouldIncludeSeparator(itemInfo: IShellBarContentItem | undefined, contentInfo: IShellBarContentItem[]) {
+ if (this.isSBreakPoint) {
+ return false;
+ }
// once the last item from the start/end content was hidden, the
// separator is "packed" with it in order to account for any next measurements
if (!itemInfo) {
diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css
index caac5c89735f..24ec75a59324 100644
--- a/packages/fiori/src/themes/NavigationLayout.css
+++ b/packages/fiori/src/themes/NavigationLayout.css
@@ -60,5 +60,5 @@
}
:host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]) {
- padding-inline: 0.875rem 1rem;
+ padding-inline: 0.875rem;
}
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
index 9aeefc8914e3..9b597d3ba01b 100644
--- a/packages/fiori/src/themes/ShellBar.css
+++ b/packages/fiori/src/themes/ShellBar.css
@@ -300,6 +300,10 @@ slot[name="profile"] {
border-radius: var(--_ui5_shellbar_image_button_border_radius);
}
+:host([breakpoint-size="S"]) .ui5-shellbar-image-button {
+ margin-inline-start: 6px;
+}
+
.ui5-shellbar-overflow-container-left {
padding: 0;
justify-content: flex-start;
@@ -307,7 +311,7 @@ slot[name="profile"] {
flex-shrink: 0;
}
-.ui5-shellbar-overflow-container-left > :nth-child(n) {
+.ui5-shellbar-overflow-container-left > :nth-child(n):not(.ui5-shellbar-logo) {
margin-inline-end: 0.5rem;
}
diff --git a/packages/fiori/src/themes/ShellBarBranding.css b/packages/fiori/src/themes/ShellBarBranding.css
index cad1990d5be7..752d3a66a89e 100644
--- a/packages/fiori/src/themes/ShellBarBranding.css
+++ b/packages/fiori/src/themes/ShellBarBranding.css
@@ -10,16 +10,17 @@
overflow: hidden;
display: flex;
align-items: center;
- padding-block: 0.25rem;
- padding-inline: 0.25rem 0.5rem;
box-sizing: border-box;
cursor: pointer;
background: var(--sapButton_Lite_Background);
border: 1px solid var(--sapButton_Lite_BorderColor);
color: var(--sapShell_TextColor);
- /* fix cutting of the focus outline */
- margin-inline-start: 0.125rem;
- margin-inline-end: .5rem;
+}
+
+:host(:not([_is-sbreak-point])) .ui5-shellbar-branding-root {
+ padding-block: 0.25rem;
+ padding-inline: 0.25rem 0.5rem;
+ margin-inline-end: .25rem;
}
.ui5-shellbar-branding-root:focus {
@@ -67,6 +68,9 @@
::slotted([slot="logo"]) {
max-height: 2rem;
+}
+
+:host(:not([_is-sbreak-point])) ::slotted([slot="logo"]) {
padding-inline: 0.25rem;
}
diff --git a/packages/fiori/test/pages/ShellBar_evolution.html b/packages/fiori/test/pages/ShellBar_evolution.html
index d425a07b1f7d..9ca208f8d3c1 100644
--- a/packages/fiori/test/pages/ShellBar_evolution.html
+++ b/packages/fiori/test/pages/ShellBar_evolution.html
@@ -1,9 +1,10 @@
+
Shell Bar
-
+
-
+
+