@openui5/themelib_sap_horizon 1.143.0 → 1.144.0

package/src/sap/ui/unified/themes/sap_horizon/Calendar.less

@@ -1,14 +1,14 @@
 /* ======================================== */
 /* CSS for control sap.ui.unified/Calendar  */
-/* Horizon theme                            */
+/* Morning Horizon theme                    */
 /* ======================================== */
 
-@_sap_ui_unified_Calendar_ItemColor: @sapUiLegendWorkingBackground;
-@_sap_ui_unified_Calendar_ItemHoverColor: @sapUiListHoverBackground;
-@_sap_ui_unified_Calendar_ItemBorderColor: @sapUiListBackground;
-@_sap_ui_unified_Calendar_ItemWeekEndColor: @sapUiLegendNonWorkingBackground;
-@_sap_ui_unified_Calendar_ItemWeekEndHoverColor: @sapUiListHoverBackground;
-@_sap_ui_unified_Calendar_ItemOtherMonthColor: @sapUiContentLabelColor;
+@_sap_ui_unified_Calendar_ItemColor: var(--sapLegend_WorkingBackground);
+@_sap_ui_unified_Calendar_ItemHoverColor: var(--sapList_Hover_Background);
+@_sap_ui_unified_Calendar_ItemBorderColor: var(--sapList_Background);
+@_sap_ui_unified_Calendar_ItemWeekEndColor: var(--sapLegend_NonWorkingBackground);
+@_sap_ui_unified_Calendar_ItemWeekEndHoverColor: var(--sapList_Hover_Background);
+@_sap_ui_unified_Calendar_ItemOtherMonthColor: var(--sapContent_LabelColor);
 
 .sapUiCal {
 	border-radius: 0.5rem;
@@ -20,6 +20,7 @@
 }
 
 .sapUiSizeCompact .sapUiCalSecType {
+
 	.sapUiCal:not(.sapUiCalInt),
 	&.sapUiCal:not(.sapUiCalInt) {
 		min-width: 19rem;
@@ -27,6 +28,7 @@
 }
 
 .sapUiSizeCompact .sapUiCalMonthSecType {
+
 	.sapUiCalItem,
 	.sapUiCalWeekNum {
 		min-width: 2.25rem;
@@ -35,22 +37,25 @@
 }
 
 .sapUiCalWeekNum:hover {
-	background-color: @sapUiListHoverBackground;
+	background-color: var(--sapList_Hover_Background);
 	border-radius: 0.5rem;
 }
 
 /* calendar should have only a border if on popup */
 .sapUiCal[data-sap-ui-popup] {
-	border-color: @sapUiContentForegroundBorderColor;
+	border-color: var(--sapContent_ForegroundBorderColor);
 }
 
-html[data-sap-ui-browser^="ff"].sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus {
+html[data-sap-ui-browser^='ff'].sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus {
 	outline-offset: 0; /* to hide firefox bug with native outline always displayed */
 }
 
-.sapUiCalItem[class*=sapUiCalItemType] {
+.sapUiCalItem[class*='sapUiCalItemType'] {
+
 	&.sapUiCalItemSel{
+
 		&.sapUiCalItemNow {
+
 			.sapUiCalItemText {
 				border-radius: 0.3125rem;
 				border-bottom-right-radius: 0.3125rem;
@@ -60,7 +65,16 @@ html[data-sap-ui-browser^="ff"].sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus
 	}
 }
 
-html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus::before {
+.sapUiCalHead.sapUiCalHeaderWithTodayButton .sapUiCalHeadNext,
+.sapUiCalHead.sapUiCalHeaderWithTodayButton .sapUiCalHeadPrev {
+	position: relative;
+	left:0;
+	right: 0;
+}
+
+html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus::before,
+html.sap-desktop .sapUiCalHead > .sapUiCalHeadNext:focus::before,
+html.sap-desktop .sapUiCalHead > .sapUiCalHeadPrev:focus::before {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -68,7 +82,7 @@ html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus::before {
 	top: 0.125rem;
 	right: 0.125rem;
 	bottom: 0.125rem;
-	border: 0.125rem solid @sapUiContentFocusColor;
+	border: 0.125rem solid var(--sapContent_FocusColor);
 	pointer-events: none;
 	border-radius: 0.375rem;
 }
@@ -82,55 +96,35 @@ html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus::before {
 }
 
 html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus:active {
-	border-color: @sapUiContentContrastFocusColor;
+	border-color: var(--sapContent_ContrastFocusColor);
 }
 
 .sapUiCalHead > button,
 .sapUiCalCancel {
-	font-family: @sapFontBoldFamily;
-	color: @sapUiButtonLiteTextColor;
+	font-family: var(--sapFontBoldFamily);
+	color: var(--sapButton_Lite_TextColor);
 }
 
 .sapUiCalSecType .sapUiCalHead > button .sapUiCalHeadBAddText {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 }
 
 html.sap-desktop .sapUiCalHead > button:hover,
 html.sap-desktop .sapUiCalCancel:hover,
 html.sap-desktop .sapUiCalHead > button:focus,
 html.sap-desktop .sapUiCalCancel:focus {
-	color: @sapUiButtonLiteTextColor;
+	color: var(--sapButton_Lite_TextColor);
 }
 
 .sapUiCalWH,
 .sapUiCalWeekNum {
-	color: @sapUiContentLabelColor;
-	font-size: @sapMFontSmallSize;
-}
-
-html[data-sap-ui-browser^="ie"].sap-desktop,
-html[data-sap-ui-browser^="ed"].sap-desktop {
-	.sapUiCalHead > .sapUiCalHeadB{
-		position: relative;
-		outline: none;
-	}
-
-	.sapUiCalHead > .sapUiCalHeadB:focus:after {
-		position: absolute;
-		top: 0.125rem;
-		left: 0.125rem;
-		right: 0.125rem;
-		bottom: 0.125rem;
-		border: 0.0625rem dashed @sapUiContentFocusColor;
-		content: "";
-	}
-
-	.sapUiCalHead > .sapUiCalHeadB:focus:active:after {
-		border-color: @sapUiContentContrastFocusColor;
-	}
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSmallSize);
 }
 
-html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus:not(:hover):not(:active) {
+html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus:not(:hover):not(:active),
+html.sap-desktop .sapUiCalHead > .sapUiCalHeadNext:focus:not(:hover):not(:active),
+html.sap-desktop .sapUiCalHead > .sapUiCalHeadPrev:focus:not(:hover):not(:active) {
 	background-color: transparent;
 }
 
@@ -142,7 +136,6 @@ html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:focus,
 .sapUiCalHead .sapUiCalHeadNext,
 .sapUiCalHead .sapUiCalHeadToday {
 	border-radius: 0.5rem;
-
 }
 
 .sapUiCalHead .sapUiCalHeadPrev:hover,
@@ -152,8 +145,8 @@ html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:hover {
 }
 
 html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:active {
-	color: @sapUiButtonActiveTextColor;
-	border-color: @sapUiButtonLiteActiveBorderColor;
+	color: var(--sapButton_Active_TextColor);
+	border-color: var(--sapButton_Lite_Active_BorderColor);
 }
 
 /*** days, months, years ***/
@@ -164,47 +157,48 @@ html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:active {
 }
 
 .sapUiCalItem {
-	background-color: @sapUiLegendWorkingBackground;
+	background-color: var(--sapLegend_WorkingBackground);
 	border-radius: 0.5rem;
 }
 
 .sapUiCalRowWeekNumber {
-	color: @sapUiBaseText;
-	background-color: @sapUiListBackground;
-	border-color: @sapUiListBorderColor;
+	color: var(--sapTextColor);
+	background-color: var(--sapList_Background);
+	border-color: var(--sapList_BorderColor);
 	border-radius: 0.5rem;
 }
 
 .sapUiCalItemNow {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 .sapUiCalYearPicker,
 .sapUiCalMonthPicker {
+
 	.sapUiCalItem {
-		outline: 0.0625rem solid @sapUiButtonLiteBorderColor;
+		outline: 0.0625rem solid var(--sapButton_Lite_BorderColor);
 		outline-offset: -0.125rem;
-		background: @sapUiButtonLiteBackground;
-		color: @sapUiButtonLiteTextColor;
+		background: var(--sapButton_Lite_Background);
+		color: var(--sapButton_Lite_TextColor);
 
 		&:hover {
-			outline: 0.0625rem solid @sapUiButtonLiteHoverBorderColor;
-			color: @sapUiButtonLiteHoverTextColor;
+			outline: 0.0625rem solid var(--sapButton_Lite_Hover_BorderColor);
+			color: var(--sapButton_Lite_Hover_TextColor);
 
 			&.sapUiCalItemSel,
 			&.sapUiCalItemSelBetween,
 			&.sapUiCalItemSel:not(.sapUiCalItemSelBetween):not(.sapUiCalItemSelStart):not(.sapUiCalItemSelEnd) {
-				outline: 0.0625rem solid @sapUiButtonSelectedHoverBorderColor;
-				background: @sapUiButtonSelectedHoverBackground;
+				outline: 0.0625rem solid var(--sapButton_Selected_Hover_BorderColor);
+				background: var(--sapButton_Selected_Hover_Background);
 			}
 		}
 
 		&.sapUiCalItemSel,
 		&.sapUiCalItemSelBetween,
 		&.sapUiCalItemSel:not(.sapUiCalItemSelBetween):not(:hover) {
-			outline: 0.0625rem solid @sapUiButtonSelectedBorderColor;
-			background: @sapUiButtonSelectedBackground;
-			color: @sapUiButtonSelectedTextColor;
+			outline: 0.0625rem solid var(--sapButton_Selected_BorderColor);
+			background: var(--sapButton_Selected_Background);
+			color: var(--sapButton_Selected_TextColor);
 		}
 	}
 }
@@ -216,15 +210,17 @@ html.sap-desktop .sapUiCalHead > .sapUiCalHeadB:active {
 	overflow: hidden;
 }
 
-
-html.sap-desktop .sapUiCalItem.sapUiCalItemNow:not(.sapUiCalItemSelBetween):not(.sapUiCalItemSelStart):not(.sapUiCalItemSelEnd):focus > .sapUiCalItemText{
+html.sap-desktop .sapUiCalItem.sapUiCalItemNow:not(.sapUiCalItemSelBetween):not(.sapUiCalItemSelStart):not(.sapUiCalItemSelEnd):focus > .sapUiCalItemText {
 	outline-offset: -0.45rem;
 }
 
 html.sap-desktop {
+
 	.sapUiCalMonthPicker,
 	.sapUiCalYearPicker {
+
 		.sapUiCalItem {
+
 			&:focus::before {
 				content: '';
 				position: absolute;
@@ -233,14 +229,15 @@ html.sap-desktop {
 				top: 0.125rem;
 				right: 0.125rem;
 				bottom: 0.125rem;
-				border: 0.125rem solid @sapUiContentFocusColor;
+				border: 0.125rem solid var(--sapContent_FocusColor);
 				border-radius: 0.375rem;
 			}
 
 			&.sapUiCalItemSel,
 			&.sapUiCalItemSelBetween {
+
 				&:focus:not(:hover) {
-					background: @sapUiButtonSelectedBackground;
+					background: var(--sapButton_Selected_Background);
 				}
 			}
 		}
@@ -248,69 +245,26 @@ html.sap-desktop {
 }
 
 html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetween):focus > .sapUiCalItemText {
-	color: @sapUiContentSelectedTextColor;
+	color: var(--sapContent_Selected_TextColor);
 }
 
 html.sap-desktop .sapUiSizeCompact .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetween):focus > .sapUiCalDayName {
-	outline-color: @sapUiContentContrastFocusColor;
-}
-
-html[data-sap-ui-browser^="ie"].sap-desktop,
-html[data-sap-ui-browser^="ed"].sap-desktop {
-	// do this only for the Planing Calendar
-	.sapMPlanCal :not(.sapUiCalFirstWDay).sapUiCalItem:focus {
-		overflow: hidden;
-	}
-
-	.sapUiCalItem:focus > .sapUiCalItemText,
-	.sapUiCalMonthPicker .sapUiCalItem:focus,
-	.sapUiCalYearPicker .sapUiCalItem:focus {
-		position: relative;
-		outline: none;
-	}
-
-	.sapUiCalItem:focus > .sapUiCalItemText:after,
-	.sapUiCalMonthPicker .sapUiCalItem:focus:after,
-	.sapUiCalYearPicker .sapUiCalItem:focus:after {
-		position: absolute;
-		top: 0.125rem;
-		left: 0.125rem;
-		right: 0.125rem;
-		bottom: 0.125rem;
-		border: 0.0625rem dashed @sapUiContentFocusColor;
-		content: "";
-	}
-
-	.sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetween):focus > .sapUiCalItemText:after,
-	.sapUiCalMonthPicker .sapUiCalItemSel:focus:after,
-	.sapUiCalYearPicker .sapUiCalItemSel:focus:after {
-		border-color: @sapUiContentContrastFocusColor;
-	}
-	.sapUiCalItemSel.sapUiCalItem:focus > .sapUiCalItemText {
-		position: static;
-	}
-
-	.sapUiCalItem.sapUiCalItemNow:focus > .sapUiCalItemText:after {
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-	}
+	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
 .sapUiCalItemWeekEnd,
 html.sap-desktop .sapUiCalItemWeekEnd:not(.sapUiCalItemSel):focus {
-	background-color: @sapUiLegendNonWorkingBackground;
+	background-color: var(--sapLegend_NonWorkingBackground);
 }
 
 .sapUiCalItem:hover,
 .sapUiCalItemWeekEnd:hover {
-	background-color: @sapUiListHoverBackground;
+	background-color: var(--sapList_Hover_Background);
 }
 
 html.sap-desktop .sapUiCalDatesRow .sapUiCalItemWeekEnd:not(.sapUiCalItemSel):hover,
 html.sap-desktop .sapUiCal:not(.sapUiCalDateInt) .sapUiCalItemWeekEnd:not(.sapUiCalItemSel) :not(.sapUiCalWeekNum):hover {
-	background-color: @sapUiListHoverBackground;
+	background-color: var(--sapList_Hover_Background);
 }
 
 html.sap-desktop .sapUiCalDatesRow .sapUiCalItemWeekEnd:not(.sapUiCalItemSel):hover {
@@ -334,11 +288,14 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 }
 
 .sapUiSizeCompact .sapUiCalItem:not(.sapUiCalItemNow) {
+
 	&.sapUiCalItemSelBetween .sapUiCalItemText {
 		position: static;
 	}
 }
+
 .sapUiSizeCompact .sapUiCalMonthSecType .sapUiCalItem {
+
 	&.sapUiCalItemSelBetween .sapUiCalItemText {
 		position: relative;
 		line-height: 1rem;
@@ -351,33 +308,39 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 
 .sapUiCalItem {
 	position: relative;
+
 	&:focus > .sapUiCalItemText {
 		position: static;
 		outline: none;
-		&:after {
+
+		&::after {
 			position: absolute;
 			top: 0.3125rem;
 			left: 0.3125rem;
 			right: 0.3125rem;
 			bottom: 0.3125rem;
-			content: "";
-			border: 0.0625rem solid @sapUiContentFocusColor;
+			content: '';
+			border: 0.0625rem solid var(--sapContent_FocusColor);
 			border-radius: 0.5rem;
 		}
 	}
+
 	&.sapUiCalItemSelBetween {
+
 		.sapUiCalItemText {
 			position: relative;
 		}
+
 		&:not(.sapUiCalItemNow) {
-			.sapUiCalItemText:before {
+
+			.sapUiCalItemText::before {
 				position: absolute;
 				top: 0;
 				left: 0;
 				right: 0;
 				bottom: 0;
-				border: 0.0625rem solid @sapUiListSelectionBorderColor;
-				content: "";
+				border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+				content: '';
 				border-radius: 0.5rem;
 			}
 		}
@@ -385,55 +348,66 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 
 	&.sapUiCalItemNow {
 		border-radius: 0.5rem;
+
 		&:hover {
-			background: @sapUiListHoverBackground;
+			background: var(--sapList_Hover_Background);
 		}
+
 		.sapUiCalSpecialDate,
 		&:focus:not(.sapUiCalItemSel) .sapUiCalSpecialDate {
 			width: calc(~'100% - 0.345rem');
 			bottom: 0.1875rem;
 			left: 0.1875rem;
 		}
+
 		&.sapUiCalItemSel:not(.sapUiCalItemSelBetween),
 		&.sapUiCalItemSelStart:not(.sapUiCalItemSelBetween),
 		&.sapUiCalItemSelEnd:not(.sapUiCalItemSelBetween) {
 
-			.sapUiCalItemText:before {
+			.sapUiCalItemText::before {
 				position: absolute;
 				top: 0.1875rem;
 				left: 0.1875rem;
 				right: 0.1875rem;
 				bottom: 0.1875rem;
-				border: 0.0625rem solid @sapUiListSelectionBorderColor;
-				content: "";
+				border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+				content: '';
 				border-radius: 0.1875rem;
 			}
 		}
+
 		&.sapUiCalItemSel:not(:focus) {
+
 			.sapUiCalSpecialDate {
 				width: calc(~'100% - 0.38rem');
 				bottom: 0.1875rem;
 				left: 0.1875rem;
 			}
 		}
+
 		&.sapUiCalItemSelBetween {
 			line-height: normal;
+
 			.sapUiCalItemText {
-				border: 0.0625rem solid @sapUiListSelectionBorderColor;
+				border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 				border-radius: 0.3125rem;
 				margin: 0.125rem;
 				width: 2.0625rem;
 				height: 2.375rem;
 				line-height: 2.375rem;
 			}
+
 			.sapUiCalSpecialDate {
 				width: calc(~'100% - 0.425rem');
 			}
 		}
+
 		&:focus {
+
 			&.sapUiCalItemSel,
 			&.sapUiCalItemSelBetween:not(.sapUiCalItemSel),
 			&:not(.sapUiCalItemSelBetween):not(.sapUiCalItemSel) {
+
 				.sapUiCalSpecialDate {
 					width: calc(~'100% - 0.7rem');
 					left: 0.3125rem;
@@ -446,31 +420,36 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 		.sapUiCalItemText {
 			border: none;
 		}
+
 		&.sapUiCalItemSel {
-			box-shadow: inset 0 0 0 0.25rem @sapUiListBackground;
+			box-shadow: inset 0 0 0 0.25rem var(--sapList_Background);
 		}
-		&:focus > .sapUiCalItemText:before {
+
+		&:focus > .sapUiCalItemText::before {
 			top: 0.1875rem;
 			left: 0.1875rem;
 			right: 0.1875rem;
 			bottom: 0.1875rem;
 			border-radius: 0.3125rem;
 		}
-		&:before {
+
+		&::before {
 			position: absolute;
-			content: "";
+			content: '';
 			top: 0;
 			left: 0;
 			right: 0;
 			bottom: 0;
-			border: 0.125rem solid @sapUiLegendCurrentDateTime;
+			border: 0.125rem solid var(--sapLegend_CurrentDateTime);
 			border-radius: 0.5rem;
 			pointer-events: none;
 		}
 	}
-	.sapUiCalItemText:after {
+
+	.sapUiCalItemText::after {
 		outline: none;
 	}
+
 	.sapUiCalSpecialDate {
 		position: absolute;
 		width: 100%;
@@ -482,6 +461,7 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 	}
 
 	&.sapUiCalItemSelBetween:not(.sapUiCalItemSel):not(.sapUiCalItemNow) {
+
 		.sapUiCalSpecialDate {
 			width: calc(~'100% - 0.125rem');
 			left: 0.0625rem;
@@ -502,7 +482,9 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 }
 
 .sapUiSizeCozy {
+
 	.sapUiCalItem {
+
 		&:focus .sapUiCalSpecialDate,
 		&.sapUiCalItemSel .sapUiCalSpecialDate,
 		&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) .sapUiCalSpecialDate {
@@ -510,7 +492,9 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 		}
 
 		&.sapUiCalItemSelBetween {
+
 			&:not(.sapUiCalItemSel):not(.sapUiCalItemNow) {
+
 				.sapUiCalSpecialDate {
 					width: 93%;
 					left: 0.0625rem;
@@ -519,31 +503,36 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 				}
 			}
 		}
+
 		&.sapUiCalItemNow {
+
 			.sapUiCalSpecialDate,
 			&.sapUiCalItemSel .sapUiCalSpecialDate {
 				width: 82%;
 			}
 
 			&.sapUiCalItemSelBetween {
+
 				.sapUiCalItemText {
 					border: none;
 					margin: auto;
 					height: 100%;
 					line-height: 2.875rem;
 				}
-				.sapUiCalItemText:before {
-					content: "";
+
+				.sapUiCalItemText::before {
+					content: '';
 					position: absolute;
 					top: 0.0625rem;
 					left: 0.0625rem;
 					right: 0.0625rem;
 					bottom: 0.0625rem;
-					border: 0.0625rem solid @sapUiListSelectionBorderColor;
+					border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 					border-radius: 0.3125rem;
 					margin: 0.125rem;
 					line-height: 2.375rem;
 				}
+
 				.sapUiCalSpecialDate {
 					left: 0.25rem;
 					right: 0.25rem;
@@ -551,15 +540,18 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 				}
 			}
 			&:focus {
+
 				&:not(.sapUiCalItemSelBetween) {
+
 					.sapUiCalSpecialDate {
 						bottom: 0.375rem;
 						width: 69%;
 						left: 0.3125rem;
 					}
 				}
+
 				.sapUiCalSpecialDate,
-				&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) .sapUiCalSpecialDate{
+				&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) .sapUiCalSpecialDate {
 					bottom: 0.375rem;
 					width: 66%;
 					left: 0.375rem;
@@ -570,29 +562,34 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 }
 
 .sapUiCalItemOtherMonth {
-	background-color: @sapUiListBackground;
+	background-color: var(--sapList_Background);
 	color: @_sap_ui_unified_Calendar_ItemOtherMonthColor;
 }
 
 .sapUiCalMonthSecType {
-    .sapUiCalItemOtherMonth.sapUiCalItem {
-        &:not(.sapUiCalItemSelBetween),
-        &:not(.sapUiCalItemSel) {
-            .sapUiCalItemSecText {
-                color: @_sap_ui_unified_Calendar_ItemOtherMonthColor;
-            }
-        }
-    }
+
+	.sapUiCalItemOtherMonth.sapUiCalItem {
+
+		&:not(.sapUiCalItemSelBetween),
+		&:not(.sapUiCalItemSel) {
+
+			.sapUiCalItemSecText {
+				color: @_sap_ui_unified_Calendar_ItemOtherMonthColor;
+			}
+		}
+	}
 }
 
 .sapUiCalItemOtherMonth.sapUiCalItemDsbl {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .sapUiCalItemSel {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
+
 	&:focus > .sapUiCalItemText {
-		&:after {
+
+		&::after {
 			top: -0.01rem;
 			left: 0.025rem;
 			right: 0.025rem;
@@ -603,38 +600,39 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 }
 
 html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWeekNum):hover {
-	background-color: @sapUiListHoverBackground;
+	background-color: var(--sapList_Hover_Background);
 }
 
 .sapUiCalItem.sapUiCalItemSel:not(.sapUiCalItemSelBetween):not(:hover) {
-	background-color: @sapUiContentSelectedBackground;
-	color: @sapUiContentSelectedTextColor;
+	background-color: var(--sapContent_Selected_Background);
+	color: var(--sapContent_Selected_TextColor);
 }
 
 .sapUiCalItem.sapUiCalItemSel {
-	background-color: @sapUiContentSelectedHoverBackground;
+	background-color: var(--sapContent_Selected_Hover_Background);
+
 	&:not(.sapUiCalItemSelBetween):not(.sapUiCalItemSelStart):not(.sapUiCalItemSelEnd):hover {
-		background-color: @sapUiListHoverBackground;
+		background-color: var(--sapList_Hover_Background);
 	}
 }
 
-.sapUiCalItemWeekEnd:hover {
-	filter: brightness(105%);
-}
-
 .sapUiCalMonthPicker,
 .sapUiCalYearPicker {
+
 	.sapUiCalItem.sapUiCalItemDsbl {
-		opacity: @sapUiContentDisabledOpacity;
+		opacity: var(--sapContent_DisabledOpacity);
 	}
+
 	.sapUiCalItem:focus {
 		line-height: 2.875rem;
 	}
 }
 
 .sapUiSizeCompact {
+
 	.sapUiCalMonthPicker,
 	.sapUiCalYearPicker {
+
 		.sapUiCalItem:focus {
 			line-height: 1.875rem;
 		}
@@ -642,7 +640,7 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 }
 
 .sapUiCalItemSel:not(.sapUiCalItemSelBetween) > .sapUiCalItemText {
-	color: @sapUiContentSelectedTextColor;
+	color: var(--sapContent_Selected_TextColor);
 	font-weight: bold;
 	position: absolute;
 	left: 0;
@@ -653,11 +651,13 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 }
 
 .sapUiCalItemSel {
-	color: @sapContent_Selected_TextColor;
+	color: var(--sapContent_Selected_TextColor);
 }
 
 .sapUiCalItem:focus:not(.sapUiCalItemSelBetween){
+
 	&:not(.sapUiCalItemSel) {
+
 		.sapUiCalSpecialDate {
 			width: 100%;
 			left: 0;
@@ -667,40 +667,45 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 }
 
 .sapUiCalItem:focus {
-	&:not(.sapUiCalItemNow):not(.sapUiCalItemSel) .sapUiCalItemText:after {
+
+	&:not(.sapUiCalItemNow):not(.sapUiCalItemSel) .sapUiCalItemText::after {
 		position: absolute;
-		content: "";
+		content: '';
 		top: 0.3125rem;
 		left: 0.3125rem;
 		right: 0.3125rem;
 		bottom: 0.3125rem;
-		border: 0.125rem solid @sapUiContentFocusColor;
+		border: 0.125rem solid var(--sapContent_FocusColor);
 		border-radius: 0.1875rem;
 	}
+
 	&.sapUiCalItemNow,
 	&.sapUiCalItemSel,
 	&.sapUiCalItemSelStart,
 	&.sapUiCalItemSelEnd {
-		.sapUiCalItemText:after {
-			content: "";
+
+		.sapUiCalItemText::after {
+			content: '';
 			position: absolute;
 			top: 0.3125rem;
 			left: 0.3125rem;
 			right: 0.3125rem;
 			bottom: 0.3125rem;
-			border: 0.125rem solid @sapUiContentFocusColor;
+			border: 0.125rem solid var(--sapContent_FocusColor);
 			border-radius: 0.1875rem;
 		}
 	}
 }
 
 .sapUiCalMonthSecType {
+
 	.sapUiCalItem {
 		border-radius: var(--sapButton_BorderCornerRadius);
 
 		.sapUiCalItemSecText {
 			width: 60%;
 		}
+
 		.sapUiCalSpecialDate,
 		&.sapUiCalItemNow:not(:focus) .sapUiCalSpecialDate,
 		&.sapUiCalItemNow.sapUiCalItemSelBetween:focus .sapUiCalSpecialDate,
@@ -720,59 +725,71 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 		&.sapUiCalItemSelEnd,
 		&:not(.sapUiCalItemNow):not(.sapUiCalItemSel),
 		&.sapUiCalItemSelBetween.sapUiCalItemOtherMonth:not(.sapUiCalItemNow) {
+
 			.sapUiCalItemText:before {
 				border-radius: 0.375rem;
 			}
 		}
 
 		&.sapUiCalItemNow {
-			&:before,
+
+			&::before,
 			.sapUiCalItemText {
 				border-radius: 0.375rem;
 			}
+
 			&.sapUiCalItemSel:not(.sapUiCalItemSelBetween),
 			&.sapUiCalItemSelStart:not(.sapUiCalItemSelBetween),
 			&.sapUiCalItemSelEnd:not(.sapUiCalItemSelBetween),
 			&.sapUiCalItemSelBetween.sapUiCalItemOtherMonth:not(.sapUiCalItemNow) {
-				.sapUiCalItemText:before {
+
+				.sapUiCalItemText::before {
 					border-radius: 0.1875rem;
 				}
 			}
 		}
+
 		&:focus {
+
 			&:not(.sapUiCalItemNow):not(.sapUiCalItemSel) {
-				.sapUiCalItemText:after {
+
+				.sapUiCalItemText::after {
 					top: 0.0625rem;
 					left: 0.0625rem;
 					right: 0.0625rem;
 					bottom: 0.0625rem;
-					border: 0.125rem solid @sapUiContentFocusColor;
+					border: 0.125rem solid var(--sapContent_FocusColor);
 					border-radius: 0.25rem;
 				}
 			}
+
 			&.sapUiCalItemSel,
 			&.sapUiCalItemSelStart,
 			&.sapUiCalItemSelEnd,
 			&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
-				.sapUiCalItemText:after {
+
+				.sapUiCalItemText::after {
 					top: 0.125rem;
 					left: 0.125rem;
 					right: 0.125rem;
 					bottom: 0.125rem;
-					border: 0.125rem solid @sapUiContentFocusColor;
+					border: 0.125rem solid var(--sapContent_FocusColor);
 					border-radius: 0.25rem;
 				}
 			}
+
 			&.sapUiCalItemNow {
-				.sapUiCalItemText:after {
+
+				.sapUiCalItemText::after {
 					top: 0.1875rem;
 					left: 0.1875rem;
 					right: 0.1875rem;
 					bottom: 0.1875rem;
-					border: 0.125rem solid @sapUiContentFocusColor;
+					border: 0.125rem solid var(--sapContent_FocusColor);
 					border-radius: 0.25rem;
 				}
-				.sapUiCalItemText:before {
+
+				.sapUiCalItemText::before {
 					border: none;
 				}
 
@@ -780,21 +797,24 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 				&.sapUiCalItemSelStart,
 				&.sapUiCalItemSelEnd,
 				&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
-					.sapUiCalItemText:after {
+
+					.sapUiCalItemText::after {
 						top: 0.3125rem;
 						left: 0.3125rem;
 						right: 0.3125rem;
 						bottom: 0.3125rem;
-						border: 0.125rem solid @sapUiContentFocusColor;
+						border: 0.125rem solid var(--sapContent_FocusColor);
 						border-radius: 0.25rem;
 					}
-					.sapUiCalItemText:before {
-						border: 0.063rem solid @sapUiListSelectionBorderColor;
+
+					.sapUiCalItemText::before {
+						border: 0.063rem solid var(--sapList_SelectionBorderColor);
 						border-radius: 0.1875rem;
 					}
+
 					.sapUiCalItemSecText {
 						padding-right: 1.25rem;
-    					padding-bottom: 1.15rem;
+						padding-bottom: 1.15rem;
 						text-align: right;
 					}
 
@@ -808,7 +828,7 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 	}
 }
 
-.sapUiCalItem.sapUiCalItemSel.sapUiCalItemNow:not(.sapUiCalItemSelBetween) > .sapUiCalItemText:before {
+.sapUiCalItem.sapUiCalItemSel.sapUiCalItemNow:not(.sapUiCalItemSelBetween) > .sapUiCalItemText::before {
 	top: 0.1875rem;
 	left: 0.1875rem;
 	right: 0.1875rem;
@@ -817,12 +837,16 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 }
 
 .sapUiSizeCozy {
+
 	.sapUiCalMonthSecType {
+
 		.sapUiCalItem {
+
 			&.sapUiCalItemSel,
 			&.sapUiCalItemNow:focus:not(.sapUiCalItemSelBetween),
 			&.sapUiCalItemSelBetween:not(.sapUiCalItemSel):not(.sapUiCalItemNow),
 			&.sapUiCalItemNow.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+
 				.sapUiCalSpecialDate {
 					width: 0.375rem;
 					height: 0.375rem;
@@ -833,32 +857,39 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 			}
 
 			&.sapUiCalItemNow {
+
 				&:focus {
+
 					&.sapUiCalItemSel,
 					&.sapUiCalItemSelStart,
 					&.sapUiCalItemSelEnd,
 					&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+
 						.sapUiCalSpecialDate {
 							bottom: 0.5rem;
 							left: 0.438rem;
 						}
 					}
 				}
+
 				&.sapUiCalItemSelBetween {
+
 					.sapUiCalItemText {
 						line-height: normal;
 						width: 100%;
 					}
-					.sapUiCalItemText:before {
+
+					.sapUiCalItemText::before {
 						top: 0.0625rem;
 						left: 0.0625rem;
 						right: 0.0625rem;
 						bottom: 0.0625rem;
-						border: 0.0625rem solid @sapUiListSelectionBorderColor;
+						border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 						border-radius: 0.1875rem;
 					}
-					.sapUiCalItemText:after {
-						border: 0.125rem solid @sapUiContentFocusColor;
+
+					.sapUiCalItemText::after {
+						border: 0.125rem solid var(--sapContent_FocusColor);
 						border-radius: 0.25rem;
 					}
 				}
@@ -868,28 +899,33 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 }
 
 .sapUiSizeCompact {
+
 	.sapUiCalItem {
+
 		&.sapUiCalItemNow:focus {
+
 			&.sapUiCalItemSelBetween,
 			&.sapUiCalItemSelBetween.sapUiCalItemSel {
-				.sapUiCalItemText:after {
+
+				.sapUiCalItemText::after {
 					top: 0.0625rem;
 					left: 0.0625rem;
 					right: 0.0625rem;
 					bottom: 0.0625rem;
-					border: 0.125rem solid @sapUiContentFocusColor;
+					border: 0.125rem solid var(--sapContent_FocusColor);
 					border-radius: 0.1875rem;
 				}
 			}
 		}
 	}
 }
+
 .sapUiCalNoNameLine .sapUiCalItem.sapUiCalItemSel:not(.sapUiCalItemSelBetween) > .sapUiCalDayName {
-	color: @sapUiContentSelectedTextColor
+	color: var(--sapContent_Selected_TextColor)
 }
 
 .sapUiCalItemSel.sapUiCalItemOtherMonth {
-	background-color: @sapUiSelected;
+	background-color: var(--sapSelectedColor);
 }
 
 .sapUiCalItemSel:not(.sapUiCalItemNow),
@@ -897,46 +933,40 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 .sapUiCalItemSelEnd:not(.sapUiCalItemNow),
 .sapUiCalItemSelBetween:not(.sapUiCalItemNow),
 .sapUiCalItemSelBetween.sapUiCalItemOtherMonth:not(.sapUiCalItemNow) {
-	background-color: @sapUiListSelectionBackgroundColor;
-	color: @sapTextColor;
+	background-color: var(--sapList_SelectionBackgroundColor);
+	color: var(--sapTextColor);
 
-	.sapUiCalItemText:before {
+	.sapUiCalItemText::before {
 		position: absolute;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border: 0.0625rem solid @sapUiListSelectionBorderColor;
-		content: "";
+		border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+		content: '';
 		border-radius: 0.5rem;
 	}
 }
 
 .sapUiCalItemSelBetween:not(.sapUiCalItemSel).sapUiCalItemNow,
 .sapUiCalItemSel.sapUiCalItemSelBetween.sapUiCalItemNow {
-	background-color: @sapUiListSelectionBackgroundColor;
-}
-
-html[data-sap-ui-browser^="ie"].sap-desktop .sapUiCalMonthPicker .sapUiCalItemSel:focus,
-html[data-sap-ui-browser^="ie"].sap-desktop .sapUiCalYearPicker .sapUiCalItemSel:focus {
-	/* as IE don't support outline-offset */
-	border-color: @sapUiContentContrastFocusColor;
+	background-color: var(--sapList_SelectionBackgroundColor);
 }
 
 html.sap-desktop .sapUiCalItemSelBetween:hover {
 	background-color: @sapUiListSelectionHoverBackground;
 }
 
-html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
-	background-color: @sapUiListSelectionBackgroundColor;
+html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover) {
+	background-color: var(--sapList_SelectionBackgroundColor);
 }
 
 .sapUiCalItemSel.sapUiCalItemNow:not(.sapUiCalItemSelBetween) > .sapUiCalItemText {
 	border-radius: 0.5rem;
 }
 
-.sapUiCalItemNow.sapUiCalItemSelBetween{
-	color: @sapUiBaseText;
+.sapUiCalItemNow.sapUiCalItemSelBetween {
+	color: var(--sapTextColor);
 }
 
 .sapUiCalContentOver{
@@ -944,7 +974,7 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 }
 
 /* Day names inside day */
-.sapUiCalItemNow > .sapUiCalItemText > .sapUiCalItemTextAmPm{
+.sapUiCalItemNow > .sapUiCalItemText > .sapUiCalItemTextAmPm {
 	line-height: 2.5rem;
 }
 
@@ -962,29 +992,36 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 }
 
 .sapUiCalMonthSecType .sapUiCalItem.sapUiCalItemSel:not(.sapUiCalItemSelBetween) > .sapUiCalItemSecText {
-	color: @sapUiContentSelectedTextColor;
+	color: var(--sapContent_Selected_TextColor);
 }
 
 .sapUiCalMonthSecType {
+
 	.sapUiCalItem {
+
 		.sapUiCalItemText {
 			text-align: left;
 			line-height: normal;
 			padding-top: 0.1875rem;
 			padding-left: 0.375rem;
 		}
+
 		.sapUiCalItemSecText {
 			padding-right: 0.3125rem;
 			text-align: right;
 		}
+
 		&.sapUiCalItemNow {
+
 			&:focus.sapUiCalItemSel,
 			&:focus.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+
 				.sapUiCalItemText {
 					line-height: normal;
 					padding-top: 0.3125rem;
 					padding-left: 0.4375rem;
 				}
+
 				.sapUiCalItemSecText {
 					padding-right: 0.4375rem;
 				}
@@ -1008,19 +1045,25 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 }
 
 .sapUiSizeCompact {
+
 	.sapUiCalContentOver{
 		bottom: 0.25rem;
 	}
+
 	/* Day names inside day */
 	.sapUiCalItemNow > .sapUiCalItemText > .sapUiCalItemTextAmPm {
 		line-height: 1.5rem;
 	}
+
 	.sapUiCalItemSelBetween .sapUiCalItemText,
 	.sapUiCalItemSel.sapUiCalItemSelBetween:not(.sapUiCalItemNow) > .sapUiCalItemText {
 		line-height: 1.75rem;
 	}
+
 	.sapUiCalMonthSecType {
+
 		.sapUiCalItem {
+
 			.sapUiCalItemText {
 				text-align: left;
 				line-height: normal;
@@ -1033,30 +1076,37 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 				text-align: right;
 			}
 
-			&.sapUiCalItemSelBetween > .sapUiCalItemText{
+			&.sapUiCalItemSelBetween > .sapUiCalItemText {
 				line-height: normal;
 			}
 
 			&.sapUiCalItemNow {
+
 				&:focus {
+
 					&.sapUiCalItemSelBetween,
 					&.sapUiCalItemSelBetween.sapUiCalItemSel,
 					&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
-						.sapUiCalItemText:after {
-							border: 0.125rem solid @sapUiContentFocusColor;
+
+						.sapUiCalItemText::after {
+							border: 0.125rem solid var(--sapContent_FocusColor);
 							border-radius: 0.25rem;
 						}
 					}
 
 					&.sapUiCalItemSel {
+
 						.sapUiCalItemText {
 							font-size: 0.75rem;
 						}
+
 						.sapUiCalSpecialDate {
 							bottom: 0.5rem;
 							left: 0.438rem;
 						}
+
 						&.sapUiCalItemSelBetween {
+
 							.sapUiCalItemText {
 								padding-top: 0.125rem;
 								padding-left: 0.1875rem;
@@ -1065,13 +1115,15 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 					}
 
 					&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+
 						.sapUiCalItemText {
 							padding-top: 0.0625rem;
 							padding-left: 0.1875rem;
 							line-height: normal;
-							font-size: @sapMFontSmallSize;
+							font-size: var(--sapFontSmallSize);
 						}
-						.sapUiCalItemText:after {
+
+						.sapUiCalItemText::after {
 							top: 0.0625rem;
 							left: 0.0625rem;
 							right: 0.0625rem;
@@ -1083,7 +1135,9 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 				.sapUiCalItemText {
 					line-height: normal;
 				}
+
 				&.sapUiCalItemSelBetween {
+
 					.sapUiCalItemText {
 						padding-top: 0.0625rem;
 						padding-left: 0.0625rem;
@@ -1095,6 +1149,7 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 				}
 
 				&.sapUiCalItemSel:not(.sapUiCalItemSelBetween){
+
 					.sapUiCalItemText {
 						line-height: normal;
 					}
@@ -1106,10 +1161,12 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 	.sapUiCalHead > button {
 		margin: 0.1875rem 0;
 		height: 2rem;
+
 		.sapUiIcon {
 			line-height: 2rem;
 		}
 	}
+
 	.sapUiCalItem.sapUiCalItemNow.sapUiCalItemSelBetween > .sapUiCalItemText {
 		width: 1.5rem;
 		height: 1.5rem;
@@ -1118,9 +1175,8 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 	}
 }
 
-@media only screen
-and (orientation: portrait)
-and (min-height: 380px) {
+@media only screen and (orientation: portrait) and (min-height: 380px) {
+
 	.sap-phone .sapUiCal[data-sap-ui-popup] > .sapUiCalCancel {
 		bottom: 1rem;
 		left: 25%;
@@ -1131,7 +1187,8 @@ and (min-height: 380px) {
 }
 
 .sapUiCalendarLandscape() {
-	.sap-phone .sapUiCal[data-sap-ui-popup]{
+
+	.sap-phone .sapUiCal[data-sap-ui-popup] {
 		overflow: auto;
 	}
 
@@ -1177,6 +1234,7 @@ and (min-height: 380px) {
 	}
 
 	.sap-phone .sapUiCal[data-sap-ui-popup] .sapUiCalContent {
+
 		.sapUiCalDatesRow,
 		.sapUiCalMonthView {
 			position: absolute;
@@ -1197,6 +1255,7 @@ and (min-height: 380px) {
 	}
 
 	.sap-phone .sapUiCal[data-sap-ui-popup] {
+
 		.sapUiCalDatesRow > div[role=row] > div,
 		.sapUiCalMonthView > div[role=row] > div {
 			height: 16.66%;
@@ -1231,43 +1290,45 @@ and (min-height: 380px) {
 		box-sizing: border-box;
 	}
 
-	.sap-phone .sapUiCal[data-sap-ui-popup].sapUiCalSecType  > .sapUiCalCancel {
+	.sap-phone .sapUiCal[data-sap-ui-popup].sapUiCalSecType > .sapUiCalCancel {
 		top: 1.5rem;
 		padding-top: 0.5rem;
 	}
 }
 
-@media only screen
-and (min-width : 320px)
-and (max-height: 379px) {
+@media only screen and (min-width : 320px) and (max-height: 379px) {
+
 	.sapUiCalendarLandscape();
 }
 
-@media only screen
-and (min-width : 320px)
-and (min-height: 380px)
-and (orientation: landscape) {
+@media only screen and (min-width : 320px) and (min-height: 380px) and (orientation: landscape) {
+
 	.sapUiCalendarLandscape();
 }
 
 /* colors for special days */
 .dayColorMixIn(@class, @color){
+
 	.@{class} > .sapUiCalSpecialDate {
 		background-color: @color;
 		border-bottom-left-radius: 0.5rem;
 		border-bottom-right-radius: 0.5rem;
 	}
+
 	.@{class}.sapUiCalItemNow > .sapUiCalSpecialDate {
 		box-sizing: border-box;
 		height: 0.3125rem;
-		border-bottom-left-radius: (@sapUiElementBorderCornerRadius / 2);
-		border-bottom-right-radius: (@sapUiElementBorderCornerRadius / 2);
+		border-bottom-left-radius: ~"calc(var(--sapElement_BorderCornerRadius) / 2)";
+		border-bottom-right-radius: ~"calc(var(--sapElement_BorderCornerRadius) / 2)";
 	}
+
 	.@{class}.sapUiCalItemSel.sapUiCalItemNow .sapUiCalItemText {
-		border-top-left-radius: (@sapUiElementBorderCornerRadius / 2);
-		border-top-right-radius: (@sapUiElementBorderCornerRadius / 2);
+		border-top-left-radius: ~"calc(var(--sapElement_BorderCornerRadius) / 2)";
+		border-top-right-radius: ~"calc(var(--sapElement_BorderCornerRadius) / 2)";
 	}
+
 	html.sap-desktop .sapUiCal:not(.sapUiCalDateInt) .sapUiCalItem:not(.sapUiCalItemSel) {
+
 		&.@{class} > .sapUiCalSpecialDate:hover {
 			background-color: @color;
 			border-bottom-right-radius: 0.25rem;
@@ -1275,6 +1336,7 @@ and (orientation: landscape) {
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
 		}
+
 		&.@{class}.sapUiCalItemNow > .sapUiCalSpecialDate:hover {
 			border-bottom-right-radius: 0.125rem;
 			border-bottom-left-radius: 0.125rem;
@@ -1283,12 +1345,14 @@ and (orientation: landscape) {
 }
 
 .sapUiCalTwoMonthsTwoColumnsJaZh {
+
 	.sapUiCalHead > button.sapUiCalHeadB2 {
 		margin-left: calc(~"25% - 6rem");
 	}
 }
 
 .sapUiCalTwoMonthsTwoColumns {
+
 	.sapUiCalHead > button.sapUiCalHeadB1 {
 		margin-left: calc(~"25% - 6rem");
 	}