@openui5/themelib_sap_horizon 1.120.6 → 1.121.0

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

@@ -19,6 +19,21 @@
 	height: 2.875rem;
 }
 
+.sapUiSizeCompact .sapUiCalSecType {
+	.sapUiCal:not(.sapUiCalInt),
+	&.sapUiCal:not(.sapUiCalInt) {
+		min-width: 19rem;
+	}
+}
+
+.sapUiSizeCompact .sapUiCalMonthSecType {
+	.sapUiCalItem,
+	.sapUiCalWeekNum {
+		min-width: 2.25rem;
+		height: 2.25rem;
+	}
+}
+
 .sapUiCalWeekNum:hover {
 	background-color: @sapUiListHoverBackground;
 	border-radius: 0.5rem;
@@ -259,7 +274,6 @@ html.sap-desktop .sapUiCalItemWeekEnd:not(.sapUiCalItemSel):focus {
 html.sap-desktop .sapUiCalDatesRow .sapUiCalItemWeekEnd:not(.sapUiCalItemSel):hover,
 html.sap-desktop .sapUiCal:not(.sapUiCalDateInt) .sapUiCalItemWeekEnd:not(.sapUiCalItemSel) :not(.sapUiCalWeekNum):hover {
 	background-color: @sapUiListHoverBackground;
-	border-radius: 0.5rem;
 }
 
 html.sap-desktop .sapUiCalDatesRow .sapUiCalItemWeekEnd:not(.sapUiCalItemSel):hover {
@@ -272,7 +286,7 @@ html.sap-desktop .sapUiCalRow .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiC
 }
 
 .sapUiCalItemNow:not(.sapUiCalItemSel):not(.sapUiCalItemSelBetween) > .sapUiCalItemText {
-	box-shadow: inset 0.125rem -0.125rem 0 0 @_sap_ui_unified_Calendar_ItemBorderColor, inset -0.125rem 0.125rem 0 0 @_sap_ui_unified_Calendar_ItemBorderColor;
+	box-shadow: inset 0 0 0 0.1875rem @_sap_ui_unified_Calendar_ItemBorderColor;
 }
 
 html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetween):focus > .sapUiCalDayName {
@@ -305,11 +319,12 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 		outline: none;
 		&:after {
 			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
+			top: 0.3125rem;
+			left: 0.3125rem;
+			right: 0.3125rem;
+			bottom: 0.3125rem;
 			content: "";
+			border: 0.0625rem solid @sapUiContentFocusColor;
 			border-radius: 0.5rem;
 		}
 	}
@@ -318,7 +333,7 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 			position: relative;
 		}
 		&:not(.sapUiCalItemNow) {
-			.sapUiCalItemText:after {
+			.sapUiCalItemText:before {
 				position: absolute;
 				top: 0;
 				left: 0;
@@ -336,32 +351,37 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 		&:hover {
 			background: @sapUiListHoverBackground;
 		}
+		.sapUiCalSpecialDate,
+		&:focus:not(.sapUiCalItemSel) .sapUiCalSpecialDate {
+			width: 80%;
+			bottom: 0.1875rem;
+			left: 0.1875rem;
+		}
 		&.sapUiCalItemSel:not(.sapUiCalItemSelBetween),
 		&.sapUiCalItemSelStart:not(.sapUiCalItemSelBetween),
 		&.sapUiCalItemSelEnd:not(.sapUiCalItemSelBetween) {
 
-			.sapUiCalItemText:after {
+			.sapUiCalItemText:before {
 				position: absolute;
-				top: 0.3125rem;
-				left: 0.3125rem;
-				right: 0.3125rem;
-				bottom: 0.3125rem;
-				border: 0.0625rem solid @sapList_SelectionBorderColor;
+				top: 0.1875rem;
+				left: 0.1875rem;
+				right: 0.1875rem;
+				bottom: 0.1875rem;
+				border: 0.0625rem solid @sapUiListSelectionBorderColor;
 				content: "";
 				border-radius: 0.1875rem;
 			}
 		}
 		&.sapUiCalItemSel:not(:focus) {
 			.sapUiCalSpecialDate {
-				width: 76%;
-				left: 0.25rem;
-				right: 0.25rem;
-				bottom: 0.2rem;
+				width: 78%;
+				bottom: 0.1875rem;
+				left: 0.1875rem;
 			}
 		}
 		&.sapUiCalItemSelBetween {
 			line-height: normal;
-			& > .sapUiCalItemText {
+			.sapUiCalItemText {
 				border: 0.0625rem solid @sapUiListSelectionBorderColor;
 				border-radius: 0.3125rem;
 				margin: 0.125rem;
@@ -369,67 +389,30 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 				height: 2.375rem;
 				line-height: 2.375rem;
 			}
-			& > .sapUiCalSpecialDate {
-				width: 76%;
-				left: 0.2rem;
-				bottom: 0.2rem;
+			.sapUiCalSpecialDate {
+				width: 78%;
 			}
 		}
-		&:not(.sapUiCalItemSelBetween):not(.sapUiCalItemSel) {
-			&:focus {
-				& > .sapUiCalSpecialDate {
-					width: 63%;
+		&:focus {
+			&.sapUiCalItemSel,
+			&.sapUiCalItemSelBetween:not(.sapUiCalItemSel),
+			&:not(.sapUiCalItemSelBetween):not(.sapUiCalItemSel) {
+				.sapUiCalSpecialDate {
+					width: 66%;
 					left: 0.3125rem;
 					bottom: 0.3125rem;
+					height: 0.3125rem;
 				}
 			}
 		}
-		.sapUiCalSpecialDate {
-			width: 88%;
-			bottom: 0.125rem;
-			left: 0.125rem;
-		}
-		&:focus:not(.sapUiCalItemNow) .sapUiCalSpecialDate,
-		&.sapUiCalItemSel .sapUiCalSpecialDate {
-			bottom: 0.375rem;
-			width: 60%;
-			left: 0.3755rem;
-			right: 0.25rem;
-		}
-
-		&:focus .sapUiCalSpecialDate {
-			bottom: 0.45rem;
-			bottom: 0.375rem;
-			width: 63%;
-			left: 0.375rem;
-			right: 0.375rem;
-			height: 0.25rem;
-			height: 0.3125rem;
-		}
 
 		.sapUiCalItemText {
 			border: none;
 		}
 		&.sapUiCalItemSel {
 			box-shadow: inset 0 0 0 0.25rem @sapUiListBackground;
-			&:focus:not(.sapUiCalItemSelBetween) .sapUiCalSpecialDate {
-				bottom: 0.3rem;
-			}
-
-			&.sapUiCalItemSelBetween {
-				&:focus .sapUiCalSpecialDate {
-					bottom: 0.3125rem;
-				}
-			}
-			&.sapUiCalItemSelBetween:focus > .sapUiCalItemText:after {
-				top: 0;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				border-radius: 0.3125rem;
-			}
 		}
-		&:focus > .sapUiCalItemText:after {
+		&:focus > .sapUiCalItemText:before {
 			top: 0.1875rem;
 			left: 0.1875rem;
 			right: 0.1875rem;
@@ -445,7 +428,6 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 			bottom: 0;
 			border: 0.125rem solid @sapUiLegendCurrentDateTime;
 			border-radius: 0.5rem;
-			z-index: 1;
 			pointer-events: none;
 		}
 	}
@@ -471,17 +453,11 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 		}
 	}
 
-	&:focus .sapUiCalSpecialDate,
 	&.sapUiCalItemSel .sapUiCalSpecialDate {
 		bottom: 0.025rem;
 		left: 0.09375rem;
 		width: 90%;
 	}
-	&:focus:not(.sapUiCalItemSelBetween):not(.sapUiCalItemSel) .sapUiCalSpecialDate {
-		width: 93%;
-		left: 0.0625rem;
-		bottom: 0.0625rem;
-	}
 
 	.sapUiCalItemText {
 		border-radius: 0.5rem;
@@ -489,30 +465,14 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 }
 
 .sapUiSizeCozy {
-	.sapUiCalSecType {
-		.sapUiCalItem {
-			&.sapUiCalItemNow {
-				&:not(.sapUiCalItemSelBetween),
-				&.sapUiCalItemSelBetween {
-					&> .sapUiCalItemText {
-						line-height: 2rem;
-					}
-				}
-			}
-		}
-	}
 	.sapUiCalItem {
 		&:focus .sapUiCalSpecialDate,
-		&.sapUiCalItemSel .sapUiCalSpecialDate {
+		&.sapUiCalItemSel .sapUiCalSpecialDate,
+		&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) .sapUiCalSpecialDate {
 			width: 91%;
 		}
 
 		&.sapUiCalItemSelBetween {
-			&.sapUiCalItemNow {
-				.sapUiCalSpecialDate {
-					bottom: 0.3rem;
-				}
-			}
 			&:not(.sapUiCalItemSel):not(.sapUiCalItemNow) {
 				.sapUiCalSpecialDate {
 					width: 93%;
@@ -523,100 +483,52 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 			}
 		}
 		&.sapUiCalItemNow {
-			&.sapUiCalItemSel {
-				&:not(:focus) {
-					.sapUiCalSpecialDate {
-						width: 82%;
-					}
-				}
+			.sapUiCalSpecialDate,
+			&.sapUiCalItemSel .sapUiCalSpecialDate {
+				width: 82%;
 			}
+
 			&.sapUiCalItemSelBetween {
-				& > .sapUiCalItemText {
+				.sapUiCalItemText {
 					border: none;
 					margin: auto;
 					height: 100%;
 					line-height: 2.875rem;
 				}
-				& > .sapUiCalItemText:after {
+				.sapUiCalItemText:before {
 					content: "";
 					position: absolute;
-					border: 0.0625rem solid @sapList_SelectionBorderColor;
+					top: 0.0625rem;
+					left: 0.0625rem;
+					right: 0.0625rem;
+					bottom: 0.0625rem;
+					border: 0.0625rem solid @sapUiListSelectionBorderColor;
 					border-radius: 0.3125rem;
 					margin: 0.125rem;
 					line-height: 2.375rem;
-					left: 0.0625rem;
-					top: 0.0625rem;
-					bottom: 0.0625rem;
-					right: 0.0625rem;
-
-
-				}
-				&:focus > .sapUiCalItemText:after {
-					top: 0.05rem;
-					left: 0.05rem;
-					right: 0.05rem;
-					bottom: 0.05rem;
-				}
-				&.sapUiCalItemSel {
-					& > .sapUiCalItemText:after {
-						top: 0.0625rem;
-						left: 0.0625rem;
-						right: 0.0625rem;
-						bottom: 0.0625rem;
-					}
-					&:focus .sapUiCalSpecialDate {
-						bottom: 0.375rem;
-					}
 				}
-				& > .sapUiCalSpecialDate {
-					left: 0.25rem;
-					right: 0.25rem;
-					bottom: 0.25rem;
-					width: 76%;
-				}
-			}
-			&.sapUiCalItemSel.sapUiCalItemSelBetween:not(:focus) {
 				.sapUiCalSpecialDate {
-					bottom: 0.3125rem;
-					width: 63%;
-					left: 0.375rem;
-					right: 0.375rem;
-					height: 0.3125rem;
-
-					width: 78%;
-					bottom: 0.25rem;
 					left: 0.25rem;
 					right: 0.25rem;
+					width: 76%;
 				}
 			}
 			&:focus {
 				&:not(.sapUiCalItemSelBetween) {
-					& > .sapUiCalSpecialDate {
+					.sapUiCalSpecialDate {
 						bottom: 0.375rem;
 						width: 69%;
 						left: 0.3125rem;
 					}
 				}
-				& > .sapUiCalSpecialDate {
+				.sapUiCalSpecialDate,
+				&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) .sapUiCalSpecialDate{
 					bottom: 0.375rem;
 					width: 66%;
 					left: 0.375rem;
 				}
 			}
 		}
-		&.sapUiCalItemSel {
-			&:focus {
-				&.sapUiCalItemSelBetween:not(.sapUiCalItemNow) {
-					& > .sapUiCalItemText:after {
-						border-radius: 0.5rem;
-						top: 0;
-						bottom: 0;
-						left: 0;
-						right: 0;
-					}
-				}
-			}
-		}
 	}
 }
 
@@ -625,6 +537,17 @@ html.sap-desktop .sapUiCalItemSel:not(.sapUiCalItemNow):not(.sapUiCalItemSelBetw
 	color: @_sap_ui_unified_Calendar_ItemOtherMonthColor;
 }
 
+.sapUiCalMonthSecType {
+    .sapUiCalItemOtherMonth.sapUiCalItem {
+        &:not(.sapUiCalItemSelBetween),
+        &:not(.sapUiCalItemSel) {
+            .sapUiCalItemSecText {
+                color: @_sap_ui_unified_Calendar_ItemOtherMonthColor;
+            }
+        }
+    }
+}
+
 .sapUiCalItemOtherMonth.sapUiCalItemDsbl {
 	opacity: @sapUiContentDisabledOpacity;
 }
@@ -701,20 +624,11 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 		.sapUiCalSpecialDate {
 			width: 100%;
 			left: 0;
-			bottom: 0.025rem;;
+			bottom: 0.025rem;
 		}
 	}
-	& :not(.sapUiCalItemNow) .sapUiCalItemText:after {
-		content: "";
-		position: absolute;
-		top: 0.3125rem;
-		left: 0.3125rem;
-		right: 0.3125rem;
-		bottom: 0.3125rem;
-		border: 0.125rem solid @sapList_SelectionBorderColor;
-		border-radius: 0.1875rem;
-	}
 }
+
 .sapUiCalItem:focus {
 	&:not(.sapUiCalItemNow):not(.sapUiCalItemSel) .sapUiCalItemText:after {
 		position: absolute;
@@ -723,101 +637,141 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 		left: 0.3125rem;
 		right: 0.3125rem;
 		bottom: 0.3125rem;
-		border: 0.125rem solid @sapList_SelectionBorderColor;
+		border: 0.125rem solid @sapUiContentFocusColor;
 		border-radius: 0.1875rem;
 	}
 	&.sapUiCalItemNow,
 	&.sapUiCalItemSel,
 	&.sapUiCalItemSelStart,
 	&.sapUiCalItemSelEnd {
-		.sapUiCalItemText:before {
+		.sapUiCalItemText:after {
 			content: "";
 			position: absolute;
 			top: 0.3125rem;
 			left: 0.3125rem;
 			right: 0.3125rem;
 			bottom: 0.3125rem;
-			border: 0.125rem solid @sapList_SelectionBorderColor;
+			border: 0.125rem solid @sapUiContentFocusColor;
 			border-radius: 0.1875rem;
 		}
-
-	}
-	&.sapUiCalItemNow {
-		&.sapUiCalItemSelStart,
-		&.sapUiCalItemSelEnd {
-			.sapUiCalItemText:after {
-				position: absolute;
-				content: "";
-				top: 0.3125rem;
-				left: 0.3125rem;
-				right: 0.3125rem;
-				bottom: 0.3125rem;
-				border: 0.0625rem solid @sapList_SelectionBorderColor;
-				border-radius: 0.1875rem;
-			}
-		}
 	}
 }
+
 .sapUiCalMonthSecType {
 	.sapUiCalItem {
-		&:focus {
-			&.sapUiCalItemSel:not(.sapUiCalItemNow),
-			&.sapUiCalItemSelStart:not(.sapUiCalItemNow),
-			&.sapUiCalItemSelEnd:not(.sapUiCalItemNow) {
-				.sapUiCalItemText:before {
-					border: none;
-				}
+		border-radius: 0.375rem;
+
+		.sapUiCalItemSecText {
+			width: 60%;
+		}
+		.sapUiCalSpecialDate,
+		&.sapUiCalItemNow:not(:focus) .sapUiCalSpecialDate,
+		&.sapUiCalItemNow.sapUiCalItemSelBetween:focus .sapUiCalSpecialDate,
+		&.sapUiCalItemNow.sapUiCalItemSel:focus .sapUiCalSpecialDate,
+		&.sapUiCalItemSel .sapUiCalSpecialDate,
+		&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) .sapUiCalSpecialDate,
+		&:focus:not(.sapUiCalItemSel):not(.sapUiCalItemSelBetween) .sapUiCalSpecialDate {
+			width: 0.375rem;
+			height: 0.375rem;
+			bottom: 0.375rem;
+			left: 0.375rem;
+			border-radius: 50%;
+		}
+
+		&.sapUiCalItemSel,
+		&.sapUiCalItemSelStart,
+		&.sapUiCalItemSelEnd,
+		&:not(.sapUiCalItemNow):not(.sapUiCalItemSel),
+		&.sapUiCalItemSelBetween.sapUiCalItemOtherMonth:not(.sapUiCalItemNow) {
+			.sapUiCalItemText:before {
+				border-radius: 0.375rem;
 			}
-			&.sapUiCalItemSel {
-				.sapUiCalItemText:after {
-					border: 0.125rem solid @sapUiContentFocusColor;
-					border-width: 0.1875rem;
-				}
+		}
+
+		&.sapUiCalItemNow {
+			&:before,
+			.sapUiCalItemText {
+				border-radius: 0.375rem;
+			}
+			&.sapUiCalItemSel:not(.sapUiCalItemSelBetween),
+			&.sapUiCalItemSelStart:not(.sapUiCalItemSelBetween),
+			&.sapUiCalItemSelEnd:not(.sapUiCalItemSelBetween),
+			&.sapUiCalItemSelBetween.sapUiCalItemOtherMonth:not(.sapUiCalItemNow) {
 				.sapUiCalItemText:before {
-					border: none;
+					border-radius: 0.1875rem;
 				}
 			}
+		}
+		&:focus {
 			&:not(.sapUiCalItemNow):not(.sapUiCalItemSel) {
 				.sapUiCalItemText:after {
-					top: 0;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					border-radius: 0.5rem;
+					top: 0.0625rem;
+					left: 0.0625rem;
+					right: 0.0625rem;
+					bottom: 0.0625rem;
+					border: 0.125rem solid @sapUiContentFocusColor;
+					border-radius: 0.25rem;
 				}
 			}
-			&.sapUiCalItemNow:not(.sapUiCalItemSelBetween),
-			&.sapUiCalItemNow{
-				.sapUiCalSpecialDate {
-					width: 75%;
-					left: 0.25rem;
-					right: 0.25rem;
-					bottom: 0.25rem;
+			&.sapUiCalItemSel,
+			&.sapUiCalItemSelStart,
+			&.sapUiCalItemSelEnd,
+			&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+				.sapUiCalItemText:after {
+					top: 0.125rem;
+					left: 0.125rem;
+					right: 0.125rem;
+					bottom: 0.125rem;
+					border: 0.125rem solid @sapUiContentFocusColor;
+					border-radius: 0.25rem;
 				}
 			}
-		}
-		&.sapUiCalItemNow {
-			&:not(.sapUiCalItemSelBetween),
-			&.sapUiCalItemSelBetween,
 			&.sapUiCalItemNow {
-				&> .sapUiCalItemText {
-					line-height: 2.125rem;
+				.sapUiCalItemText:after {
+					top: 0.1875rem;
+					left: 0.1875rem;
+					right: 0.1875rem;
+					bottom: 0.1875rem;
+					border: 0.125rem solid @sapUiContentFocusColor;
+					border-radius: 0.25rem;
+				}
+				.sapUiCalItemText:before {
+					border: none;
 				}
-			}
-		}
-	}
 
-	.sapUiCalItemSelStart:not(.sapUiCalItemNow),
-	.sapUiCalItemSelEnd:not(.sapUiCalItemNow),
-	.sapUiCalItemSelBetween:focus:not(.sapUiCalItemNow),
-	.sapUiCalItemSelBetween.sapUiCalItemOtherMonth:not(.sapUiCalItemNow) {
-		.sapUiCalItemText:after {
-			border-width: 0.125rem;
+				&.sapUiCalItemSel,
+				&.sapUiCalItemSelStart,
+				&.sapUiCalItemSelEnd,
+				&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+					.sapUiCalItemText:after {
+						top: 0.3125rem;
+						left: 0.3125rem;
+						right: 0.3125rem;
+						bottom: 0.3125rem;
+						border: 0.125rem solid @sapUiContentFocusColor;
+						border-radius: 0.25rem;
+					}
+					.sapUiCalItemText:before {
+						border: 0.063rem solid @sapUiListSelectionBorderColor;
+						border-radius: 0.1875rem;
+					}
+					.sapUiCalItemSecText {
+						padding-right: 1.25rem;
+    					padding-bottom: 1.15rem;
+						text-align: right;
+					}
+
+					.sapUiCalSpecialDate {
+						bottom: 0.5rem;
+						left: 0.438rem;
+					}
+				}
+			}
 		}
 	}
 }
 
-.sapUiCalItem.sapUiCalItemSel.sapUiCalItemNow:not(.sapUiCalItemSelBetween) > .sapUiCalItemText:after {
+.sapUiCalItem.sapUiCalItemSel.sapUiCalItemNow:not(.sapUiCalItemSelBetween) > .sapUiCalItemText:before {
 	top: 0.1875rem;
 	left: 0.1875rem;
 	right: 0.1875rem;
@@ -825,26 +779,74 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 	border-radius: 0.3125rem;
 }
 
-.sapUiSizeCompact {
-	.sapUiCalItem.sapUiCalItemSel.sapUiCalItemNow.sapUiCalItemSelBetween:focus .sapUiCalItemText:before {
-		top: 0.0625rem;
-		left: 0.0625rem;
-		right: 0.0625rem;
-		bottom: 0.0625rem;
+.sapUiSizeCozy {
+	.sapUiCalMonthSecType {
+		.sapUiCalItem {
+			&.sapUiCalItemSel,
+			&.sapUiCalItemNow:focus:not(.sapUiCalItemSelBetween),
+			&.sapUiCalItemSelBetween:not(.sapUiCalItemSel):not(.sapUiCalItemNow),
+			&.sapUiCalItemNow.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+				.sapUiCalSpecialDate {
+					width: 0.375rem;
+					height: 0.375rem;
+					bottom: 0.375rem;
+					left: 0.375rem;
+					border-radius: 50%;
+				}
+			}
+
+			&.sapUiCalItemNow {
+				&:focus {
+					&.sapUiCalItemSel,
+					&.sapUiCalItemSelStart,
+					&.sapUiCalItemSelEnd,
+					&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+						.sapUiCalSpecialDate {
+							bottom: 0.5rem;
+							left: 0.438rem;
+						}
+					}
+				}
+				&.sapUiCalItemSelBetween {
+					.sapUiCalItemText {
+						line-height: normal;
+						width: 100%;
+					}
+					.sapUiCalItemText:before {
+						top: 0.0625rem;
+						left: 0.0625rem;
+						right: 0.0625rem;
+						bottom: 0.0625rem;
+						border: 0.0625rem solid @sapUiListSelectionBorderColor;
+						border-radius: 0.1875rem;
+					}
+					.sapUiCalItemText:after {
+						border: 0.125rem solid @sapUiContentFocusColor;
+						border-radius: 0.25rem;
+					}
+				}
+			}
+		}
 	}
+}
+
+.sapUiSizeCompact {
 	.sapUiCalItem {
-		&.sapUiCalItemSel.sapUiCalItemNow.sapUiCalItemSelBetween {
-			&:focus > .sapUiCalItemText {
-				&:before {
-					border-radius: 0.25rem;
-					border-width: 0.125rem;
+		&.sapUiCalItemNow:focus {
+			&.sapUiCalItemSelBetween,
+			&.sapUiCalItemSelBetween.sapUiCalItemSel {
+				.sapUiCalItemText:after {
+					top: 0.0625rem;
+					left: 0.0625rem;
+					right: 0.0625rem;
+					bottom: 0.0625rem;
+					border: 0.125rem solid @sapUiContentFocusColor;
+					border-radius: 0.1875rem;
 				}
 			}
 		}
 	}
-
 }
-
 .sapUiCalNoNameLine .sapUiCalItem.sapUiCalItemSel:not(.sapUiCalItemSelBetween) > .sapUiCalDayName {
 	color: @sapUiContentSelectedTextColor
 }
@@ -853,7 +855,6 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 	background-color: @sapUiSelected;
 }
 
-//Add a rule for the edgeCase selected?
 .sapUiCalItemSel:not(.sapUiCalItemNow),
 .sapUiCalItemSelStart:not(.sapUiCalItemNow),
 .sapUiCalItemSelEnd:not(.sapUiCalItemNow),
@@ -862,7 +863,7 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 	background-color: @sapUiListSelectionBackgroundColor;
 	color: @sapTextColor;
 
-	.sapUiCalItemText:after {
+	.sapUiCalItemText:before {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -874,10 +875,9 @@ html.sap-desktop .sapUiCalItemOtherMonth:not(.sapUiCalItemSel) :not(.sapUiCalWee
 	}
 }
 
-.sapUiCalItemSel,
-html.sap-desktop .sapUiCalItemSel:hover,
-html.sap-desktop .sapUiCalItemSel:focus {
-	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,
@@ -912,18 +912,50 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 }
 
 /* 2 calendar types */
-.sapUiCalMonthSecType .sapUiCalItem.sapUiCalItemNow:not(.sapUiCalItemSelBetween)  > .sapUiCalItemText{
-	line-height: 1.875rem;
+.sapUiSizeCozy .sapUiCalMonthSecType .sapUiCalItem:not(.sapUiCalItemNow) .sapUiCalItemSecText {
+	line-height: 0.75rem;
 }
 
 .sapUiCalItemNow:not(.sapUiCalItemSelBetween) > .sapUiCalItemText {
 	line-height: 2.9rem;
 }
 
+.sapUiCalMonthSecType .sapUiCalItemNow:not(.sapUiCalItemSelBetween) > .sapUiCalItemText {
+	line-height: normal;
+}
+
 .sapUiCalMonthSecType .sapUiCalItem.sapUiCalItemSel:not(.sapUiCalItemSelBetween) > .sapUiCalItemSecText {
 	color: @sapUiContentSelectedTextColor;
 }
 
+.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;
+				}
+			}
+		}
+	}
+}
+
 .sapUiCalNoNameLine .sapUiCalItem > .sapUiCalItemText {
 	padding-top: 0.75rem;
 }
@@ -931,7 +963,7 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 /*** compact mode (desktop size) ***/
 
 .sapUiSizeCompact .sapUiCalItemNow:not(.sapUiCalItemSelBetween) > .sapUiCalItemText {
-	line-height: 1.95rem;
+	line-height: 1.925rem;
 }
 
 .sapUiCalHead > button {
@@ -950,16 +982,90 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 	.sapUiCalItemSel.sapUiCalItemSelBetween:not(.sapUiCalItemNow) > .sapUiCalItemText {
 		line-height: 1.75rem;
 	}
-	.sapUiCalMonthSecType .sapUiCalItemSel.sapUiCalItemSelBetween .sapUiCalItemText,
-	.sapUiCalMonthSecType .sapUiCalItemSel.sapUiCalItemSelBetween:not(.sapUiCalItemNow) > .sapUiCalItemText {
-		line-height: 1rem;
-	}
-	.sapUiCalMonthSecType .sapUiCalItem.sapUiCalItemNow.sapUiCalItemSel > .sapUiCalItemText {
-		line-height: 1.25rem;
-	}
-	.sapUiCalMonthSecType .sapUiCalItem.sapUiCalItemNow  > .sapUiCalItemText{
-		line-height: 1.25rem;
+	.sapUiCalMonthSecType {
+		.sapUiCalItem {
+			.sapUiCalItemText {
+				text-align: left;
+				line-height: normal;
+				padding-top: 0.1875rem;
+				padding-left: 0.3125rem;
+			}
+
+			.sapUiCalItemSecText {
+				padding-right: 0.3125rem;
+				text-align: right;
+			}
+
+			&.sapUiCalItemSelBetween > .sapUiCalItemText{
+				line-height: normal;
+			}
+
+			&.sapUiCalItemNow {
+				&:focus {
+					&.sapUiCalItemSelBetween,
+					&.sapUiCalItemSelBetween.sapUiCalItemSel,
+					&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+						.sapUiCalItemText:after {
+							border: 0.125rem solid @sapUiContentFocusColor;
+							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;
+							}
+						}
+					}
+
+					&.sapUiCalItemSelBetween:not(.sapUiCalItemSel) {
+						.sapUiCalItemText {
+							padding-top: 0.0625rem;
+							padding-left: 0.1875rem;
+							line-height: normal;
+							font-size: @sapMFontSmallSize;
+						}
+						.sapUiCalItemText:after {
+							top: 0.0625rem;
+							left: 0.0625rem;
+							right: 0.0625rem;
+							bottom: 0.0625rem;
+						}
+					}
+				}
+
+				.sapUiCalItemText {
+					line-height: normal;
+				}
+				&.sapUiCalItemSelBetween {
+					.sapUiCalItemText {
+						padding-top: 0.0625rem;
+						padding-left: 0.0625rem;
+						line-height: 0.75rem;
+						width: 1.75rem;
+						height: 1.75rem;
+						border-radius: 0.1875rem;
+					}
+				}
+
+				&.sapUiCalItemSel:not(.sapUiCalItemSelBetween){
+					.sapUiCalItemText {
+						line-height: normal;
+					}
+				}
+			}
+		}
 	}
+
 	.sapUiCalHead > button {
 		margin: 0.1875rem 0;
 		height: 2rem;
@@ -973,22 +1079,6 @@ html.sap-desktop .sapUiCalItemSelBetween:focus:not(:hover){
 		top: 0.0625rem;
 		line-height: 1.4375rem;
 	}
-
-	.sapUiCalMonthSecType {
-		.sapUiCalItem.sapUiCalItemNow.sapUiCalItemSelBetween {
-			& > .sapUiCalItemText {
-				line-height: 0.75rem;
-			}
-			&:focus {
-				& > .sapUiCalItemText  {
-					&:before {
-						border: none;
-					}
-					border: none;
-				}
-			}
-		}
-	}
 }
 
 @media only screen