@openui5/sap.m 1.134.0 → 1.135.0

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

@@ -3,15 +3,6 @@
 /* Base theme                   */
 /* ============================ */
 
-@_sap_m_Table_SelNavColWidth: 3rem;
-@_sap_m_Table_CustomFocusMargin: 1px;
-@sapUiElementLineHeightSticky13: @sapUiElementLineHeight * 2;
-@sapUiElementLineHeightSticky15: (@sapUiElementLineHeight * 2) + 2rem;
-@sapUiSizeCompactElementLineHeightSticky15: (@sapUiElementLineHeight * 2) + 1.2rem;
-@sapUiSizeCompactElementLineHeightSticky14: @sapUiElementLineHeight + 1.25rem;
-@sapUiSizeCompactElementLineHeightSticky13: @sapUiElementLineHeight + 1.95rem;
-@sapUiSizeCompactElementLineHeightSticky12: 2rem;
-
 .sapMListTbl {
 	width: 100%;
 	border-collapse: separate;
@@ -186,7 +177,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 
 .sapMListTblSelCol,
 .sapMListTblHasNav .sapMListTblNavCol {
-	width: @_sap_m_Table_SelNavColWidth;
+	width: 3rem;
 }
 
 .sapMLIB.sapMListTblRow {
@@ -277,7 +268,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 
 .sapMSticky13 .sapMGHLI {
 	z-index: 3;
-	top: @sapUiElementLineHeightSticky13;
+	top: ~"calc(var(--sapElement_LineHeight) * 2)";
 }
 
 /* busyIndicator should not block the toolbars if <table> is set busy */
@@ -287,44 +278,44 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 
 .sapMSticky15 .sapMGHLI {
 	z-index: 3;
-	top: @sapUiElementLineHeightSticky15;
+	top:  ~"calc(var(--sapElement_LineHeight) * 2 + 2rem)";
 }
 
 .sapUiSizeCompact {
 
 	& .sapMSticky12 .sapMGHLI {
-		top: @sapUiSizeCompactElementLineHeightSticky12;
+		top: 2rem;
 
 		/* only first child needs 1px more which prevents (tiny) double borders through stacking the following groupHeaders */
 		&:first-child {
-			top: @sapUiSizeCompactElementLineHeightSticky12 + 0.0625rem;
+			top: 2rem + 0.0625rem;
 		}
 	}
 
 	& .sapMSticky13 .sapMGHLI {
-		top: @sapUiSizeCompactElementLineHeightSticky13;
+		top:  ~"calc(var(--sapElement_LineHeight) + 1.95rem)";
 
 		/* only first child needs 2px more which prevents (tiny) double borders through stacking the following groupHeaders */
 		&:first-child {
-			top: @sapUiSizeCompactElementLineHeightSticky13 + 0.125rem;
+			top: ~"calc(var(--sapElement_LineHeight) + 1.95rem + 0.125rem )";
 		}
 	}
 
 	& .sapMSticky14 .sapMGHLI {
-		top: @sapUiSizeCompactElementLineHeightSticky14;
+		top:  ~"calc(var(--sapElement_LineHeight) + 1.25rem)";
 
 		/* only first child needs 1px more which prevents (tiny) double borders through stacking the following groupHeaders */
 		&:first-child {
-			top: @sapUiSizeCompactElementLineHeightSticky14 + 0.0625rem;
+			top: ~"calc(var(--sapElement_LineHeight) + 1.25rem + 0.0625rem)" ;
 		}
 	}
 
 	& .sapMSticky15 .sapMGHLI {
-		top: @sapUiSizeCompactElementLineHeightSticky15;
+		top: ~"calc(var(--sapElement_LineHeight) * 2 + 1.2rem)";
 
 		/* only first child needs 2px more which prevents (tiny) double borders through stacking the following groupHeaders */
 		&:first-child {
-			top: @sapUiSizeCompactElementLineHeightSticky15 + 0.125rem;
+			top:  ~"calc(var(--sapElement_LineHeight) * 2 + 1.2rem + 0.125rem)";
 		}
 	}
 }
@@ -515,7 +506,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 		bottom: 1px; /* mimics outline-offset: -1px */
 		border-top: @_sap_m_ListItemBase_Focus_Outline;
 		border-bottom: @_sap_m_ListItemBase_Focus_Outline;
-		margin-right: @_sap_m_Table_CustomFocusMargin; /* make the focus border clearly visible on all sides */
+		margin-right: 1px; /* make the focus border clearly visible on all sides */
 	}
 
 	.sapMListTblHasPopin > &:not(.sapMGHLI) > :not(.sapMListTblCellNoData, .sapMListTblDummyCell:last-child, .sapMListTblNavigatedCell)::before {
@@ -531,13 +522,13 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	& > .sapMTblFirstVisibleCell::before,
 	& + .sapMListTblSubRow > .sapMTblFirstVisibleCell::before {
 		border-left: @_sap_m_ListItemBase_Focus_Outline;
-		margin-left: @_sap_m_Table_CustomFocusMargin; /* mimics outline-offset */
+		margin-left: 1px; /* mimics outline-offset */
 	}
 
 	& > .sapMTblLastVisibleCell::before,
 	& + .sapMListTblSubRow > .sapMTblLastVisibleCell::before {
 		border-right: @_sap_m_ListItemBase_Focus_Outline;
-		margin-right: @_sap_m_Table_CustomFocusMargin; /* mimics outline-offset */
+		margin-right: 1px; /* mimics outline-offset */
 	}
 }
 

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

@@ -3,49 +3,43 @@
 /* Base theme                        */
 /* ================================= */
 
-/* ======================================== */
-/* TimePicker Input Field                   */
-/* ======================================== */
+/* TimePicker Input Field */
 
 .sapMInputBase.sapMTimePickerHiddenInput {
 	display: none;
 }
 
-/* ======================================== */
-/* TimePicker Dropdown                      */
-/* ======================================== */
+/* TimePicker Dropdown*/
 
 .sapMTimePickerDropDown {
 	overflow: hidden !important;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	box-shadow: @sapUiShadowLevel1 !important; //Need to override this with important because of popover stronger selectors
+	box-shadow: @sapUiShadowLevel1 !important; /* Need to override this with important because of popover stronger selectors */
+
+	.sapMTPClocksContainer .sapMSegB .sapMSegBBtn .sapMSegBBtnInner {
+		text-overflow: initial;
+	}
+
 }
 
-/* ======================================== */
-/* COMPACT MODE STYLES                      */
-/* ======================================== */
+/* COMPACT MODE STYLES */
 
 .sapUiSizeCompact {
 
-	/* ======================================== */
-	/* TimePicker Dropdown                      */
-	/* ======================================== */
-
+	/* TimePicker Dropdown */
 	.sapMTimePickerDropDown {
-		box-shadow: @sapUiShadowLevel1 !important; //Need to override this with important because of popover stronger selectors
+		box-shadow: @sapUiShadowLevel1 !important; /* Need to override this with important because of popover stronger selectors */
 	}
 }
 
 /* PHONE STYLES */
 html.sap-phone {
 
-	/* ======================================== */
-	/* TimePicker Dropdown                      */
-	/* ======================================== */
-
+	/* TimePicker Dropdown */
 	.sapMTimePickerDropDown {
+
 		/* This centers content in landscape & portrait mode */
 		.sapMDialogScrollCont {
 			height: 100%;
@@ -56,6 +50,6 @@ html.sap-phone {
 
 /* DESKTOP STYLES */
 html.sap-desktop .sapMValueStateHeaderRoot {
-	margin-right: -12px; // fixing a right margin set from popover
+	margin-right: -12px; /* fixing a right margin set from popover */
 	max-width: 100%;
 }

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

@@ -3,7 +3,7 @@
 /* Base theme                             */
 /* ====================================== */
 
-// clock dial related classes
+/* clock dial related classes */
 
 .sapMTPClock {
 	position: relative;
@@ -22,7 +22,7 @@
 	width: auto;
 	display: block;
 	border-radius: 100%;
-	background-color: @sapUiLegendWorkingBackground;
+	background-color: var(--sapLegend_WorkingBackground);
 	text-align: center;
 	z-index: 1;
 }
@@ -33,9 +33,9 @@
 	align-items: center;
 	justify-content: center;
 	position: absolute;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapMFontMediumSize;
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 	top: 2.75rem;
 	left: 2.75rem;
 	bottom: 2.75rem;
@@ -45,11 +45,11 @@
 }
 
 .sapMTPCInner .sapMTPCDial::before {
-	background-color: @sapUiLegendWorkingBackground;
+	background-color: var(--sapLegend_WorkingBackground);
 }
 
 .sapMTPCDial::after {
-	content: "";
+	content: '';
 	display: block;
 	padding-bottom: 100%;
 }
@@ -65,7 +65,7 @@
 	touch-action: none;
 }
 
-// units related classes
+/* units related classes */
 .sapMTPCMidDot {
 	display: block;
 	box-sizing: border-box;
@@ -73,7 +73,7 @@
 	height: 0.1875rem;
 	margin: 0 auto 0.375rem auto;
 	border-radius: 100%;
-	background-color: @sapUiFieldBorderColor;
+	background-color: var(--sapField_BorderColor);
 }
 
 .sapMTPCDot {
@@ -83,7 +83,7 @@
 	height: 0.3125rem;
 	margin: 0 auto 0.25rem auto;
 	border-radius: 100%;
-	background-color: @sapUiFieldBorderColor;
+	background-color: var(--sapField_BorderColor);
 }
 
 .sapMTPCMarker {
@@ -92,8 +92,8 @@
 	height: 0.5625rem;
 	margin: 0 auto;
 	border-radius: 100%;
-	background-color: @sapUiButtonSelectedBackground;
-	border: 0.0625rem solid @sapUiButtonSelectedBorderColor;
+	background-color: var(--sapButton_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 }
 
 .sapMTPCHoverMarker {
@@ -118,16 +118,14 @@
 	width: 2.75rem;
 	height: 100%;
 	z-index: 3;
-	-webkit-touch-callout: none; // iOS Safari
-	-webkit-user-select: none; // Safari
-	-khtml-user-select: none; // Konqueror HTML
-	-moz-user-select: none; // Old versions of Firefox
-	-ms-user-select: none; // Internet Explorer/Edge
-	user-select: none; // Chrome, Edge, Opera and Firefox
+	-webkit-touch-callout: none; /* iOS Safari */
+	-webkit-user-select: none; /* Safari */
+	user-select: none; /* Chrome, Edge, Opera and Firefox */
 
 	&.sapMTPCMarker {
 		z-index: 4;
 	}
+
 	&.sapMTPCHoverMarker {
 		z-index: 5;
 	}
@@ -142,13 +140,13 @@
 	line-height: 2.75rem;
 	text-align: center;
 	vertical-align: top;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size:@sapMFontMediumSize;
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	border: 0.0625rem solid transparent;
 
 	&.sapMTPCNumberHover:not(.sapMTPCSelected) {
-		background-color: @sapUiListHoverBackground;
+		background-color: var(--sapList_Hover_Background);
 	}
 }
 
@@ -158,9 +156,9 @@
 
 .sapMTPCSelected {
 	box-sizing: border-box;
-	color: @sapUiButtonSelectedTextColor;
-	background-color: @sapUiButtonSelectedBackground;
-	border: 0.0625rem solid @sapUiButtonSelectedBorderColor;
+	color: var(--sapButton_Selected_TextColor);
+	background-color: var(--sapButton_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 }
 
 .sapMTPCHovered {
@@ -169,10 +167,11 @@
 	border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 }
 
-// Degree related classes
+/* Degree related classes */
 .degreeMixIn(@class, @angle) {
 	.@{class} {
 		transform: translate(-50%) rotate(@angle);
+
 		.sapMTPCNumber {
 			transform: rotate(-@angle);
 		}
@@ -180,6 +179,7 @@
 
 	html[dir=rtl] .@{class} {
 		transform: translate(-50%) rotate(-@angle);
+
 		.sapMTPCNumber {
 			transform: rotate(@angle);
 		}
@@ -201,7 +201,6 @@
 		height: 2rem;
 		line-height: 2rem;
 	}
-
 }
 
 .degreeMixIn(sapMTPCDeg6, 6deg);
@@ -292,7 +291,6 @@
 	.sapMTPCMarker {
 		opacity: 0;
 	}
-
 }
 
 .sapMTPCFadeIn.sapMTPCFadeOut:not(.sapMTPCSkipAnimation) {
@@ -332,7 +330,6 @@
 		animation-timing-function: ease-out;
 		animation-fill-mode: forwards;
 	}
-
 }
 
 .sapMTPCFadeIn:not(.sapMTPCSkipAnimation) {
@@ -368,7 +365,6 @@
 		animation-timing-function: ease-in;
 		animation-fill-mode: forwards;
 	}
-
 }
 
 /* @keyframes */
@@ -384,7 +380,6 @@
 		opacity: 0;
 		display: block;
 	}
-
 }
 
 @keyframes fadeOutClockLabel {
@@ -400,7 +395,6 @@
 		display: flex;
 		transform: translateY(-16px);
 	}
-
 }
 
 @keyframes fadeOutSelectedItem {
@@ -414,7 +408,6 @@
 		opacity: 0;
 		display: block;
 	}
