@openui5/themelib_sap_belize 1.124.2 → 1.126.0

package/src/sap/ui/layout/themes/sap_belize_base/ColumnLayout.less

@@ -0,0 +1,289 @@
+/* ================================================ */
+/* CSS for control sap.ui.layout/form/ColumnLayout  */
+/* Base theme                                       */
+/* ================================================ */
+
+@_sap_ui_layout_ColumnLayout_formColumnMaxXL: 6;
+@_sap_ui_layout_ColumnLayout_formColumnMaxL: 4;
+@_sap_ui_layout_ColumnLayout_formColumnMaxM: 3;
+@_sap_ui_layout_ColumnLayout_formColumnMaxS: 1;
+@_sap_ui_layout_ColumnLayout_formColumnElementCols: 12;
+@_sap_ui_layout_ColumnLayout_formColumnElementOneCol: 100% / @_sap_ui_layout_ColumnLayout_formColumnElementCols;
+
+.sapUiFormCL{
+	white-space: initial; /* eg, if in Splitter where whit-space is set to nowrap */
+}
+
+/* Title */
+.sapUiFormCL > .sapUiFormTitle{
+	box-sizing: border-box;
+	padding: 0 1rem;
+}
+
+.sapUiFormCLContainer > .sapUiFormTitle{
+	padding: 0 0.25rem;
+}
+
+.sapUiFormCL > .sapUiFormTitle > img,
+.sapUiFormCLContainer > .sapUiFormTitle > img,
+.sapUiFormCL > .sapUiFormTitle > span,
+.sapUiFormCLContainer > .sapUiFormTitle > span{
+	margin-right: 0.5rem;
+}
+
+/* Toolbar */
+.sapUiFormCL.sapUiFormToolbar > div:first-child {
+	height: 3rem; /* to have always 3rem on Form header */
+	line-height: 3rem;
+	padding: 0 0.75rem;
+}
+
+/* Containers */
+.sapUiFormCLContainer{
+	min-height: 1px;
+	overflow: hidden;
+	padding: 1rem 0.75rem;
+	box-sizing: border-box;
+}
+
+/* on real phones use smaller space between containers */
+html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:first-child){
+	padding-top: 0.5rem;
+}
+
+html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:last-child){
+	padding-bottom: 0.5rem;
+}
+
+/* In Cozy mode put first FormContainers with title or toolbar 0.5rem on top  otherwise 1rem*/
+.sapUiFormCL > .sapUiFormContainerTitle,
+.sapUiFormCL > .sapUiFormContainerToolbar,
+.sapUiFormCLMedia-Std-Phone > .sapUiFormCLContent > .sapUiFormCLContainerSFirstRow.sapUiFormContainerTitle,
+.sapUiFormCLMedia-Std-Phone > .sapUiFormCLContent > .sapUiFormCLContainerSFirstRow.sapUiFormContainerToolbar,
+.sapUiFormCLMedia-Std-Tablet > .sapUiFormCLContent > .sapUiFormCLContainerMFirstRow.sapUiFormContainerTitle,
+.sapUiFormCLMedia-Std-Tablet > .sapUiFormCLContent > .sapUiFormCLContainerMFirstRow.sapUiFormContainerToolbar,
+.sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLFirstRow.sapUiFormContainerTitle,
+.sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLFirstRow.sapUiFormContainerToolbar,
+.sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerTitle,
+.sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerToolbar{
+	padding-top: 0.5rem;
+}
+
+.sapUiSizeCompact .sapUiFormCL > .sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormCL > .sapUiFormContainerToolbar,
+.sapUiSizeCompact .sapUiFormCLMedia-Std-Phone > .sapUiFormCLContent > .sapUiFormCLContainerSFirstRow.sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormCLMedia-Std-Phone > .sapUiFormCLContent > .sapUiFormCLContainerSFirstRow.sapUiFormContainerToolbar,
+.sapUiSizeCompact .sapUiFormCLMedia-Std-Tablet > .sapUiFormCLContent > .sapUiFormCLContainerMFirstRow.sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormCLMedia-Std-Tablet > .sapUiFormCLContent > .sapUiFormCLContainerMFirstRow.sapUiFormContainerToolbar,
+.sapUiSizeCompact .sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLFirstRow.sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLFirstRow.sapUiFormContainerToolbar,
+.sapUiSizeCompact .sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerToolbar{
+	padding-top: 1rem;
+}
+
+/* Container content */
+.sapUiFormCLContainer > .sapUiFormCLContainerCont{
+	column-gap: 1.5rem;
+	font-size: 0; /* otherwise there will be a spacing between elements */
+}
+
+.sapUiFormCLContainerColl > .sapUiFormCLContainerCont{
+	display: none;
+}
+
+/* Stand Alone Container */
+.sapUiFormCL > .sapUiFormCLContainer{
+	width: 100%;
+}
+
+/* More containers */
+.sapUiFormCLContent > .sapUiFormCLContainer{
+	width: 100%; /* default, overwritten by precise width*/
+	float: left;
+}
+
+/* do not set width to 100% and column-count to 1 as this is default */
+.createContainerWidth(@used, @max, @size, @name)  when (@used > 0) {
+	.createContainerWidth((@used - 1), @max, @size, @name);
+	.sapUiFormCLMedia-Std-@{size} > .sapUiFormCLContent.sapUiFormCLColumns@{name}@{max} > .sapUiFormCLContainer@{name}@{used}{
+		width: 100% / @max * @used;
+	}
+}
+
+.createContainerRules(@max, @size, @name)  when (@max > 1) {
+	.createContainerRules((@max - 1), @size, @name);
+	.createContainerWidth((@max - 1), @max, @size, @name);
+
+	.sapUiFormCLMedia-Std-@{size} > .sapUiFormCLContainer@{name}@{max} > .sapUiFormCLContainerCont,
+	.sapUiFormCLMedia-Std-@{size} > .sapUiFormCLContent > .sapUiFormCLContainer@{name}@{max} > .sapUiFormCLContainerCont{
+		column-count: @max;
+	}
+}
+
+/* XL */
+.sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLBreak{
+	clear: both;
+}
+
+.createContainerRules(@_sap_ui_layout_ColumnLayout_formColumnMaxXL, LargeDesktop, XL);
+
+/* L */
+.sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLBreak{
+	clear: both;
+}
+
+.createContainerRules(@_sap_ui_layout_ColumnLayout_formColumnMaxL, Desktop, L);
+
+/* M */
+.sapUiFormCLMedia-Std-Tablet > .sapUiFormCLContent > .sapUiFormCLContainerMBreak{
+	clear: both;
+}
+.createContainerRules(@_sap_ui_layout_ColumnLayout_formColumnMaxM, Tablet, M);
+
+/* S */
+
+/* Elements */
+.sapUiFormCLElement{
+	width: 100%; /* to use the whole column */
+	display: inline-block; /* otherwise it wraps inside element -> label in one column, field in another */
+	font-size: @sapUiFontSize; /* restore default font size */
+}
+
+.sapUiFormCLContent:after,
+.sapUiFormCLElement:after {
+/* CLEAR FIX */
+	clear: both;
+	content: " ";
+	display: block;
+	font-size: 0;
+	height: 0;
+	visibility: hidden;
+}
+
+.sapUiFormCLElement > div {
+	float: left;
+	padding: 0 0.25rem;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.createColumnRules(@counter, @size, @name)  when (@counter > 0) {
+	.createColumnRules((@counter - 1), @size, @name);
+	.sapUiFormCL@{size}Columns .sapUiFormCLElement > .sapUiFormCLCells@{name}@{counter}{
+		width: @_sap_ui_layout_ColumnLayout_formColumnElementOneCol * @counter;
+	}
+	.sapUiFormCL@{size}Columns .sapUiFormCLElement > .sapUiFormCLCell@{name}Space@{counter}{
+		margin-left: @_sap_ui_layout_ColumnLayout_formColumnElementOneCol * @counter;
+	}
+}
+
+/* small columns */
+.createColumnRules(@_sap_ui_layout_ColumnLayout_formColumnElementCols, Small, S);
+
+.sapUiFormCLSmallColumns .sapUiFormCLElement > .sapUiFormCLCellSBreak{
+	clear: both;
+}
+
+/* wide columns - Labels next to field */
+.createColumnRules(@_sap_ui_layout_ColumnLayout_formColumnElementCols, Wide, L);
+
+.sapUiFormCLWideColumns .sapUiFormCLElement > .sapUiFormCLCellLBreak{
+	clear: both;
+}
+
+/* edit mode */
+/* labels next to field */
+.sapUiFormEdit > .sapUiFormCLSmallColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsS12),
+.sapUiFormEdit > .sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12){
+	padding-top: 1rem;
+}
+
+.sapUiSizeCompact .sapUiFormEdit > .sapUiFormCLSmallColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsS12),
+.sapUiSizeCompact .sapUiFormEdit > .sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12){
+	padding-top: 0.5rem;
+}
+
+/* labels above field */
+/* As is is not clear what FormElement will be on top of a column we can not use only rules for first label or field */
+.sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormCLElement{
+	padding-top: 0.625rem;
+}
+
+.sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormElementLbl.sapUiFormCLCellsS12,
+.sapUiFormEdit .sapUiFormCLWideColumns .sapUiFormElementLbl.sapUiFormCLCellsL12{
+	padding-bottom: 0.125rem;
+}
+
+.sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormCLContainer > .sapUiFormTitle,
+.sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormContainerToolbar > div:first-child  {
+	margin-bottom: -0.125rem;
+}
+
+.sapUiSizeCompact .sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormCLContainer > .sapUiFormTitle,
+.sapUiSizeCompact .sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormContainerToolbar > div:first-child  {
+	margin-bottom: 0.375rem;
+}
+
+.sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormCLContainer:not(.sapUiFormContainerTitle):not(.sapUiFormContainerToolbar) {
+	padding-top: 0.375rem;
+}
+
+html.sap-phone .sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormCLContainer:not(.sapUiFormContainerTitle):not(.sapUiFormContainerToolbar){
+	padding-top: 0;
+	margin-top: -0.125rem;
+}
+
+/* Additional styling to prevent rendering issues in Safari in combination with column-count and overflow:hidden */
+html[data-sap-ui-browser^="sf"] .sapUiFormEdit .sapUiFormCLElement {
+	transform: translateX(0);
+}
+
+/* display mode */
+/* in display only mode add padding to controls as they don't have one */
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > div{
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+	font-size: 1px; /* as browser adds some px to text to meet font-size */
+}
+
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > div .sapUiIcon:not(.sapMBtnIcon),
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > div .sapMCbBg{
+	font-size: @sapUiFontSize; /* to set default font size on icons */
+}
+
+/* labels above field */
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLSmallColumns .sapUiFormCLElement{
+	padding-top: 0.5rem;
+}
+
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLSmallColumns .sapUiFormElementLbl.sapUiFormCLCellsS12,
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLWideColumns .sapUiFormElementLbl.sapUiFormCLCellsL12{
+	padding-bottom: 0;
+}
+
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLSmallColumns .sapUiFormCLContainer > .sapUiFormTitle,
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLSmallColumns .sapUiFormContainerToolbar > div:first-child  {
+	margin-bottom: -0.25rem;
+}
+
+.sapUiSizeCompact .sapUiForm:not(.sapUiFormEdit) .sapUiFormCLSmallColumns .sapUiFormCLContainer > .sapUiFormTitle,
+.sapUiSizeCompact .sapUiForm:not(.sapUiFormEdit) .sapUiFormCLSmallColumns .sapUiFormContainerToolbar > div:first-child  {
+	margin-bottom: 0.25rem;
+}
+
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLSmallColumns .sapUiFormCLContainer:not(.sapUiFormContainerTitle):not(.sapUiFormContainerToolbar) {
+	padding-top: 0.25rem;
+}
+
+html.sap-phone .sapUiForm:not(.sapUiFormEdit) .sapUiFormCLSmallColumns .sapUiFormCLContainer:not(.sapUiFormContainerTitle):not(.sapUiFormContainerToolbar){
+	padding-top: 0;
+	margin-top: -0.25rem;
+}
+
+/* CHROME Dummy */
+.sapUiFormCLElementDummy {
+	visibility: hidden;
+	width: 100%;
+	display: inline-block;
+}

