@openui5/sap.ui.layout 1.125.0 → 1.126.1

package/src/sap/ui/layout/themes/sap_hcb/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 */
+}

package/src/sap/ui/layout/themes/sap_hcb/base_Grid.less

@@ -0,0 +1,261 @@
+/* UI5 RESPONSIVE GRID */
+// Variables
+@_sap_ui_layout_Grid_RespGridCols: 12;
+@_sap_ui_layout_Grid_RespGridCols-1: @_sap_ui_layout_Grid_RespGridCols - 1;
+@_sap_ui_layout_Grid_RespGridOneCol: 100% / @_sap_ui_layout_Grid_RespGridCols;
+@_sap_ui_layout_Grid_RespGridMediaPhone: sapUiRespGridMedia-Std-Phone;
+@_sap_ui_layout_Grid_RespGridMediaTablet: sapUiRespGridMedia-Std-Tablet;
+@_sap_ui_layout_Grid_RespGridMediaDesktop: sapUiRespGridMedia-Std-Desktop;
+@_sap_ui_layout_Grid_RespGridMediaXL: sapUiRespGridMedia-Std-LargeDesktop;
+@_sap_ui_layout_Grid_RespGridMediaPhoneSize: 320px;
+@_sap_ui_layout_Grid_RespGridMediaTabletSize: 600px;
+@_sap_ui_layout_Grid_RespGridMediaDesktopSize: 1024px;
+@_sap_ui_layout_Grid_RespGridMediaXLSize: 1440px;
+@_sap_ui_layout_Grid_RespGridPxInRem: 16;
+@_sap_ui_layout_Grid_RespGridVisible: sapUiRespGridVisible;
+@_sap_ui_layout_Grid_RespGridHidden: sapUiRespGridHidden;
+
+div[class*="sapUiRespGrid"] > div[class*="sapUiRespGridSpan"] {
+    float: left;
+	min-height: 1px; // BCP: 1770523047
+}
+
+div.sapUiRespGridOverflowHidden[class*="sapUiRespGrid"] > div[class*="sapUiRespGridSpan"] {
+	overflow: hidden;
+}
+
+/* CLEAR FIX */
+
+div[class*="sapUiRespGrid"]:after {
+    clear: both;
+    content: " ";
+    display: block;
+    font-size: 0;
+    height: 0;
+    visibility: hidden;
+}
+
+/* GRID HORIZONTAL SPACING - 0.5rem */
+
+.sapUiRespGrid.sapUiRespGridHSpace05 {
+    padding: 0 0.25rem;
+}
+
+.sapUiRespGrid.sapUiRespGridHSpace05 > div {
+    margin: 0 0.25rem;
+}
+
+/* GRID HORIZONTAL SPACING - 1rem */
+
+.sapUiRespGrid.sapUiRespGridHSpace1 {
+    padding: 0 0.5rem;
+}
+
+.sapUiRespGrid.sapUiRespGridHSpace1 > div {
+    margin: 0 0.5rem;
+}
+
+/* GRID HORIZONTAL SPACING - 2rem */
+
+.sapUiRespGrid.sapUiRespGridHSpace2 {
+    padding: 0 1rem;
+}
+
+.sapUiRespGrid.sapUiRespGridHSpace2 > div {
+    margin: 0 1rem;
+}
+
+/* GRID VERTICAL SPACING - general */
+
+.sapUiRespGrid.sapUiRespGridVSpace0 > div {
+    margin-bottom: 0;
+}
+
+.sapUiRespGrid.sapUiRespGridVSpace05 > div {
+    margin-bottom: 0.5rem;
+}
+
+.sapUiRespGrid.sapUiRespGridVSpace1 > div {
+    margin-bottom: 1rem;
+}
+
+.sapUiRespGrid.sapUiRespGridVSpace2 > div {
+    margin-bottom: 2rem;
+}
+
+.sapUiRespGrid[class*="sapUiRespGridVSpace0"] > .sapUiRespGridSpanInvisible,
+.sapUiRespGrid[class*="sapUiRespGridVSpace05"] > .sapUiRespGridSpanInvisible,
+.sapUiRespGrid[class*="sapUiRespGridVSpace1"] > .sapUiRespGridSpanInvisible,
+.sapUiRespGrid[class*="sapUiRespGridVSpace2"] > .sapUiRespGridSpanInvisible {
+	margin-bottom: 0;
+}
+
+/* GENERAL BREAK */
+
+.sapUiRespGridBreak { clear: both; }
+
+.sapUiRespGridWriteSpanClass(@classFor, @hspace, @span, @screenSize) when (@classFor = Span) {
+    @a:  @_sap_ui_layout_Grid_RespGridOneCol * @span;
+    width: @a - 100% * @_sap_ui_layout_Grid_RespGridPxInRem * @hspace / @screenSize;
+    .sapUiRespGrid-getCalcFuncSpan(@a, @hspace);
+}
+
+.sapUiRespGridWriteIndentClass(@classFor, @hspace, @span, @screenSize) when (@classFor = Indent) {
+    @a:  @_sap_ui_layout_Grid_RespGridOneCol * @span;
+    margin-left: @a + (100% * @_sap_ui_layout_Grid_RespGridPxInRem * @hspace/2) / @screenSize ;
+    .sapUiRespGrid-getCalcFuncIndent(@a, @hspace);
+}
+
+// Get the values and how I cheat LESS processor with the commented calc function
+.sapUiRespGrid-getCalcFuncSpan(@a, @hspace)  when (@hspace > 0) {
+   @c: "calc(";
+   @b: " - ";
+   @d: "-webkit-calc(";
+   @e: "rem)";
+   @par1: ~"@{d}@{a}@{b}@{hspace}@{e}";
+   @par2: ~"@{c}@{a}@{b}@{hspace}@{e}";
+        width: @par1;
+        width: @par2;
+}
+
+// Get the values and how I cheat LESS processor with the commented calc function
+.sapUiRespGrid-getCalcFuncIndent(@a, @hspace)  when (@hspace > 0) {
+   @c: "calc(";
+   @b: " + ";
+   @d: "-webkit-calc(";
+   @e: "rem)";
+   @f: @hspace/2;
+   @par1: ~"@{d}@{a}@{b}@{f}@{e}";
+   @par2: ~"@{c}@{a}@{b}@{f}@{e}";
+        margin-left: @par1;
+        margin-left: @par2;
+}
+
+
+//Write Span and Indent classes
+.sapUiRespGridWriteClasses(@counter, @media, @classFor, @name, @classHSpace, @hspace, @screenSize) when (@counter > 0) {
+  .sapUiRespGridWriteClasses((@counter - 1), @media, @classFor, @name, @classHSpace, @hspace, @screenSize);
+  .@{media}.sapUiRespGridHSpace@{classHSpace} > .sapUiRespGrid@{classFor}@{name}@{counter} {
+      .sapUiRespGridWriteSpanClass(@classFor, @hspace, @counter,  @screenSize);
+      .sapUiRespGridWriteIndentClass(@classFor, @hspace, @counter,  @screenSize);
+    }
+}
+
+// MOVE LEFT
+.sapUiRespGridWriteMoveFwd(@counter, @media, @name) when (@counter > 0) {
+  .sapUiRespGridWriteMoveFwd((@counter - 1), @media, @name);
+  .@{media} > .sapUiRespGridFwd@{name}@{counter} { left: @_sap_ui_layout_Grid_RespGridOneCol * @counter; }
+}
+
+// MOVE RIGHT
+.sapUiRespGridWriteMoveBwd(@counter, @media, @name) when (@counter > 0) {
+  .sapUiRespGridWriteMoveBwd((@counter - 1), @media, @name);
+  .@{media} > .sapUiRespGridBwd@{name}@{counter} { right: @_sap_ui_layout_Grid_RespGridOneCol * @counter; }
+}
+
+.sapUiRespGridWriteBreak(@media, @name){
+  .@{media} > .sapUiRespGridBreak@{name} { clear: both }
+}
+
+
+.sapUiRespGridWriteCSS(@media, @name, @screenSize) {
+
+    /*SPANS */
+    .sapUiRespGridWriteClasses(@_sap_ui_layout_Grid_RespGridCols, @media, Span, @name, 0, 0, @screenSize);
+    .sapUiRespGridWriteClasses(@_sap_ui_layout_Grid_RespGridCols, @media, Span, @name, ~"05", 0.5, @screenSize);
+    .sapUiRespGridWriteClasses(@_sap_ui_layout_Grid_RespGridCols, @media, Span, @name, 1, 1, @screenSize);
+    .sapUiRespGridWriteClasses(@_sap_ui_layout_Grid_RespGridCols, @media, Span, @name, 2, 2, @screenSize);
+
+    /*INDENTS */
+    .sapUiRespGridWriteClasses(@_sap_ui_layout_Grid_RespGridCols-1, @media, Indent, @name, 0, 0, @screenSize);
+    .sapUiRespGridWriteClasses(@_sap_ui_layout_Grid_RespGridCols-1, @media, Indent, @name, ~"05", 0.5, @screenSize);
+    .sapUiRespGridWriteClasses(@_sap_ui_layout_Grid_RespGridCols-1, @media, Indent, @name, 1, 1, @screenSize);
+    .sapUiRespGridWriteClasses(@_sap_ui_layout_Grid_RespGridCols-1, @media, Indent, @name, 2, 2, @screenSize);
+
+	/* MOVE LEFT */
+	.sapUiRespGridWriteMoveFwd(@_sap_ui_layout_Grid_RespGridCols-1, @media, @name);
+
+	/* MOVE RIGHT */
+	.sapUiRespGridWriteMoveBwd(@_sap_ui_layout_Grid_RespGridCols-1, @media, @name);
+
+	/* BREAK */
+	.sapUiRespGridWriteBreak(@media, @name);
+}
+
+/* =============================== */
+/*   S M A L L   D E V I C E S     */
+/* =============================== */
+
+.sapUiRespGridWriteCSS(@_sap_ui_layout_Grid_RespGridMediaPhone, S, @_sap_ui_layout_Grid_RespGridMediaPhoneSize);
+.@{_sap_ui_layout_Grid_RespGridMediaPhone} > .@{_sap_ui_layout_Grid_RespGridHidden}S { display: none }
+
+
+/* =============================== */
+/*   M E D I U M   D E V I C E S   */
+/* =============================== */
+
+.sapUiRespGridWriteCSS(@_sap_ui_layout_Grid_RespGridMediaTablet, M, @_sap_ui_layout_Grid_RespGridMediaTabletSize);
+.@{_sap_ui_layout_Grid_RespGridMediaTablet} > .@{_sap_ui_layout_Grid_RespGridHidden}M { display: none }
+
+
+/* ============================= */
+/*   L A R G E   D E V I C E S   */
+/* ============================= */
+
+.sapUiRespGridWriteCSS(@_sap_ui_layout_Grid_RespGridMediaDesktop, L, @_sap_ui_layout_Grid_RespGridMediaDesktopSize);
+.@{_sap_ui_layout_Grid_RespGridMediaDesktop} > .@{_sap_ui_layout_Grid_RespGridHidden}L { display: none }
+
+
+/* ====================================== */
+/*  E X T R A   L A R G E   D E V I C E S */
+/* ====================================== */
+
+.sapUiRespGridWriteCSS(@_sap_ui_layout_Grid_RespGridMediaXL, XL, @_sap_ui_layout_Grid_RespGridMediaXLSize);
+.@{_sap_ui_layout_Grid_RespGridMediaXL} > .@{_sap_ui_layout_Grid_RespGridHidden}XL { display: none }
+
+
+
+/* =============== */
+/*   E X T R A S   */
+/* =============== */
+
+/* HORIZONTAL POSITIONING GRID IN CONTAINER */
+
+div.sapUiRespGrid.sapUiRespGridPosCenter {
+       margin-left: auto;
+       margin-right: auto;
+}
+
+div.sapUiRespGrid.sapUiRespGridPosRight {
+       margin-left: auto;
+       margin-right: 0;
+}
+
+/* MOVE FOWARD and BACKWARD */
+
+div[class*="sapUiRespGrid"] > div[class*="sapUiRespGridFwd"] {
+       position: relative;
+}
+
+div[class*="sapUiRespGrid"] > div[class*="sapUiRespGridBwd"] {
+       float: right;
+       position: relative;
+}
+
+
+/* explanation for percentages for browsers without calc support:
+   16px = 1rem
+   -------------------------
+S  1.25%     =  4px / 320px
+   2.5%      =  8px / 320px
+   5%        = 16px / 320px
+   10%       = 32px / 320px
+M  0.16667%  =  4px / 600px
+   1.3333%   =  8px / 600px
+   2.6667%   = 16px / 600px
+   5.3333%   = 32px / 600px
+L  0.390625% =  4px / 1024px
+   0.78125%  =  8px / 1024px
+   1.5625%   = 16px / 1024px
+   3.125%    = 32px / 1024px
+   ------------------------- */

