@openui5/sap.ui.rta 1.125.0 → 1.126.1

package/src/sap/ui/rta/themes/sap_hcb/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_hcb/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_hcb/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_hcb/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_hcb/base_MessageBox.less

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

package/src/sap/ui/rta/themes/sap_hcb/base_Overlay.less

@@ -0,0 +1,271 @@
+/******************************************************************
+	Style of the RTA Overlays - base Theme
+*******************************************************************/
+@_sap_ui_rta_Overlay_PersButtonBG: @sapUiButtonSelectedBackground; //#8fb5ff
+@_sap_ui_rta_Overlay_PersButtonBorder: @sapUiButtonLiteBorderColor; // #fff
+@_sap_ui_rta_Overlay_PersButtonIcon: @sapUiButtonBackground; // #fff
+@_sap_ui_rta_Overlay_BorderColor: @sapUiSelected; //#8fb5ff
+@_sap_ui_rta_Overlay_HoverBorder: @sapUiFieldHoverBackground; //#fff;
+@_sap_ui_rta_Overlay_HoverBG: fade(@sapUiSelected, 5%); //rgba(143, 181, 255, 0.05);
+@_sap_ui_rta_Overlay_ErrorBorder: @sapUiErrorBorder; //#ff0000
+@_sap_ui_rta_Overlay_BoxShadow: @sapUiUx3ToolPopupShadow; //0px 6px 12px 0px fade(black, 30);
+@_sap_ui_rta_Overlay_ShellBG: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
+@_sap_ui_rta_Overlay_PlaceholderBG: lighten(@sapUiFieldReadOnlyBackground, 20%); // #e6e6e6
+
+.sapUiRtaRoot {
+	.sapUiRtaMarginBottom {
+		margin-bottom: 2.5rem; //40px
+	}
+
+	.sapUiRtaPaddingTop {
+		padding-top: 2.5rem; //40px
+	}
+
+	&.sapUiRtaStretchPaddingTop, .sapUiRtaStretchPaddingTop {
+		padding-top: 1.5rem; //24px
+	}
+}
+
+.sapUiSizeCozy .sapUiRtaRoot .sapUiRtaStretchPaddingTop, .sapUiSizeCozy .sapUiRtaRoot.sapUiRtaStretchPaddingTop {
+	padding-top: 2rem; //32px
+}
+
+.sapUiRta {
+	&.sapUiRtaPersonalize {
+		.sapUiRtaPersDelete {
+			.sapUiRtaPersDeleteClick {
+				.sapUiRtaPersDeleteIconOuter {
+					.sapMBtn {
+						top: 0.625rem; //10px
+						right: 0.625rem; //10px
+						position: absolute;
+						height: 1.5rem; //24px
+						padding: 0;
+
+						.sapMBtnInner {
+							border-radius: 50%;
+							width: 1.5rem; //24px
+							height: 1.5rem; //24px
+							min-width: 1.5rem; //24px
+							background-color: @_sap_ui_rta_Overlay_PersButtonBG;
+							box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
+							cursor: pointer;
+							border: 0.125rem solid @_sap_ui_rta_Overlay_PersButtonBorder; //2px
+
+							.sapUiIcon {
+								color: @_sap_ui_rta_Overlay_PersButtonIcon;
+								font-size: 0.69rem; //11px
+								line-height: 1.25rem; //20px
+							}
+						}
+					}
+				}
+			}
+
+			&.sapUiRtaOverlayPlaceholder {
+				.sapUiRtaPersDeleteClick {
+					display: none;
+				}
+			}
+		}
+
+		.sapUiRtaPersAdd, .sapUiRtaPersAddTop {
+			.sapUiRtaPersAddIconOuter {
+				position: absolute;
+				text-align: center;
+				width: 100%;
+
+				.sapMBtn {
+					height: 100%;
+					padding: 0;
+
+					.sapMBtnInner {
+						border: none;
+						background-color: transparent;
+
+						.sapMBtnIcon {
+							font-size: 1rem; //16px
+						}
+					}
+				}
+			}
+		}
+
+		.sapUiRtaPersAdd {
+			> .sapUiRtaPersAddIconOuter {
+				bottom: -2.5rem; //40px
+				top: auto;
+			}
+		}
+	}
+
+	.sapUiDtOverlayTargetZone {
+		&:after {
+			transition: box-shadow .25s;
+			box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
+		}
+
+		> .sapUiDtOverlayChildren {
+			> .sapUiRtaOverlayPlaceholder {
+				border: none;
+			}
+		}
+
+		&.sapUiDtOverlayDropZone > .sapUiDtOverlayChildren > .sapUiRtaOverlayPlaceholder {
+			background: transparent;
+		}
+	}
+
+	.sapUiDtOverlayDropZone {
+		> .sapUiDtOverlayChildren {
+			> .sapUiRtaOverlayPlaceholder {
+				background: @_sap_ui_rta_Overlay_PlaceholderBG !important;
+				// no "border"
+				&:after {
+					content: none;
+				}
+
+				// no "focus" border
+				&:focus {
+					&:before {
+						content: none;
+					}
+				}
+
+				// all descendants
+				* {
+					background: @_sap_ui_rta_Overlay_PlaceholderBG;
+					// no "border"
+					&:after {
+						content: none;
+					}
+
+					// no "focus" border
+					&:focus {
+						&:before {
+							content: none;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.sapUiRtaEditableField {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+
+		> div:hover {
+			cursor: text !important;
+		}
+	}
+
+	.sapUiDtDragGhost {
+		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
+	}
+}
+
+.sapUiRta:not(.sapUiRtaVisualizationMode) {
+	.sapUiRtaOverlayHover {
+		-webkit-transition: background 0.1s cubic-bezier(1, .01, 1, 0);
+		-moz-transition: background 0.1s cubic-bezier(1, .01, 1, 0);
+		-o-transition: background 0.1s cubic-bezier(1, .01, 1, 0);
+		transition: background 0.1s cubic-bezier(1, .01, 1, 0);
+		background: @_sap_ui_rta_Overlay_HoverBG;
+
+		&:after {
+			content: " ";
+			border: 0.0625rem solid @_sap_ui_rta_Overlay_HoverBorder; //1px
+			transition: box-shadow .25s;
+			box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
+			outline: 0.0625rem solid @_sap_ui_rta_Overlay_BorderColor; //1px
+			outline-offset: -0.0625rem; //1px
+		}
+	}
+
+	.sapUiRtaResizeHandle {
+		cursor: col-resize;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 0.625rem; // 10px
+		background-clip: content-box;
+		background-color: @_sap_ui_rta_Overlay_BorderColor;
+		-webkit-user-select: none;
+		user-select: none;
+
+		&:before {
+			content: "";
+			position: absolute;
+			top: 10%;
+			bottom: 10%;
+			left: 37.5%;
+			border-left: 0.0625rem solid @sapUiHighlightTextColor; //1px
+		}
+
+		&:after {
+			content: "";
+			position: absolute;
+			top: 25%;
+			bottom: 25%;
+			left: 62.5%;
+			border-left: 0.0625rem solid @sapUiHighlightTextColor; //1px
+		}
+	}
+
+	.sapUiRtaResizeHandleExtension {
+		position: relative;
+		top: 0;
+		bottom: 0;
+		width: 0.5rem; // 8px
+		border-right: 0.125rem dotted @_sap_ui_rta_Overlay_BorderColor; // 2px
+		background-clip: content-box;
+		-webkit-user-select: none;
+		user-select: none;
+	}
+
+	.sapUiRtaFullScreenDiv {
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		display: block;
+		position: fixed;
+	}
+
+	.sapUiDtOverlaySelected {
+		transition: box-shadow .25s;
+		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
+
+		&:after {
+			outline-color: @_sap_ui_rta_Overlay_BorderColor;
+		}
+
+		&.sapUiRtaErrorBg:after {
+			outline: 0.125rem solid @_sap_ui_rta_Overlay_ErrorBorder; //2px
+			outline-offset: -0.125rem; //2px
+			border: none
+		}
+	}
+}
+
+.sapUiRtaMode #shell-shapes {
+	display: none;
+}
+
+.sapUiRtaMode .sapUiShellBackgroundImage.sapUiGlobalBackgroundImageForce.sapUshellShellBG {
+	background-color: @_sap_ui_rta_Overlay_ShellBG;
+	background-image: none;
+}
+
+.sapUiRtaMode .sapUshellViewPortCenter,
+.sapUiRtaMode .sapMShellBG {
+	background: @_sap_ui_rta_Overlay_ShellBG;
+}
+
+.sapUiRtaMode .sapUiBlockLayerOnly {
+	background-color: initial;
+}

package/src/sap/ui/rta/themes/sap_hcb/base_OverlayWithScrollbar.less

@@ -0,0 +1,61 @@
+/******************************************************************
+	Style of the RTA OverlayWithScrollBar - base Theme
+*******************************************************************/
+
+.sapUiRta .sapUiDtOverlayWithScrollBar {
+	&.sapUiDtOverlaySelected {
+		&.sapUiDtOverlayWithScrollBarVertical {
+			&:after {
+				inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
+			}
+		}
+
+		&.sapUiDtOverlayWithScrollBarHorizontal {
+			&:after {
+				inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
+			}
+		}
+
+		&.sapUiDtOverlayFocusable {
+			&.sapUiDtOverlayWithScrollBarVertical {
+				&:focus:before {
+					inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidthPlusTwo) !important;
+				}
+			}
+
+			&.sapUiDtOverlayWithScrollBarHorizontal {
+				&:focus:before {
+					inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidthPlusTwo) !important;
+				}
+			}
+		}
+	}
+
+	&.sapUiDtOverlayFocusable {
+		&.sapUiDtOverlayWithScrollBarHorizontal {
+			&:focus:before {
+				inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
+			}
+		}
+
+		&.sapUiDtOverlayWithScrollBarVertical {
+			&:focus:before {
+				inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
+			}
+		}
+	}
+
+	&.sapUiRtaOverlayHover {
+		&.sapUiDtOverlayWithScrollBarHorizontal {
+			&:after {
+				inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
+			}
+		}
+
+		&.sapUiDtOverlayWithScrollBarVertical {
+			&:after {
+				inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
+			}
+		}
+	}
+}