package/src/sap/ui/layout/themes/sap_belize_base/DynamicSideContent.less

@@ -0,0 +1,95 @@
+/* ================================================= */
+/* CSS for control sap.ui.layout/DynamicSideContent  */
+/* Base theme                                        */
+/* ================================================= */
+
+.sapUiDSC {
+	.sapUiDSCM:not(.sapUiHidden),
+	.sapUiDSCS:not(.sapUiHidden) {
+		position: relative;
+	}
+	&:after {
+		clear: both;
+		content: " ";
+		display: block;
+		font-size: 0;
+		height: 0;
+		visibility: hidden;
+	}
+
+	> div[class^="sapUiDSCSpan"] {
+		float: left;
+		overflow: auto;
+	}
+
+	> aside[class^="sapUiDSCSpan"] {
+		float: left;
+		overflow: auto;
+	}
+
+	> div.sapUiDSCMCFixed {
+		width: ~"calc(100% - 340px)";
+		float: left;
+	}
+
+	> aside.sapUiDSCSCFixed,
+	> div.sapUiDSCSCFixed {
+		width: 340px;
+		float: left;
+	}
+
+	> .sapUiDSCSpan1 {
+		width: 8.333%;
+	}
+
+	> .sapUiDSCSpan2 {
+		width: 16.666%;
+	}
+
+	> .sapUiDSCSpan3 {
+		width: 25%;
+	}
+
+	> .sapUiDSCSpan4 {
+		width: 33.333%;
+	}
+
+	> .sapUiDSCSpan5 {
+		width: 41.666%;
+	}
+
+	> .sapUiDSCSpan6 {
+		width: 50%;
+	}
+
+	> .sapUiDSCSpan7 {
+		width: 58.333%;
+	}
+
+	> .sapUiDSCSpan8 {
+		width: 66.666%;
+	}
+
+	> .sapUiDSCSpan9 {
+		width: 75%;
+	}
+
+	> .sapUiDSCSpan10 {
+		width: 83.333%;
+	}
+
+	> .sapUiDSCSpan11 {
+		width: 91.666%;
+	}
+
+	> .sapUiDSCSpan12 {
+		width: 100%;
+	}
+}
+
+/* mixin call for creating container content padding classes (arguments: rootContainer, mainContent) */
+.sapUiContainerContentPadding(~".sapUiDSC", ~"> div:first-child");
+.sapUiContainerContentPadding(~".sapUiDSC", ~"> div:last-child");
+
+/* mixin call for creating container content padding classes (arguments: rootContainer, sideContent) */
+.sapUiContainerContentPadding(~".sapUiDSC", ~"> aside");

