@openui5/themelib_sap_belize 1.124.0 → 1.125.0

package/src/sap/ui/core/themes/sap_belize_base/LocalBusyIndicator.less

@@ -0,0 +1,292 @@
+/* =============================================== */
+/* CSS for control sap.ui.core/LocalBusyIndicator  */
+/* Base theme                                      */
+/* =============================================== */
+
+@_sap_ui_core_LocalBusyIndicator_Background: fade(@sapBackgroundColor, 72%);
+@_sap_ui_core_LocalBusyIndicator_BackgroundIE: @sapBackgroundColor;
+
+@_sap_ui_core_LocalBusyIndicator_Color: @sapBrandColor;
+
+@_sap_ui_core_LocalBusyIndicator_BorderRadius: 100%;
+
+@_sap_ui_core_LocalBusyIndicator_SizeMedium: 1rem;
+@_sap_ui_core_LocalBusyIndicator_SizeBig: 2rem;
+
+.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: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		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: 0px;
+	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 0px 0px 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/sap_belize_base/SAP-icons.css

@@ -0,0 +1,13 @@
+/**
+ * Do NOT use any LESS syntax in this file because it may be used externally without UI5
+ *
+ * NOTE: This file must be kept in sync with SAP-icons.less
+ */
+@font-face {
+	font-family: "SAP-icons";
+	src:
+		url('../base/fonts/SAP-icons.woff2') format('woff2'),
+		local('SAP-icons'); /* fallback to local installed font in case it can't be loaded (e.g. font download is disabled due to browser security settings) */
+	font-weight: normal;
+	font-style: normal;
+}

package/src/sap/ui/core/themes/sap_belize_base/SAP-icons.less

@@ -0,0 +1,10 @@
+// NOTE: This file must be kept in sync with SAP-icons.css
+
+@font-face {
+	font-family: "SAP-icons";
+	src:
+		@sapUiIconFontUrl format('woff2'),
+		local('SAP-icons'); /* fallback to local installed font in case it can't be loaded (e.g. font download is disabled due to browser security settings) */
+	font-weight: normal;
+	font-style: normal;
+}

package/src/sap/ui/core/themes/sap_belize_base/ScrollBar.less

@@ -0,0 +1,20 @@
+/* ====================================== */
+/* CSS for control sap.ui.core/ScrollBar  */
+/* Base theme                             */
+/* ====================================== */
+
+.sapUiScrollBarTouch {
+	-webkit-overflow-scrolling: auto;
+}
+
+.sapUiScrollBarTouch ::-webkit-scrollbar {
+	height: 7px;
+	width: 7px;
+	-webkit-appearance: none;
+}
+
+.sapUiScrollBarTouch ::-webkit-scrollbar-thumb {
+	border-radius: 4px;
+	background-color: rgba(0,0,0,.5);
+	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}

package/src/sap/ui/core/themes/sap_belize_base/Shadow.less

@@ -0,0 +1,3 @@
+.sapUiShd {
+	box-shadow: @sapUiShadow;
+}

package/src/sap/ui/core/themes/sap_belize_base/TechnicalInfo.less

@@ -0,0 +1,157 @@
+.sapUiTInf {
+	border: 1px solid @sapUiMediumBorder;
+	background: @sapUiExtraLightBG;
+	padding: 6px;
+}
+
+.sapUiTInfCfg {
+	font-size:0.9em;
+	overflow-y:auto;
+	max-height:12em;
+}
+
+.sapUiTInfMList {
+	font-size:0.9em;
+	color: @sapUiTextDisabled;
+	overflow-y:auto;
+	max-height:12em;
+}
+
+.sapUiTInf > table > tbody > tr > td,
+.sapUiTInfMList,
+.sapUiTInfM {
+	-webkit-user-select: text;
+	user-select: text;
+}
+
+.sapUiTInfMEmbd {
+	color:#aaaaaa;
+}
+
+.sapUiTInfMFail {
+	text-decoration:line-through;
+}
+
+.sapUiTInfMMore, .sapUiTInfPCfg {
+	text-decoration: none;
+	color: @sapLinkColor;
+	cursor:pointer;
+}
+
+.sapUiTInfPMoreHidden {
+	display:none;
+}
+
+.sapUiTInfPDiag {
+	border: 1px solid @sapUiMediumBorder;
+	background: @sapUiExtraLightBG;
+	padding: 6px;
+	font-size:0.9em;
+}
+
+.sapUiTInfPDiag > h1 {
+	font-size: 1em;
+	font-weight: normal;
+}
+
+.sapUiTInfPDiag > h3 {
+	font-size: 0.9em;
+	font-weight: normal;
+	margin-bottom: 0px;
+}
+
+.sapUiTInfPList {
+	font-size: 0.75em;
+	color: @sapUiTextDisabled;
+	background: white;
+	overflow-y: scroll;
+	max-height: 30em;
+}
+
+.sapUiTInfPList .package > .expander {
+	display: inline-block;
+	color: black;
+	background-color: #fcfcfc;
+	width: 12px;
+	text-align: center;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+.sapUiTInfPList .package > .name,
+.sapUiTInfPList .module > .name {
+	margin: 2px;
+	padding: 2px 4px;
+	display: inline-block;
+	border-radius: 3px;
+	cursor: pointer;
+}
+
+.sapUiTInfPList .package > .name {
+	color: black;
+	background-color: @sapBackgroundColor;
+}
+
+.sapUiTInfPList .module > .name {
+	margin-left: 14px; /* 12px + 2px standard margin */
+	color: black;
+	background-color: @sapBackgroundColor;
+}
+
+.sapUiTInfPList .children {
+	padding-left: 1em;
+	/* border: 1px dotted lightgrey; */
+}
+
+.sapUiTInfPList .children.none {
+	display: none;
+}
+
+.sapUiTInfPList .children.packages {
+	display: block;
+}
+
+.sapUiTInfPList .children.packages > .package {
+}
+
+.sapUiTInfPList .children.packages > .module {
+	display: none;
+}
+
+.sapUiTInfPList .children.all {
+	display: block;
+}
+
+.sapUiTInfPList .package.selected > .name, .sapUiTInfPList .module.selected > .name {
+	color: white;
+	background-color: blue !important;
+}
+
+.sapUiTInfPList .package.selected .name, .sapUiTInfPList .module.selected > .name {
+	color: white;
+	background-color: lightblue;
+}
+
+.sapUiTInfPList .selected .name {
+	color: white;
+	background-color: #ccccff;
+}
+
+.sapUiTInfPDiag .result {
+	font-size: 0.9em;
+	margin: 8px 4px;
+	width: 600px;
+}
+
+.sapUiTInfPDiag .result > span {
+	word-wrap: break-word;
+}
+
+.sapUiTInfPDiag .footer {
+	padding-top: 5px;
+}
+
+.sapUiTInfPDiag .footer > * {
+	float: right;
+	margin: 2px 8px;
+}

package/src/sap/ui/core/themes/sap_belize_base/View.less

@@ -0,0 +1,12 @@
+/* ================================= */
+/* CSS for control sap.ui.core/View  */
+/* Base theme                        */
+/* ================================= */
+
+.sapUiView {
+	display: inline-block;
+}
+
+.sapUiViewDisplayBlock {
+	display: block;
+}