@openui5/sap.f 1.134.0 → 1.136.0

package/src/sap/f/themes/base/CardBadge.less

@@ -1,3 +1,8 @@
+/* ================================ */
+/* CSS for control sap.f/CardBadge  */
+/* Base theme                       */
+/* ================================ */
+
 .sapFCardBadgePlaceholder {
 	z-index: 100;
 	position: absolute;
@@ -8,7 +13,8 @@
 	max-width: 95%; /* long text will not go outside the card */
 }
 
-.sapUiIntCard .sapFCardBadgePlaceholder .sapMObjStatus:not(.sapMObjStatusShowCustomIcon) {
+.sapUiIntCard .sapFCardBadgePlaceholder .sapMObjStatus {
+
 	.sapMObjStatusIcon {
 		display: initial;
 	}
@@ -32,7 +38,7 @@
 			padding: 0 0.25rem;
 		}
 
-		.sapMObjStatusIcon{
+		.sapMObjStatusIcon {
 			padding: 0;
 		}
 
@@ -43,13 +49,12 @@
 			white-space: nowrap;
 			max-width: inherit;
 		}
-
 	}
-
 }
 
 /* Padding between icon and text is too much */
-.sapFCardBadgePlaceholder .sapMObjStatus.sapMObjStatusInverted.sapFCardBadgeTextIcon{
+.sapFCardBadgePlaceholder .sapMObjStatus.sapMObjStatusInverted.sapFCardBadgeTextIcon {
+
 	.sapMObjStatusWrapper {
 
 		.sapMObjStatusIcon {
@@ -60,4 +65,4 @@
 			padding: 0 0.375rem 0 0.25rem;
 		}
 	}
-}
+}

package/src/sap/f/themes/base/CardHeaders.less

@@ -9,7 +9,6 @@
 @_sap_f_CardHeaders_HeaderFocusBorderBottomOffset: 1px;
 @_sap_f_CardHeaders_HeaderFocusBorderRightOffset: 1px;
 @_sap_f_CardHeaders_HeaderFocusBorderTopOffset: 1px;
-@_sap_f_CardHeaders_MainHeaderBorderRadius: 0;
 
 .sapFCardHeader {
 	position: relative;
@@ -25,7 +24,7 @@
 		height: fit-content;
 		padding: @_sap_f_CardHeaders_Padding @_sap_f_CardHeaders_Padding 0.75rem @_sap_f_CardHeaders_Padding;
 		position: relative;
-		border-radius: @_sap_f_CardHeaders_MainHeaderBorderRadius;
+		border-radius: 0;
 	}
 
 	.sapFCardHeaderImage {
@@ -189,6 +188,17 @@
 	}
 }
 