package/src/sap/ui/layout/themes/sap_belize_base/FixFlex.less

@@ -0,0 +1,127 @@
+/* ====================================== */
+/* CSS for control sap.ui.layout/FixFlex  */
+/* Base theme                             */
+/* ====================================== */
+
+/* Class for vertical (default) layout
+   ========================================================================== */
+.sapUiFixFlex {
+	box-sizing: border-box;
+
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: flex;
+
+	-webkit-box-direction: normal;
+	-webkit-box-orient: vertical;
+	-webkit-flex-direction: column;
+	flex-direction: column;
+
+	-webkit-box-align: start;
+	-webkit-align-items: flex-start;
+	align-items: flex-start;
+
+	height: 100%;
+}
+
+/* Flexible child */
+.sapUiFixFlexFlexible {
+	box-sizing: border-box;
+
+	/* Fixes bug in Chrome 48 where flexbox is broken
+		https://github.com/angular/material/issues/6841 */
+	min-height: 0;
+	min-width: 0;
+
+	-webkit-box-flex: 1;
+	-webkit-flex: 1;
+	flex: 1;
+
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+}
+
+.sapUiFixFlexFlexibleContainer {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	& > .sapUiFixFlex {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+}
+
+/* Fixed child */
+.sapUiFixFlexFixed {
+	box-sizing: border-box;
+
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+}
+
+/* Class for horizontal layout
+   ========================================================================== */
+
+.sapUiFixFlexRow {
+	-webkit-box-direction: normal;
+	-webkit-box-orient: horizontal;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+
+	& > .sapUiFixFlexFlexible,
+	& > .sapUiFixFlexFixed {
+		width: auto;
+		height: 100%;
+	}
+}
+
+/* Styles for scrolling
+   ========================================================================== */
+.sapUiFixFlexInnerScrolling {
+	& > .sapUiFixFlexFlexible {
+		-webkit-overflow-scrolling: touch;
+		overflow: auto;
+
+		.sapUiFixFlexFlexibleContainerGrowing {
+			overflow-y: visible;
+			width: 100%;
+			position: static;
+		}
+	}
+
+	&.sapUiFixFlexRow {
+		& > .sapUiFixFlexFlexible {
+			overflow-y: hidden;
+		}
+	}
+}
+
+.sapUiFixFlexScrolling {
+	-webkit-overflow-scrolling: touch;
+	display: block;
+
+	& > .sapUiFixFlexFlexible {
+		display: block;
+
+		& > .sapUiFixFlexFlexibleContainer {
+			position: static;
+			height: 100%;
+		}
+	}
+
+	&.sapUiFixFlexRow {
+		white-space: nowrap;
+		& > .sapUiFixFlexFlexible,
+		& > .sapUiFixFlexFixed {
+			display: inline-block;
+		}
+	}
+}

package/src/sap/ui/layout/themes/sap_belize_base/Form.less

@@ -0,0 +1,18 @@
+/* =================================== */
+/* CSS for control sap.ui.layout/Form  */
+/* Base theme                          */
+/* =================================== */
+
+@_sap_ui_layout_Form_FormContainerExpImageURL: url("sap-icon://slim-arrow-right");
+@_sap_ui_layout_Form_FormContainerColImageURL: url("sap-icon://slim-arrow-down");
+
+html.sap-tablet .sapUiFioriObjectPage > section > .sapUiForm,
+html.sap-desktop .sapUiFioriObjectPage > section > .sapUiForm {
+	margin: 1rem 0;
+	padding: 0 1rem;
+	box-sizing: border-box;
+}
+
+.sapUiFormElementLbl {
+	font-size: 1px; /* To prevent larger DIV because of invisible strut character*/
+}

package/src/sap/ui/layout/themes/sap_belize_base/FormLayout.less

@@ -0,0 +1,129 @@
+/* ========================================= */
+/* CSS for control sap.ui.layout/FormLayout  */
+/* Base theme                                */
+/* ========================================= */
+
+@_sap_ui_layout_FormLayout_FormTitleSize: ~"H4";
+@_sap_ui_layout_FormLayout_FormSubTitleSize: ~"H5";
+
+.sapUiFormLayout {
+	border: 1px solid @sapUiGroupTitleBorderColor;
+	font-size: @sapUiDesktopFontSize;
+}
+
+.sapUiFormLayout > .sapUiFormContainer {
+	display: block;
+}
+
+.sapUiFormTitle {
+	border-bottom: 1px solid @sapUiGroupTitleBorderColor;
+	overflow: hidden;
+	width: 100%;
+}
+
+/* Text part */
+.sapUiFormTitleH1,
+.sapUiFormTitleH2,
+.sapUiFormTitleH3,
+.sapUiFormTitleH4,
+.sapUiFormTitleH5,
+.sapUiFormTitleH6 {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	display: block;
+	width: 100%;
+	font-weight: @sapUiFontHeaderWeight;
+	color: @sapUiGroupTitleTextColor;
+	margin: 0;
+}
+
+.sapUiForm .sapUiFormTitle {
+	height: 3rem;
+	line-height: 3rem;
+}
+
+.sapUiFormContainerTitle > .sapUiFormTitle {
+	position: relative;
+	border: none;
+	box-sizing: border-box;
+	margin-bottom: 0.5rem;
+	height: 2rem;
+	line-height: 2rem;
+}
+
+.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable{
+	overflow: visible; /* to allow to put expander outside */
+	padding-left: 2.5rem;
+}
+
+.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable > button{
+	position: absolute;
+	left: -0.25rem;
+	padding-right: 0.5rem;
+}
+
+.sapUiFormTitle.sapUiFormTitleEmph {
+	border-color: @sapUiGroupTitleBorderColor;
+}
+
+/* Title levels - can not use TextView CSS from commons, because also used in mobile */
+.sapUiFormTitleH1 {
+	font-size: @sapMFontHeader1Size;
+	line-height: 122%;
+}
+
+.sapUiFormTitleH2 {
+	font-size: @sapMFontHeader2Size;
+	line-height: 122%;
+}
+
+.sapUiFormTitleH3 {
+	font-size: @sapMFontHeader3Size;
+	line-height: 122%;
+}
+
+.sapUiFormTitleH4 {
+	font-size: @sapMFontHeader4Size;
+}
+
+.sapUiFormTitleH5 {
+	font-size: @sapMFontHeader5Size;
+}
+
+.sapUiFormTitleH6 {
+	font-size: @sapMFontHeader6Size;
+	color: @sapUiGroupTitleTextColor;
+}
+
+.sapUiFormTitle> img {
+	vertical-align: middle;
+}
+
+/* Toolbar */
+.sapUiFormContainerToolbar > div:first-child {
+	margin-bottom: 0.5rem;
+}
+
+.sapUiFormToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto{
+	font-size: @sapMFontHeader4Size;
+}
+
+.sapUiFormContainerToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto{
+	font-size: @sapMFontHeader5Size;
+}
+
+.sapUiFormM .sapUiFormContainerTitle > .sapUiFormTitle {
+	height: 3rem;
+	line-height: 3rem;
+}
+
+.sapUiSizeCompact .sapUiFormContainerTitle > .sapUiFormTitle {
+	height: 2rem;
+	line-height: 2rem;
+}
+
+/* SemanticFormElement */
+.sapUiForm .sapUiFormDelimiter { /* add Form class to make sure to overwrite sapMText setting */
+	white-space: pre-wrap; /* To render whitespaces in display mode if controls are rendered */
+}