@openui5/sap.m 1.100.0 → 1.101.0

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

@@ -15,6 +15,9 @@
 @_sap_m_InputBase_InnerMinWidth_Compact: 2rem;
 @_sap_m_InputBase_Compact_InnerPadding: 0 0.5rem;
 @_sap_m_InputBase_Compact_Height: 1.625rem;
+@_sap_m_InputBase_FocusOffset: 1px;
+@_sap_m_InputBase_FocusBorderRadius: 0;
+
 
 /*MIN-WIDTH variables*/
 /* rounding values to 2 symbols, because of IE and Edge */
@@ -81,8 +84,9 @@
 	font-style: normal;
 	-webkit-appearance: none;
 	-moz-appearance: textfield;
-	font-size: @sapMFontMediumSize;
+	font-size: @sapFontSize;
 	font-family: @sapUiFontFamily;
+	color: @sapUiFieldTextColor;
 	line-height: normal;
 	padding: @_sap_m_InputBase_InnerPadding;
 	height: 100%;
@@ -122,6 +126,36 @@
 	border-radius: 0;
 	vertical-align: middle;
 	margin: 0;
+	background: @sapUiFieldBackgroundStyle;
+	background-color: @sapUiFieldBackground;
+	border: @sapUiFieldBorderWidth @sapUiFieldBorderStyle @sapUiFieldBorderColor;
+	border-radius: @sapUiFieldBorderCornerRadius;
+}
+
+.sapMILI-CTX .sapMInputBaseContentWrapperError,
+.sapMInputBaseContentWrapperError {
+	background: @sapUiFieldInvalidBackgroundStyle;
+	background-color: @sapUiFieldInvalidBackground;
+	border: @sapUiFieldInvalidBorderWidth @sapUiFieldInvalidBorderStyle @sapUiFieldInvalidColor;
+}
+
+.sapMInputBaseContentWrapperWarning {
+	background: @sapUiFieldWarningBackgroundStyle;
+	background-color: @sapUiFieldWarningBackground;
+	border: @sapUiFieldWarningBorderWidth @sapUiFieldWarningBorderStyle @sapUiFieldWarningColor;
+}
+
+.sapMInputBaseContentWrapperSuccess {
+	background: @sapUiFieldSuccessBackgroundStyle;
+	background-color: @sapUiFieldSuccessBackground;
+	border: @sapUiFieldSuccessBorderWidth @sapUiFieldSuccessBorderStyle @sapUiFieldSuccessColor;
+}
+
+.sapMInputBaseContentWrapperInformation {
+	background: @sapUiFieldInformationBackgroundStyle;
+	background-color: @sapUiFieldInformationBackground;
+	border: @sapUiFieldInformationBorderWidth @sapUiFieldInformationBorderStyle @sapUiFieldInformationColor;
+	
 }
 
 .sapMInputBaseIconContainer {
@@ -152,13 +186,18 @@
 	user-select: none;
 }
 
-.sapMFocus {
-	& .sapMInputBaseContentWrapper {
-		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-		outline-offset: -3px;
-	}
-	&.sapMInputBaseState .sapMInputBaseContentWrapper:not(.sapMInputBaseContentWrapperSuccess) {
-		outline-offset: -4px;
+.sapMFocus.sapMInputBase .sapMInputBaseContentWrapper:not(.sapMInputBaseDisabledWrapper) {
+	&::before {
+		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border-radius: @_sap_m_InputBase_FocusBorderRadius;
+		content: '';
+		position: absolute;
+		top: @_sap_m_InputBase_FocusOffset;
+		left: @_sap_m_InputBase_FocusOffset;
+		right: @_sap_m_InputBase_FocusOffset;
+		bottom: @_sap_m_InputBase_FocusOffset;
+		z-index: 2;
+		pointer-events: none;
 	}
 }
 
@@ -226,17 +265,80 @@ input.sapMInputBaseInner:invalid {
 	border-color: @sapUiFieldFocusBorderColor;
 }
 
+.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper) {
+	&:hover {
+		background: @sapUiFieldHoverBackgroundStyle;
+		background-color: @sapUiFieldHoverBackground;
+		border-color: @sapUiFieldHoverBorderColor;
+		box-shadow: @sapUiContentInteractionShadow;
+	}
+}
+
 .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper) {
 	&:hover {
-		background: @sapUiFieldHoverBackground;
 		border-color: @sapUiFieldHoverBorderColor;
 	}
 	&:active {
-		background: @sapUiFieldHoverBackground;
+		background: @sapUiFieldFocusBackground;
 		border-color: @sapUiFieldHoverBorderColor;
 	}
 }
 