+.sapFCardHeaderInfoSection {
+	padding: 0.5rem 1rem 0.25rem 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.sapFCardHeaderInfoSection:not(:has(+ .sapFCardNumericHeaderNumericPart))  {
+	padding-block-end: 1rem;
+}
+
 .sapFCardHeader.sapFCardNumericHeader {
 
 	.sapFCardNumericHeaderNumericPart {

package/src/sap/f/themes/base/CardLoading.less

@@ -2,9 +2,10 @@
 /* CSS for control sap.f/CardLoading  */
 /* Base theme                         */
 /* ================================== */
+
 @_sap_f_Card_FocusBorderWidth: 1px;
-@_sap_f_Card_Background_Placeholder_Color: @sapUiContentPlaceholderloadingBackground;
-@_sap_f_Card_Placeholder_Gradient: linear-gradient(to right, @sapUiContentPlaceholderloadingBackground 0%, @sapUiContentPlaceholderloadingBackground 35%, darken(@sapUiContentPlaceholderloadingBackground, 5) 50%, @sapUiContentPlaceholderloadingBackground 65%, @sapUiContentPlaceholderloadingBackground 100%);
+@_sap_f_Card_Background_Placeholder_Color: var(--sapContent_Placeholderloading_Background);
+@_sap_f_Card_Placeholder_Gradient: linear-gradient(to right, var(--sapContent_Placeholderloading_Background) 0%, var(--sapContent_Placeholderloading_Background) 35%, darken(@sapUiContentPlaceholderloadingBackground, 5) 50%, var(--sapContent_Placeholderloading_Background) 65%, var(--sapContent_Placeholderloading_Background) 100%);
 
 .sapFCard {
 
@@ -15,10 +16,10 @@
 			height: 3rem;
 			width: 3rem;
 			margin-right: 0.75rem;
-			//hide the fallback icon
+			/* hide the fallback icon */
 		}
 
-		.sapFCardHeaderImage .sapFCardHeaderItemBinded::after {
+		.sapFCardHeaderMainPart .sapFCardHeaderImage .sapFCardHeaderItemBinded::after {
 			max-height: 2rem;
 			max-width: 2rem;
 			margin-top: 0.5rem;
@@ -41,25 +42,25 @@
 			margin-top: 0.3rem;
 		}
 
-		.sapFCardHeaderTextSecondLine .sapFCardHeaderItemBinded::after,
-		.sapFCardSubtitle.sapFCardHeaderItemBinded::after,
-		.sapFCardHeaderDetailsWrapper .sapFCardHeaderItemBinded::after,
-		.sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded::after,
-		.sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded.sapMText::after {
+		.sapFCardHeaderMainPart .sapFCardHeaderTextSecondLine .sapFCardHeaderItemBinded::after,
+		.sapFCardHeaderMainPart .sapFCardSubtitle.sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardHeaderDetailsWrapper .sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded.sapMText::after {
 			max-height: 0.6rem;
 		}
 
-		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded::after {
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded::after {
 			margin-top: 0.5rem;
 			width: 80%;
 		}
 
 		.sapFCardHeaderItemBinded {
-			visibility: hidden; // hide the loaded elements (texts, icons, etc.) behind the loading indicators
+			visibility: hidden; /* hide the loaded elements (texts, icons, etc.) behind the loading indicators */
 		}
 
 		.sapFCardHeaderItemBinded::after {
-			visibility: visible; // ... but show the loading indicator
+			visibility: visible; /* ... but show the loading indicator */
 		}
 
 		.sapFCardHeaderText .sapFCardHeaderTextFirstLine {
@@ -75,9 +76,9 @@
 			}
 		}
 
-		&:not(.sapFCardLoadingDelayed).sapFCardHeaderItemBinded::after {
+		&:not(.sapFCardLoadingDelayed) .sapFCardHeaderItemBinded::after {
 			.sapFCardLoadingShimmerMixin();
-			content: "";
+			content: '';
 			position: absolute;
 			width: 100%;
 			height: 100%;
@@ -89,8 +90,10 @@
 
 	&.sapUiIntCardTileFlat,
 	&.sapUiIntCardTileFlatWide {
+
 		.sapFCardHeader.sapFCardHeaderLoading,
 		&.sapFCardPreview .sapFCardHeader {
+
 			.sapFAvatar.sapFCardHeaderItemBinded::after,
 			.sapFAvatar.sapFCardHeaderItemBinded::after {
 				margin-top: 0;
@@ -108,14 +111,14 @@
 		}
 	}
 
-	// no sapFCardHeaderItemBinded class present for the filter?
+	/* no sapFCardHeaderItemBinded class present for the filter? */
 	.sapFCardFilterLoading::after {
 		height: 2rem;
 		margin-top: 0.25rem;
 	}
 
 	.sapFCardFilterLoading .sapMSlt {
-		visibility: hidden; // hide the loaded Select behind the loading indicator
+		visibility: hidden; /* hide the loaded Select behind the loading indicator */
 	}
 
 	&.sapFCardPreview .sapFCardFilter,
@@ -123,7 +126,7 @@
 		position: relative;
 		&::after {
 			.sapFCardLoadingShimmerMixin();
-			content: "";
+			content: '';
 			position: absolute;
 			top: 2px;
 			bottom: 2px;
@@ -134,20 +137,23 @@
 
 	&.sapFCardPreview .sapFCardFooter,
 	.sapFCardFooterLoading {
+
 		.sapUiIntActionsStrip {
 			position: relative;
+
 			&::after {
-				content: "";
+				content: '';
 				position: absolute;
 				width: 100%;
 				height: 100%;
-				background-color: @sapUiTileBackground;
+				background-color: var(--sapTile_Background);
 			}
 		}
 	}
 
 	.sapFCardNumericHeader.sapFCardHeaderLoading,
 	&.sapFCardPreview .sapFCardNumericHeader {
+
 		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded {
 			min-width: 5rem;
 		}
@@ -186,7 +192,7 @@
 			bottom: 1px;
 			right: 1px;
 			top: 1px;
-			border: @_sap_f_Card_FocusBorderWidth dotted @sapUiContentFocusColor;
+			border: @_sap_f_Card_FocusBorderWidth dotted var(--sapContent_FocusColor);
 			pointer-events: none;
 		}
 
@@ -199,7 +205,7 @@
 			height: 100%;
 
 			.sapFCardSVG {
-				fill: @sapUiTileBackground;
+				fill: var(--sapTile_Background);
 			}
 		}
 
@@ -266,3 +272,8 @@
 		}
 	}
 }
+
+.sapUiSizeCompact .sapFCard .sapFCardFilterLoading::after {
+	height: 1.75rem;
+	margin-top: 0;
+}

package/src/sap/f/themes/base/DynamicPageTitle.less

@@ -2,6 +2,7 @@
 /* CSS for control sap.f/DynamicPageTitle  */
 /* Base theme                              */
 /* ======================================= */
+
 .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle,
 .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
 	box-shadow: @sapUiShadowHeader;
@@ -25,11 +26,9 @@
 	min-height: 3rem;
 	padding: 0.5rem 2rem 0.5rem 3rem;
 	display: flex;
-	display: -webkit-flex;
 	flex-direction: column;
-	-webkit-flex-direction: column;
 	box-sizing: border-box;
-	background: @sapUiObjectHeaderBackground;
+	background: var(--sapObjectHeader_Background);
 
 	.sapFDynamicPageToggleHeaderIndicator.sapUiHidden {
 		display: none;
@@ -41,6 +40,7 @@
 	}
 
 	.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
+
 		.sapFDynamicPageTitleMainContent .sapMTB {
 			padding-left: 0.5rem;
 			padding-right: 0.5rem;
@@ -52,8 +52,9 @@
 	}
 
 	html.sap-desktop & {
+
 		&.sapFDynamicPageTitleFocus {
-			outline: 0.0625rem dotted @sapUiContentFocusColor;
+			outline: 0.0625rem dotted var(--sapContent_FocusColor);
 			outline-offset: -0.0625rem;
 		}
 	}
@@ -64,37 +65,30 @@
 
 	.sapFDynamicPageTitleTop {
 		display: flex;
-		display: -webkit-flex;
 		align-items: center;
-		-webkit-align-items: center;
-
 		justify-content: space-between;
-		-webkit-justify-content: space-between;
 
-		&> .sapFDynamicPageTitleTopLeft {
+		& > .sapFDynamicPageTitleTopLeft {
 			min-height: 1rem;
 			width: 75%;
 
-			&> :first-child {
+			& > :first-child {
 				margin: 0;
 			}
 		}
 
-		&> .sapFDynamicPageTitleTopRight {
+		& > .sapFDynamicPageTitleTopRight {
 			width: 25%;
 			display: flex;
-			display: -webkit-flex;
 			align-items: center;
-			-webkit-align-items: center;
 			justify-content: flex-end;
-			-webkit-justify-content: flex-end;
 		}
 
 		&.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
 			width: 100%;
 		}
 
-		&.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight{
+		&.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
 			width: 100%;
 		}
 	}
@@ -102,29 +96,23 @@
 	.sapFDynamicPageTitleMain {
 		position: relative;
 		display: flex;
-		display: -webkit-flex;
 		align-items: flex-start;
-		-webkit-align-items: flex-start;
 		flex-direction: row;
-		-webkit-flex-direction: row;
 		box-sizing: border-box;
 
 		&.sapUiHidden {
 			position: absolute;
 		}
 
-		&> .sapFDynamicPageTitleMainNavigationArea,
-		&> .sapFDynamicPageTitleMainNavigationArea > .sapFDynamicPageTitleMainNavigationAreaInner{
+		& > .sapFDynamicPageTitleMainNavigationArea,
+		& > .sapFDynamicPageTitleMainNavigationArea > .sapFDynamicPageTitleMainNavigationAreaInner {
 			display: flex;
-			display: -webkit-flex;
 			align-items: center;
-			-webkit-align-items: center;
 		}
 	}
 
 	.sapFDynamicPageTitleActionsBar.sapMTB {
 		justify-content: flex-end;
-		-webkit-justify-content: flex-end;
 		overflow: visible;
 	}
 }
@@ -137,76 +125,43 @@
 	margin-left: 0;
 }
 
-/* TODO remove after the end of support for Internet Explorer */
-html[data-sap-ui-browser^="ie"].sap-desktop,
-html[data-sap-ui-browser^="ed"].sap-desktop {
-	.sapFDynamicPageTitleMain {
-		height: 100%; /* fixes IE flexbox item centering issue BCP: 1680351222 */
-	}
-}
+/* Firefox fix due to focus cut out from top and left */
+html[data-sap-ui-browser^='ff'].sap-desktop {
 
-/* IE and Edge ignores outline-offset. Use an overlay: */
-/* TODO remove after the end of support for Internet Explorer */
-html[data-sap-ui-browser^="ie"].sap-desktop,
-html[data-sap-ui-browser^="ed"].sap-desktop {
 	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 		outline: none;
 		position: relative;
 	}
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
-		content: " ";
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0;
-		top: 0;
-		border: 0.0625rem dashed @sapUiContentFocusColor;
-		pointer-events: none;
-	}
-}
 
-/* Firefox fix due to focus cut out from top and left */
-html[data-sap-ui-browser^="ff"].sap-desktop {
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
-		outline: none;
-		position: relative;
-	}
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
-		content: " ";
+	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus::before {
+		content: '';
 		box-sizing: border-box;
 		width: 100%;
 		height: 100%;
 		position: absolute;
 		left: 0;
 		top: 0;
-		border: 0.0625rem dotted @sapUiContentFocusColor;
+		border: 0.0625rem dotted var(--sapContent_FocusColor);
 		pointer-events: none;
 	}
 }
 
-/* ========== */
-/* Title Main */
-/* ========== */
+/* =========== */
+/* Title Main  */
+/* =========== */
 
 /* Heading area */
 .sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
 	display: flex;
-	display: -webkit-flex;
 	align-items: flex-start;
-	-webkit-align-items: flex-start;
 	flex-grow: 1;
-	width: 100%; // to make Edge work
+	width: 100%; /* to make Edge work */
 
 	.sapFDynamicPageTitleMainHeading {
 		display: flex;
-		display: -webkit-flex;
 		align-items: flex-start;
-		-webkit-align-items: flex-start;
 		flex-direction: column;
-		-webkit-flex-direction: column;
 		justify-content: space-between;
-		-webkit-justify-content: space-between;
 		min-width: 0;
 
 		.sapFDynamicPageTitleMainHeadingInner,
@@ -220,17 +175,17 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 		.sapFDynamicPageTitleMainHeadingInner {
 			min-width: 1px;
 			max-width: 100%;
-			color: @sapUiGroupTitleTextColor;
+			color: var(--sapGroup_TitleTextColor);
 			margin-top: 0.1875rem;
 
 			/* Override Title styles, required by VD */
 			.sapMTitle {
-				font-size: @sapMFontHeader3Size;
+				font-size: var(--sapFontHeader3Size);
 			}
 		}
 
 		.sapFDynamicPageTitleMainHeadingSnappedExpandContent {
-			color: @sapUiContentLabelColor;
+			color: var(--sapContent_LabelColor);
 			font-size: @sapMFontMediumSize;
 		}
 
@@ -262,8 +217,8 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 
 	.sapFDynamicPageTitleActionsBar .sapMLabel.sapMLabelMaxWidth,
 	.sapFDynamicPageTitleActionsBar .sapMLnk.sapMLnkMaxWidth {
-		// overwriting the existing max-width constraint of sapMLabel and sapMLnk
-		// because in this context the label/link parent should instead adjust its flex-basis with respect to its content width
+		/* overwriting the existing max-width constraint of sapMLabel and sapMLnk
+		because in this context the label/link parent should instead adjust its flex-basis with respect to its content width */
 		max-width: none;
 	}
   }
@@ -279,8 +234,8 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 /* Tablet Size */
 .sapFDynamicPage-Std-Tablet {
 
-	// Needed because on some high-end phones in landscape mode,
-	// the width of the viewport is bigger than 600 (Tablet breakpoint).
+	/* Needed because on some high-end phones in landscape mode,
+	the width of the viewport is bigger than 600 (Tablet breakpoint). */
 	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
 		padding: 0 0.25rem 0 2rem;
 		min-height: 2rem;
@@ -333,7 +288,9 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 .sapFDynamicPage-Std-Phone {
 
 	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
+
 		.sapFDynamicPageTitleMain {
+
 			.sapFDynamicPageTitleMainContent {
 				padding-bottom: 0;
 			}
@@ -370,4 +327,4 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 			width: 100%;
 		}
 	}
-}
+}

package/src/sap/f/themes/base/FlexibleColumnLayout.less

@@ -3,18 +3,18 @@
 /* Base theme                                  */
 /* =========================================== */
 
-// synced with FlexibleColumnLayout.COLUMN_SEPARATOR_WIDTH
+/* synced with FlexibleColumnLayout.COLUMN_SEPARATOR_WIDTH */
 @_sap_f_FCL_SeparatorWidth: 1rem;
-@_sap_f_FCL_SeparatorActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
-@_sap_f_FCL_SeparatorDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
+@_sap_f_FCL_SeparatorActiveDecorationColors: var(--sapHighlightColor), var(--sapHighlightColor);
+@_sap_f_FCL_SeparatorDecorationColors: var(--sapHighlightColor), fade(@sapUiHighlight, 0);
 @_sap_f_FCL_SeparatorBorder: none;
-@_sap_f_FCL_SeparatorHoverIconBorderColor: @sapUiButtonLiteBorderColor;
-@_sap_f_FCL_SeparatorHoverIconBackground: @sapUiButtonLiteBackground;
-@_sap_f_FCL_SeparatorButtonColor: @sapUiContentIconColor;
+@_sap_f_FCL_SeparatorHoverIconBorderColor: var(--sapButton_Lite_BorderColor);
+@_sap_f_FCL_SeparatorHoverIconBackground: var(--sapButton_Lite_Background);
+@_sap_f_FCL_SeparatorButtonColor: var(--sapContent_IconColor);
 
 .sapFFCL {
+
 	&, &.sapMNavItem:not(.sapMNavItemHidden) {
-		display: -webkit-flex;
 		display: flex;
 		width: 100%;
 		height: 100%;
@@ -31,7 +31,7 @@
 		visibility: hidden;
 		box-sizing: border-box;
 
-		// When there is content in a panel, it needs min-width
+		/* When there is content in a panel, it needs min-width */
 		&.sapFFCLColumnActive {
 			visibility: visible;
 		}
@@ -71,9 +71,8 @@
 	color: @_sap_f_FCL_SeparatorButtonColor;
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
-	-moz-user-select: none;
 	user-select: none;
-	background-color: @sapUiShellBackground;
+	background-color: var(--sapShell_Background);
 	box-sizing: border-box;
 }
 
@@ -87,9 +86,11 @@
 }
 
 .sapFFCL.sapFFLActiveResize {
+
 	.sapFFCLOverlay {
 		display: block;
 	}
+
 	.sapFFCLColumnContent {
 		pointer-events: none;
 	}
@@ -147,22 +148,23 @@
 		height: 2rem;
 		line-height: 2rem;
 		position: relative;
-		z-index: 3; // the separator grip must be above the separator so its all area to be clickable/interactive
+		z-index: 3; /* the separator grip must be above the separator so its all area to be clickable/interactive */
 
 		.sapFFCLColumnSeparatorGripIcon {
 			cursor: col-resize;
-			line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth; // center the icon vertically
+			line-height: ~"calc(1.625rem - var(--sapButton_BorderWidth) - var(--sapButton_BorderWidth))"; /* center the icon vertically */
 			box-sizing: border-box;
 			height: 1.625rem;
 			width: 1.5rem;
 			margin-top: 3px;
-			border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
-			border-radius: @sapUiButtonBorderCornerRadius;
-			background: @sapUiButtonLiteBackground;
+			border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+			border-radius: var(--sapButton_BorderCornerRadius);
+			background: var(--sapButton_Lite_Background);
 		}
 	}
 
 	&:hover {
+
 		.sapFFCLColumnSeparatorDecorationBefore,
 		.sapFFCLColumnSeparatorDecorationAfter {
 			flex-grow: 1;
@@ -177,7 +179,7 @@
 }
 
 
-// focus outline
+/* focus outline */
 .sapFFCL > .sapFFCLColumnSeparator,
 .sapFFCL > .sapFFCLOverlay > .sapFFCLOverlaySeparator {
 	position: relative;
@@ -187,24 +189,24 @@
 	}
 
 	&:focus::after {
-		content: "";
+		content: '';
 		display: block;
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	}
 }
 
 
 .sapFFCLNavigationButton,
 .sapUiSizeCompact & .sapFFCLNavigationButton {
-	// Button hit area size
+	/* Button hit area size */
 	width: 1.5rem;
 	height: 1.5rem;
-	padding: 0; // Vertical button hit area must be the same size as its visible area
+	padding: 0; /* Vertical button hit area must be the same size as its visible area */
 	transition: all 0.1s ease-in;
 	margin-left: -0.25rem;
 	margin-right: -0.25rem;
@@ -214,7 +216,7 @@
 	overflow: visible;
 	cursor: col-resize;
 
-	// Reflection: styles overwritten
+	/* Reflection: styles overwritten */
 	.sapMBtnInner {
 		width: 1.5rem;
 		height: 1.5rem;
@@ -228,20 +230,20 @@
 			margin-right: 0;
 		}
 	}
-	&:before {
-		background-image: linear-gradient(to top, @sapUiHighlight, fade(@sapUiHighlight, 0));
+	&::before {
+		background-image: linear-gradient(to top, var(--sapHighlightColor), fade(@sapUiHighlight, 0));
 		background-position-y: -0.3125rem;
 		bottom: 100%;
 	}
 
-	&:after {
-		background-image: linear-gradient(to bottom, @sapUiHighlight,  fade(@sapUiHighlight, 0));
+	&::after {
+		background-image: linear-gradient(to bottom, var(--sapHighlightColor),  fade(@sapUiHighlight, 0));
 		background-position-y: 0.3125rem;
 		top: 100%;
 	}
 
-	&:after,
-	&:before {
+	&::after,
+	&::before {
 		content: '';
 		position: absolute;
 		left: 0;
@@ -253,14 +255,14 @@
 		background-position-x: calc(50% - 0.03125rem);
 	}
 	&:hover{
-			&:after,
-			&:before {
+			&::after,
+			&::before {
 				height: 7rem;
 			}
 	}
 }
 
-// In order to have reveal effect, columns should overlap each other
+/* In order to have reveal effect, columns should overlap each other */
 .sapFFCLColumnBegin {
 	z-index: 3;
 	flex-shrink: 0;
@@ -280,11 +282,11 @@
 }
 
 html[data-sap-ui-animation='on'] {
+
 	.sapFFCL {
+
 		.sapFFCLColumn.sapFFCLAnimatedColumn {
 			transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
-			-webkit-transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
 		}
 	}
-}
-
+}