@openui5/themelib_sap_belize 1.124.0 → 1.125.0

package/src/sap/uxap/themes/sap_belize_base/ObjectPageHeaderContent.less

@@ -0,0 +1,301 @@
+/* ================================================= */
+/* CSS for control sap.uxap/ObjectPageHeaderContent  */
+/* Base theme                                        */
+/* ================================================= */
+
+.sapUxAPObjectPageHeaderContent {
+	position: relative;
+
+	.sapUxAPObjectPageHeaderContentItem {
+		display: inline-block;
+		vertical-align: top;
+		margin-right: 2rem;
+		margin-bottom: 1rem;
+		line-height: 1.5rem;
+	}
+
+
+	.sapUxAPObjectPageHeaderContentItem.sapFAvatar .sapFAvatarMagnifyingGlass,
+	.sapUxAPObjectPageHeaderContentItem .sapFAvatar .sapFAvatarMagnifyingGlass {
+		line-height: 0.8125rem;
+	}
+
+	.sapUxAPObjectPageHeaderContentItem .sapMText,
+	.sapUxAPObjectPageHeaderContentItem.sapMObjStatus:not(.sapMObjectStatusLarge) span {
+		line-height: 1.5rem;
+	}
+
+	.sapUxAPObjectPageHeaderContentItem.sapUiRespGrid {
+		display: inherit;
+	}
+
+	.sapUxAPObjectPageHeaderSeparatorContainer {
+		position: relative;
+		margin-right: 4rem;
+		.sapUxAPObjectPageHeaderSeparatorBefore {
+			width: 1px;
+			background-color: @sapUiToolbarSeparatorColor;
+			display: inline-block;
+			position: absolute;
+			top: 0;
+			bottom: 1rem;
+			margin-right: 1rem;
+			left: -2rem;
+		}
+		.sapUxAPObjectPageHeaderSeparatorAfter {
+			width: 1px;
+			background-color: @sapUiToolbarSeparatorColor;
+			display: inline-block;
+			position: absolute;
+			top: 0;
+			bottom: 1rem;
+			margin-left: 1rem;
+			right: -2rem;
+		}
+	}
+
+	&, > .sapUxAPObjectPageHeaderSeparatorContainer, > .sapUxAPObjectPageHeaderWidthContainer {
+		.sapUiVlt .sapUiVltCell {
+			> * {
+				line-height: normal;
+			}
+		}
+		.sapUiHLayoutChildWrapper {
+			min-height: 2rem;
+			min-width: 2rem;
+			& > .sapMImg {
+				vertical-align: middle;
+
+			}
+		}
+		> .sapUiSimpleForm {
+
+			.sapUiFormResLayout > div {
+				padding: 0;
+				background-color: transparent;
+			}
+
+			.sapUiFormResLayout .sapUiRFLRow > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiRFLContainerContent > .sapUiRLElement > .sapUiRFLRow:last-child > .sapUiRFLFullLength:last-child {
+				padding-bottom: 0;
+			}
+
+			.sapMText, .sapMLabel, .sapMLnk {
+				font-family: @sapUiFontFamily;
+				font-weight: normal;
+				height: 1.5rem;
+				line-height: 1.5rem;
+			}
+		}
+		.sapMOH {
+			margin: 0;
+			padding: 0;
+			line-height: inherit;
+			.sapMOHTitleArrow {
+				right: 0.5rem;
+				margin-left: 0;
+			}
+		}
+
+
+		.sapUxAPObjectPageHeaderContentItem {
+			.sapMObjectAttributeDiv .sapMText,
+			.sapMObjectAttributeDiv .sapMObjectAttributeTitle,
+			.sapMObjectAttributeDiv .sapMObjectAttributeColon,
+			.sapMObjectAttributeDiv .sapMObjectAttributeText {
+				vertical-align: middle;
+			}
+		}
+
+		.sapUiVltCell > .sapMObjectAttributeDiv, .sapUiVltCell > .sapMObjStatus {
+			line-height: 1rem;
+		}
+
+		/* ProgressIndicator has display flex, but OPHeaderContent override it by setting display inline-block
+		* for each content entry to order the entries horizontally.
+		* In order to keep the display flex behaviour of the PI and the inline-block behaviour inside OPHeaderContent,
+		* we use inline-flex.
+		* NOTE: It`s needed in case PI is direct child of OPHeaderContent only.
+		*/
+		> .sapMPI {
+			display: -webkit-inline-flex;
+			display: inline-flex;
+			margin-top: 0.25rem;
+		}
+
+		.sapMPI {
+			width: 10rem !important; /* Progress indicator always use the size provide in the control otherwise... */
+			height: 1rem;
+			position: relative;
+			margin-bottom: 1rem;
+			.sap-phone & {
+				width: 100% !important;
+			}
+		}
+	}
+
+	.sapUxAPObjectPageHeaderLayoutHiddenL,
+	.sapUxAPObjectPageHeaderLayoutHiddenM,
+	.sapUxAPObjectPageHeaderLayoutHiddenS {
+		display: none;
+	}
+
+	.sapUxAPObjectPageHeaderObjectImage.sapMImgFocusable {
+		margin-top: 1px;
+	}
+}
+
+.sapUxAPObjectPageHeaderContent {
+	padding-left: 3rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Tablet .sapUxAPObjectPageHeaderContent,
+html .sapUiContainer-Medium .sapUxAPObjectPageHeaderContent {
+	padding-left: 2rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPObjectPageHeaderContent,
+html .sapUiContainer-Narrow .sapUxAPObjectPageHeaderContent {
+	padding-left: 1rem;
+}
+
+.sapUxAPObjectPageNoNavigation .sapUxAPObjectPageHeaderContent {
+	box-shadow: @sapUiShadowHeader;
+}
+
+.sapUxAPObjectPageHeaderContentHidden {
+	display: none;
+}
+
+/* content separators */
+.sapUxAPObjectPageHeaderDetailsDesign-Dark .sapUxAPObjectPageHeaderSeparatorContainer {
+	.sapUxAPObjectPageHeaderSeparatorBefore,
+	.sapUxAPObjectPageHeaderSeparatorAfter {
+		background-color: transparent;
+	}
+}
+
+.sapUxAPObjectPageHeaderContentImageContainer .sapUiIcon,
+.sapUxAPObjectPageHeaderContentImageContainer .sapMImg {
+	margin: 0 1rem 0.5rem 0;
+}
+
+.sapUxAPObjectPageHeaderContentImageContainer .sapUxAPObjectPageHeaderPlaceholder .sapUiIcon {
+	margin: 0;
+}
+
+.sapUxAPObjectPageHeaderContentImageContainer .sapMImg {
+	height: 5rem;
+	width: 5rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPObjectPageHeaderContentImageContainer .sapMImg,
+html .sapUiContainer-Narrow .sapUxAPObjectPageHeaderContentImageContainer .sapMImg {
+	height: 3rem;
+	width: 3rem;
+}
+
+.sapUxAPObjectPageHeaderContentImageContainer > .sapMImg.sapUxAPObjectPageHeaderObjectImage.sapMNoImg {
+	display: none;
+	margin: 0;
+}
+
+/* In this particular case disply none doesn't work corectly in the current version of chrome (43.0.2357.132) */
+html[data-sap-ui-browser^="cr4"] .sapUxAPObjectPageHeaderContentImageContainer > .sapMImg.sapUxAPObjectPageHeaderObjectImage.sapMNoImg {
+	width: 0;
+	height: 0;
+	border: none;
+	display: inline-block;
+}
+
+.sapUxAPObjectPageHeaderLayoutTitleContainer {
+	display: inline-block;
+}
+
+.sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderPlaceholder {
+	width: 5rem;
+	height: 5rem;
+	box-sizing: border-box;
+	margin-right: 2rem;
+	margin-bottom: 1rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Tablet .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderPlaceholder,
+html .sapUiContainer-Medium .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderPlaceholder {
+	width: 5rem;
+	height: 5rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderPlaceholder,
+html .sapUiContainer-Narrow .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderPlaceholder {
+	width: 3rem;
+	height: 3rem;
+	margin-right: 1rem;
+	margin-bottom: 0.5rem;
+
+	& > .sapFAvatar {
+		width: 3rem;
+		height: 3rem;
+	}
+}
+
+.sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUiIcon,
+.sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUxAPObjectPageHeaderPlaceholder.sapUxAPObjectPageHeaderObjectImage .sapUiIcon {
+	font-size: 2.5rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Tablet .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUiIcon,
+.sapUxAPObjectPageLayout-Std-Tablet .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUxAPObjectPageHeaderPlaceholder.sapUxAPObjectPageHeaderObjectImage .sapUiIcon,
+html .sapUiContainer-Medium .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUiIcon,
+html .sapUiContainer-Narrow .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUxAPObjectPageHeaderPlaceholder.sapUxAPObjectPageHeaderObjectImage .sapUiIcon {
+	font-size: 2.5rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUiIcon,
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUxAPObjectPageHeaderPlaceholder.sapUxAPObjectPageHeaderObjectImage .sapUiIcon,
+html .sapUiContainer-Narrow .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUiIcon,
+html .sapUiContainer-Narrow .sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentImageContainer .sapUxAPObjectPageHeaderPlaceholder.sapUxAPObjectPageHeaderObjectImage .sapUiIcon {
+	font-size: 1.5rem;
+}
+
+.sapUxAPObjectPageHeaderContent .sapSuiteDmc.sapUxAPObjectPageHeaderContentItem,
+.sapUxAPObjectPageHeaderContent .sapSuiteBCContent.sapUxAPObjectPageHeaderContentItem,
+.sapUxAPObjectPageHeaderContent .sapSuiteCmc.sapUxAPObjectPageHeaderContentItem,
+.sapUxAPObjectPageHeaderContent .sapSuiteCmpChartContent.sapUxAPObjectPageHeaderContentItem,
+.sapUxAPObjectPageHeaderContent .sapSuiteMac.sapUxAPObjectPageHeaderContentItem,
+.sapUxAPObjectPageHeaderContent .suiteHBMC.sapUxAPObjectPageHeaderContentItem {
+	line-height: normal;
+}
+
+.sapUxAPObjectPageHeaderContentFlexBox {
+	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+	display: flex;
+}
+
+.sapUxAPObjectPageHeaderContentCellLeft {
+	-webkit-flex-grow: 1;
+	flex-grow: 1;
+	min-width: 25%;
+}
+
+.sapUxAPObjectPageHeaderContentCellRight {
+	-webkit-flex-grow: 0;
+	-webkit-flex-shrink: 0;
+	-webkit-align-self: flex-end;
+	flex-grow: 0;
+	flex-shrink: 0;
+	padding-right: 1rem;
+	align-self: flex-end;
+}
+
+.sapUxAPObjectPageHeaderDetailsHidden > * {
+  visibility: hidden;
+}
+
+.sapUiLoSplitterH.sapUiLoSplitter .sapUxAPObjectPageHeaderContent {
+	white-space: normal;
+}
+
+.sapUxAPObjectPageHeaderContentDesign-Light,
+.sapUxAPObjectPageHeaderContentDesign-Dark {
+	background-color: @sapUiObjectHeaderBackground;
+}

package/src/sap/uxap/themes/sap_belize_base/ObjectPageLayout.less

@@ -0,0 +1,270 @@
+/* ========================================== */
+/* CSS for control sap.uxap/ObjectPageLayout  */
+/* Base theme                                 */
+/* ========================================== */
+@_sap_uxap_ObjectPageLayout_FooterHeight: 3rem;
+@_sap_uxap_ObjectPageLayout_FooterHeight_Compact: 2.5rem;
+@_sap_uxap_ObjectPageLayout_FooterMarginBottom: 0.5rem;
+
+.sapUxAPObjectPageLayout {
+	width: 100%;
+	height: 100%;
+	position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+	isolation: isolate;
+	z-index: 0;
+	white-space: normal; // BCP: 1780382804
+
+	/* ObjectAttribute will not truncate inside ObjectPage but rather will go on more lines */
+	.sapUxAPObjectPageHeaderDetails {
+		.sapMObjectAttributeActive .sapMObjectAttributeTitle,
+		.sapMObjectAttributeActive .sapMObjectAttributeText {
+			display: inline;
+			position: relative;
+			white-space: pre-line;
+			word-wrap: break-word;
+		}
+	}
+}
+
+.sapUxAPObjectPageLayoutFooterVisible .sapUxAPObjectPageWrapper {
+	scroll-padding-bottom: ~"calc(@{_sap_uxap_ObjectPageLayout_FooterHeight} +  @{_sap_uxap_ObjectPageLayout_FooterMarginBottom} + 2px)";
+}
+
+.sapUiSizeCompact .sapUxAPObjectPageLayoutFooterVisible .sapUxAPObjectPageWrapper {
+	scroll-padding-bottom: ~"calc(@{_sap_uxap_ObjectPageLayout_FooterHeight_Compact} +  @{_sap_uxap_ObjectPageLayout_FooterMarginBottom} + 2px)";
+}
+
+.sapUxAPObjectPageLayout:not(.sapUxAPObjectPageLayout-Std-Phone):not("sapUxAPObjectPageLayoutIconTabBar") .sapUxAPObjectPageSubSectionPromoted:not(.sapUxAPObjectPageSectionMultilineContent) .sapUxAPObjectPageSubSectionHeaderActions {
+	position: absolute;
+	top: 0;
+	right: 1rem;
+}
+.sapUxAPObjectPageLayout:not(.sapUxAPObjectPageLayout-Std-Phone):not("sapUxAPObjectPageLayoutIconTabBar") .sapUxAPObjectPageSubSectionPromoted:not(.sapUxAPObjectPageSectionMultilineContent) .sapUxAPObjectPageSubSectionHeader {
+	height: 0;
+	padding: 0;
+}
+
+body > .sapUxAPObjectPageLayout,
+.sapUiVltCell .sapUxAPObjectPageLayout {
+	position: fixed;
+}
+
+.sapUxAPObjectPageHeaderTitle {
+    flex-shrink: 0;
+    -webkit-flex-shrink: 0;
+}
+
+.sapUxAPObjectPageLayoutTitleClickEnabled > .sapUxAPObjectPageHeaderStickied > .sapFDynamicPageTitle {
+	box-shadow: @sapUiShadowHeader;
+}
+
+.sapUxAPObjectPageLayout:not(.sapUxAPObjectPageLayoutTitleClickEnabled) .sapFDynamicPageHeaderPinButton {
+	margin-left: -1.25rem;
+}
+
+.sapUxAPObjectPageSubSectionPromoted:not(:first-of-type) {
+	padding-top: 0.25rem;
+}
+
+.sapUxAPObjectPageWrapper {
+    position:relative;
+    height:100%;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+	overflow-y: auto;
+	background-color: @sapUiGlobalBackgroundColor;
+}
+
+.sapUxAPObjectPageWrapperWillChangeScrollTop {
+	/* Performance tweak */
+	will-change: scroll-position;
+}
+
+.sapUxAPObjectPageScroll {
+	position: relative;
+}
+
+.sapUxAPObjectPageContainerNoBar > .sapUxAPObjectPageSection:first-child:not(.sapUxAPObjectPageSectionNoTitle) {
+	margin-top:  2rem;
+}
+
+/****
+    sapUxAPObjectPageScroll copied from sapMScroll for now
+****/
+
+.sapUxAPObjectPageScrollV,
+.sapUxAPObjectPageScrollH,
+.sapUxAPObjectPageScrollV > div, .sapUxAPObjectPageScrollH > div {
+	position: absolute;
+}
+
+.sapUxAPObjectPageScrollV > div, .sapUxAPObjectPageScrollH > div {
+	box-sizing: border-box;
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
+	border-width: 0.0625rem;
+	border-style: solid;
+	border-color: rgba(255, 255, 255, 0.901961);
+	border-radius: 0.1875rem;
+	background-color: rgba(0, 0, 0, 0.498039)
+}
+
+.sapUxAPObjectPageScrollV {
+	width: 0.438rem;
+	right: 0.063rem;
+	top: 0;
+	bottom: 0
+}
+
+.sapUxAPObjectPageScrollV > div {
+	width: 100%
+}
+
+.sapUxAPObjectPageScrollH {
+	height: 0.4375rem;
+	bottom: 0.0625rem;
+	left: 0.125rem;
+	right: 0.125rem
+}
+
+.sapUxAPObjectPageScrollH > div {
+	height: 100%
+}
+
+.sapUxAPObjectChildPage {
+	width: 0.5rem;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	right: auto;
+	z-index: 3000;
+	background: @sapUiObjectHeaderBorderColor;
+}
+
+.sapUxAPObjectPageLayout.sapUxAPObjectPageLayoutTitleClickEnabled {
+	// title hover
+	.sapFDynamicPageTitle:hover,
+	&.sapUxAPObjectPageTitleForceHovered .sapFDynamicPageTitle {
+		cursor: pointer;
+	}
+}
+
+// footer
+.sapUxAPObjectPageLayout {
+	.sapUxAPObjectPageFooter {
+		position: absolute;
+		height: @_sap_uxap_ObjectPageLayout_FooterHeight;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		margin-left: 0.5rem;
+		margin-right: 0.5rem;
+		margin-bottom: @_sap_uxap_ObjectPageLayout_FooterMarginBottom;
+		z-index:1001;
+
+		.sapUxAPObjectPageFloatingFooter {
+			border: 1px solid;
+			border-radius: 0.25rem;
+		}
+	}
+}
+
+.sapUiSizeCompact .sapUxAPObjectPageLayout .sapUxAPObjectPageFooter {
+	.sapUxAPObjectPageFloatingFooter {
+		height: @_sap_uxap_ObjectPageLayout_FooterHeight_Compact;
+
+		// Reflection: styles overwritten
+		&.sapMBar-CTX {
+			// BCP: 1870106645
+			// When sap.m.Bar is used as footer (in compact) setting 2.5rem height
+			// breaks the Bar`s content vertical alignment.
+			// Fixing this internally in the sap.m.Bar (in the context of flaoting footer)
+			// will require significant effort, so we set height of 2rem (the expected Bar height by the visual spec).
+			height: 2rem;
+		}
+	}
+	height: 2.5rem;
+}
+
+html[data-sap-ui-animation='on'] .sapUxAPObjectPageLayout {
+	.sapUxAPObjectPageFloatingFooterShow {
+		-webkit-animation: bounceShow 0.35s forwards ease-in-out;
+		animation: bounceShow 0.35s forwards ease-in-out;
+	}
+	.sapUxAPObjectPageFloatingFooterHide {
+		-webkit-animation: bounceHide 0.35s forwards ease-in-out;
+		animation: bounceHide 0.35s forwards ease-in-out;
+	}
+
+	@-webkit-keyframes bounceShow {
+		0% {
+			-webkit-transform: translateY(100%);
+			transform: translateY(100%);
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+	@keyframes bounceShow {
+		0% {
+			transform: translateY(100%);
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+	@-webkit-keyframes bounceHide {
+		0% {
+			-webkit-transform: translateY(-5%);
+			transform: translateY(-5%);
+			opacity: 1;
+		}
+		100% {
+			-webkit-transform: translateY(100%);
+			transform: translateY(100%);
+			opacity: 0;
+		}
+	}
+	@keyframes bounceHide {
+		0% {
+			transform: translateY(-5%);
+			opacity: 1;
+		}
+		100% {
+			transform: translateY(100%);
+			opacity: 0;
+		}
+	}
+}
+/* Only on Windows 8 with IE 11 there's some weird incompatibility between the usage of the transform property
+ in the sapMShell and the one in the objectPageWrapper.
+ Also the z-index causes the scroll bars of the table to show in the headerTitle.
+ For more information see internal incident 1670194272. */
+ /* TODO remove after the end of support for Internet Explorer */
+html[data-sap-ui-browser^="ie"] .sapMShell {
+
+  .sapUxAPObjectPageHeaderTitle {
+    z-index: 3;
+  }
+}
+
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+}
+
+.ui-helper-clearfix:after {
+	clear: both;
+}
+
+.ui-helper-clearfix {
+	zoom: 1;
+}

package/src/sap/uxap/themes/sap_belize_base/ObjectPageSection.less

@@ -0,0 +1,135 @@
+/* =========================================== */
+/* CSS for control sap.uxap/ObjectPageSection  */
+/* Base theme                                  */
+/* =========================================== */
+
+.sapUxAPObjectPageSection {
+	margin-left: 0;
+	margin-bottom: 0;
+	position: relative;
+}
+
+.sapUxAPObjectPageSectionTitleUppercase {
+	text-transform: uppercase;
+}
+
+.sapUxAPObjectPageSectionHeader {
+	box-sizing: border-box;
+	height: 3rem;
+	line-height: 3rem;
+	padding: 0 3rem 0 3rem;
+}
+
+.sapUxAPObjectPageSectionHeading {
+	padding: 0.5rem 3rem;
+}
+
+/* header height is involved in calculation of the scroll position
+so we reset it when the section header is hidden */
+.sapUxAPObjectPageSectionHeaderHidden {
+	overflow: hidden;
+	height: 0 !important;
+	padding: 0 !important;
+	border: none !important;
+}
+
+.sapUxAPObjectPageLayout-Std-Tablet .sapUxAPObjectPageSectionHeader,
+html .sapUiContainer-Medium .sapUxAPObjectPageSectionHeader {
+	padding: 0 0 0.5rem 2rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Tablet .sapUxAPObjectPageSectionHeading {
+	padding: 0.5rem 0 0.5rem 2rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPObjectPageSectionHeader,
+html .sapUiContainer-Narrow .sapUxAPObjectPageSectionHeader {
+	padding: 0 0 0.5rem 1rem;
+}
+
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPObjectPageSectionHeading {
+	padding: 0.5rem 0 0.5rem 1rem;
+}
+
+.sapUxAPObjectPageSectionTitle {
+	box-sizing: border-box;
+	display: inline-block;
+	height: 3rem;
+	max-width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.sapUxAPSectionShowHideButton {
+	float: right;
+}
+
+.sapUxAPSectionShowHideButton:not(:last-child) {
+	float: right;
+	margin-left: 0.5rem;
+}
+
+.sapUxAPObjectPageSection .sapUxAPObjectPageSectionContainer > .sapUiRespGrid,
+.sapUxAPObjectPageSection .sapUxAPObjectPageSectionContainer > .sapUiRespGrid > .sapUiRespGridSpanXL12.sapUiRespGridSpanL12.sapUiRespGridSpanM12.sapUiRespGridSpanS12  {
+	padding: 0;
+	margin: 0;
+	width: 100%;
+}
+
+.sapUiSizeCompact .sapUxAPSectionShowHideButton {
+	margin-top: 0.5rem;
+}
+
+.sapUiSizeCompact .sapUxAPObjectPageSectionTitle {
+	height: 2.5rem;
+	line-height: 2rem;
+	padding-bottom:0.5rem;
+}
+
+.sapUiSizeCompact .sapUxAPObjectPageSectionHeader {
+	height: 2.5rem;
+	line-height: 2rem;
+}
+
+html[data-sap-ui-browser^="ed"].sap-desktop .sapUxAPObjectPageSection:focus {
+	outline-style: dashed;
+}
+
+/* IE ignores outline-offset. Use an overlay: */
+/* TODO remove after the end of support for Internet Explorer */
+html[data-sap-ui-browser^="ie"].sap-desktop {
+	.sapUxAPObjectPageSection:focus {
+		outline: none;
+		position: relative;
+	}
+	.sapUxAPObjectPageSection:focus:before {
+		content: " ";
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		border: 0.0625rem dashed @sapUiContentFocusColor;
+		pointer-events: none;
+	}
+}
+
+// Styles needed for wrapTitle property
+.sapUxAPObjectPageSection.sapUxAPObjectPageSectionWrapTitle
+.sapUxAPObjectPageSectionHeader
+.sapUxAPObjectPageSectionTitle  {
+	height: auto;
+	word-break: break-word;
+	white-space: break-spaces;
+	overflow: auto;
+	line-height: inherit;
+	border-bottom: none;
+	vertical-align: bottom;
+}
+
+.sapUxAPObjectPageSection.sapUxAPObjectPageSectionWrapTitle
+.sapUxAPObjectPageSectionHeader {
+	height: auto;
+}