@sapui5/sap.suite.ui.commons 1.145.1 → 1.147.0

package/src/sap/suite/ui/commons/themes/base/ProcessFlowNode.less

@@ -1,33 +1,34 @@
-/* ============================================================ */
-/* CSS for sap.suite.ui.commons/ProcessFlowNode.control         */
-/* Base Theme                                                   */
-/* ============================================================ */
+/* ===================================================== */
+/* CSS for control sap.suite.ui.commons/ProcessFlowNode  */
+/* Base theme                                            */
+/* ===================================================== */
 
 /* border styles */
 .sapSuiteUiCommonsProcessFlowNode1BorderStyle {
 	border-right: none !important;
 	border-bottom: none !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNode1FoldedBorderStyle {
 	border-style: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode2BorderStyle {
 	border-left: none !important;
 	border-bottom: none !important;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3BorderStyle {
 	border-top: none !important;
 }
 
-/*-----------------------------------------------------------------*/
+/* ----------------------------------------------------------------*/
 /* font faces */
-/*-----------------------------------------------------------------*/
+/* ----------------------------------------------------------------*/
 @font-face {
 	/* used for folded corner */
 	font-family: 'PFBusinessSuiteInAppSymbols';
-	src: url('fonts/PFBusinessSuiteInAppSymbols.eot');
-	src: url('fonts/PFBusinessSuiteInAppSymbols.eot?#iefix') format('embedded-opentype'),
-	url('fonts/PFBusinessSuiteInAppSymbols.ttf') format('truetype');
+	src: url('fonts/PFBusinessSuiteInAppSymbols.ttf') format('truetype');
 	font-weight: normal;
 	font-style: normal;
 	font-stretch: normal;
@@ -46,25 +47,17 @@
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	user-select: none;
-	-ms-user-select: none;
-	-moz-user-select: none;
 	-webkit-user-select: none;
+	user-select: none;
 	-webkit-user-drag: none;
 	-webkit-touch-callout: none;
-	-webkit-transition: -webkit-transform 0ms;
-	-ms-touch-select: none;
+	transition: transform 0ms;
 	touch-action: manipulation;
-	text-size-adjust: none;
-	-ms-text-autospace: none;
-	-ms-text-size-adjust: none;
-	-moz-text-size-adjust: none;
 	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
 }
 
 /* ----- */
@@ -75,41 +68,44 @@
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 11rem;
 	min-width: 11rem;
 	max-width: 11rem;
 }
+
 .sapSuiteUiCommonsProcessFlowNode0ZoomLevel2 {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 9rem;
 	min-width: 9rem;
 	max-width: 9rem;
 }
+
 .sapSuiteUiCommonsProcessFlowNode0ZoomLevel3 {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 6.5rem;
 	min-width: 6.5rem;
 	max-width: 6.5rem;
 }
+
 .sapSuiteUiCommonsProcessFlowNode0ZoomLevel4 {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
 	margin-bottom: 0.3125rem;
-	padding: 0rem;
+	padding: 0;
 	width: 3rem;
 	min-width: 3rem;
 	max-width: 3rem;
@@ -118,11 +114,6 @@
 	max-height: 3.75rem;
 }
 
-/*IE doesn't support rem values for line-height but it's need by other browsers*/
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode0ZoomLevel4 {
-	line-height: 3.75rem;
-}
-
 /* ----- */
 /* node1 */
 /* ----- */
@@ -130,14 +121,14 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode0ZoomLeve
 .sapSuiteUiCommonsProcessFlowNode1ZoomLevel2,
 .sapSuiteUiCommonsProcessFlowNode1ZoomLevel1 > .sapUiIcon,
 .sapSuiteUiCommonsProcessFlowNode1ZoomLevel2 > .sapUiIcon,
-.sapSuiteUiCommonsProcessFlowNode1ZoomLevel1 > .sapUiIcon:before,
-.sapSuiteUiCommonsProcessFlowNode1ZoomLevel2 > .sapUiIcon:before {
+.sapSuiteUiCommonsProcessFlowNode1ZoomLevel1 > .sapUiIcon::before,
+.sapSuiteUiCommonsProcessFlowNode1ZoomLevel2 > .sapUiIcon::before {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	font-weight: normal;
 	font-style: normal;
 	font-stretch: normal;
@@ -154,42 +145,18 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode0ZoomLeve
 	font-size: @sapMFontLargeSize;
 }
 
-/*IE doesn't support rem values for line-height but it's need by other browsers*/
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode1ZoomLevel1 > .sapUiIcon,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode1ZoomLevel2 > .sapUiIcon,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode1ZoomLevel1 > .sapUiIcon:before,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode1ZoomLevel2 > .sapUiIcon:before {
-	line-height: 1rem;
-}
-
-/*Fix that substitute the line-height for IE, it's not needed for IE but it's for IE in WP. Anyway works fine in
-all IE versions*/
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel1 > .sapUiIcon,
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel2 > .sapUiIcon,
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel1 > .sapUiIcon:before,
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel2 > .sapUiIcon:before {
-	width: 1.25rem;
-	min-width: 1.25rem;
-	max-width: 1.25rem;
-	height: 1.28rem;
-	min-height: 1.28rem;
-	max-height: 1.28rem;
-	margin-left: -0.05rem;
-	margin-top: -0.04rem;
-}
-
 .sapSuiteUiCommonsProcessFlowNode1ZoomLevel3,
 .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4,
 .sapSuiteUiCommonsProcessFlowNode1ZoomLevel3 > .sapUiIcon,
 .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .sapUiIcon,
-.sapSuiteUiCommonsProcessFlowNode1ZoomLevel3 > .sapUiIcon:before,
-.sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .sapUiIcon:before {
+.sapSuiteUiCommonsProcessFlowNode1ZoomLevel3 > .sapUiIcon::before,
+.sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .sapUiIcon::before {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	font-weight: normal;
 	font-style: normal;
 	font-stretch: normal;
@@ -206,30 +173,6 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel2 > .
 	font-size: @sapMFontSmallSize
 }
 
-/*IE doesn't support rem values for line-height but it's need by other browsers*/
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode1ZoomLevel3 > .sapUiIcon,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .sapUiIcon,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode1ZoomLevel3 > .sapUiIcon:before,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .sapUiIcon:before {
-	line-height: 0.75rem;
-}
-
-/*Fix that substitute the line-height for IE, it's not needed for IE but it's for IE in WP. Anyway works fine in
-all IE versions*/
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel3 > .sapUiIcon,
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .sapUiIcon,
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel3 > .sapUiIcon:before,
-html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .sapUiIcon:before {
-	width: 0.78rem;
-	min-width: 0.78rem;
-	max-width: 0.78rem;
-	height: 0.81rem;
-	min-height: 0.81rem;
-	max-height: 0.81rem;
-	margin-left: -0.015rem;
-	margin-top: -0.03rem;
-}
-
 /* ----- */
 /* node2 */
 /* ----- */
@@ -238,8 +181,8 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 10rem;
 	min-width: 10rem;
 	max-width: 10rem;
@@ -249,13 +192,14 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	line-height: 1rem;
 	overflow: hidden;
 }
+
 .sapSuiteUiCommonsProcessFlowNode2ZoomLevel2 {
 	clear: none;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 8rem;
 	min-width: 8rem;
 	max-width: 8rem;
@@ -265,13 +209,14 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	line-height: 1rem;
 	overflow: hidden;
 }
+
 .sapSuiteUiCommonsProcessFlowNode2ZoomLevel3 {
 	clear: none;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 5.75rem;
 	min-width: 5.75rem;
 	max-width: 5.75rem;
@@ -281,13 +226,14 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	line-height: 0.75rem;
 	overflow: hidden;
 }
+
 .sapSuiteUiCommonsProcessFlowNode2ZoomLevel4 {
 	clear: none;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 2.25rem;
 	min-width: 2.25rem;
 	max-width: 2.25rem;
@@ -306,32 +252,34 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem 0.9375rem 0.9375rem 0.9375rem;
+	margin: 0;
+	padding: 0 0.9375rem 0.9375rem 0.9375rem;
 	width: 11rem;
 	min-width: 11rem;
 	max-width: 11rem;
 	overflow: hidden;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3ZoomLevel2 {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem 0.9375rem 0.9375rem 0.9375rem;
+	margin: 0;
+	padding: 0 0.9375rem 0.9375rem 0.9375rem;
 	width: 9rem;
 	min-width: 9rem;
 	max-width: 9rem;
 	overflow: hidden;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3ZoomLevel3 {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem 0.6875rem 0.6875rem 0.6875rem;
+	margin: 0;
+	padding: 0 0.6875rem 0.6875rem 0.6875rem;
 	width: 6.5rem;
 	min-width: 6.5rem;
 	max-width: 6.5rem;
@@ -343,8 +291,8 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 3rem;
 	min-width: 3rem;
 	max-width: 3rem;
@@ -356,21 +304,26 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 }
 
 .sapSuiteUiCommonsProcessFlowNodeCustom {
+
 	.sapSuiteUiCommonsProcessFlowNode3ZoomLevel1 {
 		height: 12.8125rem;
 	}
+
 	.sapSuiteUiCommonsProcessFlowNode3ZoomLevel2 {
 		height: 11.1875rem;
 	}
+
 	.sapSuiteUiCommonsProcessFlowNode3ZoomLevel3 {
 		height: 7.25rem;
 	}
+
 	.sapSuiteUiCommonsProcessFlowNode3ZoomLevel4 {
 		height: 3rem;
-		padding: 0rem 0.4375rem 0.75rem 0.4375rem;
+		padding: 0 0.4375rem 0.75rem 0.4375rem;
 		line-height: normal;
 	}
 }
+
 /*---------------*/
 /* folded corner */
 /*---------------*/
@@ -380,8 +333,8 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 1rem;
 	min-width: 1rem;
 	max-width: 1rem;
@@ -391,14 +344,15 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	line-height: 1rem;
 	overflow: hidden;
 }
+
 .sapSuiteUiCommonsProcessFlowNodeStateFoldedCornerZoomLevel3,
 .sapSuiteUiCommonsProcessFlowNodeStateFoldedCornerZoomLevel4 {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 0.75rem;
 	min-width: 0.75rem;
 	max-width: 0.75rem;
@@ -417,8 +371,8 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	clear: both;
 	float: left;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: top;
 	font-family: @sapUiFontFamily;
 	font-weight: normal;
@@ -434,6 +388,7 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 .sapSuiteUiCommonsProcessFlowNode3TitleClickable:hover > .sapMTextMaxLine {
 	cursor: pointer;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel1 {
 	clear: both;
 	float: left;
@@ -441,20 +396,21 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	position: relative;
 	text-align: left;
 	vertical-align: top;
-	margin: 0rem;
+	margin: 0;
 	margin-bottom: 0.5rem;
-	padding: 0rem;
+	padding: 0;
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel1 > .sapMText,
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel1 > .sapMTextMaxLine,
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel1 > .sapMTextMaxWidth {
 	clear: both;
 	float: left;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: top;
 	font-size: @sapMFontLargeSize;
 	width: 8.75rem;
@@ -467,6 +423,7 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel2 {
 	clear: both;
 	float: left;
@@ -474,21 +431,22 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	position: relative;
 	text-align: left;
 	vertical-align: top;
-	margin: 0rem;
+	margin: 0;
 	margin-bottom: 0.5rem;
-	padding: 0rem;
+	padding: 0;
 	overflow: hidden;
 	border: none;
 	font-size: @sapMFontMediumSize;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel2 > .sapMText,
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel2 > .sapMTextMaxLine,
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel2 > .sapMTextMaxWidth {
 	clear: both;
 	float: left;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: top;
 	width: 6.75rem;
 	min-width: 6.75rem;
@@ -501,14 +459,15 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	border: none;
 	font-size: @sapMFontMediumSize;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel3 {
 	clear: both;
 	float: left;
 	display: table-row;
 	position: relative;
-	margin: 0rem;
+	margin: 0;
 	margin-bottom: 0.25rem;
-	padding: 0rem;
+	padding: 0;
 	text-align: center;
 	vertical-align: top;
 	width: 4.75rem;
@@ -519,14 +478,15 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel3 > .sapMText,
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel3 > .sapMTextMaxLine,
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel3 > .sapMTextMaxWidth {
 	clear: both;
 	float: left;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	text-align: center;
 	vertical-align: top;
 	width: 4.75rem;
@@ -539,18 +499,19 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	border: none;
 	font-size: @sapMFontMediumSize;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TitleZoomLevel4 {
 	clear: both;
 	float: left;
 	display: none;
 	position: relative;
-	width: 0rem;
-	min-width: 0rem;
-	max-width: 0rem;
-	height: 0rem;
-	min-height: 0rem;
-	max-height: 0rem;
-	line-height: 0rem;
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+	height: 0;
+	min-height: 0;
+	max-height: 0;
+	line-height: 0;
 	overflow: hidden;
 }
 
@@ -560,19 +521,20 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateZoomLevel1 {
 	clear: both;
 	float: left;
 	display: table;
 	position: relative;
-	margin: 0rem;
+	margin: 0;
 	margin-bottom: 0.5rem;
-	padding: 0rem;
+	padding: 0;
 	width: 8.75rem;
 	min-width: 8.75rem;
 	max-width: 8.75rem;
@@ -584,14 +546,15 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	border: none;
 	font-size: @sapMFontMediumSize;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateZoomLevel2 {
 	clear: both;
 	float: left;
 	display: table;
 	position: relative;
-	margin: 0rem;
+	margin: 0;
 	margin-bottom: 0.5rem;
-	padding: 0rem;
+	padding: 0;
 	width: 6.75rem;
 	min-width: 6.75rem;
 	max-width: 6.75rem;
@@ -603,13 +566,14 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	border: none;
 	font-size: @sapMFontSmallSize;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateZoomLevel3 {
 	clear: both;
 	float: left;
 	display: table-cell;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 4.75rem;
 	min-width: 4.75rem;
 	max-width: 4.75rem;
@@ -620,13 +584,14 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateZoomLevel4 {
 	clear: both;
 	float: left;
 	display: table-cell;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	width: 2.875rem;
 	min-width: 2.875rem;
 	max-width: 2.875rem;
@@ -641,13 +606,13 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 /* State icon */
 .sapSuiteUiCommonsProcessFlowNode3StateIcon,
 .sapSuiteUiCommonsProcessFlowNode3StateIcon > .sapUiIcon,
-.sapSuiteUiCommonsProcessFlowNode3StateIcon > .sapUiIcon:before {
+.sapSuiteUiCommonsProcessFlowNode3StateIcon > .sapUiIcon::before {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	font-weight: normal;
 	font-style: normal;
 	font-stretch: normal;
@@ -655,12 +620,15 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateIconLeft {
 	text-align: left;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateIconRight {
 	text-align: right;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateIconCenter {
 	text-align: center;
 }
@@ -670,8 +638,8 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	float: left;
 	display: table-cell;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	width: 2rem;
 	min-width: 2rem;
@@ -683,16 +651,17 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel1 > .sapUiIcon,
-.sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel1 > .sapUiIcon:before {
+.sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel1 > .sapUiIcon::before {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
-	font-size: 1.250rem; /*Maybe will be replaced by less if designers are done with less refactoring at all*/
+	font-size: 1.250rem; /* Maybe will be replaced by less if designers are done with less refactoring at all */
 	width: 2rem;
 	min-width: 2rem;
 	max-width: 2rem;
@@ -703,9 +672,8 @@ html[data-sap-ui-browser^="ie"] .sapSuiteUiCommonsProcessFlowNode1ZoomLevel4 > .
 	border: none;
 }
 
-/*IE doesn't support rem values for line-height but it's need by other browsers*/
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel1 > .sapUiIcon,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel1 > .sapUiIcon:before {
+html .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel1 > .sapUiIcon,
+html .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel1 > .sapUiIcon::before {
 	line-height: 2.125rem;
 }
 
@@ -714,8 +682,8 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	float: left;
 	display: table-cell;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	width: 1.5rem;
 	min-width: 1.5rem;
@@ -729,13 +697,13 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 }
 
 .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel2 > .sapUiIcon,
-.sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel2 > .sapUiIcon:before {
+.sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel2 > .sapUiIcon::before {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	width: 1.5rem;
 	min-width: 1.5rem;
@@ -748,9 +716,8 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	font-size: @sapMFontLargeSize;
 }
 
-/*IE doesn't support rem values for line-height but it's need by other browsers*/
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel2 > .sapUiIcon,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel2 > .sapUiIcon:before {
+html .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel2 > .sapUiIcon,
+html .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel2 > .sapUiIcon::before {
 	line-height: 2rem;
 }
 
@@ -759,8 +726,8 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	float: left;
 	display: table-cell;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	width: 4.75rem;
 	min-width: 4.75rem;
@@ -771,14 +738,15 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	line-height: 2rem;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel3 > .sapUiIcon,
-.sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel3 > .sapUiIcon:before {
+.sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel3 > .sapUiIcon::before {
 	clear: both;
 	float: left;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	font-size: 1.250rem;
 	width: 4.75rem;
@@ -791,9 +759,8 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	border: none;
 }
 
-/*IE doesn't support rem values for line-height but it's need by other browsers*/
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel3 > .sapUiIcon,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel3 > .sapUiIcon:before {
+html .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel3 > .sapUiIcon,
+html .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel3 > .sapUiIcon::before {
 	line-height: 2rem
 }
 
@@ -803,8 +770,8 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	display: table-cell;
 	position: absolute;
 	top: -0.125rem;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	width: 2.875rem;
 	min-width: 2.875rem;
@@ -818,14 +785,14 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 }
 
 .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel4 > .sapUiIcon,
-.sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel4 > .sapUiIcon:before {
+.sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel4 > .sapUiIcon::before {
 	clear: both;
 	float: left;
 	display: block;
 	position: absolute;
 	top: -0.125rem;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	font-size: 1.375rem;
 	width: 2.875rem;
@@ -840,7 +807,7 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 
 /*IE doesn't support rem values for line-height but it's need by other browsers*/
 html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel4 > .sapUiIcon,
-html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel4 > .sapUiIcon:before {
+html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIconZoomLevel4 > .sapUiIcon::before {
 	line-height: 2.875rem;
 }
 
@@ -852,16 +819,17 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	float: none;
 	display: block;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-weight: normal;
 	font-stretch: normal;
 	letter-spacing: normal;
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel1 {
 	clear: both;
 	float: none;
@@ -869,19 +837,20 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	position: relative;
 	text-align: left;
 	vertical-align: middle;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel1 > .sapMText,
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel1 > .sapMTextMaxLine,
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel1 > .sapMTextMaxWidth {
 	clear: both;
 	float: left;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	width: 6.375rem;
 	min-width: 6.375rem;
@@ -892,6 +861,7 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	border: none;
 	font-size: @sapMFontMediumSize;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel2 {
 	clear: both;
 	float: none;
@@ -899,19 +869,20 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	position: relative;
 	text-align: left;
 	vertical-align: middle;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel2 > .sapMText,
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel2 > .sapMTextMaxLine,
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel2 > .sapMTextMaxWidth {
 	clear: both;
 	float: left;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	vertical-align: middle;
 	width: 4.875rem;
 	min-width: 4.875rem;
@@ -920,8 +891,9 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	line-height: 0.9375rem;
 	overflow: hidden;
 	border: none;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel3 {
 	clear: both;
 	float: none;
@@ -929,19 +901,20 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	position: relative;
 	text-align: center;
 	vertical-align: middle;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel3 > .sapMText,
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel3 > .sapMTextMaxLine,
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel3 > .sapMTextMaxWidth {
 	clear: both;
 	float: left;
 	position: relative;
-	margin: 0rem;
-	padding: 0rem;
+	margin: 0;
+	padding: 0;
 	text-align: center;
 	vertical-align: middle;
 	width: 4.5rem;
@@ -952,20 +925,21 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	line-height: 0.9375rem;
 	overflow: hidden;
 	border: none;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
+
 .sapSuiteUiCommonsProcessFlowNode3StateTextZoomLevel4 {
 	clear: both;
 	float: none;
 	display: none;
 	position: relative;
-	width: 0rem;
-	min-width: 0rem;
-	max-width: 0rem;
-	height: 0rem;
-	min-height: 0rem;
-	max-height: 0rem;
-	line-height: 0rem;
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+	height: 0;
+	min-height: 0;
+	max-height: 0;
+	line-height: 0;
 	overflow: hidden;
 }
 
@@ -978,17 +952,18 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	float: left;
 	display: block;
 	position: relative;
-	padding: 0rem;
+	padding: 0;
 	vertical-align: top;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-weight: normal;
 	font-stretch: normal;
 	letter-spacing: normal;
 	overflow: hidden;
 	border: none;
-	color: @sapContent_LabelColor;
-	font-size: @sapMFontSmallSize;
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSmallSize);
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel1 {
 	clear: both;
 	float: left;
@@ -996,17 +971,18 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	position: relative;
 	text-align: left;
 	vertical-align: top;
-	padding: 0rem;
+	padding: 0;
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel1 > .sapMText,
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel1 > .sapMTextMaxLine,
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel1 > .sapMTextMaxWidth {
 	clear: both;
 	float: left;
 	position: relative;
-	padding: 0rem;
+	padding: 0;
 	vertical-align: top;
 	width: 8.75rem;
 	min-width: 8.75rem;
@@ -1019,6 +995,7 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	border: none;
 	font-size: @sapMFontMediumSize;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel2 {
 	clear: both;
 	float: left;
@@ -1026,17 +1003,18 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	position: relative;
 	text-align: left;
 	vertical-align: top;
-	padding: 0rem;
+	padding: 0;
 	overflow: hidden;
 	border: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel2 > .sapMText,
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel2 > .sapMTextMaxLine,
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel2 > .sapMTextMaxWidth {
 	clear: both;
 	float: left;
 	position: relative;
-	padding: 0rem;
+	padding: 0;
 	vertical-align: top;
 	width: 6.75rem;
 	min-width: 6.75rem;
@@ -1047,78 +1025,77 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 	line-height: 0.9375rem;
 	overflow: hidden;
 	border: none;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel3,
 .sapSuiteUiCommonsProcessFlowNode3TextZoomLevel4 {
 	clear: both;
 	float: left;
 	display: none;
 	position: relative;
-	width: 0rem;
-	min-width: 0rem;
-	max-width: 0rem;
-	height: 0rem;
-	min-height: 0rem;
-	max-height: 0rem;
-	line-height: 0rem;
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+	height: 0;
+	min-height: 0;
+	max-height: 0;
+	line-height: 0;
 	overflow: hidden;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TextWithGapZoomLevel1 {
 	padding-bottom: 0.5rem;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3TextWithGapZoomLevel2 {
 	padding-bottom: 0.25rem;
 }
 
 /* node content states */
 .sapSuiteUiCommonsProcessFlowNodeStateNeutral .sapMText {
-	color: @sapNeutralTextColor;
+	color: var(--sapNeutralTextColor);
 }
 
 .sapSuiteUiCommonsProcessFlowNodeStateCritical .sapMText {
-	color: @sapCriticalTextColor;
+	color: var(--sapCriticalTextColor);
 }
 
 .sapSuiteUiCommonsProcessFlowNodeStatePositive .sapMText {
-	color: @sapPositiveTextColor;
+	color: var(--sapPositiveTextColor);
 }
 
 .sapSuiteUiCommonsProcessFlowNodeStateNegative .sapMText {
-	color: @sapNegativeTextColor;
+	color: var(--sapNegativeTextColor);
 }
 
 .sapSuiteUiCommonsProcessFlowNodeStateNeutral.sapSuiteUiCommonsProcessFlowNode3StateIcon {
-	color: @sapNeutralElementColor;
+	color: var(--sapNeutralElementColor);
 }
 
 .sapSuiteUiCommonsProcessFlowNodeStateCritical.sapSuiteUiCommonsProcessFlowNode3StateIcon {
-	color: @sapCriticalElementColor;
+	color: var(--sapCriticalElementColor);
 }
 
 .sapSuiteUiCommonsProcessFlowNodeStatePositive.sapSuiteUiCommonsProcessFlowNode3StateIcon {
-	color:  @sapPositiveElementColor;
+	color: var(--sapPositiveElementColor);
 }
 
 .sapSuiteUiCommonsProcessFlowNodeStateNegative.sapSuiteUiCommonsProcessFlowNode3StateIcon {
-	color: @sapNegativeElementColor;
+	color: var(--sapNegativeElementColor);
 }
 
 /* special effects */
-.sapSuiteUiCommonsProcessFlowFoldedCornerNodeHover, .sapSuiteUiCommonsProcessFlowFoldedCornerNodeHover .sapMText {
-	cursor: pointer;
-}
-.sapSuiteUiCommonsProcessFlowFoldedCornerNodeIconHover, sapSuiteUiCommonsProcessFlowFoldedCornerNodeIconHover .sapMText {
-	cursor: pointer;
-}
-.sapSuiteUiCommonsProcessFlowNodeHover, .sapSuiteUiCommonsProcessFlowNodeHover .sapMText {
-	cursor: pointer;
-}
-
-.sapSuiteUiCommonsProcessFlowFoldedCornerNodeActive, .sapSuiteUiCommonsProcessFlowFoldedCornerNodeActive .sapMText {
-	cursor: pointer;
-}
-.sapSuiteUiCommonsProcessFlowNodeActive, .sapSuiteUiCommonsProcessFlowNodeActive .sapMText {
+.sapSuiteUiCommonsProcessFlowFoldedCornerNodeHover,
+.sapSuiteUiCommonsProcessFlowFoldedCornerNodeHover .sapMText,
+.sapSuiteUiCommonsProcessFlowFoldedCornerNodeIconHover,
+.sapSuiteUiCommonsProcessFlowFoldedCornerNodeIconHover .sapMText,
+.sapSuiteUiCommonsProcessFlowNodeHover,
+.sapSuiteUiCommonsProcessFlowNodeHover .sapMText,
+.sapSuiteUiCommonsProcessFlowFoldedCornerNodeActive,
+.sapSuiteUiCommonsProcessFlowFoldedCornerNodeActive .sapMText,
+.sapSuiteUiCommonsProcessFlowNodeActive,
+.sapSuiteUiCommonsProcessFlowNodeActive .sapMText {
 	cursor: pointer;
 }
 
@@ -1145,18 +1122,22 @@ html:not([data-sap-ui-browser^="ie"]) .sapSuiteUiCommonsProcessFlowNode3StateIco
 .sapSuiteUiCommonsProcessFlowNode3ContentPadding {
 	overflow: hidden;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3ZoomLevel1 .sapSuiteUiCommonsProcessFlowNode3ContentPadding {
 	height: 11.8125rem;
 	pointer-events: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3ZoomLevel2 .sapSuiteUiCommonsProcessFlowNode3ContentPadding {
 	height: 10.1875rem;
 	pointer-events: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3ZoomLevel3 .sapSuiteUiCommonsProcessFlowNode3ContentPadding {
 	height: 6.5rem;
 	pointer-events: none;
 }
+
 .sapSuiteUiCommonsProcessFlowNode3ZoomLevel4 .sapSuiteUiCommonsProcessFlowNode3ContentPadding {
 	height: 2.25rem;
 	pointer-events: none;