+.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapperState:hover,
+.sapMInputBase:not(.sapMFocus).sapMInputBaseIconPressed .sapMInputBaseContentWrapperState {
+	&.sapMInputBaseContentWrapperWarning:hover,
+	&.sapMInputBaseContentWrapperWarning {
+		box-shadow: @sapUiContentCriticalShadow;
+	}
+
+	&.sapMInputBaseContentWrapperSuccess:hover,
+	&.sapMInputBaseContentWrapperSuccess {
+		box-shadow: @sapUiContentPositiveShadow;
+	}
+
+	&.sapMInputBaseContentWrapperError:hover,
+	&.sapMInputBaseContentWrapperError {
+		box-shadow: @sapUiContentNegativeShadow;
+	}
+
+	&.sapMInputBaseContentWrapperInformation:hover,
+	&.sapMInputBaseContentWrapperInformation {
+		box-shadow: @sapUiContentInformativeShadow;
+	}
+}
+
+.sapMInputBase:not(.sapMInputBaseDisabled) {
+	&.sapMInputBaseIconPressed .sapMInputBaseIcon,
+	.sapMInputBaseIcon:active,
+	.sapMInputBaseIcon:hover  {
+		box-shadow: @sapUiContentInteractionShadow;
+	}
+
+	&.sapMInputBaseIconPressed .sapMInputBaseContentWrapperError .sapMInputBaseIconContainer .sapMInputBaseIcon,
+	.sapMInputBaseContentWrapperError .sapMInputBaseIconContainer .sapMInputBaseIcon:active,
+	.sapMInputBaseContentWrapperError .sapMInputBaseIconContainer .sapMInputBaseIcon:hover {
+		box-shadow: @sapUiContentNegativeShadow;
+	}
+
+	&.sapMInputBaseIconPressed .sapMInputBaseContentWrapperWarning .sapMInputBaseIconContainer .sapMInputBaseIcon,
+	.sapMInputBaseContentWrapperWarning .sapMInputBaseIconContainer .sapMInputBaseIcon:active,
+	.sapMInputBaseContentWrapperWarning .sapMInputBaseIconContainer .sapMInputBaseIcon:hover {
+		box-shadow: @sapUiContentCriticalShadow;
+	}
+
+	&.sapMInputBaseIconPressed .sapMInputBaseContentWrapperSuccess .sapMInputBaseIconContainer .sapMInputBaseIcon,
+	.sapMInputBaseContentWrapperSuccess .sapMInputBaseIconContainer .sapMInputBaseIcon:active,
+	.sapMInputBaseContentWrapperSuccess .sapMInputBaseIconContainer .sapMInputBaseIcon:hover {
+		box-shadow: @sapUiContentPositiveShadow;
+	}
+
+	&.sapMInputBaseIconPressed .sapMInputBaseContentWrapperInformation .sapMInputBaseIconContainer .sapMInputBaseIcon,
+	.sapMInputBaseContentWrapperInformation .sapMInputBaseIconContainer .sapMInputBaseIcon:active,
+	.sapMInputBaseContentWrapperInformation .sapMInputBaseIconContainer .sapMInputBaseIcon:hover {
+		box-shadow: @sapUiContentInformativeShadow;
+	}
+}
+
 /* Compact size */
 
 .sapUiSizeCompact {

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

@@ -180,6 +180,9 @@ td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapMLabel{
 			&:lang(zh-TW) {
 				padding-right: 1.59em;
 			}
+			&:lang(zh-CN) {
+				padding-right: 1.59em;
+			}
 
 			.sapMLabelColonAndRequired {
 				position: absolute;

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

@@ -18,17 +18,17 @@
 
 .sapMLnk:active:not(.sapMLnkDsbl),
 .sapMLnk:focus:not(.sapMLnkDsbl) {
-	color: @sapUiLinkActive;
+	color: @sapUiLinkActiveColor;
 }
 .sapMLnk:visited {
-	color: @sapUiLinkVisited;
+	color: @sapUiLinkVisitedColor;
 }
 .sapMLnk:hover:not(.sapMLnkDsbl) {
-	color: @sapUiLinkHover;
+	color: @sapUiLinkHoverColor;
 }
 
 .sapUiInverted-CTX .sapUiLnk {
-	color: @sapUiLinkInverted;
+	color: @sapUiLinkInvertedColor;
 }
 
 .sapMLnk.sapMLnkWrapping {
@@ -113,6 +113,14 @@ html.sap-desktop .sapMLnk:focus:not(.sapMLnkDsbl) {
 	color: @sapUiBaseText;
 }
 
+
+.sapMListTblRow.sapMLIBActive .sapMLnk,
+.sapMListTblSubRow.sapMLIBActive .sapMLnk,
+.sapMLIB.sapMLIBActive .sapMLink {
+	text-decoration: none;
+	text-shadow: none;
+ }
+
 /* Compact size */
 .sapUiSizeCompact .sapUiFormEdit .sapMLnk {
 	margin-top: 0.5rem;

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

@@ -116,6 +116,10 @@
 	text-align: center;
 }
 
+.sapMListNoDataContent {
+	flex: 1 1 auto;
+}
+
 .sapMListShowSeparatorsAll {
 	/*class will be added for others, just a reminder*/
 }

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

@@ -110,7 +110,7 @@
 		line-height: 1rem;
 	}
 
-	.sapMTokenIcon {
+	.sapMToken .sapMTokenIcon {
 		line-height: 1rem;
 	}
 

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

@@ -25,7 +25,7 @@
 .sapMListTbl .sapMObjectAttributeActive .sapMText,
 .sapMObjectAttributeActive .sapMText,
 .sapMObjectAttributeActive .sapMObjectAttributeText {
-	color: @sapLinkColor;
+	color: @sapUiLink;
 	cursor: pointer;
 	pointer-events: auto;
 }

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

@@ -7,7 +7,6 @@
 	display: inline-block;
 	.sapUiIcon {
 		font-size: 1rem;
-		pointer-events: none;
 		color: @sapUiContentMarkerIconColor;
 		&:before {
 			vertical-align: middle;
@@ -16,6 +15,9 @@
 			display: none;
 		}
 	}
+	.sapUiIcon:not(.sapUiIconPointer) {
+		pointer-events: none;
+	}
 	.sapMLnk {
 		overflow: visible;
 		padding-bottom: 1px;

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

@@ -661,6 +661,11 @@ html.sap-desktop .sapMObjStatusActive:focus {
 
 }
 
+html.sap-desktop .sapMOHStatus .sapMObjStatusActive:focus .sapMObjStatusLink::after {
+	left: 1px;
+	right: 1px;
+}
+
 .sapMObjStatus .sapUiPseudoInvisibleText {
 	font-size: 0px;
 }

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

@@ -9,6 +9,9 @@
  /* Buffer width for the scroll bar */
 @_sap_m_Popover_Scroll_Width_Buffer: 20px;
 
+/* Arrow offset from the Popover's corners */
+@_sap_m_Popover_ArrowOffset: 16;
+
 /* shared mixin for arrow shadow*/
 .sapMPopoverArrAfterShadow(@horizontalShadow, @verticalShadow) {
 	box-shadow: @horizontalShadow @verticalShadow 0.750rem 0 fade(@sapUiContentShadowColor, 30), 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 30);
@@ -68,7 +71,7 @@
 	overflow: hidden;
 	background: @sapUiGroupContentBackground;
 	border: none;
-	box-shadow: @sapUiShadowLevel2;
+	box-shadow: @sapUiContentShadow2;
 	border-radius: 0.25rem;
 	min-height: 2rem;
 }
@@ -213,7 +216,7 @@ html[data-sap-ui-browser^="sf"] .sapMPopover {
 	left: 20px;
 	/* position */
 	top: -0.5rem;
-	height: 0.5625rem;
+	height: 0.5rem;
 
 	&:after {
 		margin: 0.1875rem 0 0 0.1875rem;
@@ -226,8 +229,8 @@ html[data-sap-ui-browser^="sf"] .sapMPopover {
 	/* offset */
 	top: 1rem;
 	/* position */
-	right: -0.5625rem;
-	width: 0.5625rem;
+	right: -0.5rem;
+	width: 0.5rem;
 
 	&:after {
 		margin: 0.1875rem 0 0 -0.375rem;
@@ -240,7 +243,7 @@ html[data-sap-ui-browser^="sf"] .sapMPopover {
 	/* offset */
 	left: 1rem;
 	/* position */
-	height: 0.5625rem;
+	height: 0.5rem;
 
 	&:after {
 		margin: -0.375rem 0 0 0.125rem;
@@ -252,9 +255,9 @@ html[data-sap-ui-browser^="sf"] .sapMPopover {
 /* pointing left arrow */
 .sapMPopoverArrLeft {
 	/* position */
-	left: -0.5625rem;
+	left: -0.5rem;
 	top: -2rem;
-	width: 0.5625rem;
+	width: 0.5rem;
 	height: 1rem;
 
 	&:after {

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

@@ -42,13 +42,19 @@
 	.sapMRbBOut {
 		height: 100%;
 		width: 100%;
-		transform: translate(50%, 50%);
+		transform: translate(0.675rem, 0.675rem);
 		margin: 0.825rem;
 		padding: 1px; /* using padding here so that margin won't collide */
 		stroke: @sapUiFieldBorderColor;
 		fill: @sapUiFieldBackground;
 	}
 }
+.sapUiSizeCompact {
+	.sapMRb .sapMRbB {
+	.sapMRbBOut {
+		transform: translate(0.5rem, 0.5rem);
+	}}
+}
 
 .sapMRbSvg {
 	height: 1.375rem;
@@ -94,7 +100,7 @@
 }
 
 .sapMRbB .sapMRbBInn {
-	transform: translate(50%, 50%);
+	transform: translate(0.675rem, 0.675rem);
 	stroke: transparent;
 	fill: none;
 	-webkit-user-select: none;
@@ -102,6 +108,12 @@
 	r: 22%;
 }
 
+.sapUiSizeCompact {
+	.sapMRbBInn {
+		transform: translate(0.5rem, 0.5rem);
+	}
+}
+
 .sapMRbHasLabel.sapMRb:focus:before {
 	right: 0;
 }
@@ -214,7 +226,13 @@
 html[dir="rtl"] {
 	.sapMRbB .sapMRbBInn,
 	.sapMRb .sapMRbB .sapMRbBOut {
-		transform: translate(-50%, 50%);
+		transform: translate(-0.675rem, 0.675rem);
+	}
+	.sapUiSizeCompact {
+		.sapMRbB .sapMRbBInn,
+		.sapMRb .sapMRbB .sapMRbBOut {
+			transform: translate(-0.675rem, 0.675rem);
+		}
 	}
 }
 

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

@@ -40,7 +40,7 @@
 
 div.sapMSuggestionsPopover {
 	border: none;
-	box-shadow: @sapUiShadowLevel1;
+	box-shadow: @sapUiContentShadow1;
 }
 
 .sapMSuggestionsPopover.sapMPopover {

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

@@ -132,4 +132,31 @@ html.sap-tablet, html.sap-phone {
 		padding-left: 15px;
 		padding-right: 15px;
 	}
+}
+
+html.sap-desktop:not(.sapUiNativeScrollbars) .sapMTextArea .sapMInputBaseContentWrapper ::-webkit-scrollbar {
+	background: @sapUiFieldBackgroundStyle;
+	background-color: @sapUiScrollBarTrackColor;
+}
+
+html.sap-desktop:not(.sapUiNativeScrollbars) .sapMTextArea {
+	.sapMInputBaseContentWrapperWarning ::-webkit-scrollbar {
+		background: @sapUiFieldWarningBackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
+
+	.sapMInputBaseContentWrapperError ::-webkit-scrollbar {
+		background: @sapUiFieldInvalidBackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
+
+	.sapMInputBaseContentWrapperInformation ::-webkit-scrollbar {
+		background: @sapUiFieldInformationBackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
+
+	.sapMInputBaseContentWrapperSuccess ::-webkit-scrollbar {
+		background: @sapUiFieldSuccessBackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
 }

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

@@ -16,9 +16,9 @@
 	font-size: @sapMFontMediumSize;
 	padding-left: @_sap_m_Token_LeftPadding;
 	height: 1.625rem;
-	background: @sapUiButtonBackground;
-	border: 1px solid @sapUiButtonBorderColor;
-	border-radius: 0.125rem;
+	background: @sapUiButtonTokenBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
+	border-radius: @sapUiButtonBorderCornerRadius;
 	color: @sapUiButtonTextColor;
 }
 
@@ -33,7 +33,7 @@
 
 html.sap-desktop .sapMToken:hover {
 	background: @sapUiButtonHoverBackground;
-	border: 1px solid @sapUiButtonHoverBorderColor;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonHoverBorderColor;
 }
 
 .sapMTokenText {
@@ -71,10 +71,10 @@ html.sap-desktop .sapMToken:hover {
 .sapMTokenIcon {
 	vertical-align: top;
 	display: inline-block;
-	line-height: 1.5rem;
+	line-height: 1.5625rem;
 	padding: 0 0.5rem;
 	color: @sapUiContentIconColor;
-	font-size: @sapMFontLargeSize;
+	font-size: 0.75rem;
 	box-sizing: border-box;
 	touch-action: none;
 }
@@ -93,10 +93,10 @@ html.sap-desktop .sapMToken:hover {
 	line-height: 1.125rem;
 }
 
-.sapUiSizeCompact .sapMTokenIcon {
+.sapUiSizeCompact .sapMToken .sapMTokenIcon {
 	font-size: @sapMFontSmallSize;
 	padding: 0 0.25rem;
-	line-height: 1.125rem;
+	line-height: 1.1875rem;
 }
 
 html.sap-desktop .sapMToken.sapMTokenSelected:hover {
@@ -106,13 +106,14 @@ html.sap-desktop .sapMToken.sapMTokenSelected:hover {
 
 .sapMTokenSelected,
 .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
-	color: @sapUiToggleButtonPressedTextColor;
-	background: @sapUiToggleButtonPressedBackground;
-	border: 1px solid @sapUiToggleButtonPressedBorderColor;
+	color: @sapUiButtonSelectedTextColor;
+	background: @sapUiButtonSelectedBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
 }
 
-.sapMTokenSelected .sapMTokenIcon {
-	color: @sapUiToggleButtonPressedTextColor;
+.sapMTokenSelected .sapMTokenIcon,
+.sapMTokenSelected .sapMTokenText {
+	color: @sapUiButtonSelectedTextColor;
 }
 
 .sapUiSizeCompact .sapMListTbl .sapMToken .sapUiIcon:not(.sapMLIBImgNav) {

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

@@ -2,13 +2,13 @@
 /* CSS for control sap.m/Tokenizer  */
 /* Base theme                       */
 /* ================================ */
-@_sap_m_Tokenizer_OutlineOffset: 3px;
+@_sap_m_Tokenizer_OutlineOffset: 0.1875rem;
 @_sap_m_Tokenizer_Token_MarginRight: 0.375rem;
 @_sap_m_Tokenizer_FontSizeRatioCozy: (@sapMFontMediumSize / @sapFontLargeSize);
 @_sap_m_Tokenizer_FontSizeRatioCompact: 1;
 
 .sapMTokenizer {
-	padding-left: 2 * @_sap_m_Tokenizer_OutlineOffset;
+	padding-left: 0.375rem;
 	position: relative;
 	display: inline-block;
 	white-space: nowrap;

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

@@ -22,13 +22,13 @@
 }
 
 .sapMValueStateMessageError {
-	background: @sapUiErrorBG;
+	background: @sapErrorBackground;
 }
 
 .sapMValueStateMessageWarning {
-	background: @sapUiWarningBG;
+	background: @sapWarningBackground;
 }
 
 .sapMValueStateMessageInformation {
-	background: @sapUiInformationBG;
+	background: @sapInformationBackground;
 }