@openui5/sap.m 1.101.0 → 1.103.0

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

@@ -22,6 +22,7 @@
 	position: relative;
 	background-repeat: no-repeat;
 	z-index: 1;
+	min-width: 4rem;
 }
 
 .sapUiLocalBusy .sapMSliderInner {
@@ -30,7 +31,8 @@
 
 .sapMSliderInner,
 .sapMSliderProgress {
-	height: 0.188rem;
+	height: 0.25rem;
+	border-radius: 0.25rem;
 }
 
 .sapMSliderProgress,
@@ -39,6 +41,7 @@
 }
 
 .sapMSliderHandle {
+	box-sizing: border-box;
 	display: block;
 	outline: none;
 }
@@ -113,10 +116,11 @@
 /* slider handle */
 .sapMSliderHandle {
 	margin-left: -1rem;
-	top: -0.91rem;
-	height: 1.75rem;
-	width: 1.75rem;
+	top: -0.875rem;
+	height: 2rem;
+	width: 2rem;
 	direction: ltr;
+	cursor: pointer;
 
 	/* some browsers like Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property
 	but does support the long-hand properties for each corner like "border-top-left-radius" */
@@ -125,23 +129,19 @@
 	border-bottom-right-radius: 1rem;
 	border-bottom-left-radius: 1rem;
 
-	&:before{
+	&:focus:before {
 		content: '';
 		position: absolute;
-		width: 100%;
-		left: 50%;
-		top: 40%;
-		transform: translate(-50%, -50%);
-		cursor: pointer;
+		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border-radius: 50%;
+		pointer-events: none;
+		top: -4px;
+		bottom: -4px;
+		left: -4px;
+		right: -4px;
 	}
 }
 
-/* focus */
-html.sap-desktop .sapMSliderHandle:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-	outline-offset: 0.0625rem;
-}
-
 /* ============ */
 /* compact size */
 /* ============ */
@@ -156,8 +156,8 @@ html.sap-desktop .sapMSliderHandle:focus {
 
 	/* slider handle */
 	.sapMSliderHandle {
-		height: 1.375rem;
-		width: 1.375rem;
+		height: 1.625rem;
+		width: 1.625rem;
 		margin-left: -0.8125rem;
 		top: -0.75rem;
 	}

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

@@ -57,11 +57,6 @@
 	padding-bottom: 0.125rem;
 }
 
-/* flex does not work in IE11 as expected, hence adding width 100% when only title is displayed */
-.sapMSLIDiv:not(.sapMSLIInfoMiddle) > .sapMSLITitleOnly {
-	width: 100%;
-}
-
 .sapMSLITitle,
 .sapMSLITitleOnly {
 	font-size: @sapMFontLargeSize;
@@ -74,7 +69,7 @@
 	color: @sapUiContentLabelColor;
 }
 
