@openui5/themelib_sap_belize 1.124.2 → 1.126.0

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

@@ -0,0 +1,254 @@
+/* =================================================== */
+/* CSS for control sap.ui.layout/ResponsiveGridLayout  */
+/* Base theme                                          */
+/* =================================================== */
+
+/* Title */
+.sapUiFormResGrid > .sapUiFormTitle{
+	box-sizing: border-box;
+	padding: 0 1rem 0 1rem;
+}
+
+.sapUiRGLContainer > .sapUiFormTitle{
+	padding: 0 0.25rem;
+}
+
+.sapUiFormResGrid > .sapUiFormTitle > img,
+.sapUiRGLContainer > .sapUiFormTitle > img,
+.sapUiFormResGrid > .sapUiFormTitle > span,
+.sapUiRGLContainer > .sapUiFormTitle > span{
+	margin-right: 0.5rem;
+}
+
+/* Toolbar */
+.sapUiFormResGrid.sapUiFormToolbar > div:first-child {
+	height: 3rem; /* to have in compact mode and in commons always 3rem on Form header */
+	line-height: 3rem;
+	padding: 0 0.75rem 0 1rem;
+}
+
+/* Grid */
+.sapUiFormResGrid > div {
+	padding: 1rem 0.75rem; /* because fields have 0.25rem padding on left and right */
+	box-sizing: border-box;
+}
+
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiFormResGrid > div:not(.sapMTB) {
+	padding-bottom: 0.75rem; /* as fields have 0.25rem */
+}
+
+.sapUiRGLContainerColl > .sapUiRGLContainerCont{
+	display: none;
+}
+
+/* add paddings to content */
+.sapUiFormResGridCont{
+	padding-bottom: 2rem;
+}
+
+.sapUiFormResGridCont > div{
+	padding: 0 0.25rem;
+	box-sizing: border-box;
+}
+
+/* padding between rows for commons controls */
+.sapUiForm:not(.sapUiFormM) .sapUiFormResGridCont > div{
+	padding-bottom: 0.5rem;
+}
+
+.sapUiFormResGridCont > .sapUiFormElementLbl{
+	min-height: @sapUiLineHeight;
+}
+
+/* Special styles for Mobile controls */
+/* in display only mode add padding to controls as they don't have one */
+.sapUiFormM:not(.sapUiFormEdit) .sapUiFormResGridCont > div{
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+	font-size: 1px; /* as browser adds some px to text to meet font-size */
+}
+
+.sapUiFormM:not(.sapUiFormEdit) .sapUiFormResGridCont > div .sapUiIcon:not(.sapMBtnIcon),
+.sapUiFormM:not(.sapUiFormEdit) .sapUiFormResGridCont > div .sapMCbBg{
+	font-size: @sapUiFontSize; /* to set default font size on icons*/
+}
+
+.sapUiFormM:not(.sapUiFormEdit) .sapUiFormResGridCont{
+	margin-top: -0.25rem; /* as content has 0.25rem padding-top */
+	padding-bottom: 1.75rem; /* as content has 0.25rem padding-bottom */
+}
+
+.sapUiFormM > .sapUiFormResGrid > .sapUiFormResGridMain.sapUiRespGridOverflowHidden > div[class*="sapUiFormResGrid"]{
+	overflow: visible; /* to show top of title or tooolbar in cozy mode (because moved upwards) */
+}
+
+/* ================= */
+/*   SMALL DEVICES   */
+/* ================= */
+html.sap-phone .sapUiFormResGridCont{
+	/* on real phones use smaller space between containers */
+	padding-bottom: 1rem;
+}
+
+html.sap-phone .sapUiFormM:not(.sapUiFormEdit) .sapUiFormResGridCont{
+	/* on real phones use smaller space between containers */
+	padding-bottom: 0.75rem;
+}
+
+/* ================================= */
+/*   SMALL, MEDIUM and LARGE DEVICES */
+/* ================================= */
+/* add some space on top of full-size labels*/
+.sapUiForm:not(.sapUiFormM) .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiForm:not(.sapUiFormM) .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiForm:not(.sapUiFormM) .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiForm:not(.sapUiFormM) .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanXL12{
+	padding-top: 0.375rem;
+}
+
+.sapUiFormM.sapUiFormEdit .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiFormM.sapUiFormEdit .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiFormM.sapUiFormEdit .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiFormM.sapUiFormEdit .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanXL12{
+	padding-top: 0.625rem;
+}
+
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanXL12{
+	padding-top: 0.75rem;
+	padding-bottom: 0;
+}
+
+/* but not for first one */
+.sapUiForm .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiForm .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiForm .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiForm .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanXL12{
+	padding-top: 0;
+}
+
+/* but not for first content in display mode */
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanXL12{
+	padding-top: 0.25rem;
+}
+
+/* but not for first full-size label under title/toolbar in compact mode */
+.sapUiSizeCompact .sapUiFormM.sapUiFormEdit .sapUiFormContainerTitle > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiSizeCompact .sapUiFormM.sapUiFormEdit .sapUiFormContainerTitle > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiSizeCompact .sapUiFormM.sapUiFormEdit .sapUiFormContainerTitle > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiSizeCompact .sapUiFormM.sapUiFormEdit .sapUiFormContainerTitle > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanXL12,
+.sapUiSizeCompact .sapUiFormM.sapUiFormEdit .sapUiFormContainerToolbar > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiSizeCompact .sapUiFormM.sapUiFormEdit .sapUiFormContainerToolbar > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiSizeCompact .sapUiFormM.sapUiFormEdit .sapUiFormContainerToolbar > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiSizeCompact .sapUiFormM.sapUiFormEdit .sapUiFormContainerToolbar > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanXL12{
+	padding-top: 0.5rem;
+}
+
+.sapUiSizeCompact .sapUiFormM:not(.sapUiFormEdit) .sapUiFormContainerTitle > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiSizeCompact .sapUiFormM:not(.sapUiFormEdit) .sapUiFormContainerTitle > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiSizeCompact .sapUiFormM:not(.sapUiFormEdit) .sapUiFormContainerTitle > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiSizeCompact .sapUiFormM:not(.sapUiFormEdit) .sapUiFormContainerTitle > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanXL12,
+.sapUiSizeCompact .sapUiFormM:not(.sapUiFormEdit) .sapUiFormContainerToolbar > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiSizeCompact .sapUiFormM:not(.sapUiFormEdit) .sapUiFormContainerToolbar > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiSizeCompact .sapUiFormM:not(.sapUiFormEdit) .sapUiFormContainerToolbar > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiSizeCompact .sapUiFormM:not(.sapUiFormEdit) .sapUiFormContainerToolbar > .sapUiRGLContainerCont > .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > div:first-child.sapUiFormElementLbl.sapUiRespGridSpanXL12{
+	padding-top: 0.75rem;
+}
+
+.sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanS12,
+.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanM12,
+.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanL12,
+.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridSpanXL12{
+	padding-bottom: 0.125rem;
+}
+
+.sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12),
+.sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12),
+.sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12),
+.sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12){
+	padding-top: 1rem;
+}
+
+.sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12),
+.sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12),
+.sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12),
+.sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12){
+	padding-top: 0.5rem;
+}
+
+html[data-sap-ui-browser^="ff"] .sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12),
+html[data-sap-ui-browser^="ff"].sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12),
+html[data-sap-ui-browser^="ff"] .sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12),
+html[data-sap-ui-browser^="ff"].sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12),
+html[data-sap-ui-browser^="ff"] .sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12),
+html[data-sap-ui-browser^="ff"].sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12),
+html[data-sap-ui-browser^="ff"] .sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12),
+html[data-sap-ui-browser^="ff"].sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12){
+	padding-top: 0.4375rem;
+}
+
+/* on last row no padding-bottom on container content */
+.sapUiFormM > .sapUiFormResGrid > .sapUiRGLContainer > .sapUiRGLContainerCont > .sapUiFormResGridCont, /* only one container(panel) */
+.sapUiRespGridMedia-Std-Phone > .sapUiFormResGridLastRowM:last-child .sapUiFormResGridCont,
+.sapUiRespGridMedia-Std-Tablet > .sapUiFormResGridLastRowM .sapUiFormResGridCont,
+.sapUiRespGridMedia-Std-Desktop > .sapUiFormResGridLastRowL .sapUiFormResGridCont,
+.sapUiRespGridMedia-Std-LargeDesktop > .sapUiFormResGridLastRowXL .sapUiFormResGridCont{
+	padding-bottom: 0;
+}
+
+/* In Cozy mode put first FormContainers with title or toolbar 0.5rem on top */
+.sapUiFormM .sapUiRespGridMedia-Std-Phone > .sapUiFormResGridFirstRowM:first-child > .sapUiFormContainerTitle,
+.sapUiFormM .sapUiRespGridMedia-Std-Phone > .sapUiFormResGridFirstRowM:first-child > .sapUiFormContainerToolbar,
+.sapUiFormM .sapUiRespGridMedia-Std-Tablet > .sapUiFormResGridFirstRowM > .sapUiFormContainerTitle,
+.sapUiFormM .sapUiRespGridMedia-Std-Tablet > .sapUiFormResGridFirstRowM > .sapUiFormContainerToolbar,
+.sapUiFormM .sapUiRespGridMedia-Std-Desktop > .sapUiFormResGridFirstRowL > .sapUiFormContainerTitle,
+.sapUiFormM .sapUiRespGridMedia-Std-Desktop > .sapUiFormResGridFirstRowL > .sapUiFormContainerToolbar,
+.sapUiFormM .sapUiRespGridMedia-Std-LargeDesktop > .sapUiFormResGridFirstRowXL > .sapUiFormContainerTitle,
+.sapUiFormM .sapUiRespGridMedia-Std-LargeDesktop > .sapUiFormResGridFirstRowXL > .sapUiFormContainerToolbar{
+	margin-top: -0.5rem;
+}
+
+/* only one container - reduce top padding*/
+.sapUiFormM > .sapUiFormResGrid > .sapUiFormContainerTitle,
+.sapUiFormM > .sapUiFormResGrid > .sapUiFormContainerToolbar{
+	padding-top: 0.5rem;
+}
+
+.sapUiSizeCompact .sapUiRespGridMedia-Std-Phone > .sapUiFormResGridFirstRowM:first-child > .sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiRespGridMedia-Std-Phone > .sapUiFormResGridFirstRowM:first-child > .sapUiFormContainerToolbar,
+.sapUiSizeCompact .sapUiRespGridMedia-Std-Tablet > .sapUiFormResGridFirstRowM > .sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiRespGridMedia-Std-Tablet > .sapUiFormResGridFirstRowM > .sapUiFormContainerToolbar,
+.sapUiSizeCompact .sapUiRespGridMedia-Std-Desktop > .sapUiFormResGridFirstRowL > .sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiRespGridMedia-Std-Desktop > .sapUiFormResGridFirstRowL > .sapUiFormContainerToolbar,
+.sapUiSizeCompact .sapUiRespGridMedia-Std-LargeDesktop > .sapUiFormResGridFirstRowXL > .sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiRespGridMedia-Std-LargeDesktop > .sapUiFormResGridFirstRowXL > .sapUiFormContainerToolbar{
+	margin-top: 0;
+}
+
+.sapUiSizeCompact .sapUiFormM > .sapUiFormResGrid > .sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormM > .sapUiFormResGrid > .sapUiFormContainerToolbar{
+	padding-top: 1rem;
+}
+
+/* ============================ */
+/*   MEDIUM and LARGE DEVICES   */
+/* ============================ */
+/* add paddings between containers */
+.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridMain > div:not(.sapUiRespGridSpanM12):not(.sapUiFormResGridLastContM),
+.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridMain > div:not(.sapUiRespGridSpanL12):not(.sapUiFormResGridLastContL),
+.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridMain > div:not(.sapUiRespGridSpanXL12):not(.sapUiFormResGridLastContXL){
+	padding-right: 0.75rem; /* because fields have 0.25rem padding on left and right */
+	box-sizing: border-box;
+}
+
+.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridMain > div:not(.sapUiRespGridBreakM):not(.sapUiRespGridSpanM12),
+.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridMain > div:not(.sapUiRespGridBreakL):not(.sapUiRespGridSpanL12),
+.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridMain > div:not(.sapUiRespGridBreakXL):not(.sapUiRespGridSpanXL12){
+	padding-left: 0.75rem; /* because fields have 0.25rem padding on left and right */
+	box-sizing: border-box;
+}

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

