@openui5/sap.ui.core 1.141.1 → 1.142.0

package/src/sap/ui/core/support/plugins/TechInfo.js

@@ -36,7 +36,7 @@ sap.ui.define([
 		 * @class This class represents the technical info plugin for the support tool functionality of UI5. This class is internal and all its functions must not be used by an application.
 		 *
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.141.1
+		 * @version 1.142.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.TechInfo
 		 */

package/src/sap/ui/core/support/plugins/Trace.js

@@ -21,7 +21,7 @@ sap.ui.define([
 		 * @class This class represents the trace plugin for the support tool functionality of UI5. This class is internal and all its functions must not be used by an application.
 		 *
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.141.1
+		 * @version 1.142.0
 		 * @private
 		 * @alias sap.ui.core.support.plugins.Trace
 		 */

package/src/sap/ui/core/support/plugins/ViewInfo.js

@@ -36,7 +36,7 @@ sap.ui.define([
 		 * Creates an instance of sap.ui.core.support.plugins.ViewInfo.
 		 * @class This class represents the ViewInfo plugin for the support tool functionality of UI5. This class is internal and all its functions must not be used by an application.
 		 * @extends sap.ui.core.support.Plugin
-		 * @version 1.141.1
+		 * @version 1.142.0
 		 * @private
 		 * @deprecated As of version 1.118
 		 * @alias sap.ui.core.support.plugins.ViewInfo

package/src/sap/ui/core/themes/base/BlindLayer.less

@@ -15,23 +15,18 @@
 	padding: 0;
 	position: absolute;
 	opacity: 0.01;
-	filter: alpha(opacity=1);
 	width: 100%;
 	height: 100%;
 }
 
 .sapUiNotUserSelectable {
 	-webkit-touch-callout: none; /* iOS Safari */
-	-webkit-user-select: none;   /* Chrome/Safari/Opera */
-	-khtml-user-select: none;    /* Konqueror */
-	-moz-user-select: none;      /* Firefox */
-	user-select: none;           /* Non-prefixed version */
+	-webkit-user-select: none; /* Chrome/Safari/Opera */
+	user-select: none;
 }
 
 .sapUiUserSelectable {
 	-webkit-touch-callout: text; /* iOS Safari */
-	-webkit-user-select: text;   /* Chrome/Safari/Opera */
-	-khtml-user-select: text;    /* Konqueror */
-	-moz-user-select: text;      /* Firefox */
-	user-select: text;           /* Non-prefixed version */
+	-webkit-user-select: text; /* Chrome/Safari/Opera */
+	user-select: text;
 }

package/src/sap/ui/core/themes/base/BusyIndicator.less

@@ -3,6 +3,12 @@
 /* Base theme                                 */
 /* ========================================== */
 
+@_sap_ui_core_LocalBusyIndicator_Background: fade(@sapBackgroundColor, 72%);
+@_sap_ui_core_LocalBusyIndicator_Color: @sapBrandColor;
+@_sap_ui_core_LocalBusyIndicator_BorderRadius: 100%;
+@_sap_ui_core_LocalBusyIndicator_SizeMedium: 1rem;
+@_sap_ui_core_LocalBusyIndicator_SizeBig: 2rem;
+
 .sapUiBusy {
 	background-image: url(img/Busy.gif);
 	display: block;
@@ -10,10 +16,325 @@
 	height: 48px;
 	outline: none;
 	cursor: wait;
-
 	top: 0 !important;
 }
 
 .sapUiBlyBusy {
 	cursor: wait;
+}
+
+/**
+ * Style classes and definitions for the busy indicator implementation of the sap.ui.core.Control.
+ */
+
+.sapUiBlockLayer,
+.sapUiLocalBusyIndicator {
+	background-color: @_sap_ui_core_LocalBusyIndicator_Background;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+}
+
+.sapUiLocalBusyIndicator {
+	opacity: 0;
+	transition: opacity 0.3s ease-in;
+	outline: none;
+
+	&:focus::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 0.375rem;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+		pointer-events: none;
+	}
+}
+
+.sapUiBlockLayer:not(:last-child) {
+	display: none;
+}
+
+.sapUiBlockLayer.sapUiPlaceholder {
+	display: block;
+	z-index: 1;
+}
+
+/* Make sure blocked layers are not "nested", and in case of busy indicators the animations do not overlay each other */
+[__is-busy] .sapUiLocalBusy .sapUiBlockLayer,
+.sapUiLocalBusy .sapUiLocalBusy .sapUiBlockLayer {
+	display: none;
+}
+
+.sapUiHiddenBusyIndicatorAnimation .sapUiLocalBusyIndicatorAnimation {
+	display: none;
+}
+
+.sapUiLocalBusyIndicatorFade {
+	opacity: 1;
+}
+
+/* Class for medium sized indicator in control overlay */
+.sapUiLocalBusyIndicatorSizeMedium,
+.sapUiLocalBusyIndicatorSizeSection {
+	font-size: @_sap_ui_core_LocalBusyIndicator_SizeMedium;
+}
+
+/* Class for fullscreen block overlay */
+.sapUiLocalBusyIndicatorSizeBig {
+	font-size: @_sap_ui_core_LocalBusyIndicator_SizeBig;
+	background-color: transparent;
+}
+
+/* Centers the busy indicator markers */
+.sapUiLocalBusyIndicatorAnimation {
+	position: absolute;
+	width: 3em;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+/* indicator bubble */
+.sapUiLocalBusyIndicatorAnimation > div {
+	width: 1em;
+	height: 1em;
+	border-radius: @_sap_ui_core_LocalBusyIndicator_BorderRadius;
+	display: block;
+	float: left;
+	margin: 0;
+	position: relative;
+	text-indent: 1px;
+}
+
+/* General pseudo-element styles for background/shadow animation */
+.sapUiLocalBusyIndicatorAnimation > div::before,
+.sapUiLocalBusyIndicatorAnimation > div::after {
+	content: '';
+	opacity: 1;
+	position: absolute;
+	z-index: -1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: @_sap_ui_core_LocalBusyIndicator_BorderRadius;
+}
+
+/* Background animation element */
+.sapUiLocalBusyIndicatorAnimation > div::before {
+	background: fade(@_sap_ui_core_LocalBusyIndicator_Color, 100%);
+}
+
+/* Shadow animation element */
+.sapUiLocalBusyIndicatorAnimation > div::after {
+	box-shadow: inset 0 0 2px 1px fade(@_sap_ui_core_LocalBusyIndicator_Color, 80%);
+}
+
+/* Animations Starting Classes */
+.sapUiLocalBusyIndicatorAnimation > div,
+.sapUiLocalBusyIndicatorAnimation > div::before,
+.sapUiLocalBusyIndicatorAnimation > div::after {
+	animation-fill-mode: both;
+}
+
+/* Big Animation for Elments >= (3rem x 3rem) */
+.sapUiLocalBusyIndicatorAnimStandard > div {
+	animation: sapUiBusyAnimationStandard 1.8s infinite ease-in-out;
+}
+
+.sapUiLocalBusyIndicatorAnimStandard > div::before {
+	animation: sapUiBusyAnimationStandardBackground 1.8s infinite ease-in-out;
+}
+
+.sapUiLocalBusyIndicatorAnimStandard > div::after {
+	animation: sapUiBusyAnimationStandardShadow 1.8s infinite ease-in-out;
+}
+
+.sapUiLocalBusyIndicatorAnimStandard > div:nth-child(1) {
+	animation-delay: -0.32s;
+}
+
+.sapUiLocalBusyIndicatorAnimStandard > div:nth-child(2) {
+	animation-delay: -0.16s;
+}
+
+/* Small animation for elements < (3rem x 3rem) */
+.sapUiLocalBusyIndicatorAnimSmall > div {
+	animation: sapUiBusyAnimationSmall 1.6s infinite ease-in-out;
+}
+
+.sapUiLocalBusyIndicatorAnimSmall > div::before {
+	animation: sapUiBusyAnimationSmallBackground 1.6s infinite ease-in-out;
+}
+
+.sapUiLocalBusyIndicatorAnimSmall > div::after {
+	animation: sapUiBusyAnimationSmallShadow 1.6s infinite ease-in-out;
+}
+
+html[data-sap-ui-animation-mode='none'] {
+
+	.sapUiLocalBusyIndicator {
+		transition: none;
+	}
+
+	.sapUiLocalBusyIndicatorAnimStandard,
+	.sapUiLocalBusyIndicatorAnimSmall {
+
+		> div,
+		> div::before,
+		> div::after {
+			animation: none;
+			transform: scale(0.8);
+		}
+	}
+}
+
+html[data-sap-ui-animation-mode='basic'],
+html[data-sap-ui-animation-mode='minimal'] {
+
+	.sapUiLocalBusyIndicatorAnimStandard,
+	.sapUiLocalBusyIndicatorAnimSmall {
+
+		> div,
+		> div::before,
+		> div::after {
+			animation-duration: 6s;
+		}
+
+		> div:nth-child(1) {
+			animation-delay: -1.2s;
+		}
+
+		> div:nth-child(2) {
+			animation-delay: -0.6s;
+		}
+	}
+}
+
+/* marker class for switching horizontal and small animation */
+.sapUiLocalBusyIndicatorAnimSmall > div:nth-child(1),
+.sapUiLocalBusyIndicatorAnimSmall > div:nth-child(3) {
+	visibility: hidden;
+}
+
+#sapUiBusyIndicator {
+	right: 0;
+}
+
+#sapUiBusyIndicator > .sapUiLocalBusyIndicatorFade {
+	cursor: wait;
+}
+
+/**
+ * Keyframe definitions
+ */
+.mixin-standard-background-animation-frames {
+
+	0%,
+	80%,
+	100% {
+		opacity: 1;
+	}
+
+	40% {
+		opacity: 0.1;
+	}
+}
+
+.mixin-standard-shadow-animation-frames {
+
+	0%,
+	80%,
+	100% {
+		opacity: 0;
+	}
+
+	40% {
+		opacity: 1;
+	}
+}
+
+.mixin-small-background-animation-frames {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.1;
+	}
+}
+
+.mixin-small-shadow-animation-frames {
+
+	0%,
+	100% {
+		opacity: 0;
+	}
+
+	50% {
+		opacity: 1;
+	}
+}
+
+/**
+ * Animations
+ */
+@keyframes sapUiBusyAnimationStandard {
+
+	0%,
+	80%,
+	100% {
+		transform: scale(0.4);
+	}
+
+	40% {
+		transform: scale(1);
+	}
+}
+
+@keyframes sapUiBusyAnimationStandardBackground {
+	.mixin-standard-background-animation-frames;
+}
+
+@keyframes sapUiBusyAnimationStandardShadow {
+	.mixin-standard-shadow-animation-frames;
+}
+
+@keyframes sapUiBusyAnimationSmall {
+
+	0%,
+	100% {
+		transform: scale(0.2);
+	}
+
+	50% {
+		transform: scale(1);
+	}
+}
+
+@keyframes sapUiBusyAnimationSmallBackground {
+	.mixin-small-background-animation-frames;
+}
+
+@keyframes sapUiBusyAnimationSmallShadow {
+	.mixin-small-shadow-animation-frames;
+}
+
+/* #### RETROFIT #### */
+
+:root {
+	--ui5_web_components_busy_indicator_display: flex;
+	--ui5_web_components_busy_indicator_background-color: @_sap_ui_core_LocalBusyIndicator_Background;
+}
+
+/* Make sure blocked layers are not "nested", and in case of busy indicators the animations do not overlay each other */
+.sapUiLocalBusy {
+	--ui5_web_components_busy_indicator_display: none;
 }

package/src/sap/ui/core/themes/base/CommandShortcutHints.less

@@ -1,20 +1,20 @@
-/* =============================== */
-/* CSS for a command shortcut hint */
-/* Base theme                      */
-/* =============================== */
+/* ================================ */
+/* CSS for a command shortcut hint  */
+/* Base theme                       */
+/* ================================ */
 
 .sapUiHintContainer {
-	background: @sapUiBaseBG;
+	background: var(--sapBackgroundColor);
 	border: none;
 	border-radius: 0.0625rem;
-	box-shadow: @sapUiContentShadow1;
+	box-shadow: var(--sapContent_Shadow1);
 	white-space: nowrap;
 }
 
 .sapUiHintText {
-	font-family: @sapUiFontFamily;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiBaseText;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 	padding: 0 0.5rem;
 	line-height: 1rem;
 }

package/src/sap/ui/core/themes/base/Icon.less

@@ -22,9 +22,9 @@
 }
 
 .sapUiIcon:focus {
-	outline-width: @sapUiContentFocusWidth;
-	outline-style: @sapUiContentFocusStyle;
-	outline-color: @sapUiContentFocusColor;
+	outline-width: var(--sapContent_FocusWidth);
+	outline-style: var(--sapContent_FocusStyle);
+	outline-color: var(--sapContent_FocusColor);
 }
 
 .sapUiIcon::before {
@@ -51,10 +51,11 @@
  *   in the wrong direction.
  *  3. Custom CSS style should be set on the root DOM and not the pesudo element.
  */
-html[dir=rtl] .sapUiIconMirrorInRTL:not(.sapUiIconSuppressMirrorInRTL) {
-	&::before, &::after /* some controls render the icon using 'after' pesudo element */ {
-		transform: scale(-1,1);
-		-webkit-transform: scale(-1,1); /* Safari and Chrome */
+html[dir='rtl'] .sapUiIconMirrorInRTL:not(.sapUiIconSuppressMirrorInRTL) {
+
+	&::before,
+	&::after /* some controls render the icon using 'after' pesudo element */ {
+		transform: scale(-1, 1);
 		display: inline-block; /* pesudo element has display: inline by default and can't apply the transform css style for RTL mode*/
 	}
 }
@@ -63,82 +64,82 @@ html[dir=rtl] .sapUiIconMirrorInRTL:not(.sapUiIconSuppressMirrorInRTL) {
  * The Default color and the semantic colors for Icon which always points to the variable across themes.
  */
 .sapUiIconColorDefault {
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 }
 
 .sapUiIconColorContrast {
-	color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_ContrastIconColor);
 }
 
 .sapUiIconColorNeutral {
-	color: @sapUiNeutralElement;
+	color: var(--sapNeutralElementColor);
 }
 
 .sapUiIconColorCritical {
-	color: @sapUiCriticalElement;
+	color: var(--sapCriticalElementColor);
 }
 
 .sapUiIconColorPositive {
-	color: @sapUiPositiveElement;
+	color: var(--sapPositiveElementColor);
 }
 
 .sapUiIconColorNegative {
-	color: @sapUiNegativeElement;
+	color: var(--sapNegativeElementColor);
 }
 
 .sapUiIconColorNonInteractive {
-	color: @sapUiContentNonInteractiveIconColor;
+	color: var(--sapContent_NonInteractiveIconColor);
 }
 
 .sapUiIconColorTile {
-	color: @sapUiTileIconColor;
+	color: var(--sapTile_IconColor);
 }
 
 .sapUiIconColorMarker {
-	color: @sapUiContentMarkerIconColor;
+	color: var(--sapContent_MarkerIconColor);
 }
 
 .sapUiIconBGColorDefault {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiContentIconColor;
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapContent_IconColor);
 }
 
 .sapUiIconBGColorContrast {
-	color: @sapUiContentIconColor;
-	background-color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_IconColor);
+	background-color: var(--sapContent_ContrastIconColor);
 }
 
 .sapUiIconBGColorNeutral {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiNeutralElement;
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapNeutralElementColor);
 }
 
 .sapUiIconBGColorCritical {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiCriticalElement;
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapCriticalElementColor);
 }
 
 .sapUiIconBGColorPositive {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiPositiveElement;
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapPositiveElementColor);
 }
 
 .sapUiIconBGColorNegative {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiNegativeElement;
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapNegativeElementColor);
 }
 
 .sapUiIconBGColorNonInteractive {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiContentNonInteractiveIconColor;
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapContent_NonInteractiveIconColor);
 }
 
 .sapUiIconBGColorTile {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiTileIconColor;
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapTile_IconColor);
 }
 
 .sapUiIconBGColorMarker {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiContentMarkerIconColor;
-}
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapContent_MarkerIconColor);
+}

