@openui5/sap.m 1.127.1 → 1.129.0

package/src/sap/m/themes/base/Carousel.less

@@ -3,12 +3,12 @@
 /* Base theme                      */
 /* =============================== */
 
-@_sap_m_Carousel_BackgroundColorSolid: @sapUiGroupContentBackground;
+@_sap_m_Carousel_BackgroundColorSolid: var(--sapGroup_ContentBackground);
 @_sap_m_Carousel_BackgroundColorTransparent: transparent;
-@_sap_m_Carousel_BackgroundColorTranslucent: @sapUiGroupContentBackground;
+@_sap_m_Carousel_BackgroundColorTranslucent: var(--sapGroup_ContentBackground);
 @_sap_m_Carousel_MinWidth: 20rem;
 @_sap_m_Carousel_ControlsNoArrowsHeight: 2rem;
-@_sap_m_Carousel_NumericIndicatorTextColor: @sapUiContentLabelColor;
+@_sap_m_Carousel_NumericIndicatorTextColor: var(--sapContent_LabelColor);
 @_sap_m_Carousel_PrevAndNextSize: 2rem;
 @_sap_m_Carousel_PrevAndNextPosition: 0.625rem;
 @_sap_m_Carousel_PrevAndNextFocusBorderRadius: unset;
@@ -18,15 +18,15 @@
 @_sap_m_Carousel_PageIndicatorWidthSizeL: 20rem;
 @_sap_m_Carousel_PageIndicatorWidthSizeXL: 24rem;
 @_sap_m_Carousel_ContentArrowBoxShadow: @sapUiShadowLevel1;
-@_sap_m_Carousel_BulletInactiveBackground: @sapUiContentNonInteractiveIconColor;
-@_sap_m_Carousel_BulletInactiveBorderColor: @sapUiContentNonInteractiveIconColor;
-@_sap_m_Carousel_BulletActiveBackground: @sapUiSelected;
+@_sap_m_Carousel_BulletInactiveBackground: var(--sapContent_NonInteractiveIconColor);
+@_sap_m_Carousel_BulletInactiveBorderColor: var(--sapContent_NonInteractiveIconColor);
+@_sap_m_Carousel_BulletActiveBackground: var(--sapSelectedColor);
 @_sap_m_Carousel_BulletActiveBorder: @_sap_m_Carousel_BulletActiveBackground;
 @_sap_m_Carousel_BulletInactiveWidth: 0.25rem;
 @_sap_m_Carousel_BulletInactiveMargin: 0 0.375rem;
 @_sap_m_Carousel_FocusBorderOffsetArrow: -0.125rem;
-@_sap_m_Carousel_ContrastFocusBorder: @sapUiContentFocusWidth solid @sapUiContentContrastFocusColor;
-@_sap_m_Carousel_FocusBorder: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+@_sap_m_Carousel_ContrastFocusBorder: var(--sapContent_FocusWidth) solid var(--sapContent_ContrastFocusColor);
+@_sap_m_Carousel_FocusBorder: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 
 .sapMCrsl {
 	position: relative;
@@ -58,7 +58,7 @@
 	&::before,
 	&::after {
 		position: absolute;
-		content: " ";
+		content: ' ';
 		top: 0;
 		right: 0;
 		bottom: 0;
@@ -76,6 +76,10 @@
 	}
 }
 
+.sapMCrslNoDataItem {
+	height: 100%;
+}
+
 .sapMCrsl.sapMCrslLeft {
 	text-align: left;
 }
@@ -84,11 +88,11 @@
 	text-align: center;
 }
 
