@openui5/themelib_sap_belize 1.124.2 → 1.126.0

package/src/sap/ui/rta/themes/sap_belize/library.source.less

@@ -3,7 +3,16 @@
  * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
-@import "../base/library.source.less";
+/* ============================================================================ */
+/* Due to deprecation of the Belize theme family with SAPUI5 version 1.120 the  */
+/* inheritance of the base theme is now updated to an inheritance of a static   */
+/* copy of the base theme named sap_belize_base. The respective                 */
+/* control css files of base are copied to the sap_belize_base theme folder.    */
+/* This decoupling of the base theme is introduced with SAPUI5 version 1.125.   */
+/* ============================================================================ */
+
+
+@import "../sap_belize_base/library.source.less";
 @import "../../../../../sap/ui/core/themes/sap_belize/base.less";
 @import "../../../../../sap/ui/core/themes/sap_belize/global.less";
 @import "Overlay.less";

package/src/sap/ui/rta/themes/sap_belize_base/AddIFrame.less

@@ -0,0 +1,154 @@
+/******************************************************************
+	Style of the RTA Add IFrame Dialog  - base Theme
+*******************************************************************/
+@_sap_ui_rta_AddIFrame_Title: @sapUiTextTitle; //#000
+@_sap_ui_rta_AddIFrame_DelimiterLineColor: @sapUiInfobarActiveBackground; //#d9d9d9
+@_sap_ui_rta_AddIFrame_BorderColor: @sapUiNeutralBorder; //#fff;
+@_sap_ui_rta_AddIFrame_PreviewBG: @sapUiListTableGroupHeaderBackground; //#f2f2f2
+
+.sapUiRtaMode {
+	.sapUiRtaAddIFrameDialog {
+		.sapMBarPH.sapMBarContainer {
+			justify-content: center
+		}
+
+		&.sapMDialog > header .sapMDialogTitleGroup {
+			&:focus::after {
+				content: none;
+			}
+
+			.sapMTitle {
+				color: @_sap_ui_rta_AddIFrame_Title;
+			}
+		}
+
+		.sapUiRtaAddIFrameDialogVlWrapper {
+			.sapUiRtaAddIFrameDialogContainerTitleVBox {
+				margin-top: 1rem;
+				padding: 0 1rem 0 1rem;
+			}
+
+			.sapUiRtaAddIFrameDialogContainerTitleInput {
+				margin-top: 0.5rem;
+			}
+
+			.sapUiRtaAddIFrameDialogSizeTitle {
+				margin-top: 1rem;
+				padding-left: 1rem;
+			}
+
+			.sapUiRtaAddIFrameDialogSizeGrid {
+				margin-top: 0.25rem;
+
+				.sapUiFormResGridMain {
+					padding: 0;
+				}
+			}
+
+			.sapUiRtaAddIFrameDialogPercentGrid {
+				padding: 0.25rem 0 0 0;
+				margin: 0 1rem;
+				border-bottom: 0.0625rem solid @_sap_ui_rta_AddIFrame_DelimiterLineColor; //1px
+
+				> div {
+					margin-bottom: 0.25rem;
+				}
+
+				.sapUiRtaAddIFrameDialogPercentText {
+					float: right;
+
+					&.sapUiRtaAddIFrameDialogPercentText-invisible {
+						visibility: hidden;
+					}
+				}
+			}
+
+			.sapUiRtaAddIFrameDialogEditGrid {
+				height: 15rem;
+				margin-top: 1rem;
+
+				> div {
+					margin-bottom: 0.5rem;
+				}
+
+				.sapUiRtaAddIFrameDialogParameters {
+					.sapMScrollCont {
+						border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
+					}
+				}
+
+				.sapUiRtaAddIFrameDialogEditUrl {
+					.sapMTextArea {
+						margin-bottom: 0;
+
+						.sapMTextAreaInner {
+							border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
+						}
+					}
+				}
+			}
+
+			.sapUiRtaAddIFrameDialogUrlWarningGrid {
+				padding-left: 1.625rem;
+			}
+
+			.sapUiRtaAddIFrameDialogPreviewLinkGrid {
+				.sapUiRtaAddIFrameDialogPreviewLinkPanel {
+					margin: 0 !important;
+
+					.sapMPanelContent {
+						padding: 0.5rem 1rem 0.5rem 1rem;
+					}
+
+					.sapUiRtaAddIFrameDialogPreviewLinkToolbar {
+						height: 2rem !important;
+						padding-right: 0;
+						margin-left: 2.75rem;
+
+						.sapUiRtaAddIFrameDialogPreviewLinkTitle {
+							font-size: 0.875rem;
+						}
+
+						.sapUiRtaAddIFrameDialogPreviewButton {
+							margin: 0 !important;
+						}
+					}
+				}
+			}
+
+			.sapUiRtaAddIFrameDialogPreviewGrid {
+				padding: 0;
+				margin: 0 1rem 1rem;
+				background: @_sap_ui_rta_AddIFrame_PreviewBG;
+				border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
+
+				> div {
+					margin-bottom: 0;
+					height: 9.75rem;
+				}
+
+				.sapUiRtaAddIFrameDialogNoPreviewLabel {
+					margin-top: 4rem;
+				}
+			}
+		}
+	}
+}
+
+.sapUiRtaMode.sapUiSizeCozy {
+	.sapUiRtaAddIFrameDialog {
+		.sapUiRtaAddIFrameDialogVlWrapper {
+			.sapUiRtaAddIFrameDialogPreviewLinkGrid {
+				.sapUiRtaAddIFrameDialogPreviewLinkPanel {
+					.sapUiRtaAddIFrameDialogPreviewLinkToolbar {
+						height: 2.625rem !important;
+
+						.sapUiRtaAddIFrameDialogPreviewLinkTitle {
+							margin-left: 0.25rem;
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/src/sap/ui/rta/themes/sap_belize_base/ChangeVisualization.less

@@ -0,0 +1,98 @@
+/******************************************************************
+	Style of the RTA Change Visualization - base theme
+*******************************************************************/
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight: @sapUiChartPaletteSequentialHue1Light1; //#4880cb
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium: @sapUiChartPaletteSequentialHue1Dark1; //#1b57a7
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark: @sapUiChartPaletteSequentialHue11Dark2; //#0e4186
+@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorTransparent: @sapUiGroupTitleBackground; //#fff
+@_sap_ui_rta_ChangeVisualization_OverlayBoxShadow: @sapUiUx3ToolPopupShadow; //0px 6px 12px 0px fade(black, 30);
+@_sap_ui_rta_ChangeVisualization_OverlayOutline: @sapUiSelected; //#8fb5ff
+
+.sapUiRtaChangeIndicator {
+	height: 0.8rem;
+	width: 0.8rem;
+	position: relative;
+	border-radius: 50%;
+	margin-top: 0.25rem;
+	margin-left: 0.25rem;
+	transition: width 0.3s, height 0.3s, box-shadow 0.3s;
+	cursor: pointer;
+
+	&.sapUiRtaChangeIndicatorColorLight {
+		background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight;
+		opacity: 0.6;
+	}
+
+	&.sapUiRtaChangeIndicatorColorMedium {
+		background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium;
+		opacity: 0.75;
+	}
+
+	&.sapUiRtaChangeIndicatorColorDark {
+		background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
+		opacity: 0.75;
+	}
+
+	&.sapUiRtaChangeIndicatorVerticallyCentered {
+		top: 50%;
+		transform: translateY(-50%);
+		margin-top: 0;
+	}
+
+	&.sapUiRtaHover {
+		height: 0.9rem;
+		width: 0.9rem;
+		box-shadow: 0 0 0.25rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
+	}
+}
+
+.sapUiDtOverlay {
+
+	&.sapUiRtaChangeIndicatorHovered {
+		cursor: pointer !important;
+
+		&:after {
+			content: " ";
+			transition: box-shadow .25s;
+			box-shadow: @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
+			outline: 0.0625rem solid @_sap_ui_rta_ChangeVisualization_OverlayOutline !important; //1px
+			outline-offset: -0.0625rem; //1px
+		}
+	}
+
+	&.sapUiRtaChangeIndicatorDependent {
+		position: absolute;
+		box-shadow: inset 0 0 0 0.1875rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
+		background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 25%);
+		animation: fadeOut linear 1.5s;
+		animation-fill-mode: forwards;
+		@keyframes fadeOut {
+			66% {
+				box-shadow: inset 0 0 0 0.1875rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
+				background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 25%);
+			}
+			100% {
+				box-shadow: none;
+				background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 0%);
+			}
+		}
+	}
+}
+
+.sapUiRtaMode {
+	.sapMPopover {
+		.sapUiRtaChangesList {
+			// Visualize Changes: gray out items with no changes
+			li.sapMLIBTypeInactive {
+				opacity: 0.5;
+			}
+		}
+	}
+}
+
+//do not show focus border in the popover
+.sapUiRtaChangeVisualizationPopover {
+	.sapMLIBFocusable:focus {
+		outline: none;
+	}
+}

package/src/sap/ui/rta/themes/sap_belize_base/ContextMenu.less

@@ -0,0 +1,25 @@
+/******************************************************************
+	Style of the RTA Contextmenu - base Theme
+*******************************************************************/
+@_sap_ui_rta_ContextMenu_Border_LightColor: @sapUiInvertedElement; //#fff
+@_sap_ui_rta_ContextMenu_Border_DarkColor: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
+@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor: @sapUiDarkShadowTint; // #000
+@_sap_ui_rta_ContextMenu_BoxShadow_LightColor: @sapUiLightShadowTint; // #fff
+
+@_sap_ui_rta_ContextMenu_BoxShadow: 0.375rem 0.625rem 2rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor, 30),
+0.125rem 0.375rem 1rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor, 60),
+0 0 0 0.0625rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_LightColor, 20),
+0 0.0625rem 0 0 fade(@_sap_ui_rta_ContextMenu_BoxShadow_LightColor, 20); //10px 20px 6px 6px 1px 1px
+
+.sapUiRtaMode {
+	.sapUiDtContextMenu {
+		&.sapMMenu {
+			border: 0.125rem solid @_sap_ui_rta_ContextMenu_Border_LightColor; //2px
+			border-image: repeating-linear-gradient(-45deg, @_sap_ui_rta_ContextMenu_Border_DarkColor,
+			@_sap_ui_rta_ContextMenu_Border_DarkColor 0.25rem,
+			@_sap_ui_rta_ContextMenu_Border_LightColor 0.25rem,
+			@_sap_ui_rta_ContextMenu_Border_LightColor 0.375rem) 4;
+			box-shadow: @_sap_ui_rta_ContextMenu_BoxShadow;
+		}
+	}
+}

package/src/sap/ui/rta/themes/sap_belize_base/Dialogs.less

@@ -0,0 +1,79 @@
+/******************************************************************
+	Style of the RTA Dialogs - base Theme
+*******************************************************************/
+@_sap_ui_rta_Dialogs_BorderLightColor: @sapUiShellBackground; //#fff
+@_sap_ui_rta_Dialogs_BorderDarkColor: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
+@_sap_ui_rta_Dialogs_BoxShadowDarkColor: @sapUiDarkShadowTint; // #000
+@_sap_ui_rta_Dialogs_BoxShadowLightColor: @sapUiLightShadowTint; // #fff
+
+@_sap_ui_rta_Dialogs_BorderBoxShadow: 0.375rem 0.625rem 2rem fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
+0.125rem 0.375rem 1rem fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 60),
+0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20),
+0 0.0625rem 0 0 fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20);
+
+@_sap_ui_rta_Dialogs_ArrowBoxShadow: 0.375rem -0.375rem 0.75rem 0 fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
+0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20); //6px 6px 12px 1px
+
+@_sap_ui_rta_Dialogs_ArrowUpBoxShadow: -0.375rem 0.375rem 0.75rem 0 fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
+0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20); //6px 6px 12px 1px
+
+@_sap_ui_rta_Dialogs_BorderImage: repeating-linear-gradient(-45deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
+@_sap_ui_rta_Dialogs_BorderDarkColor 0.3125rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.3125rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.625rem) 4;
+
+@_sap_ui_rta_Dialogs_PopoverBorderImage: repeating-linear-gradient(-45deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
+@_sap_ui_rta_Dialogs_BorderDarkColor 0.25rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.25rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.375rem) 4;
+
+@_sap_ui_rta_Dialogs_ArrowBorderImage: repeating-linear-gradient(-50deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
+@_sap_ui_rta_Dialogs_BorderDarkColor 0.1875rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.1875rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.3125rem) 4;
+
+
+.sapMDialog.sapUiRTABorder {
+	border: 0.1875rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //3px
+	border-image: @_sap_ui_rta_Dialogs_BorderImage;
+
+	& header > .sapMDialogTitleGroup:focus::after {
+		content: none;
+	}
+}
+
+.sapUiRtaPopover {
+
+	&.sapMPopover, .sapMPopover {
+		border: 0.125rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //2px
+		border-image: @_sap_ui_rta_Dialogs_PopoverBorderImage;
+		box-shadow: @_sap_ui_rta_Dialogs_BorderBoxShadow;
+
+		.sapMTableRowCustomFocus:focus > :not(.sapMListTblDummyCell:last-child)::before {
+			content: none;
+		}
+	}
+
+	&.sapMPopoverArr, .sapMPopoverArr {
+		width: 2rem; //32px
+		height: 2rem; //32px
+		bottom: -2rem; //32px
+		&:after {
+			box-shadow: @_sap_ui_rta_Dialogs_ArrowBoxShadow;
+			border: 0.125rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //2px
+			border-image: @_sap_ui_rta_Dialogs_ArrowBorderImage;
+			width: 1rem; //16px
+			height: 0.8125rem; //13px
+			margin: -0.65rem 0 0 0.35rem; //10px 6px
+		}
+
+		&.sapMPopoverArrUp {
+			height: 0.8125rem; //13px
+			top: -0.8125rem; //13px
+			&:after {
+				box-shadow: @_sap_ui_rta_Dialogs_ArrowUpBoxShadow;
+				margin: 0.35rem 0 0 0.35rem; //6px 6px
+			}
+		}
+	}
+}

