diff --git a/packages/base/src/Device.js b/packages/base/src/Device.js index f8da2e2aef8f..fed46111f2c7 100644 --- a/packages/base/src/Device.js +++ b/packages/base/src/Device.js @@ -876,7 +876,7 @@ const _getCurrentRange = (name, width = window.innerWidth) => { } } - return query.names[i]; + return querySet.names[i]; }; const _setMedia = () => { diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index f979779efb3f..9811dc8e5343 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -105,7 +105,7 @@ position: relative; display: flex; height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */ - padding: 1rem; + padding: 1rem 2rem; background-color: var(--sapGroup_ContentBackground); border-bottom: var(--_ui5_tc_content_border_bottom); box-sizing: border-box; @@ -124,7 +124,7 @@ } .ui5-tc__contentItem { - max-height: 100%; + max-height: 100%; display: flex; flex-grow: 1; overflow: auto; @@ -134,6 +134,24 @@ display: none; } +/*** Responsive paddings ***/ + +:host([size="S"]) .ui5-tc__header { + padding: 0; +} + +:host([size="S"]) .ui5-tc__content { + padding: 1rem; +} + +:host([size="XL"]) .ui5-tc__header { + padding: 0 2rem; +} + +:host([size="XL"]) .ui5-tc__content { + padding: 1rem 3rem; +} + /*** RTL ***/ [dir=rtl] .ui-tc__overflowButton { margin-right: auto; diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index d00a2bf3c9a2..5738267e6dfc 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -23,12 +23,17 @@ .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after { content: ""; position: absolute; - width: 100%; bottom: 1px; left: 0; + right: 0; border-bottom: var(--_ui5_tc_headerItemContent_border_bottom); } +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after { + left: 1rem; + right: 1rem; +} + .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after { bottom: -0.75rem; }