package/src/sap/ui/core/themes/base/library.source.less

@@ -19,10 +19,7 @@
 @import "SAP-icons.less";
 @import "Icon.less";
 
-@import "LocalBusyIndicator.less";
 @import "media.less";
 @import "parameterClasses.less";
 @import "ScrollBar.less";
-@import "Shadow.less";
-@import "TechnicalInfo.less";
 @import "View.less";

package/src/sap/ui/core/themes/base/parameterClasses.less

@@ -1,14 +1,15 @@
-
 /* CSS parameters which are available in base theme */
 
 /* font */
 .sapThemeFont {
-	font-family: @sapUiFontFamily !important;
+	font-family: var(--sapFontFamily) !important;
 	font-size: @sapUiFontSize !important;
 }
+
 .sapThemeFontFamily {
-	font-family: @sapUiFontFamily !important;
+	font-family: var(--sapFontFamily) !important;
 }
+
 .sapThemeFontSize {
 	font-size: @sapUiFontSize !important;
 }
@@ -16,68 +17,79 @@
 /* text color */
 .sapThemeText,
 .sapThemeText-asColor {
-	color: @sapUiBaseText !important;
+	color: var(--sapTextColor) !important;
 }
+
 .sapThemeText-asBackgroundColor {
-	background-color: @sapUiBaseText !important;
+	background-color: var(--sapTextColor) !important;
 }