@@ -0,0 +1,186 @@
+/* =============================================== */
+/* CSS for control sap.ui.layout/ResponsiveLayout  */
+/* Base theme                                      */
+/* =============================================== */
+
+.sapUiRLContainer.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable{
+	padding-left: 2.25rem;
+}
+
+.sapUiRLContainer.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable > button{
+	left: -0.5rem;
+}
+.sapUiRLContainerColl > .sapUiRLContainerCont{
+	display: none;
+}
+
+/* make labels before fields right aligned */
+.sapUiRLElementWithLabel > .sapUiRFLRow:first-child > .sapUiRFLContainer:first-child:not(.sapUiRFLFullLength) > div{
+	text-align: end;
+}
+
+.sapUiFormResLayout > div {
+	padding: 1rem;
+	box-sizing: border-box;
+}
+
+.sapUiFormM .sapUiRFLPaddingClass,
+.sapUiFormM .sapUiRFLMultiContent.sapUiRFLPaddingClass {
+	padding: 0 0 0 0.5rem;
+}
+
+.sapUiRLContainerCont > .sapUiRFL >.sapUiRFLRow >.sapUiRFLContainer{
+	padding-right: 0.5rem;
+}
+
+.sapUiRLContainerCont > .sapUiRFL >.sapUiRFLRow >.sapUiRFLContainer:last-child{
+	padding-right: 0;
+}
+
+.sapUiRLElementWithLabel > .sapUiRFLCompleteRow:first-child > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiRFLContainerContent.sapUiRFLPaddingClass{
+	padding-bottom: 0;
+}
+
+.sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent{
+	padding-top: 1rem;
+}
+
+html[data-sap-ui-browser^="ff"] .sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent{
+	padding-top: 0.9375rem;
+}
+
+.sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent{
+	padding-top: 0.5rem;
+}
+
+html[data-sap-ui-browser^="ff"].sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent,
+html[data-sap-ui-browser^="ff"] .sapUiSizeCompact .sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent{
+	padding-top: 0.4375rem;
+}
+
+.sapUiFormResLayout .sapUiRFLRow > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiRFLContainerContent > .sapUiRLElement > .sapUiRFLRow:last-child > .sapUiRFLFullLength:last-child{
+	padding-bottom: 0.625rem;
+}
+.sapUiForm > .sapUiFormResLayout > .sapUiRFL .sapUiRFLRow:last-child > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiRFLContainerContent > .sapUiRLElement > .sapUiRFLRow:last-child > .sapUiRFLFullLength:last-child{
+	/* last element in row has no padding bottom */
+	padding-bottom: 0;
+}
+
+.sapUiRLElementFields > .sapUiRFLRow > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent.sapUiRFLPaddingClass:first-child,
+.sapUiRLElementFields > .sapUiRFLRow > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent.sapUiRFLMultiContainerContent.sapUiRFLPaddingClass:first-child > .sapUiRFLMultiContent.sapUiRFLPaddingClass:first-child{
+	padding-left: 0.5rem;
+}
+.sapUiRLElementFields > .sapUiRFLRow > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent.sapUiRFLMultiContainerContent.sapUiRFLPaddingClass:first-child,
+.sapUiRFLFullLength > .sapUiRFLContainerContent > .sapUiRLElementFields > .sapUiRFLRow > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent.sapUiRFLPaddingClass:first-child,
+.sapUiRFLFullLength > .sapUiRFLContainerContent > .sapUiRLElementFields > .sapUiRFLRow > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent.sapUiRFLPaddingClass:first-child > .sapUiRFLMultiContent.sapUiRFLPaddingClass:first-child{
+	padding-left: 0;
+}
+
+.sapUiRFLRow > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLContainer{
+	/* space between 2 containers, devide it to previous and next container to have the same size for all*/
+	padding-left: 0.5rem;
+	padding-right: 1rem;
+}
+.sapUiRFLRow > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent > .sapUiRLContainer{
+	padding-left: 0;
+}
+.sapUiRFLRow > .sapUiRFLContainer:last-child > .sapUiRFLContainerContent > .sapUiRLContainer{
+	padding-right: 0;
+}
+
+/* full size labels in mobile */
+.sapUiFormM .sapUiFormResLayout .sapUiRFLRow:first-child > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiFormElementLbl{
+	padding-top: 0.25rem;
+}
+
+/* full-size label under title/toolbar in compact mode */
+.sapUiSizeCompact .sapUiFormM .sapUiFormContainerTitle > .sapUiRLContainerCont > .sapUiRFL > .sapUiRFLRow:first-child > .sapUiRFLContainer .sapUiRFLContainerContent > .sapUiRLElementWithLabel > .sapUiRFLRow:first-child > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiFormElementLbl{
+	padding-top: 0.5rem;
+}
+
+/* Title */
+.sapUiFormResLayout > .sapUiFormTitle{
+	box-sizing: border-box;
+	padding: 0 1rem 0 1rem;
+}
+
+.sapUiFormResLayout .sapUiFormTitle > img,
+.sapUiFormResLayout .sapUiFormTitle > span{
+	margin-right: 0.1875rem;
+}
+
+/* Toolbar */
+.sapUiFormResLayout.sapUiFormToolbar > div:first-child {
+	height: 3rem; /* to have in compact mode and in commons always 3rem on Form header */
+	line-height: 3rem;
+	padding: 0 1rem 0 1rem;
+}
+
+/* vertical spacing between containers */
+.sapUiFormResLayout > .sapUiRFL > .sapUiRFLRow > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLContainer{
+	padding-top: 2rem;
+}
+
+html.sap-phone .sapUiFormResLayout > .sapUiRFL > .sapUiRFLRow > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLContainer{
+	padding-top: 1rem;
+}
+
+.sapUiForm > .sapUiFormResLayout > .sapUiRFL > .sapUiRFLRow:first-child > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLContainer{
+	padding-top: 0;
+}
+
+/* In Cozy mode put first FormContainers with title or toolbar 0.5rem on top */
+.sapUiFormM > .sapUiFormResLayout > .sapUiRFL > .sapUiRFLRow:first-child > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLContainer.sapUiFormContainerTitle,
+.sapUiFormM > .sapUiFormResLayout > .sapUiRFL > .sapUiRFLRow:first-child > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLContainer.sapUiFormContainerToolbar{
+	margin-top: -0.5rem;
+}
+.sapUiFormM > .sapUiFormResLayout > .sapUiRFL > .sapUiRFLRow:first-child > .sapUiRFLContainer{
+	overflow: visible; /* to show expander and toolbar completely */
+}
+
+/* only one container - reduce top padding*/
+.sapUiFormM > .sapUiFormResLayout > .sapUiFormContainerTitle,
+.sapUiFormM > .sapUiFormResLayout > .sapUiFormContainerToolbar{
+	padding-top: 0.5rem;
+}
+
+.sapUiSizeCompact .sapUiFormM > .sapUiFormResLayout > .sapUiRFL > .sapUiRFLRow:first-child > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLContainer.sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormM > .sapUiFormResLayout > .sapUiRFL > .sapUiRFLRow:first-child > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLContainer.sapUiFormContainerToolbar{
+	margin-top: 0;
+}
+
+.sapUiSizeCompact .sapUiFormM > .sapUiFormResLayout > .sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormM > .sapUiFormResLayout > .sapUiFormContainerToolbar{
+	padding-top: 1rem;
+}
+
+/* for display mode add padding to elements to have spacing between */
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRFLContainerContent{
+	font-size: 1px; /* as browser adds some px to text to meet font-size*/
+}
+
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRFLContainerContent .sapUiIcon:not(.sapMBtnIcon),
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRFLContainerContent .sapMCbBg{
+	font-size: @sapUiFontSize; /* to set default font size on icons */
+}
+
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRLElement > .sapUiRFLRow{
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+}
+
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRLContainerCont > .sapUiRFL > .sapUiRFLRow:first-child > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLElement > .sapUiRFLRow:first-child{
+	padding-top: 0;
+}
+
+.sapUiFormM:not(.sapUiFormEdit) .sapUiRLContainerCont > .sapUiRFL > .sapUiRFLRow:last-child > .sapUiRFLContainer > .sapUiRFLContainerContent > .sapUiRLElement > .sapUiRFLRow:last-child{
+	padding-bottom: 0;
+}
+
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiFormResLayout .sapUiRFLRow:first-child > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiRFLContainerContent > .sapMLabel{
+	padding-bottom: 0;
+}
+
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiFormResLayout .sapUiRFLRow > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiRFLContainerContent > .sapUiRLElement > .sapUiRFLRow:last-child > .sapUiRFLFullLength:last-child{
+	padding-bottom: 0.25rem;
+}

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