-
 }
 
 @keyframes fadeInClockItems {
@@ -428,7 +421,6 @@
 		opacity: 1;
 		display: block;
 	}
-
 }
 
 @keyframes fadeInClockLabel {
@@ -444,7 +436,6 @@
 		display: flex;
 		transform: translateY(0px);
 	}
-
 }
 
 @keyframes fadeInSelectedItem {
@@ -463,5 +454,4 @@
 		opacity: 1;
 		display: block;
 	}
-
-}
+}

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

@@ -27,17 +27,17 @@
 		margin-left: 0.75rem;
 	}
 
-	& .sapMSegBtn {
-		min-width: 5.625rem;
+	& .sapMSegB {
+		min-width: 5.375rem;
 	}
 
 	& > span {
 		min-width: 0.5rem;
 		padding: 0 0.125rem;
 		text-align: center;
-		font-family: @sapUiFontFamily;
+		font-family: var(--sapFontFamily);
 		font-size: @sapMFontMediumSize;
-		color: @sapUiBaseText;
+		color: var(--sapTextColor);
 	}
 }
 
@@ -73,5 +73,4 @@
 		width: 17rem;
 		height: 17rem;
 	}
-
 }

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

@@ -14,13 +14,12 @@
 		min-width: 0.5rem;
 		padding: 0 0.125rem;
 		text-align: center;
-		font-family: @sapUiFontFamily;
+		font-family: var(--sapFontFamily);
 		font-size: @sapMFontMediumSize;
-		color: @sapUiBaseText;
+		color: var(--sapTextColor);
 	}
-
 }
 
 .sapMTPNow {
 	margin-left: 0.5rem;
-}
+}