package/src/sap/ui/layout/themes/sap_hcb/base_GridLayout.less

@@ -0,0 +1,189 @@
+/* ========================================= */
+/* CSS for control sap.ui.layout/GridLayout  */
+/* Base theme                                */
+/* ========================================= */
+
+.sapUiForm:not(.sapUiFormM) > .sapUiGrid {
+	font-size: @sapUiDesktopFontSize;
+}
+
+.sapUiGrid td {
+	vertical-align: top;
+	overflow: hidden;
+}
+
+.sapUiGrid td.sapUiGridHeader {
+	vertical-align: bottom;
+}
+
+.sapUiGrid th > .sapUiFormTitle,
+.sapUiGrid td > .sapUiFormTitle {
+	text-align: start;
+	position: relative;
+}
+
+.sapUiGridHeader.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable{
+	padding-left: 2.25rem;
+}
+
+.sapUiGridHeader.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable > button{
+	left: -0.5rem;
+}
+
+/* Toolbar */
+.sapUiGrid.sapUiFormToolbar th > div {
+	text-align: start;
+}
+
+.sapUiGrid > tbody > tr > td {
+	padding: 0.25rem 0 0.25rem 0.5rem;
+}
+
+.sapUiFormM > .sapUiGrid > tbody > tr > td {
+	padding: 0 0 0 0.5rem;
+}
+
+.sapUiGrid > tbody > tr > td:first-child {
+	padding-left: 1rem;
+}
+
+.sapUiGrid > tbody > tr.sapUiGridConteinerFirstRow > td {
+	padding-top: 2rem;
+}
+
+.sapUiGrid > tbody > tr:first-child > td, /* if no Form title */
+.sapUiForm[aria-labelledby] > .sapUiGrid > tbody > tr:nth-child(2) > td {
+	padding-top: 1rem;
+}
+
+/* In Cozy mode put first FormContainers with title or toolbar 0.5rem on top */
+.sapUiFormM > .sapUiGrid > tbody > tr:first-child > td.sapUiFormContainerTitle, /* if no Form title */
+.sapUiFormM > .sapUiGrid > tbody > tr:first-child > td.sapUiFormContainerToolbar, /* if no Form title */
+.sapUiFormM[aria-labelledby] > .sapUiGrid > tbody > tr:nth-child(2) > td.sapUiFormContainerTitle,
+.sapUiFormM[aria-labelledby] > .sapUiGrid > tbody > tr:nth-child(2) > td.sapUiFormContainerToolbar {
+	padding-top: 0.75rem;
+}
+
+.sapUiSizeCompact .sapUiFormM > .sapUiGrid > tbody > tr:first-child > td.sapUiFormContainerTitle, /* if no Form title */
+.sapUiSizeCompact .sapUiFormM > .sapUiGrid > tbody > tr:first-child > td.sapUiFormContainerToolbar, /* if no Form title */
+.sapUiSizeCompact .sapUiFormM[aria-labelledby] > .sapUiGrid > tbody > tr:nth-child(2) > td.sapUiFormContainerTitle,
+.sapUiSizeCompact .sapUiFormM[aria-labelledby] > .sapUiGrid > tbody > tr:nth-child(2) > td.sapUiFormContainerToolbar {
+	padding-top: 1rem;
+}
+
+.sapUiGrid > tbody > tr > td:last-child {
+	padding-right: 1rem;
+}
+
+.sapUiGrid > tbody > tr:last-child > td {
+	padding-bottom: 1rem;
+}
+
+.sapUiFormM > .sapUiGrid > tbody > tr:last-child > td {
+	padding-bottom: 0.75rem;
+}
+
+.sapUiGrid > tbody > tr > td.sapUiGridLabelFull {
+	padding-bottom: 0.125rem;
+}
+
+.sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr > td.sapUiFormElementLbl {
+	padding-top: 1rem;
+}
+
+.sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr.sapUiGridConteinerFirstRow > td.sapUiFormElementLbl {
+	padding-top: 3rem;
+}
+
+.sapUiFormEdit.sapUiFormM >.sapUiGrid > tbody > tr:first-child > td.sapUiFormElementLbl, /* if no Form title */
+.sapUiFormEdit[aria-labelledby].sapUiFormM > .sapUiGrid > tbody > tr:nth-child(2) > td.sapUiFormElementLbl {
+	padding-top: 2rem;
+}
+
+.sapUiSizeCompact .sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr > td.sapUiFormElementLbl {
+	padding-top: 0.5rem;
+}
+
+.sapUiSizeCompact .sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr.sapUiGridConteinerFirstRow > td.sapUiFormElementLbl {
+	padding-top: 2.5rem;
+}
+
+.sapUiSizeCompact .sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr:first-child > td.sapUiFormElementLbl, /* if no Form title */
+.sapUiSizeCompact .sapUiFormEdit[aria-labelledby].sapUiFormM > .sapUiGrid > tbody > tr:nth-child(2) > td.sapUiFormElementLbl {
+	padding-top: 1.5rem;
+}
+
+html[data-sap-ui-browser^="ff"].sapUiSizeCompact,
+html[data-sap-ui-browser^="ff"] .sapUiSizeCompact {
+	.sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr > td.sapUiFormElementLbl {
+		padding-top: 0.4375rem;
+	}
+
+	.sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr.sapUiGridConteinerFirstRow > td.sapUiFormElementLbl {
+		padding-top: 2.4375rem;
+	}
+
+	.sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr:first-child > td.sapUiFormElementLbl, /* if no Form title */
+	.sapUiFormEdit[aria-labelledby].sapUiFormM > .sapUiGrid > tbody > tr:nth-child(2) > td.sapUiFormElementLbl {
+		padding-top: 1.4375rem;
+	}
+}
+
+.sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr > td.sapUiGridLabelFull {
+	padding-top: 0;
+}
+
+.sapUiGridSpace {
+	width: 1.5rem; /* as cells after separator have padding-left of 0.5rem */
+}
+
+.sapUiGrid .sapUiGridHeader {
+	padding: 0 0 0 0.5rem;
+}
+
+/* Title */
+.sapUiGrid th > .sapUiFormTitle {
+	box-sizing: border-box;
+	padding: 0 1rem 0 1rem;
+}
+
+.sapUiGrid .sapUiFormTitle > img,
+.sapUiGrid .sapUiFormTitle > span {
+	margin-right: 0.25rem;
+}
+
+/* Toolbar */
+.sapUiGrid.sapUiFormToolbar th > div {
+	height: 3rem; /* to have in compact mode and in commons always 3rem on Form header */
+	line-height: 3rem;
+	padding: 0 1rem 0 1rem;
+	box-sizing: border-box;
+}
+
+.sapUiGrid > tbody > tr > .sapUiFormContainerToolbar > div {
+	margin-bottom: 0.5rem;
+}
+
+/* for display mode add padding to elements to have spacing between */
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid tr:not(.sapUiGridConteinerHeaderRow) > td{
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+}
+
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid {
+	font-size: 1px; /* as browser adds some px to text to meet font-size*/
+}
+
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid tr:not(.sapUiGridConteinerHeaderRow) > td .sapUiIcon:not(.sapMBtnIcon),
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid tr:not(.sapUiGridConteinerHeaderRow) > td .sapMCbBg{
+	font-size: @sapUiFontSize; /* to set default font size on icons */
+}
+
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid .sapUiGridConteinerFirstRow:not(.sapUiGridConteinerHeaderRow) > td,
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid .sapUiGridConteinerHeaderRow + tr:not(.sapUiGridConteinerHeaderRow) > td{
+	padding-top: 0;
+}
+
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid > tbody > tr:last-child > td {
+	padding-bottom: 1rem;
+}