+
 .sapThemeText-asBorderColor {
-	border-color: @sapUiBaseText !important;
+	border-color: var(--sapTextColor) !important;
 }
+
 .sapThemeText-asOutlineColor {
-	outline-color: @sapUiBaseText !important;
+	outline-color: var(--sapTextColor) !important;
 }
 
 /* text color inverted */
 .sapThemeTextInverted,
 .sapThemeTextInverted-asColor {
-	color: @sapUiContentContrastTextColor !important;
+	color: var(--sapContent_ContrastTextColor) !important;
 }
 
 /* base bg */
 .sapThemeBaseBG,
 .sapThemeBaseBG-asBackgroundColor {
-	background-color: @sapUiBaseBG !important;
+	background-color: var(--sapBackgroundColor) !important;
 }
+
 .sapThemeBaseBG-asBorderColor {
-	border-color: @sapUiBaseBG !important;
+	border-color: var(--sapBackgroundColor) !important;
 }
+
 .sapThemeBaseBG-asColor {
-	color: @sapUiBaseBG !important;
+	color: var(--sapBackgroundColor) !important;
 }
 
 /* brand color */
 .sapThemeBrand,
 .sapThemeBrand-asColor {
-	color: @sapUiBrand !important;
+	color: var(--sapBrandColor) !important;
 }