-.sapMCrsl.sapMCrslFluid>.sapMCrslInner>* {
+.sapMCrsl.sapMCrslFluid > .sapMCrslInner > * {
 	width: 100%;
 }
 
-.sapMCrsl.sapMCrslFluid.sapMCrslCenter>.sapMCrslInner>*:first-child {
+.sapMCrsl.sapMCrslFluid.sapMCrslCenter > .sapMCrslInner >*:first-child {
 	margin-left: 0;
 }
 
@@ -97,9 +101,9 @@
 	position: relative;
 	white-space: nowrap;
 	text-align: begin;
-	/*  Removes  inline-block  gaps  due  to  whitespace  */
+	/* Removes inline-block gaps due to whitespace */
 	font-size: 0;
-	/*  Configure  animations  */
+	/* Configure  animations */
 	transition-property: transform;
 	transition-timing-function: cubic-bezier(0.46, 0, 0.44, 1);
 	transition-duration: 0.5s;
@@ -107,6 +111,7 @@
 
 /* for tablet and phone the duration is smaller */
 @media all and (max-width: 1024px) {
+
 	.sapMCrslInner {
 		transition-duration: 0.3s;
 	}
@@ -132,8 +137,8 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	text-align: center;
 }
 
-.sapMCrslImgNoArrows:before,
-.sapMCrslImg:before {
+.sapMCrslImgNoArrows::before,
+.sapMCrslImg::before {
 	content: ' ';
 	display: inline-block;
 	height: 100%;
@@ -151,7 +156,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	transition: none;
 }
 
-.sapMCrslInner.sapMCrslHideNonActive>:not(.sapMCrslActive) .sapMCrslItemTableCell {
+.sapMCrslInner.sapMCrslHideNonActive >:not(.sapMCrslActive) .sapMCrslItemTableCell {
 	visibility: hidden;
 }
 
@@ -160,7 +165,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	align-items: center;
 }
 
-.sapMCrslInner>* {
+.sapMCrslInner > * {
 	display: inline-block;
 	vertical-align: top;
 	white-space: normal;
@@ -168,18 +173,18 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	font-size: 1rem;
 }
 
-.sapMCrslFluid>.sapMCrslInner>* {
+.sapMCrslFluid > .sapMCrslInner > * {
 	box-sizing: border-box;
 }
 
 .sapMCrslItemTable,
-.sapMCrslItem>.sapMScrollCont>.sapMScrollContScroll {
+.sapMCrslItem > .sapMScrollCont > .sapMScrollContScroll {
 	height: 100%;
 	width: 100%;
 }
 
 /* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
-.sapUiContainerContentPadding(~".sapMCrsl", ~"> .sapMCrslInner > .sapMCrslItem > .sapMScrollCont > .sapMScrollContScroll");
+.sapUiContainerContentPadding(~'.sapMCrsl', ~'> .sapMCrslInner > .sapMCrslItem > .sapMScrollCont > .sapMScrollContScroll');
 
 /*
   Carousel control base styling
@@ -224,9 +229,9 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	border-radius: 50%;
 	transition: opacity 0.1s ease-in;
 	box-sizing: border-box;
-	background-color: @sapUiButtonBackground;
-	border: 1px solid @sapUiButtonBorderColor;
-	color: @sapUiButtonIconColor;
+	background-color: var(--sapButton_Background);
+	border: 1px solid var(--sapButton_BorderColor);
+	color: var(--sapButton_IconColor);
 	cursor: pointer;
 	-webkit-user-select: none;
 	-moz-user-select: -moz-none;
@@ -236,25 +241,26 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	user-drag: none;
 
 	&:hover {
-		background: @sapUiButtonHoverBackground;
-		border-color: @sapUiButtonHoverBorderColor;
-		color: @sapUiButtonHoverTextColor;
-		box-shadow: @sapUiContentInteractionShadow;
+		background: var(--sapButton_Hover_Background);
+		border-color: var(--sapButton_Hover_BorderColor);
+		color: var(--sapButton_Hover_TextColor);
+		box-shadow: var(--sapContent_Interaction_Shadow);
 	}
 
 	&:active {
-		background-color: @sapUiButtonActiveBackground;
-		border-color: @sapUiButtonActiveBorderColor;
-		color: @sapUiButtonActiveTextColor;
+		background-color: var(--sapButton_Active_Background);
+		border-color: var(--sapButton_Active_BorderColor);
+		color: var(--sapButton_Active_TextColor);
 	}
 }
 
 .sapMCrslHudMiddle .sapMCrslArrow {
-	top:  calc(~"50% - 1rem");
+	top: calc(~'50% - 1rem');
 }
 
 .sapMCrslHudTop,
 .sapMCrslHudOverContentTop {
+
 	.sapMCrslArrow {
 		top: 50%;
 	}
@@ -262,8 +268,9 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 
 .sapMCrslHudBottom,
 .sapMCrslHudOverContentBottom {
+
 	.sapMCrslArrow {
-		top: calc(~"50% - 2rem");
+		top: calc(~'50% - 2rem');
 	}
 }
 
@@ -284,51 +291,57 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	border: 1px solid @_sap_m_Carousel_BulletInactiveBorderColor;
 }
 
-// Page indicator at the top
+/* Page indicator at the top */
 .sapMCrslTopOffset {
+
 	.sapMCrslItem {
-		padding-top: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
+		padding-top: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~'+' 1px);
 
 		&:focus {
+
 			&::before,
 			&::after {
-				top: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
+				top: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~'+' 1px);
 			}
 		}
 	}
 
 	&.sapMCrslTopArrowsOffset .sapMCrslItem {
-		padding-top: calc(~"3.5rem + 1px");
+		padding-top: calc(~'3.5rem + 1px');
 
 		&:focus {
+
 			&::before,
 			&::after {
-				top: calc(~"3.5rem + 1px");
+				top: calc(~'3.5rem + 1px');
 			}
 		}
 	}
 }
 
-// Page indicator at the bottom
+/* Page indicator at the bottom */
 .sapMCrslBottomOffset {
+
 	.sapMCrslItem {
-		padding-bottom: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
+		padding-bottom: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~'+' 1px);
 
 		&:focus {
+
 			&::before,
 			&::after {
-				bottom: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
+				bottom: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~'+' 1px);
 			}
 		}
 	}
 
 	&.sapMCrslBottomArrowsOffset .sapMCrslItem {
-		padding-bottom: calc(~"3.5rem + 1px");
+		padding-bottom: calc(~'3.5rem + 1px');
 
 		&:focus {
+
 			&::before,
 			&::after {
-				bottom: calc(~"3.5rem + 1px");
+				bottom: calc(~'3.5rem + 1px');
 			}
 		}
 	}
@@ -364,18 +377,20 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 
 .sapMCrslControlsOverContentTop,
 .sapMCrslControlsOverContentBottom {
+
 	.sapMCrslBulleted,
 	.sapMCrslNumeric {
-		background-color: @sapUiPageFooterBackground;
+		background-color: var(--sapPageFooter_Background);
 		height: 1rem;
-		border-radius: @sapUiElementBorderCornerRadius;
-		border: 1px solid @sapUiPageFooterBorderColor;
+		border-radius: var(--sapElement_BorderCornerRadius);
+		border: 1px solid var(--sapPageFooter_BorderColor);
 		margin: 0 0.5rem;
 	}
 }
 
 .sapMCrslControlsOverContentTop,
 .sapMCrslControlsOverContentBottom {
+
 	&.sapMCrslControlsNoArrows .sapMCrslBulleted,
 	&.sapMCrslControlsNoArrows .sapMCrslNumeric {
 		width: 9rem;
@@ -384,7 +399,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 
 .sapMCrsl .sapMCrslControlsOverContentTop,
 .sapMCrsl .sapMCrslControlsOverContentBottom {
-	background-color: transparent; // the background should always be transparent since it is over the carousel's content
+	background-color: transparent; /* the background should always be transparent since it is over the carousel's content */
 }
 
 .sapMCrslControlsNoArrowsTop {
@@ -452,7 +467,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	padding-right: @_sap_m_Carousel_PageIndicatorContainerPadding;
 	height: 2rem;
 	bottom: 1.0625rem;
-	max-width: calc(~"100% - 6.5rem");
+	max-width: calc(~'100% - 6.5rem');
 	display: flex;
 	justify-content: center;
 	align-self: center;
@@ -467,6 +482,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 }
 
 .sapMCrslControlsOverContentTop {
+
 	&.sapMCrslControlsNoArrows .sapMCrslBulleted,
 	&.sapMCrslControlsNoArrows .sapMCrslNumeric {
 		bottom: 2px;
@@ -474,6 +490,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 }
 
 .sapMCrslControlsOverContentBottom {
+
 	&.sapMCrslControlsNoArrows .sapMCrslBulleted,
 	&.sapMCrslControlsNoArrows .sapMCrslNumeric {
 		bottom: -2px;
@@ -483,6 +500,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 /* Styles for carousel dots on different screens */
 /* screen width < 600px */
 @media screen and (max-width: 599px) {
+
 	 .sapMCrslBulleted,
 	 .sapMCrslNumeric {
 		width: @_sap_m_Carousel_PageIndicatorWidthSizeS;
@@ -491,6 +509,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 
 /* 600px <= screen width < 1024px */
 @media screen and (min-width : 600px) and (max-width: 1023px) {
+
 	 .sapMCrslBulleted,
 	 .sapMCrslNumeric {
 		width: @_sap_m_Carousel_PageIndicatorWidthSizeM;
@@ -499,6 +518,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 
 /* 1024px <= screen width < 1440px */
 @media screen and (min-width : 1024px) and (max-width: 1439px) {
+
 	 .sapMCrslBulleted,
 	 .sapMCrslNumeric {
 		width: @_sap_m_Carousel_PageIndicatorWidthSizeL;
@@ -507,6 +527,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 
 /* screen width >= 1440px */
 @media screen and (min-width: 1440px) {
+
 	 .sapMCrslBulleted,
 	 .sapMCrslNumeric {
 		width: @_sap_m_Carousel_PageIndicatorWidthSizeXL;
@@ -522,6 +543,7 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 }
 
 @media all and (max-width: 1024px) {
+
 	.sapMCrslItem {
 		transition: visibility 0.3s;
 	}
@@ -539,7 +561,7 @@ html[data-sap-ui-animation='off'] .sapMCrslItem {
 /* Page Indicator Numeric
    ====================================================================== */
 .sapMCrslNumeric span {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapMFontMediumSize;
 	font-weight: normal;
 	color: @_sap_m_Carousel_NumericIndicatorTextColor;
@@ -571,17 +593,17 @@ html[data-sap-ui-animation='off'] .sapMCrslItem {
 }
 
 .sapMCrslItemTableCell.sapMCrslImg img {
-	background: @sapUiBaseBG;
+	background: var(--sapBackgroundColor);
 }
 
-// Arrows over content
+/* Arrows over content */
 .sapMCrsl .sapMCrslHud.sapMCrslLeftmost .sapMCrslArrow.sapMCrslPrev,
 .sapMCrsl .sapMCrslHud.sapMCrslRightmost .sapMCrslArrow.sapMCrslNext {
 	opacity: 0;
 	display: none;
 }
 
-// Arrows in the Page Indicator area
+/* Arrows in the Page Indicator area */
 .sapMCrsl .sapMCrslArrow.sapMCrslLeftmost.sapMCrslPrev,
 .sapMCrsl .sapMCrslArrow.sapMCrslRightmost.sapMCrslNext {
 	opacity: 0;
@@ -596,9 +618,8 @@ html[data-sap-ui-animation='off'] .sapMCrslItem {
 }
 
 /* extra bits */
-
 .sapMCrslControlsBackground-Solid {
-	background: @sapUiPageFooterBackground;
+	background: var(--sapPageFooter_Background);
 }
 
 .sapMCrslControlsBackground-Translucent {
@@ -610,11 +631,11 @@ html[data-sap-ui-animation='off'] .sapMCrslItem {
 }
 
 .sapMCrslControlsBorder-Solid.sapMCrslControlsTop {
-	border-bottom: 1px solid @sapUiPageFooterBorderColor;
+	border-bottom: 1px solid var(--sapPageFooter_BorderColor);
 }
 
 .sapMCrslControlsBorder-Solid.sapMCrslControlsBottom {
-	border-top: 1px solid @sapUiPageFooterBorderColor;
+	border-top: 1px solid var(--sapPageFooter_BorderColor);
 }
 
 /* Default Themes/Sytles for Slider */
@@ -627,6 +648,7 @@ html[data-sap-ui-animation='off'] .sapMCrslItem {
 
 .sapMCrsl:hover,
 .sapMCrslShowArrows {
+
 	.sapMCrslHud .sapMCrslArrow {
 		opacity: 1;
 		display: block;
@@ -634,12 +656,15 @@ html[data-sap-ui-animation='off'] .sapMCrslItem {
 }
 
 html.sap-desktop {
+
 	.sapMCrslHud {
+
 		.sapMCrslPrev:focus,
 		.sapMCrslNext:focus {
+
 			&::before,
 			&::after {
-				content: "";
+				content: '';
 				position: absolute;
 				top: @_sap_m_Carousel_FocusBorderOffsetArrow;
 				right: @_sap_m_Carousel_FocusBorderOffsetArrow;
@@ -648,9 +673,11 @@ html.sap-desktop {
 				pointer-events: none;
 				border-radius: @_sap_m_Carousel_PrevAndNextFocusBorderRadius;
 			}
+
 			&::before {
 				border: @_sap_m_Carousel_ContrastFocusBorder;
 			}
+
 			&::after {
 				border: @_sap_m_Carousel_FocusBorder;
 			}
@@ -658,7 +685,7 @@ html.sap-desktop {
 	}
 }
 
-// fix for Safari
+/* fix for Safari */
 .sapMCrslPrev:focus,
 .sapMCrslNext:focus,
 .sapMCrslPrev .sapUiIcon:focus,

package/src/sap/m/themes/base/CellSelector.less

@@ -39,7 +39,7 @@
 			cursor: nwse-resize;
 		}
 
-		// Needed, because (for some reason) RTL converts nwse-resize to the opposite nesw-resize (alhtough we do not want this to happen)
+		/* Needed, because (for some reason) RTL converts nwse-resize to the opposite nesw-resize (alhtough we do not want this to happen) */
 		html[dir=rtl] &.sapMPluginsNESW {
 			cursor: nwse-resize;
 		}
@@ -60,87 +60,87 @@
 }
 
 .sapMPluginsCellSelectorSelected {
-	background-color: @sapList_Hover_SelectionBackground;
+	background-color: var(--sapList_Hover_SelectionBackground);
 }
 
 .sapMLIBSelected > .sapMPluginsCellSelectorSelected {
-	border-bottom: @sapList_BorderWidth @sapList_SelectionBorderColor solid;
+	border-bottom: var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor) solid;
 }
 
 .sapMPluginsCellSelectorTop {
-	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor;
+	box-shadow: inset 0 var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorRight {
-	box-shadow: inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset ~"calc(var(--sapList_BorderWidth) * -1)" 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorBottom {
-	box-shadow: inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
+	box-shadow: inset 0 ~"calc(var(--sapList_BorderWidth) * -1)" var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorLeft {
-	box-shadow: inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset var(--sapList_BorderWidth) 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorBottom {
-	box-shadow: inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
+	box-shadow: inset 0 ~"calc(var(--sapList_BorderWidth) * -1)" var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorTop.sapMPluginsCellSelectorRight {
-	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset 0 var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor),
+				inset ~"calc(var(--sapList_BorderWidth) * -1)" 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorTop.sapMPluginsCellSelectorBottom {
-	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
+	box-shadow: inset 0 var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor),
+				inset 0 ~"calc(var(--sapList_BorderWidth) * -1)" var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorTop.sapMPluginsCellSelectorLeft {
-	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset 0 var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor),
+				inset var(--sapList_BorderWidth) 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorRight.sapMPluginsCellSelectorBottom {
-	box-shadow: inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
-				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
+	box-shadow: inset ~"calc(var(--sapList_BorderWidth) * -1)" 0 var(--sapList_SelectionBorderColor),
+				inset 0 ~"calc(var(--sapList_BorderWidth) * -1)" var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorRight.sapMPluginsCellSelectorLeft {
-	box-shadow: inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
-				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset ~"calc(var(--sapList_BorderWidth) * -1)" 0 var(--sapList_SelectionBorderColor),
+				inset var(--sapList_BorderWidth) 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorBottom.sapMPluginsCellSelectorLeft {
-	box-shadow: inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset 0 ~"calc(var(--sapList_BorderWidth) * -1)" var(--sapList_SelectionBorderColor),
+				inset var(--sapList_BorderWidth) 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorTop.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorBottom {
-	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
-				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
+	box-shadow: inset 0 var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor),
+				inset ~"calc(var(--sapList_BorderWidth) * -1)" 0 var(--sapList_SelectionBorderColor),
+				inset 0 ~"calc(var(--sapList_BorderWidth) * -1)" var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorTop.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorLeft {
-	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
-				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset 0 var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor),
+				inset ~"calc(var(--sapList_BorderWidth) * -1)" 0 var(--sapList_SelectionBorderColor),
+				inset var(--sapList_BorderWidth) 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorTop.sapMPluginsCellSelectorBottom.sapMPluginsCellSelectorLeft {
-	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset 0 var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor),
+				inset 0 ~"calc(var(--sapList_BorderWidth) * -1)" var(--sapList_SelectionBorderColor),
+				inset var(--sapList_BorderWidth) 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorRight.sapMPluginsCellSelectorBottom.sapMPluginsCellSelectorLeft {
-	box-shadow: inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
-				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor,
-				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+	box-shadow: inset ~"calc(var(--sapList_BorderWidth) * -1)" 0 var(--sapList_SelectionBorderColor),
+				inset 0 ~"calc(var(--sapList_BorderWidth) * -1)" var(--sapList_SelectionBorderColor),
+				inset var(--sapList_BorderWidth) 0 var(--sapList_SelectionBorderColor);
 }
 
 .sapMPluginsCellSelectorTop.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorBottom.sapMPluginsCellSelectorLeft {
-	box-shadow: inset 0 0 0 @sapList_BorderWidth @sapList_SelectionBorderColor;
+	box-shadow: inset 0 0 0 var(--sapList_BorderWidth) var(--sapList_SelectionBorderColor);
 }