package/src/sap/ui/layout/themes/sap_hcb/base_HorizontalLayout.less

@@ -0,0 +1,61 @@
+/* =============================================== */
+/* CSS for control sap.ui.layout/HorizontalLayout  */
+/* Base theme                                      */
+/* =============================================== */
+
+.sapUiHLayout {
+	display: inline-block;
+	white-space: normal;
+}
+
+.sapUiHLayoutNoWrap {
+	white-space: nowrap;
+}
+
+.sapUiHLayoutChildWrapper {
+	white-space: normal;
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
+.sapUiContainerContentPadding(~".sapUiHLayout");
+
+/* add padding between cells as well */
+.sapUiHLayout.sapUiContentPadding > .sapUiHLayoutChildWrapper:not(:last-child) {
+	padding-right: 1rem;
+	box-sizing: border-box;
+}
+
+@media (max-width: 599px) {
+	.sapMSplitContainerHideMode > .sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding ,
+	.sapMSplitContainerPortrait > .sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding ,
+	.sapUiHLayout.sapUiResponsiveContentPadding  > .sapUiHLayoutChildWrapper:not(:last-child) {
+		padding: 0;
+	}
+}
+@media (min-width: 600px) and (max-width: 1023px) {
+	.sapMSplitContainerHideMode > .sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding ,
+	.sapUiHLayout.sapUiResponsiveContentPadding  > .sapUiHLayoutChildWrapper:not(:last-child) {
+		padding-right: 1rem;
+		box-sizing: border-box;
+	}
+}
+@media (min-width: 1024px) {
+	.sapMSplitContainerHideMode > .sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding ,
+	.sapUiHLayout.sapUiResponsiveContentPadding  > .sapUiHLayoutChildWrapper:not(:last-child) {
+		padding-right: 1rem;
+		box-sizing: border-box;
+	}
+}
+
+.sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding  > .sapUiHLayoutChildWrapper:not(:last-child) {
+	padding-right: 1rem;
+}
+
+/* fix for BCP: 1580166858
+ * HorizontalLayout inside table cell doesn't respect the width of the cell but the width of the control that is inside it
+ */
+.sapMListTblCell .sapUiHLayout {
+	width: 100%;
+}

package/src/sap/ui/layout/themes/sap_hcb/base_ResponsiveFlowLayout.less

@@ -0,0 +1,62 @@
+/* =================================================== */
+/* CSS for control sap.ui.layout/ResponsiveFlowLayout  */
+/* Base theme                                          */
+/* =================================================== */
+
+.sapUiRFL {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.sapUiRFLRow {
+	position: relative;
+	display: block;
+	box-sizing: border-box;
+}
+
+.sapUiRFLContainer {
+	position: relative;
+	display: inline-block;
+	box-sizing: border-box;
+	vertical-align: top;
+	overflow: hidden;
+}
+
+.sapUiRFLRow > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent.sapUiRFLPaddingClass:first-child {
+	padding-left: 0;
+}
+
+.sapUiRFLRow > .sapUiRFLContainer:last-child > .sapUiRFLContainerContent.sapUiRFLPaddingClass:last-child {
+	padding-right: 0;
+}
+
+.sapUiRFLMultiContainerContent {
+	white-space: nowrap;
+}
+
+.sapUiRFLMultiContent {
+	display: inline-block;
+	box-sizing: border-box;
+}
+
+.sapUiRFLMultiContainerContent > .sapUiRFLMultiContent.sapUiRFLPaddingClass:last-child {
+	padding-right: 0;
+}
+
+.sapUiRFLPaddingClass {
+	padding: 0 0 8px 8px;
+}
+
+.sapUiRFLFullLength > .sapUiRFLPaddingClass {
+	padding-left: 0;
+}
+
+.sapUiRFLMultiContent.sapUiRFLPaddingClass {
+	padding: 0 0 8px 8px;
+}
+
+.sapUiRFLMultiContainerContent > .sapUiRFLMultiContent.sapUiRFLPaddingClass:first-child {
+	padding-left: 0;
+}