package/src/sap/ui/rta/themes/sap_belize_base/FieldRepository.less

@@ -0,0 +1,48 @@
+/******************************************************************
+	Style of the RTA Add Fields Dialog  - base Theme
+*******************************************************************/
+@_sap_ui_rta_FieldRepository_Title: @sapUiTextTitle; //#000
+@_sap_ui_rta_FieldRepository_BtnFocusOtline: @sapUiButtonHoverBorderColor; //#000
+@_sap_ui_rta_FieldRepository_BC_Container_Border: @sapUiGroupContentBorderColor; //#000
+
+.sapUIRtaFieldRepositoryDialog {
+
+	&.sapMDialog > header .sapMDialogTitleGroup .sapMTitle {
+		color: @_sap_ui_rta_FieldRepository_Title;
+	}
+
+	.sapMBtn {
+		&:focus {
+			> .sapMBtnInner {
+				outline: 0.0625rem dotted @_sap_ui_rta_FieldRepository_BtnFocusOtline; //1px
+				border: 0.0625rem solid transparent;
+			}
+		}
+	}
+
+	.sapUIRtaListItem {
+		line-height: 1rem;
+	}
+
+	.sapUIRtaBusinessContextContainer {
+		width: 100%;
+		margin-top: 0.25rem; //4px
+		padding-bottom: 0.5rem; //8px
+		border-bottom: 0.0625rem solid @_sap_ui_rta_FieldRepository_BC_Container_Border; //1px
+
+		> div:not(:first-child) {
+			padding-left: 2.125rem; //34px
+			padding-right: 0.625rem; //10px
+		}
+
+		> div:first-child {
+			font-weight: bold;
+			padding: 0.25rem 0 0.25rem 0.625rem;
+		}
+
+	}
+
+	.sapUIRtaCCDialogScrollContainer {
+		height: 25rem !important;
+	}
+}

package/src/sap/ui/rta/themes/sap_belize_base/FlexSupportExtension.less

@@ -0,0 +1,14 @@
+/******************************************************************
+	Style used by flex support chrome extension  - base Theme
+*******************************************************************/
+.sapUiFlexibilitySupportExtension_Selected {
+	box-shadow: @sapUiUx3ToolPopupShadow;
+	&:after {
+		content: " ";
+		background: @sapUiMessageSuccessBorderColor;
+		opacity: 0.40;
+		border-radius: @sapUiButtonBorderCornerRadius;
+		outline: 0.125rem solid @sapUiSelected; //1px
+		outline-offset: -0.125rem; //1px
+	}
+}

package/src/sap/ui/rta/themes/sap_belize_base/MessageBox.less

@@ -0,0 +1,10 @@
+/******************************************************************
+	Style of the RTA MessageBox  - base Theme
+*******************************************************************/
+
+.sapUiRtaMessageBox {
+	& .sapMLnk,
+	& .sapMText {
+		display: inline;
+	}
+}