+
 .sapThemeBrand-asBorderColor {
-	border-color: @sapUiBrand !important;
+	border-color: var(--sapBrandColor) !important;
 }
+
 .sapThemeBrand-asBackgroundColor {
-	background-color: @sapUiBrand !important;
+	background-color: var(--sapBrandColor) !important;
 }
+
 .sapThemeBrand-asOutlineColor {
-	outline-color: @sapUiBrand !important;
+	outline-color: var(--sapBrandColor) !important;
 }
 
 /* highlight color */
 .sapThemeHighlight,
 .sapThemeHighlight-asColor {
-	color: @sapUiHighlight !important;
+	color: var(--sapHighlightColor) !important;
 }
+
 .sapThemeHighlight-asBorderColor {
-	border-color: @sapUiHighlight !important;
+	border-color: var(--sapHighlightColor) !important;
 }
+
 .sapThemeHighlight-asBackgroundColor {
-	background-color: @sapUiHighlight !important;
+	background-color: var(--sapHighlightColor) !important;
 }
+
 .sapThemeHighlight-asOutlineColor {
-	outline-color: @sapUiHighlight !important;
+	outline-color: var(--sapHighlightColor) !important;
 }
 
 /* border color */
 .sapThemeForegroundBorderColor,
 .sapThemeForegroundBorderColor-asBorderColor {
-	border-color: @sapUiContentForegroundBorderColor  !important;
+	border-color: var(--sapContent_ForegroundBorderColor) !important;
 }

package/src/sap/ui/core/themes/base/shared.less

@@ -344,4 +344,9 @@ html:has(> body.sapUiBody) {
 .sapMBtn.sapUiDebugTechnicalInfoAssistantSettingsButton>.sapMBtnInner  {
 	border-top-left-radius: 0 !important;
 	border-bottom-left-radius: 0 !important;
+}
+
+/* Declarations moved from shadow.less */
+.sapUiShd {
+	box-shadow: @sapUiShadow;
 }