-.sapMSLIWithDescription > .sapMLIBContent > .sapMSLIDiv > .sapMSLIDescription {
+.sapMSLIWithDescription .sapMSLIDescription {
 	padding-top: 0.5rem;
 }
 
@@ -124,6 +119,7 @@
 	text-align: right;
 	margin: 0 0 0 1rem;
 	font-size: @sapMFontMediumSize;
+	min-width: 2rem;
 }
 
 .sapMSLIWrapping .sapMSLIInfo {
@@ -145,7 +141,7 @@ html[dir=rtl] .sapMSLIInfo {
 }
 
 .sapMSLIInfoNone {
-	color: @sapUiNeutralText;
+	color: @sapUiContentLabelColor;
 }
 
 .sapMSLIInfoError {
@@ -178,6 +174,7 @@ html[dir=rtl] .sapMSLIInfo {
 .sapMSLIInfo.sapMSLIInfoStateInverted {
 	padding: 0.0625rem 0.25rem;
 	text-align: center;
+	text-shadow: @sapContent_ContrastTextShadow;
 }
 
 .sapMSLIInfoStateInverted.sapMSLIInfoNone {
@@ -237,7 +234,7 @@ html[dir=rtl] .sapMSLIInfo {
 .sapMSLIWrapping.sapMSLINoIconInset > .sapMLIBContent > .sapMSLIImgNoInsetIcon,
 .sapMSLIWrapping.sapMSLINoIconInset > .sapMLIBContent > .sapMSLIImgNoInset,
 .sapMSLIWrapping > .sapMLIBContent > .sapMSLIImg {
-	margin-top: 0.75rem;
+	margin-top: 0.725rem;
 }
 
 .sapMSLIWrapping > .sapMLIBContent > .sapMSLIDiv {
@@ -319,5 +316,5 @@ html[dir=rtl] .sapMSLIInfo {
 .sapUiSizeCompact .sapMSLI.sapMSLIWithDescription > .sapMLIBSelectS,
 .sapUiSizeCompact .sapMSLI.sapMSLIWithDescription > .sapMLIBSelectM,
 .sapUiSizeCompact .sapMSLI.sapMSLIWrapping > .sapMLIBContent > .sapMSLIImgIcon {
-	margin-top: 0.5rem;
+	margin-top: 0.725rem;
 }

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

@@ -74,6 +74,13 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	display: none;
 }
 
+.sapMListTblCell {
+	padding: .25rem .5rem;
+	font-size: @sapUiListTableTextSize;
+	overflow: hidden;
+	overflow: clip;
+}
+
 .sapMListTblSelCol,
 .sapMListTblCell,
 .sapMListTblNavCol {
@@ -162,13 +169,6 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	font-size: @sapUiListTableIconSize;
 }
 
-.sapMListTblCell {
-	padding: .875rem .5rem;
-	font-size: @sapUiListTableTextSize;
-	overflow: hidden;
-	overflow: clip;
-}
-
 /* Ensuring that the row height is not smaller that 3rem in Cozy mode */
 .sapMListTblRow {
 	height: @sapUiElementLineHeight;
@@ -276,6 +276,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 .sapMListTblDummyCell:last-child {
 	background-color: @sapBackgroundColor;
 	border-left: 1px solid @sapList_TableFooterBorder;
+	border-bottom: none;
 }
 
 :not(.sapMListHasGrowing):not(.sapMListShowSeparatorsInner):not(.sapMListShowSeparatorsNone) > .sapMTableTBody .sapMListTblRow:last-child > .sapMListTblDummyCell:last-child {
@@ -439,27 +440,27 @@ html[data-sap-ui-browser^='ff'] .sapMTableRowCustomFocus:focus > :not(.sapMListT
 	margin-right: 0; // firefox seems fine with rendering borders clearly without additional margin
 }
 
-/********** COMPACT DESIGN ************/
-
-/* overwite cell style */
-.sapUiSizeCompact .sapMListTblCell {
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
+.sapMTablePopinHeaders {
+	display: none;
 }
 
+/********** COMPACT DESIGN ************/
+
 .sapUiSizeCompact .sapMListTblCell.sapMListTblCellNoData {
 	font-size: @sapUiListTableTextSize;
 }
 
 /* overwrite text control styles */
-.sapUiSizeCompact .sapMListTblCell > .sapMLnk,
-.sapUiSizeCompact .sapMListTblCell > .sapMText,
-.sapUiSizeCompact .sapMListTblCell > .sapMLabel,
-.sapUiSizeCompact .sapMListTblCell > .sapMObjectNumber,
-.sapUiSizeCompact .sapMListTblCell > .sapMObjectIdentifier,
-.sapUiSizeCompact .sapMListTblCell > .sapMObjStatus {
-	vertical-align: middle;
-	line-height: 1.4;
+.sapUiSizeCompact .sapMListTblCell {
+	.sapMLnk,
+	.sapMText,
+	.sapMLabel,
+	.sapMObjectNumber,
+	.sapMObjectIdentifier,
+	.sapMObjStatus {
+		vertical-align: middle;
+		line-height: 1.4;
+	}
 }
 
 /* special class name to add margin to multiline contents */

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

@@ -159,4 +159,9 @@ html.sap-desktop:not(.sapUiNativeScrollbars) .sapMTextArea {
 		background: @sapUiFieldSuccessBackgroundStyle;
 		background-color: @sapUiScrollBarTrackColor;
 	}
+
+	.sapMInputBaseReadonlyWrapper ::-webkit-scrollbar {
+		background: @sapField_ReadOnly_BackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
 }

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

@@ -152,6 +152,13 @@
 			transform: rotate(-@angle);
 		}
 	}
+
+	html[dir=rtl] .@{class} {
+		transform: translate(-50%) rotate(-@angle);
+		.sapMTPCNumber {
+			transform: rotate(@angle);
+		}
+	}
 }
 
 .sapMTPNow {

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

@@ -43,7 +43,7 @@
 }
 
 .sapMTB-Transparent-CTX > .sapMTitleTB.sapMTitleStyleAuto {
-	font-size: @sapMFontHeader4Size;
+	font-size: @sapUiGroupTitleFontSize;
 }
 
 /* Level H1 */

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

@@ -11,6 +11,7 @@
 
 .sapMToken {
 	display: inline-block;
+	position: relative;
 	overflow: hidden;
 	box-sizing: border-box;
 	font-size: @sapMFontMediumSize;
@@ -31,7 +32,7 @@
 	color: @sapUiContentForegroundTextColor;
 }
 
-html.sap-desktop .sapMToken:hover {
+html.sap-desktop .sapMToken:not(.sapMTokenReadOnly):hover {
 	background: @sapUiButtonHoverBackground;
 	border: @sapUiButtonBorderWidth solid @sapUiButtonHoverBorderColor;
 }
@@ -99,7 +100,7 @@ html.sap-desktop .sapMToken:hover {
 	line-height: 1.1875rem;
 }
 
-html.sap-desktop .sapMToken.sapMTokenSelected:hover {
+html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
 	background: @sapUiToggleButtonPressedHoverBackground;
 	border: 1px solid @sapUiToggleButtonPressedHoverBorderColor;
 }

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

@@ -157,6 +157,6 @@
 	min-width: 2rem;
 }
 
-.sapFDynamicPageTitleContent-CTX .sapMTB {
+.sapFDynamicPageTitleContent-CTX .sapMTB.sapMTBStandard {
 	border-bottom: none;
 }

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

@@ -416,10 +416,12 @@
 
 .sapUiSizeCompact .sapMUCItem .sapMLIBSelectM {
 	padding-left: 0.3rem;
+	width: 2.75rem;
 }
 
 .sapUiSizeCozy .sapMUCItem .sapMLIBSelectM {
 	padding-left: 0;
+	width: 2.75rem;
 }
 
 /* Item Icon */

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

@@ -0,0 +1,97 @@
+/* ============================================== */
+/* CSS for control sap.m/VariantManagement    */
+/* Base theme                                     */
+/* ============================================== */
+
+.sapMVarMngmt {
+	display: inline-block;
+	text-align: center;
+}
+
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:first-child {
+   vertical-align: middle;  
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:first-child>div {
+   vertical-align: middle;  
+}
+
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:nth-child(2) {
+   vertical-align: top;  
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:nth-child(2)>span {
+   vertical-align: top;  
+}
+
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:last-child {
+   vertical-align: middle;
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:last-child>button {
+   vertical-align: middle;
+}
+
+.sapMVarMngmt .sapMTitle.sapMVarMngmtTitle  {
+    color: @sapUiLink;	
+}
+
+.sapMVarMngmtModified {
+	color: @sapUiLink;
+	font-weight: bold;
+	padding-left: 0.125rem;
+	padding-right: 0.125rem;	
+}
+
+.sapMVarMngmtErrorPopover>div {
+	padding-top: 1rem;
+}
+
+.sapMVarMngmtErrorPopover>div:last-child {
+	padding-left: 4rem;
+	padding-right: 4rem;
+}
+
+.sapMVarMngmt .sapMVarMngmtTextPhoneMaxWidth {
+	max-width: 5em;
+}
+
+.sapMVarMngmt .sapMVarMngmtTextMaxWidth {
+	max-width: 25rem;
+}
+
+.sapMVarMngmt .sapMVarMngmtClickable:hover {
+	color: @sapUiLinkHoverColor;
+	cursor: default;	
+}
+
+.sapMVarMngmt .sapMVarMngmtClickable:active {
+	color: @sapUiLinkActiveColor;
+	cursor: pointer;	
+}
+
+.sapMVarMngmt .sapMVarMngmtDisabled {
+	opacity: 0.5;
+}
+
+.sapMVarMngmtPopover .sapMSelectList {
+	border: 0rem solid;
+}
+
+.sapMVarMngmtFavColor {
+	color: @sapUiContentMarkerIconColor;
+}
+
+.sapMVarMngmtFavNonInteractiveColor {
+	color: @sapUiContentNonInteractiveIconColor;
+}
+
+.sapMVarMngmtSaveDialog  .sapUiRespGrid.sapUiRespGridVSpace1 > div {
+	margin-bottom: 0rem;
+	margin: 0rem;
+ }
+
+.sapMVarMngmtSaveDialog .sapMVarMngmtSaveDialogLabel.sapMLabel::after {
+	content: ":";
+}
+
+.sapMVarMngmtRolesEdit {
+	padding-left: 0.5rem;
+}

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

@@ -30,10 +30,6 @@
 		display: block;
 	}
 
-	.sapMWizardLastActivatedStep {
-		min-height: 100%;
-	}
-
 	&.sapMWizardModeScroll .sapMWizardStepTitle::before {
 		counter-increment: steps-counter;
 		content: counter(steps-counter) ". ";
@@ -46,6 +42,7 @@
 	}
 
 	.sapMWizardNextButtonVisible {
+		margin-top: 0.5rem;
 		bottom: 0rem;
 		opacity: 1;
 		animation-name: showWizardButton
@@ -73,6 +70,10 @@
 	}
 }
 
+.sapMWizard:not(.sapMWizardModePage) .sapMWizardLastActivatedStep {
+	min-height: 100%;
+}
+
 html[data-sap-ui-animation='on'] .sapMWizardNextButtonVisible,
 html[data-sap-ui-animation='on'] .sapMWizardNextButtonVisible {
 	animation-timing-function: linear;

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

@@ -44,6 +44,10 @@
 	text-decoration: none;
 }
 
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="true"] .sapMWizardProgressNavStepContainer {
+	max-width: 100%;
+}
+
 .sapMWizardProgressNavStep {
 	display: table-cell;
 	position: relative;
@@ -214,6 +218,10 @@ html.sap-phone .sapMWizardProgressNav {
 		background: @sapUiSelected;
 		color: @sapUiContentContrastIconColor;
 	}
+
+	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepIcon {
+		cursor: default;
+	}
 }
 
 

package/src/sap/m/themes/base/library.source.less

@@ -174,6 +174,7 @@
 @import "UploadCollection.less";
 @import "UploadSet.less";
 @import "ValueStateMessage.less";
+@import "VariantManagement.less";
 @import "ViewSettingsDialog.less";
 @import "WheelSlider.less";
 @import "WheelSliderContainer.less";

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

@@ -3,6 +3,9 @@
 /* High Contrast Black theme       */
 /* =============================== */
 
+@_sap_m_Carousel_FocusBorderOffsetArrow: -0.25rem;
+@_sap_m_Carousel_ContrastFocusBorder: @sapUiContentFocusWidth solid @sapUiBaseBG;
+
 /* Carousel controls: Bulleted */
 .sapMCrslBulleted > span {
 	border: 1px solid @sapUiContentForegroundBorderColor;
@@ -33,11 +36,4 @@
 .sapMCrslControls .sapMCrslPrev,
 .sapMCrslControls .sapMCrslNext {
 	border: 2px solid @sapUiButtonBorderColor;
-}
-
-.sapMCrslPrev:focus, .sapMCrslNext:focus {
-	outline: 0.125rem dotted @sapUiContentFocusColor;
-}
-.sapMCrslHud a:focus {
-	outline: 0.125rem dotted @sapUiContentFocusColor;
 }

package/src/sap/m/themes/sap_hcb/Panel.less

@@ -13,6 +13,10 @@
 	background-color: @sapUiGroupContentBackground;
 }
 
+.sapMPanelHdr {
+	font-size: @sapMFontHeader4Size;
+}
+
 .sapMPanelWrappingDivTb {
 	// border is 2px in this case because
 	// there is 1px border around the whole Panel

package/src/sap/m/themes/sap_hcb/Slider.less

@@ -7,6 +7,11 @@
 .sapMSliderInner {
 	border: 1px solid @sapUiFieldBorderColor;
 	background: @sapUiFieldBackground;
+}
+
+.sapMSliderInner,
+.sapMSliderProgress {
+	height: 0.188rem;
 	border-radius: 0.125rem;
 }
 
@@ -14,6 +19,12 @@
 .sapMSliderHandle {
 	background: transparent;
 	border: 0.125rem solid @sapUiFieldBorderColor;
+	&:focus:before {
+		top: -5px;
+		bottom: -5px;
+		left: -5px;
+		right: -5px;
+	}
 }
 
 /* hover */

package/src/sap/m/themes/sap_hcb/Tokenizer.less

@@ -15,6 +15,7 @@ html.sap-desktop .sapMTokenizer:focus{
   &.sapMToken:hover,
   &.sapMToken:focus,
   &.sapMTokenSelected,
+  &.sapMToken.sapMTokenSelected:hover,
   &.sapMToken .sapMTokenIcon {
     background: @sapUiButtonBackground;
     cursor: default;