@@ -0,0 +1,154 @@
+/* ================================================= */
+/* CSS for control sap.ui.layout/ResponsiveSplitter  */
+/* Base theme                                        */
+/* ================================================= */
+
+@_sap_ui_layout_ResponsiveSplitter_PaginatorHeight: 2.5rem;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonWidth: 2.5rem;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHeight: 2.375rem;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius: unset;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton: @sapUiContentIconColor;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive: @sapUiContentContrastIconColor;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHoverShadow: none;
+
+.sapUiResponsiveSplitter {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.sapUiResponsiveSplitterPage {
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.sapUiRSVisiblePaginator {
+	& .sapUiResponsiveSplitterPaginator {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		box-sizing: border-box;
+		outline: none;
+		height: @_sap_ui_layout_ResponsiveSplitter_PaginatorHeight;
+		background-color: @sapUiPageFooterBackground;
+		border-top: 0.0625rem solid @sapUiPageFooterBorderColor;
+		border-bottom: 0.0625rem solid transparent; // needed to properly align buttons vertically
+	}
+
+	& .sapUiResponsiveSplitterPage {
+		height: calc(100% ~"-" @_sap_ui_layout_ResponsiveSplitter_PaginatorHeight);
+	}
+
+	& .sapUiResponsiveSplitterPaginator.sapUiResponsiveSplitterWithNavButtons {
+		justify-content: space-between;
+	}
+}
+
+.sapUiResponsiveSplitterPaginatorButtons {
+	display: flex;
+	align-items: center;
+}
+
+.sapUiResponsiveSplitterPaginatorButton {
+	width: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonWidth;
+	height: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHeight;
+	cursor: pointer;
+	background-color: transparent;
+	border-radius: @sapUiButtonBorderCornerRadius;
+	position: relative;
+
+	&::after {
+		content: "";
+		width: 0.25rem;
+		height: 0.25rem;
+		background-color: @sapUiContentNonInteractiveIconColor;
+		margin: auto;
+		display: block;
+		margin-top: 16px;
+		border-radius: 50%;
+	};
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border-radius: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius;
+	}
+
+	&:hover {
+		background-color: @sapUiButtonLiteHoverBackground;
+		box-shadow: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHoverShadow;
+
+		&::after {
+			background-color: @sapUiContentNonInteractiveIconColor;
+		}
+	}
+
+	&:active {
+		background-color: @sapUiButtonLiteActiveBackground;
+
+		&::after {
+			background-color: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive;
+		}
+	}
+}
+
+.sapUiResponsiveSplitterPaginatorSelectedButton {
+	&::after {
+		background-color: @_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton;
+		width: 0.5rem;
+		height: 0.5rem;
+		margin-top: 0.875rem;
+	}
+
+	&:hover {
+		&::after {
+			background-color: @_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton;
+		}
+	}
+}
+
+.sapUiResponsiveSplitterHiddenElement {
+	display: none;
+}
+
+.sapUiResponsiveSplitterPaginatorNavButton {
+	width: 2.5rem;
+	height: 100%;
+	font-family: 'SAP-icons';
+	cursor: pointer;
+
+	&::after {
+		position: absolute;
+		margin-top: 11px;
+		margin-left: 15px;
+	}
+}
+
+.sapUiResponsiveSplitterPaginatorButtonBack {
+	&::after {
+		content: '\e067';
+	}
+}
+
+.sapUiResponsiveSplitterPaginatorButtonForward {
+	&::after {
+		content: '\e066';
+	}
+}
+
+.sapUiResponsiveSplitterHiddenBackButton,
+ .sapUiResponsiveSplitterHiddenPaginatorButton {
+	display: none !important;
+	background-color: @sapUiSelected;
+}

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

@@ -0,0 +1,19 @@
+/* ========================================= */
+/* CSS for control sap.ui.layout/SimpleForm  */
+/* Base theme                                */
+/* ========================================= */
+
+.sapUiSimpleForm {
+	width:100%;
+	box-sizing: border-box;
+}
+
+html.sap-tablet .sapUiFioriObjectPage > section > .sapUiSimpleForm,
+html.sap-desktop .sapUiFioriObjectPage > section > .sapUiSimpleForm {
+	margin: 1rem 0;
+	padding: 0 1rem;
+}
+
+.sapUiFormEdit-CTX .sapMSwtCont {
+	vertical-align:middle;
+}